If you have been through our basic tutorials and are looking for something a
little bit more advanced, then this tutorial may be right up your alley!
Taking a very basic static skyscraper scene, we add simple fireworks on a permanently
looping basis. It won't win you any awards, but its an ideal introduction into
more advanced topics such as scene construction, and will get you well on the road to the 'intermediate'
skill level.
Step 1: Open Flash and create a new document. Select Modify > Document (Ctrl+J), select a dark blue background color,
and change document size to 320w X 240h. Leave your frame rate at 12 fps.
Our skyline will consist of black blocks randomly placed on the stage. They
should be of different heights and widths. Select the Rectangle Tool, set stroke and fill to black, or turn off stroke
and leave fill at black. The Timeline should indicate that you are on the
first layer.
Drawing basic shapes is easy - all you really need to do is point, click, and
drag. Release the mouse when the rectangle is at the desired size. Be sure
to overlap your shapes. It does not matter if the shapes go beyond the edges
of the canvas, as they will not show when you export your movie.
Step 2: Create your building silhouettes using rectangles of varying heights and sizes.
Experiment until you get the look you want. Rename the layer silhouettes. Click the small dot in the “lock” column of Layer 1. This will prevent
any accidental changes from taking place. Add a new layer by clicking the graphic in the lower left hand corner of
the layer list. It looks like a small sheet of paper with a “+” sign over
it. We are going to add windows to the building on this layer. Rename the
layer windows.
We will use gradient fills to draw our windows. I used a pale yellow to
white gradient. The way you use gradient fills is not really any different
than in Photoshop, Illustrator, or many other drawing/painting programs. You
adjust the way your gradient blends by moving the sliders, change the colors
by clicking on the markers for them, and then adjust the colors using the
picker.
Step 3: Select Window > Color Mixer (Shift+F9), open the Color Mixer tool panel and
select Linear. Create a gradient fill beginning with a pale yellow and
ending with white. Click marker 1, click color square, choose pale yellow (I
selected #FFFFCC). Now click marker 2, and select white. Zoom in on the canvas if you want. Draw a small rectangle anywhere on
Layer 2 by clicking on the Rectangle Tool. Make certain that your Stroke
color is set to No Stroke. We will use only one size rectangle for all of
the windows.
All of the windows will be the same size so instead of drawing windows
individually we will convert the graphic into a symbol that can be dragged
and dropped onto the canvas as needed. To do this, click the Arrow tool and select the window graphic you just drew via Edit > Select All. Now go to
Insert > Convert to Symbol (F8 shortcut). Name the symbol “Window”, set type to
Graphic and click OK. Open the Library Window by selecting Window > Library or
via the shortcut key F11. Your
symbol is now listed in your Library. Clicking the graphic will bring up a
thumbnail view in the Library window. From the Library window you can drag
and drop the graphic to anywhere on your canvas. Drag and drop and scatter the windows, don’t be too fussy aligning them.
Remember that
some windows will be dark as no one is at home. Now lock this layer.
Step
4: No skyline would be complete without a moon, so let’s create that next.
Create a new layer and rename it moon. Select the Oval tool, choose
'No Fill'
for the Stroke. Again we will use a gradient, so select Radial and
set the gradient to pale grey and white. Hold shift as you drag to
form a perfect circle. Then move the moon layer below the windows and
silhouettes layers. Lock up this layer.
Step
5: Create a new layer. Rename the layer Stars. Our stars will go
on this layer. Drag this layer underneath the first layer, so that way no
matter where you place the stars when finished they will still be in the
background of the city skyline.
Select the Oval tool, turn off stroke/outline, hold down shift
key and drag to draw a gradient-filled circle. Go ahead and make it large so
you can see your shading - you can always scale it down later. Zoom in, if
that works for you. The color I selected is pale blue to white. The opacity
of your fills or strokes can be controlled through an option on the Color
Mixer that is called Alpha; when it is selected for a solid fill,
changing it will affect the entire section colored by that fill. A gradient
fill however will affect the opacity of opposite ends of your gradient
spectrum, making a fade-in or fade-out type effect. In order to make
the faded effect, select the color block marking the white end of the
gradient, and then use the Alpha slider and set the opacity to 0%.
The circle of your star should now fade out towards the edges. Select the
Free Transform Tool and scale your star down to the size you want. Convert
your star to a graphic symbol. Do you remember how to do that? If you have
forgotten, you can do it by selecting the Arrow tool, Edit > Select All,
Insert > Convert to Symbol, naming it (I named mine star1),
choosing Graphic for type, and then copying it onto your canvas
repeatedly by dragging and dropping multiple instances and putting them
where you want them. Got that? Hope so! ;) Now
lock this layer.
Step
6: After looking at the background, it just does not seem quite right. To
make it more realistic use a gradient. I added a new layer, selected the
Rectangle Tool and placed a square the size of the background on stage. I
elected to use colors in a gradient from dark blue to a mid-blue which goes
from top to bottom. I then selected the Fill Transform Tool.
At this point, you might want to go back and take a look at your layers
and give them appropriate names and make certain they are locked, if you
have not done so already.
Step 7: Now onto the real meat of this tutorial. Create a new
layer that we will use for fireworks.
THEORY:
The Brush Tool draws fills without line strokes, so it does not matter what
color your stoke is set to. A number of settings are available for the
brush tool; the two main dropdowns let you select the brush size, and shape.
The button to the top left sets the brush mode; the default, Paint Normal,
draws normally. You can use the dropdown button to show the different Paint
Fills. Use should take a moment to see how each one of them works.
Step
4: No skyline would be complete without a moon, so let’s create that next.
Create a new layer and rename it moon. Select the Oval tool, choose
'No Fill'
for the Stroke. Again we will use a gradient, so select Radial and
set the gradient to pale grey and white. Hold shift as you drag to
form a perfect circle. Then move the moon layer below the windows and
silhouettes layers. Lock up this layer.
Step
5: Create a new layer. Rename the layer Stars. Our stars will go
on this layer. Drag this layer underneath the first layer, so that way no
matter where you place the stars when finished they will still be in the
background of the city skyline.
Step
6: After looking at the background, it just does not seem quite right. To
make it more realistic use a gradient. I added a new layer, selected the
