Night Lights (Basic Scene) Tutorial Author - bedlam123 (http://forums.biorust.com/member.php?userid=5021)

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 8: Select the Brush tool and use it to individually draw the fireworks. Your stroke selection won’t matter because the Brush tool draws fills without line strokes. Use a small brush, and leave it set to the default circular shape. Leave the Brush mode to 'Paint Normal'. If you use a pressure-sensitive graphics tablet there is a small flourish to the right of the Brush mode that will allow you to choose Use Pressure button. Just as a note, Flash tends to make brush lines kind of jittery, so you may want to do without the pressure-sensitive selection. Step 9: Open the Color Mixer, select Radial, click marker #1 and select a red/ Now click the last marker and select a golden-orange, then click just below the gradient line to create a stop about half-way between the first and last stop. Select a violet color. You have just set a three-color radial gradient fill for your first fireworks burst. There is no one way to draw the fireworks bursts. so experiment until you develop a method you think is the most attractive. The ones I have drawn are a series of overlapping, downward-cascading arcs - the gradient is applied to each of the arcs individually... not as a group. This gives the burst a more realistic appearance. Go ahead and create your burst with the brush. Later we will want to convert our burst to a symbol BUT NOT NOW - For the time being, leave them as individual shapes. Select the Arrow tool, select your fireworks and then select Edit > Copy (Ctrl+C). This will copy the entire set of arcs. LOCK THIS LAYER. Create a New Layer, paste the shapes onto the new layer using Edit > Paste or Ctrl+V. Rename this layer Fireworks2. Why are we pasting this onto a separate layer? Fireworks are not all the same color and we will want to change the color of the fill. So, be sure to keep this layer unlocked for now.

Step 10: You should now be on the Fireworks2 layer with the burst still selected. We will change the swatch colors in the Color Mixer panel and the changes will be reflected on this layer. How about #33cc00, #00ccff, and #ffff33? Make a few more copies and change the colors - You could even make some different shape bursts if you desire. We now have the basic scene set. Save this file so that you can work on it again. Step 11: We are ready to convert one of our fireworks bursts to a symbol. But this will be different from the ones we have created previously.

Select the Arrow tool and use it to select all fireworks bursts on a layer. Just as a reminder, ALL layers except the one you are working on should be locked. Go to Insert > Convert to Symbol (F8). Now when the dialog open we will select Movie Clip as the type, name the symbol (I named mine Fireworks1), and click OK. Did you notice something different with this symbol? The shape now has a blue outline. This marks it as a symbol and you will no longer be able to edit the individual pieces. We have to get inside the fireworks symbol to animate it. We can do that by right-clicking on the fireworks and selecting Edit. Your screen will change and you should have a blank stage. The area above your stage is now titled Scene1 and Fireworks1. This lets you know that you are one level deeper and you are now on the stage for your symbol only.

Step 12: The timeline should have only one layer. On the timeline, select the keyframe in frame 1, right-click, and select “copy frame”. Go to frame 12, right-click, and select “paste frame”. Paste the keyframe again on frame 13. This makes it easier to do the second half of our shape tween. Go back to frame 1. Click on the frame, use the Arrow tool and select all of the shapes/fills on the stage.

Use the Free Transform tool and scale the fireworks in the first frame down until it is almost invisible. Select frames 1-12, go to the Properties panel, select Tween > Shape from the dropdown.

Go to frame 1, copy the frame. Go to frame 24, paste the frame. Repeat this process and select frames 13-24, DO NOT SELECT FRAME 12. Apply a shape tween as before. Save your work. Click on the blue arrow in the upper left hand corner of the stage and you will return to the main working area.

Step 13: We need to extend the length of the animation. So go to each layer, copy the first frame and then paste it in frame 48. Step 14: After this simple step you need to animate the opacity of the fireworks burst, so that it will fade in and out as it grows and shrinks at the same time. To do this we will want to extend the timeline on the first fireworks layer, copy frame 1 to frame 24, and copy it to frames 12 and 13. Step 15: Go back to frame 1 and select the symbol for the fireworks burst. Since the burst is so small the easiest thing to do is to make certain that all layers EXCEPT the active layer are on is locked, and then drag your arrow tool across the entire canvas. With the symbol selected look at the Properties tab. There is a dropdown menu called “Color” and by default it should show “None”. Select “Alpha”, before doing this make certain that you are in frame 1. A percentage slider should now be visible. Move the slider to 0%. Step 16: Go to frame 24, on Properties tab select Color > Alpha, 0%. Do the same thing for frames 12 and 13 BUT NOW set the sliders back to 100%. Right-click between frames 1 and 12 and choose “Create Motion Tween”. Do the same for frames 13 to 24.

Step 17: Copy the entire set of 24 frames, and paste in the same layer  after the first to extend it to fill all 48 frames. Now go back and take care of the other fireworks symbols that you made. Experiment with them, making some of them with quicker bursts, some starting a few frames later than the original, etc. You don’t want them to all explode at the same time! As a final touch, go to the Properties tab and, in the Color dropdown menu, find a section called “Advanced”. Using this you can adjust the color of the bursts without your having to make a whole set of new symbols. Just play and see what happens! And there we go!  One scene with repeating fireworks!   This is a basic approach to a simple animation, but it works every time and by following the tutorial to this point you will have learned a great deal about scene construction in Flash.   Keep practicing and even try making your own scenes... then progress onto more intermediate tutorials.