Flex Examples
The following example shows how you can rotate objects in 3D space using the Flex Rotate3D effect using the latest version (build 4.0.0.8811) of the beta Flex 4 SDK.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/13/3d-rotating-objects-in-flex-using-the-fxrotate3d-effect-and-flash-player-10/ --> <s:Application name="Spark_Rotate3D_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:BasicLayout /> </s:layout> <fx:Declarations> <s:Rotate3D id="rotate3DX" target="{image}" angleXFrom="0" angleXTo="360" duration="2000" autoCenterTransform="true" /> <s:Rotate3D id="rotate3DY" target="{image}" angleYFrom="0" angleYTo="360" duration="2000" autoCenterTransform="true" /> <s:Rotate3D id="rotate3DZ" target="{image}" angleZFrom="0" angleZTo="360" duration="2000" autoCenterTransform="true" /> </fx:Declarations> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <s:Button id="buttonX" label="Rotate3D X-axis" click="rotate3DX.play();" /> <s:Button id="buttonY" label="Rotate3D Y-axis" click="rotate3DY.play();" /> <s:Button id="bButtonZ" label="Rotate3D Z-axis" click="rotate3DZ.play();" /> </mx:ApplicationControlBar> <s:BitmapImage id="image" source="@Embed('assets/fx_appicon.jpg')" resizeMode="scale" smooth="true" horizontalCenter="0" verticalCenter="0" width="100" height="100" /> </s:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/13/3d-rotating-objects-in-flex-using-the-fxrotate3d-effect-and-flash-player-10/ --> <s:Application name="Spark_Rotate3D_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" initialize="init();"> <s:layout> <s:BasicLayout /> </s:layout> <fx:Script> <![CDATA[ import mx.containers.ApplicationControlBar; import spark.components.Button; import spark.components.ResizeMode; import spark.primitives.BitmapImage; import spark.effects.Rotate3D; [Embed("assets/fx_appicon.jpg")] private const FlexLogo:Class; private var rotate3DX:Rotate3D; private var rotate3DY:Rotate3D; private var rotate3DZ:Rotate3D; private var image:BitmapImage; private var buttonX:Button; private var buttonY:Button; private var buttonZ:Button; private function init():void { buttonX = new Button(); buttonX.label = "Rotate3D X-axis"; buttonX.addEventListener(MouseEvent.CLICK, buttonX_click); buttonY = new Button(); buttonY.label = "Rotate3D Y-axis"; buttonY.addEventListener(MouseEvent.CLICK, buttonY_click); buttonZ = new Button(); buttonZ.label = "Rotate3D Z-axis"; buttonZ.addEventListener(MouseEvent.CLICK, buttonZ_click); var appControlBar:ApplicationControlBar = new ApplicationControlBar(); appControlBar.percentWidth = 100; appControlBar.setStyle("cornerRadius", 0); appControlBar.addElement(buttonX); appControlBar.addElement(buttonY); appControlBar.addElement(buttonZ); addElementAt(appControlBar, 0); image = new BitmapImage(); image.source = FlexLogo; image.smooth = true; image.resizeMode = ResizeMode.SCALE; image.width = 100; image.height = 100; image.horizontalCenter = 0; image.verticalCenter = 0; addElement(image); rotate3DX = new Rotate3D(image); rotate3DX.angleXFrom = 0; rotate3DX.angleXTo = 360; rotate3DX.duration = 2000; /* 2 seconds */ rotate3DX.autoCenterTransform = true; rotate3DY = new Rotate3D(image); rotate3DY.angleYFrom = 0; rotate3DY.angleYTo = 360; rotate3DY.duration = 2000; /* 2 seconds */ rotate3DY.autoCenterTransform = true; rotate3DZ = new Rotate3D(image); rotate3DZ.angleZFrom = 0; rotate3DZ.angleZTo = 360; rotate3DZ.duration = 2000; /* 2 seconds */ rotate3DZ.autoCenterTransform = true; } private function buttonX_click(evt:MouseEvent):void { rotate3DX.play(); } private function buttonY_click(evt:MouseEvent):void { rotate3DY.play(); } private function buttonZ_click(evt:MouseEvent):void { rotate3DZ.play(); } ]]> </fx:Script> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hi Peter,
Thank you for guide us for Flex 4 SDK,
so, I have successfully installed the Flex 4 SDK, and I installed Flash Player 10 too,
So, then I’ve downloaded this example of you and added to a new flex project.
so now I can’t switch to design view it’s display an error the error is “ This component is based on FxApplication, which is not a visual component Switch to source mode to edit it”
And I see this error in my problems pane “Design mode: Cannot load tcal_edit.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details.”
And when I run the application, I can’t see anything.
So I’m currently using Flex Builder 3 Professional with Flex 4 SDK.
Hope your help very soon,
Thank you very much.
Nuwan,
I get the same errors/warnings too. I don’t think Flex Builder 3 fully supports design view with the beta Gumbo SDK.
Peter
Hi Perer,
Thank you for your reply,
so, what should I do now to run this application?
how did you compile this sample application?
Do I need any other software of SDK to run this?
Hope your reply very soon,
Thank you very much,
Keep up your good works for the community of Flex,
Nuwan.
Nuwan,
This should get you started:
1) Download Flex Builder trial (if you haven’t already bought the full version or downloaded the trial).
2) Download the latest Gumbo SDK beta, and extract the ZIP file to somewhere easy to find on your hard drive (I keep mine in C:\dev\FlexSDKs\ and name each subfolder after the build number I just downloaded). I download “Adobe Flex SDK” nightly builds (approx 100MB each).
3) Make sure you install Flash Player 10 (preferably the debug Flash Player). The easiest way to install Flash Player is to first uninstall your current Flash Players by closing all your browsers (and anything else that may use Flash Player such as Yahoo! Messenger) and then going to Start > Control Panel > Add or Remove Programs. Uninstall both the Flash Player ActiveX (used by Internet Explorer) and uninstall Flash Player Plugin (used by Firefox/Chrome). Next, install Flash Player 10 debug players by navigating to your C:\dev\FlexSDKs\<build number>\runtimes\player\10\win\ directory and installing both the ActiveX and Plugin versions. Further installation instructions can be found at the Adobe Flash Player installation instructions page on Adobe.com.
4) In Flex Builder, create a new Flex Project by selecting File > New > Flex Project from the main menu.
5) Add the new Gumbo SDK you just downloaded and extracted by selecting Project > Properties from the main menu.
5a) Select the Flex Compiler option from the left hand menu and click the Configure Flex SDKs… link in the upper right hand corner of the project properties dialog box.
5b) Click the Add… button, browse to the folder where you just extracted the recently downloaded Flex Gumbo SDK. So, if you followed the naming convention in the previous step, the SDK location would be something like C:\dev\FlexSDKs\4.0.0.3699\. Give the SDK a unique name to make it easier to switch between different versions of the SDK. Personally I name the SDK after the build number again, so enter something like Flex 4.0.0.3699 in the Flex SDK name text field.
5c) Click OK to dismiss the Add Flex SDK dialog box.
6) Click OK to dismiss the Installed Flex SDKs dialog box.
7) In the project properties dialog box, select the Use a specific SDK radio button and select the newly added SDK. So again, if you followed the previous naming convention, select Flex 4.0.0.3699 from the drop down menu.
8) In the HTML wrapper section of the Flex compiler options, set the Require Flash Player version to 10.0.0.
9) Click OK to dismiss the project properties dialog box.
10) Copy the code above and paste it into your default application in your Flex project. You’ll also need to download the PNG file and save it in the /src/assets/ folder (you’ll need to create the /assets/ subfolder and copy the image there. You either need to save a JPG named “fx_appicon.jpg” in the /assets/ folder or change the code to use a separate image.
11) Select Run > Run main from the main menu to launch the Flex application in your default browser.
12) Profit!
Peter
Hi I get this error when I compile;
I am a Flex newb so please help :)
thanks in advance
gordee,
Which version of the Flex SDK are you using?
What happens if you try selecting Project > Clean from the main menu?
Peter
Hi Peter,
Thank you very much for your reply.
so now I will try this way that you provided.
and you have provided me all the relative links, that would be really easy for me and thank you very much for that also.
again peter keep up good works,
Thank you very much.
Nuwan.
Hi Peter,
I’ve noticed that if you have nested components and apply effects to both at the same time, there are glitches, though it does play the animation. For example, I changed the image in your example to this:
<FxPanel id="fxPanel" width="100%" height="100%"> <FxTextInput id="fxTI" width="100%" height="100%" text="LANCE" /> <FxPanel>Then I set the FxRotateX to the FxTextInput and the FxRotateY to the FxPanel. I ran the FxPanel effect at a quarter the speed so I could rotate the FxTextInput a few times during. While both effects do play and look impressively nice, I can’t enter text into the text input afterward. Any ideas? Do I have to explicitly stop the rotation effect on both if I’m doing this?
Thanks for your advice.
Best,
Lance
Lance,
Can you please file a bug at http://bugs.adobe.com/flex/ and post the bug number here.
Also, if you could include a simple test case to the bug showing the odd behavior, that’d make it a lot easier for somebody at Adobe to investigate.
Thanks,
Peter
Peter,
Excuse me on this one, but how do you recommend writing a testcase for gui functionality?
Thanks,
Lance
Lance,
Sorry, I assumed you were doing something similar to the following:
<?xml version="1.0" encoding="utf-8"?> <FxApplication name="FxRotation3D_test" xmlns="http://ns.adobe.com/mxml/2009"> <layout> <VerticalLayout /> </layout> <Declarations> <Parallel id="eff"> <FxRotate3D target="{fxPanel}" xFrom="0" xTo="360" duration="10000" /> <FxRotate3D target="{fxTI}" yFrom="0" yTo="360" duration="10000" /> </Parallel> </Declarations> <VGroup id="vGroup" left="10" top="10"> <FxButton label="Click me" click="eff.play();" /> </VGroup> <FxPanel id="fxPanel" width="300" height="200"> <FxTextArea id="fxTI" width="100%" height="100%" text="LANCE" /> </FxPanel> </FxApplication>Clicking the FxButton instance creates a parallel animation effect which animates the x-axis on the FxPanel container and the y-axis on the FxTextArea control. I’m able to type as the animation is playing, but I have to [double?] click inside the FxTextArea control to give it focus before I can type.
I was just thinking if you had similar code, you could attach it to the bug report to make it easier for somebody at Adobe to investigate.
Peter
Thank you very much. I hope that I’ll be able enough to do something out of it :)
Hello,
Thanks for your explications.
I install gumbo as you tall.
I have errors
- error 1046 ….. AeraChart
- error 1046 ….. LineChart
when i tried to lauch this script, can you help me please.
Best Regards
<?xml version="1.0"?> <!-- Simple example to demonstrate the LineChart and AreaChart controls. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var expensesAC:ArrayCollection = new ArrayCollection( [ { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 }, { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 }, { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]); ]]> </mx:Script> <!-- Define custom colors for use as fills in the AreaChart control. --> <mx:SolidColor id="sc1" color="blue" alpha=".3"/> <mx:SolidColor id="sc2" color="red" alpha=".3"/> <mx:SolidColor id="sc3" color="green" alpha=".3"/> <!-- Define custom Strokes. --> <mx:Stroke id = "s1" color="blue" weight="2"/> <mx:Stroke id = "s2" color="red" weight="2"/> <mx:Stroke id = "s3" color="green" weight="2"/> <mx:Panel title="LineChart and AreaChart Controls Example" height="100%" width="100%" layout="horizontal"> <mx:LineChart id="linechart" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{expensesAC}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/> <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/> <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/> </mx:series> </mx:LineChart> <mx:Legend dataProvider="{linechart}"/> <mx:AreaChart id="Areachart" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{expensesAC}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Month"/> </mx:horizontalAxis> <mx:series> <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/> <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/> <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/> </mx:series> </mx:AreaChart> <mx:Legend dataProvider="{Areachart}"/> </mx:Panel> </mx:Application>Hi Peter,
I would like to have full control over 3D rotations in Flex 4 and FxRotate3D is causing me a lot of problems. Do you have a method for rotating UIComponents from the center or any other custom registration point?
I know FxRotate3D does some interesting things with matrices but I am unable to replicate it. If you could provide a quick example, that would be amazing, thanks!
Best,
Lance
We can also integrate eclipse with the sdk. is that correct ?
I get this error: Error: Could not resolve to a component implementation.
Any hints ?
Adrian,
I updated the above sample to work with Flex 4.0.0.8811+.
Peter
I am enjoying the flipping thing but am curious hot to load something different on the flipped side of the object being flipped… so that the flipped side contains a different image that the original one?
if you can help please do…
Thx
Deky I’ve been trying to figure how to do that as well. Otherwise the effect does not seem so useful!
Hello mark,
I am also looking for similar solution, please let me know if you find anything…thanks
Raj
Likewise, looking for a two sided flip.
- Jason the Saj
You’ll need to create two png files to be your front and back images….but maybe this’ll help. I need to add some delay/pauses for the rotation.
Crud, none of my code showed up…sorry folk…
I’ve figured it out….will post the final example on my blog
http://thesaj.wordpress.com
–
But until then, essentially, I rotated 90 degrees. Used effectend to call a function with a case statement that incremented TO/FROM values.
It also changes the source of the bitmapimage, I embedded two images as classes and switch the source. I also added a delay.
Works fairly well….not 100% perfect. As it is “paper thin” when sideways, which doesn’t quite represent my coin very well.
can 3D Rotate be used as an entry effect?