Please install Adobe Flash
Because this is a tutorial, all actionscript will be done in the timeline.
By the time you complete this tutorial, you will have something that looks like this:
Make a 20×20 star image in photoshop or flash. If you want to apply filters to it, I suggest you make the image in photoshop because rendering filters in flash impacts performance. If you don’t want to make one, you can download the zip at the bottom of this page and use the provided image. If you are using an image, make sure you turn on pixel blending inside flash (right click the image in the library, go to properties, and check the pixel-blending checkbox).
Once inside flash, set your framerate to 30fps. Highlight the image and convert it to a symbol by going to modify > convert to symbol (f8). Enter the following settings:
Open up the movieclip and convert the graphic inside into ANOTHER movieclip called “star graphic”. This movieclip doesn’t need any extra settings. Animate it so it is moving from it’s registration point to the RIGHT. Have it double in size as it moves. It should look something like this:
Now delete the movieclip from the stage. Highlight the first frame of your timeline and bring up the actionscript panel (f9 or window -> actions). Paste the following code and test your movie (ctrl + enter). I’ll go over the code below.
var w:Number;
var h:Number;
init();
function init() {
w = stage.stageWidth;
h = stage.stageHeight;
var bg:MovieClip = new MovieClip();
bg.graphics.beginFill(0x0);
bg.graphics.drawRect(0, 0, w, h);
bg.graphics.endFill();
addChild(bg);
for (var i = 0; i < 150; i++) {
addStar();
}
}
function addStar() {
var star:MovieClip = new Star();
addChild(star);
star.x = Math.random() * (w - star.width / 2) + star.width / 2;
star.y = Math.random() * (h - star.height / 2) + star.height / 2;
star.scaleX = .1 + (Math.random() * .3);
star.scaleY = star.scaleX;
var dx:Number = star.x - w/2;
var dy:Number = star.y - h/2;
var radian = Math.atan2(dy,dx);
star.rotation = radian * 180/Math.PI;
star.gotoAndPlay(Math.floor(Math.random() * 130) + 1);
}
-w and h are the width/height of the stage which are defined in the next few lines.
-init(); calls the function init() which initializes everything needed.
- Lines 7-8 set w and h to the width and height of the stage.
- Lines 10-14 create a new movieclip and add a black fill to it (this is our background)
- Lines 16-18 call addStar() for as many stars as we want (in this case, 150).
- Lines 23-28 create a new star and place it at a random position/scale.
- Lines 30-31 get the distance the star is from the center of the stage
- Line 32 calculate the star’s angle (in radians) from the center of the stage so the star will move away from the center.
- Line 34 converts the variable radian (the value from line 33) into degrees and sets our star’s rotation to that angle.
- Line 35 makes the star jump to a random frame so every star isn’t blinking in/out at the same time
Download Tutorial Assets Here: spacetutorial
