Flex Pasta

Flex 4.5: Effects on a Mobile Device - A Test Run

There are two big advantages for using the Flex 4.5 SDK for mobile, in my opinion.

1) Code once for multiple platforms, and

2) Reuse existing Flex knowledge have made it easy to create applications quickly.

Today I wanted to put to the test some effects on a mobile device. Flex offers some great and easy to use effect tags. Would they perform on a mobile device? In my brief test, the answer is yes!

This demo app has two images. When I tap the image, it runs the following effect:

<s:Parallel id=”eff“>

<s:Move3D yFrom=”{img.y}” yTo=”{yTo}” xFrom=”0” xTo=”{yTo}“/>

<s:Rotate3D angleXFrom=”0” angleXTo=”45“/>

</s:Parallel>

It will move the image to the top of the screen while at the same time, do a 3d rotate. The second image will then fade in at the bottom.

Here is a video of the effect running on the Motorola Droid.

Full code….follow the link:

<?xml version=”1.0″ encoding=”utf-8″?>

<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009”

xmlns:s=”library://ns.adobe.com/flex/spark” title=”HomeView“>

<fx:Declarations>

<s:Parallel id=”eff“>

<s:Move3D yFrom=”{img.y}” yTo=”{yTo}” xFrom=”0” xTo=”{yTo}“/>

<s:Rotate3D angleXFrom=”0” angleXTo=”45“/>

</s:Parallel>

</fx:Declarations>

<fx:Script>

<![CDATA[

[Bindable] public var yTo:Number=0;

]]>

</fx:Script>

<s:Image id=”img” source=”@Embed(source=’/assets/2010-08-15 16.26.24.jpg’)” bottom=”5” width=”100%” height=”50%” visible=”false” showEffect=”Fade“>

<s:click>

<![CDATA[

eff.play([img]);

yTo+=10;

]]>

</s:click>

</s:Image>

<s:Image id=”img5” source=”@Embed(source=’/assets/2010-08-13 19.37.16.jpg’)” bottom=”5” width=”100%” height=”50%“>

<s:click>

<![CDATA[

eff.play([img5]);

yTo+=10;

img.visible = true;

]]>

</s:click>

</s:Image>

 

</s:View>