When creating Spell Cubes I used a lot of particles to help the user through the initial app tutorial. So instead of showing text overlay i animation particles where the user had to interact next. If you read my Spell Cubes post you will know what I’m talking about.
I this post I will provide you with the code to achieve the same. I have created a Starling Extension that you can download below along with a very simple JSFL script used to output the motion you mock up in Flash Professional.
Step 1
Mock up the path you want your particle to have.
When you are pleased with your path, then run the custom JSFL script.
Navigate to, and select SimpleMotionXML.jsfl
Now you have an XML copied to your clipboard. Now simply create a new MotionParticleSprite instane as follows:
// Create an init Object used to configure behavior. first param is the particle
// XML Config file that you exported from fx- Particle-Designer. The second param is
// the particle Texture.</pre>
<pre>var initObj:MotionParticleSpriteInitObject = new MotionParticleSpriteInitObject</pre>
<pre>(
XML(new PARTICLE()),
myAssetManager.getTexture( AssetConstants.PARTICLE )
);
// Store the Clipboard XML
var xmlPastedFromClipboard:XML = PASTE_HERE;
// Create the MotionParticSprite and pass the XML and the Init Obj.
var motionParticleSprite:MotionParticleSprite = new MotionParticleSprite( xmlPastedFromClipboard , initObj);
addChild( motionParticleSprite );
motionParticleSprite.initialize(); // this takes care of making the particle ready.
motionParticleSprite.play(); // this starts the particle.</pre>
<pre>
With the Init Object you can configure these properties.
- fadeInAt
- fadeOutAt
- delay
- notifyAtFrames
- hideWhenComplete
- extraGraphic
- extraGraphicOnTop
- frameRate