Flash AS3 Animated Star Tutorial

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Flash AS3 Animated Star Tutorial
Animate a universe of moving stars with Flash ActionScript code (Jupiterimages/Photos.com/Getty Images)

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 storyline. 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, colour and brightness all as a function of time.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional (CS3, CS4 and CS5 versions)

Show MoreHide

Instructions

  1. 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" dialogue box that appears. Click the "OK" button to close the dialogue box.

  2. 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 first line of the editor: var my Star:MovieClip = new MovieClip();

  3. 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 "line To," "moveTo" and "colour 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; add Child(myStar); stage.addEventListener(Event.ENTER_FRAME, rotatestar); function rotatestar(e:Event):void { myStar.rotation = 1 + myStar.rotation }

  4. 4

    Type the code below starting on the next line of the "Actions" editor to rotate the star about its centre 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. 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 my Star: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; add Child(myStar); stage.addEventListener(Event.ENTER_FRAME, rotatestar); function rotatestar(e:Event):void { myStar.rotation = 1 + myStar.rotation }

  6. 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 centre and that the star is partially and symmetrically filled with the colours red and white.

Tips and warnings

  • Stars animations can be created in many different ways. Instead of the rotation property, a motion path can be created using mathematical equations, such as the equation of the ellipse.
  • The positive Y axis of the Flash coordinate grid points downward (Y values are more positive and larger near the bottom of the stage). In this example, the star was constructed so that its centre was at the point (0,0) on the stage. If you draw objects such that they are not first drawn centred about the Flash coordinate system's origin (0,0), they will not rotate about the object's centre, but about the point (0,0) on the Flash stage or the origin of the "Movie clip" or "Sprite" they are contained in.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.