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

Our previous Night Lights tutorial created a pretty basic scene that used graphics to depict the individual fireworks.  This approach works, but far more spectacular results are obtainable using a combination of both animation and ActionScript programming. There are a lot of steps, but none of them are difficult.
 

Let’s start by opening the file that we created at the end of the original Night Lights tutorial.  If you have not completed that tutorial, just download the completed source file from here, and open it up in Flash. Our previous graphics-based scene. Creating Our Beam Step 1: Delete the fireworks, fireworks2, fireworks3 layers from your document. In my example I created three fireworks layers, but if you forged on yourself and made more, then delete these too, as we won’t need them.

Step 2: Choose Insert > New Symbol from the main menu (Ctrl+F8), select a 'movie clip' behaviour, name it myBeam, and click OK. You should no  longer be working on the main timeline but in a totally separate area just with your new symbol.   Change the zoom factor to 800% and create a small black circle (approximately 7 pixels across) with no stroke (just fill) on the registration point. Use the horizontal scrollbar to scroll to the registration point and adjust it so it is to the left side of your screen. Select the circle and choose Insert > Convert to Symbol (F8). Name it Dot. The Behavior type should be Movie Clip.  Click OK.

Step 3: Insert a keyframe (F6) in Frame 4. Click Frame 4 and move Dot about 6 pixels to the right. Select Frames 1 through 4 and choose Motion from the Tween drop-down list of the Property Inspector (Window > Properties). Step 4: Insert a keyframe in Frame 5. Delete Dot. In its place, draw a rectangle with a fill only, about 16 pixels wide and 2 pixels high. Choose Insert > Convert to Symbol and name it Ray. Set the Behavior type to Movie Clip, and click OK. Step 5: Insert a keyframe in Frame 12. Click Frame 12 and move Ray almost to the right side of the screen (at 800% zoom). Use the Free Transform tool to make the rectangle narrower, about 9 pixels. Select Frames 5 through 12 and click Motion from the Tween drop-down list of the Property inspector. Step 6: Insert a keyframe in Frame 13, move Ray 15 pixels right and make it 4 pixels narrower. Insert keyframe in Frame 14, move Ray 30 pixels right and make it 2 pixels narrower. You should now be at about the middle of your screen. Don’t worry if you aren’t at the middle, this is just an approximation. Step 7: Insert a keyframe at Frame 15. Delete the rectangle and in its place draw a “sparkle”. To draw a “sparkle” create two rectangles, no stroke, any color. We will align these rectangles at 45 degree angles to each other choosing Modify > Transform > Scale and Rotate. Select one rectangle and rotate 45 degrees, select the second rectangle and rotate -45 degrees. Now place one on top of the other and choose Insert > Convert to Symbol and call it Sparkle. The behavior type is Movie Clip. Click OK. Step 8: Insert a keyframe at Frame 50. Click Frame 50 and move “Sparkle” horizontally to the right side of your screen. Select the frames and from the Property inspector choose Motion Tween. Click Scene 1 at the bottom of the timeline to return to the main Timeline. Adding ActionScript ActionScript will control the colors, beam length, and overall size of the firework. It will also make the fireworks twinkle and fade out. Step 9: Choose Insert > New Symbol. Make it a movie clip, name it firework, and click OK. From the Library (Window > Library), drag in an instance of myBeam. In the Property inspector, type myBeam1 in the Instance Name text box. Step 10: Open your Actions panel (F9). On the right hand side of the panel is a blue arrow that appears to be on top of a sheet of paper. Click and make certain you have selected Expert Mode for your viewing choice. Now insert a layer named actions in the timeline. Add a keyframe in Frames 2 and 3. In the first keyframe, type or paste in the following ActionScript. You can find a copy of this in Frame 1 of the firework symbol of the source .fla I have provided:   //This action script duplicates the symbol instance myBeam1 //and rotates it to appear as the firework. It randomizes the //overall size of the firework, as well as the individual beam //lengths. It also randomizes the color of each firework. //Initialize variables i=0; //Cf is the variable that counts the frame and aids in setting //the alpha value so that the fireworks twinkle. cf=0; //Number of beams regulates the fullness of each firework. numberOfBeams=40; // Random sizes are set for a single firework on the screen myScale = 20 + Random(80); //Make the instance, myBeam1, visible. This is necessary because //myBeam1 gets set to invisible below. setProperty("myBeam1",_visible,true); // A maximum random sizes is set for the next firework on the screen xyscalevar = 20 + Random(80); //Randomize the color of the next firework colorArray=["FF","00","33","99","66","CC"] myColor=new Color(myBeam1); myColor.setRGB("0x"+colorArray[Random(6)]+colorArray[Random(6)]+colorArray[Random(6)]); // The following lines create the firework from a single beam // and give each beam a random length which does not excede the maximum size // set by the variable xyscalevar above do { duplicateMovieClip("myBeam1","beam" add i,i); setProperty("beam" + i,_rotation,random(360)); setProperty("beam" + i,_xscale,myScale+random(myScale)); setProperty("beam" + i,_yscale,myScale+random(myScale)); i = Number(i) + 1; } while (Number(i)<=numberOfBeams ) //Make the instance, myBeam1, invisible. This is necessary //because myBeam1 was never resized for this particular //firework and it would look odd if it were visible. setProperty("myBeam1",_visible,false); Step 11: In Frame 2, type or paste in the following ActionScript. It is also located in Frame 2 of the firework symbol of my source .FLA: //This action script assigns the alpha value so that the //fireworks twinkle. It counts the frames and assigns //new alpha values depending on which frame the movie is in. //Some beams do not twinkle at all. //increment the frame counter. cf=cf+2; //When the frame counter = 80, start a new firework. if(cf>=80) {gotoAndPlay(1);} //Set the new alphas for the twinkle. Don't twinkle until after //the tenth frame. if(cf>=10) { setProperty("beam" + ((cf/2)+1),_alpha,75); setProperty("beam" + ((cf/2)+2),_alpha,50); setProperty("beam" + ((cf/2)+3),_alpha,25); setProperty("beam" + ((cf/2)+4),_alpha,0); setProperty("beam" + ((cf/2)+5),_alpha,25); setProperty("beam" + ((cf/2)+6),_alpha,50); setProperty("beam" + ((cf/2)+7),_alpha,75); setProperty("beam" + ((cf/2)+8),_alpha,100); setProperty("beam" + ((cf/2)+9),_alpha,75); setProperty("beam" + ((cf/2)+10),_alpha,50); setProperty("beam" + ((cf/2)+11),_alpha,25); setProperty("beam" + ((cf/2)+12),_alpha,0); setProperty("beam" + ((cf/2)+13),_alpha,25); setProperty("beam" + ((cf/2)+14),_alpha,50); setProperty("beam" + ((cf/2)+15),_alpha,75); setProperty("beam" + ((cf/2)+16),_alpha,100); setProperty("beam" + ((cf/2)-1),_alpha,75); setProperty("beam" + ((cf/2)-2),_alpha,50); setProperty("beam" + ((cf/2)-3),_alpha,25); setProperty("beam" + ((cf/2)-4),_alpha,0); setProperty("beam" + ((cf/2)-5),_alpha,25); setProperty("beam" + ((cf/2)-6),_alpha,50); setProperty("beam" + ((cf/2)-7),_alpha,75); setProperty("beam" + ((cf/2)-8),_alpha,100); setProperty("beam" + ((cf/2)-9),_alpha,75); setProperty("beam" + ((cf/2)-10),_alpha,50); setProperty("beam" + ((cf/2)-11),_alpha,25); setProperty("beam" + ((cf/2)-12),_alpha,0); setProperty("beam" + ((cf/2)-13),_alpha,25); setProperty("beam" + ((cf/2)-14),_alpha,50); setProperty("beam" + ((cf/2)-15),_alpha,75); setProperty("beam" + ((cf/2)-16),_alpha,100); } //Gradually fade the firework out in the last twenty frames. //Initialize ii. ii=0; if (cf>=61) { myAlpha=100-((cf-61)*4); do { if(getProperty("beam"+ii,_alpha)>=myAlpha) { setProperty("beam" + ii,_alpha,myAlpha); } ii = Number(ii) + 1; } while (Number(ii)<=numberOfBeams ) } Step 12: In Frame 3, type or paste in the following ActionScript. It is located in Frame 3 of the firework symbol. gotoAndPlay(2); Positioning the Fireworks Step 13: Click Scene 1 to return to the main timeline. Insert a new layer and call it actions. Add one more layer and name it fireworks. Step 14: Before going any further, let’s adjust our layer order. The 1st layer is fireworks; 2nd is windows; 3rd silhouettes; 4th moon; 5th stars; 6th background; and 7th actions. On the fireworks layer, click Frame 1. Drag in an instance of firework from the Library onto the stage. Step 15: We now want to place keyframes in the timeline for every burst of fireworks that we want in our animation. Insert keyframes in Frames 8, 14, 24, and 36 (the exact frame numbers are not important). Click each keyframe and drag in an instance of firework to a different location on the Stage. On the actions layer, insert a keyframe in Frame 38 (the same last frame number of the fireworks layer). Type or paste in the following ActionScript: gotoAndPlay(37); Step 16: Choose Edit > Document. Change the frame rate to 24 frames per second.

And there we go!   One scene with more advanced fireworks!   This is a simple scene, and as such can be easily understood and manipulated.  Keep practicing and playing with the actionscript to learn how it works.  Its completely logical, although its depth can be as confounding as any other programming language.  That said, you have made your first footsteps into more advanced subjects.  Well done!