Sei sulla pagina 1di 12

Download Flash component Free Simulink CD Offer

This Flash tutorial will show you Fully editable flash menu, effects, XML CD includes Simulink Demos, product info,
how to create text with falling stars driven flash gallery reference examples and more.

Free Web Services Tools


Jumpstart your learning curve in Windows

Flash website Shooting


Communication Foundation Jagged Circular
Bullets Transition Slideshow

Falling Star Basic Flash Rotatin Gallery Drop Down


Text Site Menu

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.
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'
Part: 1 | 2 | 3
Falling Star Text - Part 2) Masking the Text
|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.
Part: 1 | 2 | 3
Falling Star Text - Part 3) Creating the Stars
|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.
Part: 1 | 2 | 3
Falling Star Text - Part 4) Actionscript
|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.

Potrebbero piacerti anche