Incrementally 3D rotating objects using the Spark Rotate3D effect in Flex 4

by Peter deHaan on October 25, 2008

In a previous example, “3D Rotating objects in Flex 4 using the Spark Rotate3D 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 Spark Rotate3D effect in the Flex 4 SDK.

The following example shows how you can rotate an image relative to its current rotation by setting the yBy property on the Spark Rotate3D instance.

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 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="Spark_Rotate3D_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 mx.events.FlexEvent;
            import spark.effects.Animate;
 
            private function playEffect(target:Animate, angle:Number):void {
                if (!target.isPlaying) {
                    rotY += angle;
                    target.play();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Number id="rotY">0</fx:Number>
        <s:Rotate3D id="fxRotate3DNeg" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
        <s:Rotate3D id="fxRotate3DPos" target="{image}" angleYTo="{rotY}" autoCenterTransform="true" />
    </fx:Declarations>
 
    <s:VGroup id="vGroup" left="10" top="10">
        <s:Button id="fxButtonNeg"
                label="Rotate3D (angleYTo - 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, -30);" />
        <s:Button id="fxButtonPos"
                label="Rotate3D (angleYTo + 30)"
                autoRepeat="true"
                repeatDelay="500"
                repeatInterval="100"
                buttonDown="playEffect(fxRotate3DNeg, 30);" />
    </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.

Tagged as: Gumbo, isPlaying, needsSWF, yBy

{ 16 comments… read them below or add one }

1 Dale Fraser October 26, 2008 at 3:07 am

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.

2 Anonymous September 5, 2009 at 6:56 pm

Yes, just listen for the ‘end’ event.

3 CT September 5, 2009 at 6:58 pm: Here is an example listening for an end event. (right mouse click for code).
http://www.ctyeung.com/flex/peanut/Nov08/NelsonNov08.html

4 Johannes October 31, 2008 at 7:03 pm

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

5 peterd November 1, 2008 at 12:37 pm

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

6 Vitalik March 4, 2009 at 6:28 am

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?

7 Peter deHaan April 27, 2009 at 10:59 pm

Examples updated to Flex SDK build 4.0.0.6298 (but didn’t update SWF yet).

Peter

8 Peter Lindener April 28, 2009 at 1:38 pm

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.

9 Peter deHaan April 28, 2009 at 1:42 pm

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

10 Peter Lindener April 28, 2009 at 3:45 pm

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

11 Peter Lindener April 28, 2009 at 4:55 pm

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.

12 Peter Lindener April 28, 2009 at 8:52 pm

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.

13 Peter Lindener April 28, 2009 at 8:56 pm

P.S. it seems the “id” attribute is not allowed on the root tage of a component”
… I must be missing something here.
-Peter

14 Peter Lindener April 28, 2009 at 10:00 pm

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.

15 Peter Lindener April 29, 2009 at 9:57 pm

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.

16 Peter deHaan August 6, 2009 at 9:00 am

Example(s) updated to Flex SDK build 4.0.0.8974 (but didn’t update SWF yet).

The angleXBy, angleYBy, and angleZBy properties were removed around 6/17, added workaround in example above.

Peter

Incrementally 3D rotating objects using the Spark Rotate3D effect in Flex 4

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Incrementally 3D rotating objects using the Spark Rotate3D effect in Flex 4

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising