Thursday, October 16, 2014

Expensive As3 Animated Star Tutorial

Animate a universe of moving stars with Flash ActionScript code


Animated stars are often a design element in video games that take have an outer space theme. Animated stars are also used in the development of e-learning tools that have an educational focus on astronomy or the universe. Animated stars, like shooting stars, can also be used to add excitement to Flash movies that have a romantic story line. Using AS3 (the Flash ActionScript 3.0 programming language) gives you the ability to precisely and easily define every aspect of the star's animation. With AS3, you can defined the star's shape, movement, color and brightness all as a function of time.


Instructions


1. Start the Flash program. Click "New" from the "File" menu on the main Flash menu bar. Click the file type "Flash File(ActionScript 3.0)" from the "New document" dialog box that appears. Click the "OK" button to close the dialog box.


2. Select the "Actions" option from the "Window" menu on the main Flash menu bar to open the "Actions" editor. Position your cursor on the first line of the "Actions" editor. Click and type the code to declare a movie clip object called "myStar" on the the first line of the editor:


var myStar:MovieClip = new MovieClip();


3. Type the code listed below starting on the next line in the "Actions" editor to instruct Flash to: draw the star using a 1 pixel line width with the "lineTo," "moveTo" and "color fill" methods; position the star on the stage at the X,Y coordinate 200, 250 and place the star on the stage when the movie begins to play.


myStar.graphics.lineStyle(1);


myStar.graphics.moveTo(-50,-50)


myStar.graphics.beginFill(0xFF0000);


myStar.graphics.lineTo(50,0);


myStar.graphics.lineTo(-50, 50);


myStar.graphics.lineTo(0,-50);


myStar.graphics.lineTo(50,50);


myStar.graphics.lineTo(-50,0);


myStar.graphics.lineTo(50, -50);


myStar.graphics.lineTo(0,50);


myStar.graphics.lineTo(-50, -50);


myStar.graphics.endFill();


myStar.x = 200;


myStar.y = 250;


addChild(myStar);


stage.addEventListener(Event.ENTER_FRAME, rotatestar);


function rotatestar(e:Event):void


{


myStar.rotation = 1 + myStar.rotation


}


4. Type the code below starting on the next line of the "Actions" editor to rotate the star about its center point 1 degree clockwise every time a new frame (set periods of time) is entered using the ENTER_FRAME event and attaching a rotation property to the star.


stage.addEventListener(Event.ENTER_FRAME, rotatestar);


function rotatestar(e:Event):void


{


myStar.rotation = 1 + myStar.rotation


}


5. Review the code typed in, as listed below, for syntax errors and correct any errors as necessary. Copy and paste the code below if you did not type in the code and you want to ensure that the star animation runs correctly, without any errors.


var myStar:MovieClip = new MovieClip();


myStar.graphics.lineStyle(1);


myStar.graphics.moveTo(-50,-50)


myStar.graphics.beginFill(0xFF0000);


myStar.graphics.lineTo(50,0);


myStar.graphics.lineTo(-50, 50);


myStar.graphics.lineTo(0,-50);


myStar.graphics.lineTo(50,50);


myStar.graphics.lineTo(-50,0);


myStar.graphics.lineTo(50, -50);


myStar.graphics.lineTo(0,50);


myStar.graphics.lineTo(-50, -50);


myStar.graphics.endFill();


myStar.x = 200;


myStar.y = 250;


addChild(myStar);


stage.addEventListener(Event.ENTER_FRAME, rotatestar);


function rotatestar(e:Event):void


{


myStar.rotation = 1 + myStar.rotation


}


6. Click the "Test Movie" option from the "Control" menu to play the movie of the rotating star. Observe that the star rotates continually about its center and that the star is partially and symmetrically filled with the colors red and white.