In a previous example, “3D Rotating objects in Flex using the FxRotate3D effect and Flash Player 10″, we saw how you could rotate objects in 3D space from 0 to 360 degrees along the X, Y, and Z axis using the Flex FxRotate3D effect in the beta Flex Gumbo SDK.
The following example shows how you can rotate an image relative to its current rotation by setting the yBy property on the FxRotate3D instance.
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/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ -->
<s:Application name="FxRotate3D_yBy_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:Script>
<![CDATA[
import spark.effects.Animate;
private function playEffect(target:Animate):void {
if (!target.isPlaying) {
target.play();
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:Rotate3D id="fxRotate3DNeg" target="{image}" yBy="-30" />
<s:Rotate3D id="fxRotate3DPos" target="{image}" yBy="30" />
</fx:Declarations>
<s:VGroup id="vGroup" left="10" top="10">
<s:Button id="fxButtonNeg"
label="Rotate3D yBy -= 30"
autoRepeat="true"
repeatDelay="500"
repeatInterval="100"
buttonDown="playEffect(fxRotate3DNeg);" />
<s:Button id="fxButtonPos"
label="Rotate3D yBy += 30"
autoRepeat="true"
repeatDelay="500"
repeatInterval="100"
buttonDown="playEffect(fxRotate3DPos);" />
</s:VGroup>
<s:BitmapImage id="image"
source="@Embed('assets/fx_appicon-tn.gif')"
horizontalCenter="0"
verticalCenter="0" />
</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/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/ -->
<s:Application name="FxRotate3D_yBy_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 spark.primitives.BitmapImage;
import spark.components.Button;
import spark.components.VGroup;
import spark.effects.Animate;
import spark.effects.Rotate3D;
import mx.events.FlexEvent;
[Embed("assets/fx_appicon-tn.gif")]
private const LOGO:Class;
private var fxRotate3DNeg:Rotate3D;
private var fxRotate3DPos:Rotate3D;
private var fxButtonNeg:Button;
private var fxButtonPos:Button;
private var image:BitmapImage;
private function init():void {
fxButtonNeg = new Button();
fxButtonNeg.label="Rotate3D yBy -= 15";
fxButtonNeg.autoRepeat = true;
fxButtonNeg.setStyle("repeatDelay", 500);
fxButtonNeg.setStyle("repeatInterval", 100);
fxButtonNeg.addEventListener(FlexEvent.BUTTON_DOWN,
fxButtonNeg_buttonDown);
fxButtonPos = new Button();
fxButtonPos.label="Rotate3D yBy += 15";
fxButtonPos.autoRepeat = true;
fxButtonPos.setStyle("repeatDelay", 500);
fxButtonPos.setStyle("repeatInterval", 100);
fxButtonPos.addEventListener(FlexEvent.BUTTON_DOWN,
fxButtonPos_buttonDown);
var vGroup:VGroup = new VGroup();
vGroup.setStyle("left", 10);
vGroup.setStyle("top", 10);
vGroup.addElement(fxButtonNeg);
vGroup.addElement(fxButtonPos);
addElement(vGroup);
image = new BitmapImage();
image.source = LOGO;
image.horizontalCenter = 0;
image.verticalCenter = 0;
addElement(image);
fxRotate3DNeg = new Rotate3D();
fxRotate3DNeg.target = image;
fxRotate3DNeg.yBy = -30;
fxRotate3DPos = new Rotate3D();
fxRotate3DPos.target = image;
fxRotate3DPos.yBy = 30;
}
private function fxButtonNeg_buttonDown(evt:FlexEvent):void{
playEffect(fxRotate3DNeg);
}
private function fxButtonPos_buttonDown(evt:FlexEvent):void{
playEffect(fxRotate3DPos);
}
private function playEffect(target:Animate):void {
if (!target.isPlaying) {
target.play();
}
}
]]>
</fx:Script>
</s:Application>
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.
Nice,
Is there an event you can catch when the animation is finished, I want to do a multi part animation, like
part 1 (then when this ends)
part 2 (then when this ends)
part 3
etc.
Also, can you rotate in the Z, ie bring things closer / further from the camera. I would try myself, but not on the gumbo betas, looking forward to Flex 4.
Why & When has been the ‘Application’ tag changed to ‘FxApplication’ why can’t my FB handle that? Yes, I do have one of the last SDKs (4.0.0.3132).
Any suggestions?
Greetings,
Johannes
Johannes,
The <Application> (or <mx:Application>) tag is the Halo version of the root application. Flex “Gumbo” introduced a new root application tag, <FxApplication>. You can use either one in Flex Gumbo projects.
Flex Builder 3 can use either the Application or FxApplication tag, assuming you’re using a Flex 4.0.0.x build and set the Flash Player version to 10.0.0.
Peter
why flex builder didn’t help when you write script tag and some insede functionality i feel like i writing in notepad and know that can do very match mistakes ///who can help me?
Examples updated to Flex SDK build 4.0.0.6298 (but didn’t update SWF yet).
Peter
I just downloaded the very latest and greatest Gumbo sdk version 4.0.0.6310….Your latest name space related code tweaks are still quite happy!….. off the the races….Web 3.0, Social Decision systems with a Adobe Flex based 3D RIA front end, here we come!
-Peter L.
Peter Lindener,
Yeah, I changed the image asset to something I had handy in my current Flex Builder project. And I am planning on going through all 160+ Gumbo/Spark beta examples and updating them to the latest API changes and namespace changes and updating/creating SWFs, but it’s just something I do in my spare time and isn’t a huge priority at the moment.
Peter
Hi
Peter -
Thanks for helping me get through the more challenging aspects of coming up to speed of Flex development right on the leading edge….. I will do my best to return the favor, by helping look out for any Gumbo implementation issues still needing to be debugged….
I’m not sure if my current challenge is name space related or not… My hunch is that it may be… I’m trying to take as much of the Action Script code in your AS oriented Rotate3D example…and move as much of the AS code out of the MXML file and instead place most of it in a separate “.as” class file….. I’m then attempting to place this top level Action script file in the top level of the “src” folder…..
I’m having a bit of trouble setting up the related top level package/class callijng implementation such that an instance of this top level class gets created so that it is visible on the screen, as before when all was in one MXML file and the AS was declared as a script…… Maybe, it just becuase I’m new to this, of perhaps there are some additonal Name space related thing that have come about recently…. I relize I’m asking a bit here with regards to your assistance…. I just figured I should best learn some of the more prefured coding habits early on… any input on how best to layout ones AS src files, as they would then relate to the top level MXML, would be quite instructive….. at this point my separate AS code file seems to run, but nothing appears on the screen. I currently have it extending the VGroup class…. Then, I’m not sure that is what I should be doing.
To keep things simple, perhaps in a better coding style, you AS centric example could also be configured to employ a seprate “.as” file…
Just food for thought.
All the best
-Peter
I have it right, In some ways, my prior post is in essance asking about best practices for packaging and then invoking “.as” defined components at the top level as would best be employed within the latest Gumbo beta sdk..
-Peter L.
I’m still trying to figure out how to pass or make reference to the base Application object from an Action Scrip class defined out side the MXML file, but instead an external “.as” file…
It seems to do so I need to declare a class ( not just a function) in AS3?….. then how does one get/ or pass reference to the base Application object so that one can add things to it ?
I’m trying….. but still know sucsess at moving the AS code to a separate “.as” file,
-Peter L.
P.S. it seems the “id” attribute is not allowed on the root tage of a component”
… I must be missing something here.
-Peter
I managed to get an external .as” file version of your code working by passing a referance to a Panel (with an attached id), that I added to the MXML file…. I then pass this referance into an external AS class’s constructor.. it works! then I have a couple of questions: does all of this UI creation via an exturnal “.as” file, require as I have done, that one actually define and construct a full package/class?
I was unable to get the “[Embed(”assets/Fx2.png”)]” logic to work correctly in the “.as” file, thus I moved its creation back into the MXML file and just passed a reference to the image into the “.as” class file’s logic……
While I do now have the external “.as” file’s logic working…. I guess it would be good to see how the “pro”s would suggest structuring this approach to AS based component creation … I do see that regularizing the outside UI container was likely a good thing ( that is, not directly referencing the outside app object )….. but my hunch is that there are cleaner ways of getting all of this to work well… Your thoughts on any of this ?
Cheers
-Peter L.
I manged to get it all figured out, most all the action script for the AS centric version now lives in a “.as” class file, I’m pretty sure the example coded is now what would be considered as best practice, Then you feedback on how well I have done would always be valued, I have exported the two projects as FLEX zip archives, How do I Upload these zipped code changes back to your blog ?
-Peter L.