Flashthusiast

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.

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.

14. Publish. Profit.

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