The following example shows how you can rotate objects in 3D space using the Flex FxRotate3D effect using the latest version (build 4.0.0.3584) of the beta Flex Gumbo SDK.
Full code after the jump.
To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.
<?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/ -->
<FxApplication name="FxRotation3D_test"
xmlns="http://ns.adobe.com/mxml/2009">
<layout>
<BasicLayout />
</layout>
<Declarations>
<FxRotate3D id="fxRotate3DX"
target="{image}"
xFrom="0"
xTo="360"
duration="2000" />
<FxRotate3D id="fxRotate3DY"
target="{image}"
yFrom="0"
yTo="360"
duration="2000" />
<FxRotate3D id="fxRotate3DZ"
target="{image}"
zFrom="0"
zTo="360"
duration="2000" />
</Declarations>
<VGroup id="vGroup" left="10" top="10">
<FxButton id="fxButtonX"
label="FxRotate3D X-axis"
click="fxRotate3DX.play();" />
<FxButton id="fxButtonY"
label="FxRotate3D Y-axis"
click="fxRotate3DY.play();" />
<FxButton id="fxButtonZ"
label="FxRotate3D Z-axis"
click="fxRotate3DZ.play();" />
</VGroup>
<Image id="image"
source="@Embed('assets/fx_appicon.jpg')"
horizontalCenter="0"
verticalCenter="0"
width="100"
height="100" />
</FxApplication>
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/ -->
<FxApplication name="FxRotation3D_test"
xmlns="http://ns.adobe.com/mxml/2009"
initialize="init();">
<layout>
<BasicLayout />
</layout>
<Script>
<![CDATA[
import mx.components.FxButton;
import mx.components.VGroup;
import mx.controls.Image;
import mx.effects.FxRotate3D;
[Embed("assets/fx_appicon.jpg")]
private const FlexLogo:Class;
private var fxButtonX:FxButton;
private var fxButtonY:FxButton;
private var fxButtonZ:FxButton;
private var fxRotate3DX:FxRotate3D;
private var fxRotate3DY:FxRotate3D;
private var fxRotate3DZ:FxRotate3D;
private var image:Image;
private function init():void {
fxRotate3DX = new FxRotate3D();
fxRotate3DX.xFrom = 0;
fxRotate3DX.xTo = 360;
fxRotate3DX.duration = 2000;
fxRotate3DY = new FxRotate3D();
fxRotate3DY.yFrom = 0;
fxRotate3DY.yTo = 360;
fxRotate3DY.duration = 2000;
fxRotate3DZ = new FxRotate3D();
fxRotate3DZ.zFrom = 0;
fxRotate3DZ.zTo = 360;
fxRotate3DZ.duration = 2000;
fxButtonX = new FxButton();
fxButtonX.label = "FxRotate3D X-axis";
fxButtonX.addEventListener(MouseEvent.CLICK, fxButtonX_click);
fxButtonY = new FxButton();
fxButtonY.label = "FxRotate3D Y-axis";
fxButtonY.addEventListener(MouseEvent.CLICK, fxButtonY_click);
fxButtonZ = new FxButton();
fxButtonZ.label = "FxRotate3D Z-axis";
fxButtonZ.addEventListener(MouseEvent.CLICK, fxButtonZ_click);
var vGroup:VGroup = new VGroup();
vGroup.setStyle("left", 10);
vGroup.setStyle("top", 10);
vGroup.addItem(fxButtonX);
vGroup.addItem(fxButtonY);
vGroup.addItem(fxButtonZ);
addItem(vGroup);
image = new Image();
image.source = FlexLogo;
image.width = 100;
image.height = 100;
image.setStyle("horizontalCenter", 0);
image.setStyle("verticalCenter", 0);
addItem(image);
}
private function fxButtonX_click(evt:MouseEvent):void {
fxRotate3DX.play([image]);
}
private function fxButtonY_click(evt:MouseEvent):void {
fxRotate3DY.play([image]);
}
private function fxButtonZ_click(evt:MouseEvent):void {
fxRotate3DZ.play([image]);
}
]]>
</Script>
</FxApplication>
This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.
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