Flash CS4 example: Spray Brush, Tween instance, new motion, AS3, fancy JSFL… Profit!

In the previous blog entry, I linked to a new JSFL that automatically gives instance names to selected instances in a smart way. You can go read about and download the JSFL from this page. This entry shows you how to use this command along with some of the new features in Flash CS4.

Lets look at the finished file first. It’s not very pretty, but hey this is just something to learn from or whatever. Roll over the stars and they’ll tween.

Make sure you have Flash Player 10 installed to see the full animation: http://www.adobe.com/go/getflashplayer.





So this example uses the JSFL linked above, the new motion tweens to animate the stars, the deco tool to spray them on the Stage, tween instance to animate the stars when you roll over them, and a bit of ActionScript 3.0 to make things happen and change the alpha.

Download the FLA file (Flash CS4).

A fairly literal explanation of how this was created.

Before you star, make sure you have downloaded and installed the JSFL from this blog post .

  1. Created a new document, and added some kind of background.
  2. I created three movie clips of stars, each with a nested tween to make them flicker different ways. The tweens in each one are slightly different – I made each star a slightly different color, and then animated the alpha and hue properties of each star using a random ease set to a different amount. To add a random ease, you go to the Eases section of the Motion Editor and choose it from the Add menu and give it a value. Then, after adding the Color Effect and Filter, you can add the Random ease to the Alpha and Hue properties. You will also want to choose a beginning and ending value for those two properties so the Random ease has something to tween. Check out the FLA so this makes some sense.
  3. Go to the main Stage, and select the Spray Brush tool. In the Property inspector, next to Spray, click the Edit button and choose one of your three stars. Select the Random Scaling button, and set your brush size to a high value.
  4. Create three new layers, one for each star symbol. On the first layer, spray the first star symbol.
  5. Repeat this for the second and third star instance on the other two layers.
  6. The stars will be in a group, so on each layer you want to select the group and choose Modify > Break Apart.
  7. You might have too many stars – delete some at this point if you want.
  8. Create a new symbol and go into symbol editing mode – drag one of the stars into the symbol (it doesn’t matter which one). Create a tween for the star (right-click the star, select Create Motion Tween, and then manipulate it) – this is the animation that will appear when you mouseover each star. I drew a spiral on a normal layer, and pasted it onto the tween span, and applied a Simple Slow ease so it slows down at the end of the animation. When you’re done, select the tween span or motion path and enter theTween into the text box at the top of the Motion Property inspector. This is the tween’s instance name, and you can use it in your ActionScript to reference and apply the animation to whatever instances you want in a SWF.
  9. Create a new layer, and drag an instance of the animation you created in step 8 onto the pasteboard (outside the Stage area). Give it the instance name holder.
  10. Lock all the layers except for one of your star layers. Select all the stars on that first layer, and choose Command > Sequentially Name Instances. Give it a prefix of star1 and click OK to name them.
  11. Repeat for the second and third layers filled with stars. Give them prefixes of star2 and star3.
  12. For each of the three star layers, select all the stars on each layer and nest them inside a movie clip. Give each movie clip an instance name, star1parent for the star1 prefixed instances… and of course star2parent and star3parent for the other two.
  13. Create another new layer, for your code. Add the following ActionScript to the Stage.
  14. myFunction(star1parent, "star1_", MouseEvent.ROLL_OVER, item_rollOver1);
    myFunction(star2parent, "star2_", MouseEvent.ROLL_OVER, item_rollOver2);
    myFunction(star3parent, "star3_", MouseEvent.ROLL_OVER, item_rollOver3);
    
    function myFunction(target:DisplayObjectContainer, childPrefix:String, eventName:String, callbackFunction:Function):void {
    	var targetDispObj:DisplayObject;
    	for each (targetDispObj in target) {
    		if (targetDispObj.name.indexOf(childPrefix)>-1) {
    			targetDispObj.addEventListener(eventName, callbackFunction);
    		}
    	}
    }
    function item_rollOver1(evt:Event):void {
    	evt.currentTarget.alpha = 0.5;
    	holder.theTween.addTarget(evt.currentTarget);
    	
    }
    function item_rollOver2(evt:Event):void {
    	evt.currentTarget.alpha = 0.8;
    	holder.theTween.addTarget(evt.currentTarget);
    }
    function item_rollOver3(evt:Event):void {
    	evt.currentTarget.alpha = 1;
    	holder.theTween.addTarget(evt.currentTarget);
    }
    
    

    So that code basically looks for all the stars with the star1 prefix and sets the alpha then attaches the tween instance on rollover. The star2 gets a different alpha and the same animation on rollover, etc. Now you could have multiple tween instances with different name (theTween2, theTween3, etc) so a different animation occurs on rollover. You could neatly keep them all in the same holder so they’re all in the same place and off the stage.

  15. Publish. Profit.

That’s all there is kids. Ask your questions in the comments.

Jen deHaan is a consultant specializing in instructional design, web design, WordPress, technical project management, and writing. She is based in the San Francisco Bay Area.

Tagged with: , , , , , , , , , , ,
Posted in ActionScript 3.0, animation, Commands, downloads, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, General, instances, JSFL, Migration, Motion Editor, Motion runtime, motion tween, new stuff, Tween instance, tweens
  • http://webyarns.com alan bigelow

    Hi–

    Great tutorials! Unfortunately, I am having a problem with targeting multiple motion tweens in Flash CS4. I am using AS2 and attempting to change the visibility of eight separate motion tweens (visible false and then true). The tweens are masked, otherwise I’d make movie clips out of each one and turn their visibility on and off that way. I want to be able to affect each tween separately.

    I have tried MANY angles on this, but only the first tween mentioned in the AS is affected, but the rest of the tweens are not. Is this something to do with CS4, which I am new to?

    I am at a loss… Any suggestions? Many thanks!!!!

  • http://www.flashthusiast.com Jen deHaan

    I forgot to link, but this is covered in a forum thread here:
    http://www.kirupa.com/forum/showthread.php?p=2455640

  • güvenlik

    You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
    2 Responses to “Flash CS4 example: Spray Brush, Tween instance

  • http://diaryofatechguy.beetlesolutions.com Michael

    thanks guys for the fla.

  • koosha

    please send for me adobe flash cs4 training for web desine

  • http://www.sleepbetteraid.com Joshua Taylor

    Flicker is really great when sharing photos over friends and families. I love the resize feature of Flickr..**

  • rishi

    its really awesome