Galvan on Flash

Previously I blogged about using the new Copy Motion to ActionScript 3 feature. Now I I would like to show you how to take that feature and extend it to Flex.

I have included my FFanimaotr flex project that has a working sample of this. You must have Flex and Flash CS3 installed for this to work since we need the Animator class that ships with Flash CS3. Just import the project to Flex and it should work.

Here is the Flex code:

I have enclosed two xml animation files called blurswirl.xml, which is the same example I used in my previous blog, and bounce.xml. You can use your own if you want, just add your animation file to the bin folder in the Flex project and change the name in the Flex code (in Green). Remember that you create animation xml files by selecting an animation on the timeline and then use the "Export Motion XML" command under the command menu.

Ok, so the part I need to point out is that if you want to create your own flex project then the trick is to add the Flash CS3 class path to your Flex project so that it knows where to go get the animator class. Normally the path (in Windows) is C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0\Classes, but if you installed Flash CS3 in a different location you would need to adjust the path. On a Mac look for the same folder but starting from your application folder. You add this to your Flex project by going to the Project properties and adding the class path to the "Source Path" tab under "Flex Build Path".

Ok, so how does this work? simple, you just run the same AS3 code that I showed before (in Red). Except this time you tell it to animate a Flex component. In this case I am using the calendar component, but feel free to replace it with any component (SWFloader, VideoDisplay, etc) just make sure to give it an ID of "moveThis".

The only thing I am doing a bit different than what I did in my Flash CS3 example is calling Animator’s rewind function. as in:

if (my_animator) my_animator.rewind();

I am doing this so that when you select a different animation the component you are animating doesn’t continue from where it finished and fly off the page.

My example is actually more complicated than it needs to be. I am using a combo box with two animations you can select from. When one is selected it calls my animate function with in tern loads the XML file and then uses the Animator class to apply the animation to any component that has an ID of "moveThis".  The beauty is that its all at runtime.

Play around with it. See what you can do with it and if you think you have something cool please share.

One of the new features we have in Flash CS3 is the ability to copy an animation on the timeline to AS3 (ActionScript 3). I am a big fan of this new feature let me show you why.

For example:

the animation that is illustrated above is a typical timeline animation. If you then right click on the timeline you would see the option to copy motion to AS3.

It then asks you to specify and instance name of the symbol to which you would like to apply this code too. Flash CS3 then places code into the clipboard. If you were to paste this code in the actionscript panel you would see:

Notice that the code in red is the only part that truly is AS3. The blue part is XML describing the animation.

To get this to work, just create a new AS3 document and paste the code on frame 1 of the timeline and drop any symbol on stage and call it’s instance ‘box’. Run the movie and you will see the symbol move across the stage.

Ok,so what’s so cool about this? well, first. It allows me to re-use an animation as many times as I want. It also allows a normal designer/animator to work with a developer that prefers to see everything in code. However, one of best parts is that it allows me to store my animations as external XML files.

If instead of right-clicking on the timeline, I would have gone to the command menu and selected "Export Motion’. I would then be able to save just the XML description to an external file.

ok, so now what. Well, lets say I saved my animation as swirl.xml, if I change my AS3 code a little. Like so:

I can now have my flash movie load the animation at runtime and play it. This will allow me to change the behavior of the animation just by replacing an XML file. Cool huh? I’ll let you figure out all the uses fot it.

Oh, and in case you are wondering the same animation can then be applied to a component in Flex. I’ll show how to do that next post.

Ok ladies and gentlemen, here it is at last! . It is a pleasure to officially introduce you to our latest release of Flash. FLASH CS3 Professional

This release has a lot of great new features and I will be covering all of them in some detail in this blog. But to start out I will point of 5 of the biggest.

1. Photoshop and Illustrator import – you can now import all of your psd and ai files and not loose any fidelity while doing so.
2. Support for ActionScript 3.0 – AS got faster, stronger, and better than ever.
3. New UI - if you have a laptop this is a must have.
4. Copy motion to AS3 – (one of my favs) this lets you take any animation that is on the timeline and convert it to ActionScript 3.0. You can then apply that animation to any symbol as pure code.
5. New components - these are all new AS3 components that are much easier to skin. Just double click on the component and you have access to all the skin symbols.

So those are some of the major features, but we also added a few small tweaks and fixes to the tool. There is one in particular that I am really happy about, but instead of just telling you about it, lets see if any of you Flash gurus can figure this one out. We changed something in the documents property window (or something you can access from the documents property window)…can someone tell me what it is?

One last thing. Can someone shed some light into who is responsible for www.gettheglass.com  I love this site. Very nice work.