Quick Animator example

[devonair]

My first little contribution to a brand new forum...

While the Animator class is mainly used for the Copy as Motion to AS3 command, you can of course hand code it as well. Here's a quick color change example I whipped up the other day while playing around..

import fl.motion.Animator;
import fl.motion.MotionEvent;

var redSprite:Sprite = new Sprite();
redSprite.graphics.beginFill(0xFF0000);
redSprite.graphics.drawRect(50, 50, 100,100);
redSprite.graphics.endFill();
addChild(redSprite);

var blue_xml:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="31"></Source>
</source>

<Keyframe index="0">
<tweens>
<SimpleEase ease=".8"/>
</tweens>
</Keyframe>

<Keyframe index="20">
<color>
<Color blueOffset="255" redOffset="-200"/>
</color>
</Keyframe>
</Motion>;

var red_xml:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="31" />
</source>
<Keyframe index="0">
<tweens>
<SimpleEase ease=".8"/>
</tweens>
<color>
<Color blueOffset="255" redOffset="-200" />
</color>
</Keyframe>

<Keyframe index="20">
<color>
<Color blueOffset="0" redOffset="0" />
</color>
</Keyframe>
</Motion>;

var color_animator:Animator;

redSprite.addEventListener(MouseEvent.ROLL_OVER, changeToBlue);
redSprite.addEventListener(MouseEvent.ROLL_OUT, changeToRed);

function changeToBlue(e:MouseEvent):void {
color_animator = new Animator(blue_xml, e.target as Sprite);
color_animator.play();
}
function changeToRed(e:MouseEvent):void {
color_animator = new Animator(red_xml, e.target as Sprite);
color_animator.play();
}

I'm sure other folks will do much cooler stuff, but it's a start..

[hybrid101]

wicked, that code reminds me of html though:lol:

[pixelSnobbery]

Thought I'd give the ppl who don't have cs3 yet the chance to see what code the "convert motion to actionscript" function churns out.

I had a circle movie clip move from the bottom left, to the top right of the stage, shrink by 50% and set the alpha to 0 on the last frame. I also used some easing on it.

When i chose the "convert motion to actionscript" fuinction, the following code was placed in my clipboard:


import fl.motion.Animator;
var circle_xml:XML = <Motion duration="30" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="30" x="34.25" y="365.2" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="circle">
<dimensions>
<geom:Rectangle left="0" top="0" width="62.5" height="62.5"/>
</dimensions>
<transformationPoint>
<geom:Point x="0.5" y="0.5"/>
</transformationPoint>
</Source>
</source>
<Keyframe index="0" tweenSnap="true" tweenSync="true">
<tweens>
<SimpleEase ease="-1"/>
</tweens>
</Keyframe>
<Keyframe index="29" x="478" y="-331" scaleX="0.5" scaleY="0.5">
<color>
<Color alphaMultiplier="0"/>
</color>
</Keyframe>
</Motion>;
var circle_animator:Animator = new Animator(circle_xml, circle);
circle_animator.play();


A little bulky if you ask me, but it gets the job done! ;)

[senocular]

merged threads

[toledomg]

Thank's

[Alluminitti]

I know this thread is old but I think it's appropriate to bump it with my question. Is it possible to have the XML data contained in an external XML file and then loaded into the application?