Flash Tutorial Falling Stars

This Flash tutorial will show you how to create text with falling stars

Download Flash component

Fully editable flash menu, effects, XML driven flash gallery

Free Simulink CD Offer

CD includes Simulink Demos, product info, reference examples and more.

Free Web Services Tools

Jumpstart your learning curve in Windows Communication Foundation

Flash website Shooting Bullets

Jagged Transition

Falling Star Text

Rotatin Gallery Drop Down Menu

Basic Flash Site

Part 1) Adding the Text Step 1. For this tutorial we'll be using a text effect, created in Photoshop, which has already been imported into a FLA for you here. Inside the FLA file are the 2 images shown below. Image b) will be placed on a layer above image a). Stars will be created dynamically between both layers, and then scrolled downwards. We'll also create a mask, so that the stars only appear to be flowing within the text area. a)

b)

Step 2. So, to start off make a new Flash document, with dimensions of 260 width by 190 height, and a frame rate of 30 FPS. Create a layer called text and drag the textMC MC (Movie Clip Symbol) on to the stage.

Circular Slideshow

Step 3. Create a new MC, named 'holder'. This is the MC that'll we'll be adding the stars to later on.

Step 4. Drag the holder mc onto a layer called 'holder', positioning it at the co-ordinates shown below. Give the holder MC the instance name 'holder'

Falling Star Text - Part 2) Masking the Text

Part: 1 | 2 | 3 |4

Step 5. Now we're going to create a mask to make sure the stars are only visible in the text area. So, create a new layer called 'mask', above the 'holder' layer, and create a 150 sized text field on it.

Step 6. Set the text field as a mask, by right clicking on the layer.

Step 7. Once you've done that, the layers should look as below.

Step 8. Now create a new layer called 'shade' and drag over 'shadeMC' onto it.

Falling Star Text - Part 3) Creating the Stars

Part: 1 | 2 | 3 |4

Step 9. Now we're going to create the stars, which we'll later attach to the holder MC. So create a new MC called 'star0', giving it an identifier of the same name.

Step 10. Go into the star0 MC and set the stoke and fill color to one of your choosing, and make the thickness of the line hairline, from the the properties panel. For this tutorial I've set it to light blue (#33CCFF) and I've zoomed in to 1600%. Use the line tool (circled in red), to create the first part of the star outline, making sure that the lines are touching one another.

Step 11. Create the next 3 segments.

Step 12. And then complete the outline.

Step 13. Now use the Paint Bucket Tool to fill the outline with the same color.

Step 14. Right click on the 'star0', from the library (image a), choose 'Duplicate' and name it star1, with the same name for the 'Identifier'. a)

b)

Step 15. Change the color of the duplicated star

Step 16. Make 2 more duplicate, each with a varying tone of color, naming them as shown below.

Falling Star Text - Part 4) Actionscript

Part: 1 | 2 | 3 |4

Step 17. Now it's time to write some Actionscript! Create a 'script layer and click on the 1st frame in the timeline. Open up the Actions panel and enter the code shown below.

Line 1 - A

variable

containing the number of stars to be on the screen at once.

Line 2 - the maximum speed that the stars will move at and Line 3 - the minimum speed. Line 4 - The number of different colored stars Line 5 - Maximum size to make the stars Line 6

- Minimum size to make the stars.

Step 18.

Line 7 - 8: Next, we use a for loop to attach the 150 stars to the holder MC. We use the text "star" and combine it with 0-3, to attach one of the star MC's Line 9 - 10: Each star movie clip needs to be positioned randomly. To do this we assign it's x and y position, choosing a random number from 0 to 260 (stage width ) for the x co-ordinate, and from 0 to 190 (stage height) for the y co-ordiante. Step 19.

Line 11 - Next, we're going to assign a random speed for the mc, giving each one a speed atrribute (mc.speed). The variables mxSpeed and minSpeed are used to create the random number. Line 12- We then randomly rezize the stars, by assigning a random number to the variable size. Line 12-14: We then assign the star's width (mc._width) and height (star._height) with the size varaible.

Step 20.

Line 16 - 18 - this.onEnterFrame = function(){ } "is a function which will repeatedly run any code we put in between the braces {}, at the frame rate of the SWF file. We need to use it to repeatedly move the stars. Next, we create another for loop, to move all the stars at once. Earlier we created each star and name them star1, star2 etc, so now we need to tell each of them to move. We refer to the star as this["star"+j), with j being the current number in the loop. We then assign this["star"+j) to the variable mc because it's easier to write :) Step 21.

Line 19-27: Next an if statement is used to check whether each star has reached the bottom of the text (y<140). If it hasn't we move the star down by adding the Y co-ordinate with the speed. If it has reached the bottom we reuse the star, randomizing its speed and position again (lines 22-24), with the code copied from the 1st block of code. You can also add the code to resize it if you like.