Random stars with blur filter applied(ActionScript 3.0).
In today tutorial we will make a very cool effect. We will apply some random values to some properties of a MovieClip that has a little animation and a blur filter applied to it, this approach will produce a nice organic effect. You must read it the result is fun and cool.
1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.
2. Go to Insert > New Symbol, name the symbol particle and click Ok.
3. In the Tools panel select the PolyStar tool. In the Property Inspector click on the Options button, expand the combo box and select star and click Ok. In the same Property Inspector set the stroke to none and pick a yellow color. Put your cursor on the center of the stage (the center is mark by the addition sign) click and drag to draw a star about 40 by 40.Double click on the layer name and name it particle.
4. Insert a new layer by going to Insert > Timeline > Layer. We will use this layer as a guide. Select the Rectangle tool and draw two rectangles (first: width=210 and height = 210 and second width=360 and height = 360) and position them like in the picture. We will place a star in every corner of the rectangles. You can use other measurements for your rectangles, I provide this measurements to help you to make an idea. 
5. Select frame 20 and hit F5 to insert a new frame. This will make our rectangles visible and help us to place the stars in the right place. Lock this layer.
6. Select frame 10 from the particle layer and press F6 to insert a new keyframe. Drag the star to the top left corner of the little rectangle. Set its dimensions to 20X20 and change its color. Right click between frame 1 and 10 and select Create Shape Tween.Select frame 20 press F6 and drag the star to the top left corner of the big rectangle. Change its color and set its size to 5X5.With the star selected press Shift +F9, this will open the Color panel, in this pallet set the alpha property to 0. Right click between frame 10 and 20 and select Create Shape Tween.
7. Insert a new layer. Click on the particle layer to highlight the 1 to 20 frames. Go to Edit > Timeline > Copy Frames, click on the new layer to highlight it and go to Edit > Timeline > Paste Frames. Select frame 10 from the new layer a move the start to the top right corner of the little rectangle and change its color. Select frame 20 and move the star to the top right corner of the big rectangle. Change the color of the star and press Shift +F9 to open the Color panel, in this panel set the alpha property to 0.
8. Repeat step 7 two times for the bottom left and bottom right corners. After you finish insert a new layer, name it actions. Select frame 20, press F6 to insert a new keyframe, press F9 to open the ActionScript panel and type stop (); .Select the layer that contains the rectangles and delete it. Click on the Scene 1 to go to the main timeline.
9. Press Ctrl +L to open the Library. Select the particle MovieClip, right click and select Linkage. In this panel select Export for ActionScript checkbox, set the Class name to Particle and click Ok. 
10. Select frame 1, press F9 to open the ActionScript and paste the next code:
Press Ctrl + Enter to test the movie. Everything should be ok.
var bitmapData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0x000000);
var bitmap:Bitmap = new Bitmap(bitmapData);
addChild(bitmap);
addEventListener(Event.ENTER_FRAME,drawScreen);
addEventListener(MouseEvent.MOUSE_MOVE,drawScreen);
function drawScreen(event:Event):void {
var particle:Particle = new Particle();
addChild(particle);
particle.x = mouseX;
particle.y = mouseY;
particle.scaleX = particle.scaleY = Math.random();
particle.rotation = Math.random()*360;
var blur:BlurFilter = new BlurFilter(2,2,5);
bitmapData.applyFilter(bitmapData,bitmapData.rect,new Point(),blur);
bitmapData.draw(this);
}
Let’s look at the code.
First we declare a BitmapData object and set its width and height to be equal with the stage width and height, set its alpha property to false and color to black. To view the BitmapData object on the stage we need a Bitmap object. We declared this on the next line and pass to it the BitmapData object.
Next we add an ENTER_FRAME and a MOUSE_MOVE event. When these events occur they call the drawScreen function.
Inside the drawScreen function we pull our particle MovieClip from the Library and add it to the stage. Set its position equal with those of the mouse, give a random value to the scale property and a random value between 0 and 360 to the rotation property. Next we declare a BlurFilter object, apply this filter to the BitmapData object and use the draw method of the BitmapData object to draw the stage when the events occur.
This is all. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.
Until next time have fun learning Flash.
You can download the source file from: Random stars with blur filter applied.
Comments
Thanks Mike.
Anyway, I will figure it out for AS2 or make something similar, again nice effect and nice post. Thanks for the reply.
Working on this example first I have setup a Timer and set the delay to 5 seconds and the repeat property to 1. When those 5 seconds are gone I instruct the movie to go to the next frame.
Here is the code that I have added to the existing one:
stop();
var timer:Timer = new Timer(5000,1);
timer.start();
timer.addEventListener(TimerEvent.TIMER_COMPLETE,removeStars);
function removeStars(event:TimerEvent):void{
removeEventListener(Event.ENTER_FRAME,drawScreen);
removeEventListener(MouseEvent.MOUSE_MOVE,drawScreen);
removeChild(bitmap);
this.gotoAndStop(2);
}
I have placed something on frame 2.
Basically you need to remove the ENTER_FRAME and MOUSE_MOVE events, when those events take place the particles are drawn on the stage, if we are not listen for those events the function that draws the particles is not called and the particle aren’t drawn.