Create Twinkling Stars Using Graphic Symbols
(beginner level)
This tutorial will show you how to create twinkling stars using graphic symbols. If you would like to follow along using our night sky background you can download it by right clicking on the image and saving it to your hard-drive. Otherwise use a graphic or photograph of your choice - just remember to change the stage properties to match your
image size.
Step 1: Start Flash and Create a New Flash Document
Start Flash and create a new document (File > New and choose Flash Document or Ctrl (win) / Cmd(mac) + N and choose Flash Document) and to make it easier to follow
along reset Flash's workspace to default. Choose Window > Workspace Layout > Default.
Step 2: Set the Document Properties
Double-click the Frame Rate label at the bottom of the Timeline to display the Document Properties
dialog box.
If you are using the Night Sky Jpeg, change the dimensions to 480 width and 320 height otherwise size the document to match the graphic you are using as a background. We
don't need to specify the background color as we are going to completely cover the background layer with the night sky jpeg. Leave everything else at their default values and
Click OK .
Step 3: Import the Night Sky JPEG
Import the night sky jpeg to the stage by choosing File > Import > Import to Stage.
Step 4: Position the Night Sky JPEG
Now that we have our Night Sky
JPEG imported into our new
document we need to accurately
position it on the stage so that it
doesn't leave any hairline cracks
around the edges. The easiest way to
accomplish this is to use the Align
Palette.
Open the Align Palette by
choosing Window > Align or Ctrl
(win) / Cmd (mac) + K
With the Align Palette you can
choose to Align various objects
relative to each other or you can Align objects to the Stage itself by clicking the Align to Stage
button. Select the Night Sky JPEG and with the Align to Stage button on click on the Align
Horizontal Center button and then the Align Vertical Center buttons to move the Night Sky JPEG
into position.
Step 5: Lock Layer 1
Now that we have accurately aligned our background graphic we want to prevent the possibility of accidently moving it. On
the Layers Palette click in lock column within layer 1 to prevent further editing of this layer.
Step 6: Create a New Layer
Click on the Insert Layer icon at the bottom of the Layers Palette to create a new layer.
Step 7: Creating the Star Shape
Select the Polystar tool from the tool box (if it is hidden click on the Rectangle Tool
and hold down the mouse till the Polystar tool displays). With the Polystar tool
selected you can then set the properties of the tool in the Properties Inspector at
the bottom of the screen.
Set the fill to white and the stroke to none. Then click on the Options button on the
Properties inspector to open the Tool Options dialog box. This is where we will choose the Star shape, 4 points
and a point size of 0.50. Then click OK.
Now that the tool is set draw out a small star shape. If you are happy with this shape you can
leave like it is. To me stars always seemed a bit more diamond shaped so I am going to push in
the horizontal arms using the selection tool.
around the star
the star object.
When altering small objects it is best to get a close up view. Use the zoom tool and draw a marquee
to get a better view of the object you are working on. Then choose the Selection tool but do not select
Just nudge one of the horizontal arms towards the center.
Repeat for the
other side.
Step 8
Convert to Symbol
Now that we have the star in the shape we want we want, we need to convert it to a symbol. Select the shape and choose Modify > Convert to Symbol or F8. Choose Graphic
for the type of symbol and make sure the registration is set to center. Then click OK.
Step 9: Creating the Twinkling Star symbol
We are now going to create another symbol that will actually contain instances of the first symbol. Start by choosing
Insert > New Symbol. Name this symbol twinkleStar and choose Graphic for the Type, then click OK.
This will take you into symbol editing mode. The problem is that we are going to be working with a white star on a
white background. To make it easier to see double click the Frame Rate label in the timeline (see step 2) and
change the background color to something other than white. We need to access our already created starShape
symbol so if the Library isn't already displaying along the right side of the screen choose Window > Library to
open it.
Your library should look much the same as the picture at the right.
Drag one of your StarShape symbols from the Library onto the Stage. Use the Align palette and center the star symbol on the stage by clicking
on the Align to Stage button and choosing Align Horizontal Center and Align Vertical Center.
This forms the first frame of our twinkling Animation.
We are going to create the other stages of our twinklingStar symbol by right-clicking(win) or Cmd-clicking (mac) on the single keyframe in the
timeline and choosing Copy Frames from the resulting context sensitive menu. Then right-click in the empty 10th frame and choose Paste
Frames. Repeat for the 20th Frame.
We now have three key frames in our symbol but... they are all the same. In order to create the twinkling effect we are going to set the opacity of the symbol instance in the first
and 20th frames to 0.
First, select Frame 1 in the timeline. Then select the starShape Symbol on the stage and choose Alpha from the Color drop down box on the Properties Inspector. Set the Alpha
to 0. Repeat this with the Star Symbol on the 20th frame.
At this point your symbol's timeline contains three keyframes. We now need to add a couple of classic tweens to blend
the changes between the 1st, 10th and 20th frames. Insert a classic tween by right-clicking(win) or Cmd-clicking (mac)on
the grey bar between the 1st and 10th frame and choose Create Classic Tween from the resulting context menu. Create a
second classic tween between the 10th and 20th frames.
The twinkling Star symbol is done - now we just have to add a bunch of instances to the background to create our own
starry night.
To return to the main Timeline click on the Scene 1 link at the top of the Timeline.
Step 10: Adding Frames to the Main Timeline:
Because graphic symbols animate within the timeline of the movie they are inserted into we need to add some more frames to our movie or the stars animation won't display. If
they were movie symbols having only 1 frame in the main timeline wouldn't matter however, we wouldn't be able to set the symbols to start on different frames.
On the main 40th frame in the main Timeline, right click (win) or Ctrl-click (mac) and choose Insert Frame. You will need to add frames to layer 1 as well or your background will
disapear after the first frame.
Step 11: Adding twinklingStar Symbol Instances to our Movie
Now all we need to do is add a whole bunch of twinklingStar Symbols to our movie. But... in order for this too look somewhat realistic we need to vary the stars sizes and when
they pulse. The ability to change which frame the symbol animation starts on is the big reason we chose to use graphic symbols instead of movie symbols.
Click and drag a twinklingStar symbol from the Library onto the Stage. With the symbol selected set the following properties in the Properties Inspector. Width & Height, keep
the lock symbol between the sizes to keep the object proportional. For my flash movie I chose to make all the stars between 2 and 6 wide. I know this sounds small but if the
stars are too large they look fake. Then make sure Loop is chosen and give the star symbols you add a variety of first frames. Remember you have 20 frames to choose from. If
you leave them all set to 1 they will all pulse at exactly the same time so give them some variety.
Now repeat for as many stars as you want to add. I find it more realistic if you group clumps of stars together with a few random one scattered about.
Step 11: Save and test your movie
Choose File > Save as to save your movie to your hard-drive. Then choose Control > Test Movie to see how your twinkling star animation looks.