Flash example Tutorial to create the mouse trigger flame effect

This tutorial introduces the use of Flash CS5 to make mouse-triggered fireworks falling interactive effects, mainly with the calculation of mouse following objects to produce a certain pattern of spark effects.

With the mouse on the screen across, you can see gorgeous interactive effects

First, the production of fireworks falling effects

(1) Create a new blank document with a size of 500x300 pixels and a frame frequency of 30fps. Press Ctrl+r to import West Lake night view. jpg file, then set its coordinates to (0,0), as shown in Figure 1, and then add the main document class in the Properties panel using the previous method.

Figure 1 Importing Backgrounds

(2) Press Ctrl+f8 to create a new movie clip (named STAR_MC), enter the editing area of the movie clip, and then hold down the Shift+alt key combination and use the Oval tool to draw a circle at the center point of the movie clip.

Figure 2 Drawing a circle

Tips and hints: The shape's fill color is "radial", the 1th color is (r:255,g:0,b:0), the 2nd color is (r:153,g:0,b:0), the 3rd color is (r:153,g:0,b:0), Alpha is 0%.

(3) Create a new star layer, click the multi-angle Star tool button in the Toolbox, set the tool's parameters in the Properties panel, and then hold down the Shift+alt key combination and draw a star as shown in Figure 3 at the center point of the movie clip.

Figure 3 Drawing a multi-angular star

(4) Use the selection tool to adjust the vertex position of the star shape, as shown in Figure 4.

Figure 4 Adjusting vertices

(5) Select the adjusted multiple-angle star, and then copy in situ, press Ctrl+alt+s to open the Zoom and Rotate dialog box, set the zoom to 40%, and then set its color to white, as shown in Figure 5.

Figure 5 Copying and scaling graphics

(6) Return to Scenario 1, press Ctrl+f8 to create a new movie clip (named MAGIC_MC), and then set the fill type to "radial", the 1th Color (r:255,g:255,b:255), and the 2nd color label (r:255,g:255,b : 204), the 3rd color is (r:255,g:204,b:0), the 4th color is (r:255,g:102,b:0), the 5th color is (r:153,g:0,b:0), Alpha is 0%, then hold down the ALT key while using the "rectangular tool" Draws a rectangle as shown in Figure 6, starting at the center point of the movie clip.

Figure 6 Drawing a rectangle

(7) Use the Freeform tool to select the rectangle, and then press Ctrl+t to open the Transform panel, set the rotation to 45°, and then click the Redo selections and variants button to copy 3 of the graphics, as shown in Figure 7.

Figure 7 Copying a graphic

(8) Copy the 5 graphics and adjust them to the colors shown in Figure 8, then convert the copied graphics to movie clips, and name them 01, 02, 03, 04, and 05, respectively.

Figure 8 Copying a graphic

(9) will be 01, 02, the 03, 04, and 05 movie clips are placed on the 5 keyframes of the MAGIC_MC layer, each of which adds a different glow filter, a new as layer, and then the Stop (): program, as shown in Figure 9, in the action-frames panel.

Figure 9 Applying a filter effect

Create a component class add control code

(1) Add component classes for MAGIC_MC and STAR_MC movie clips in the previous method, as shown in Figure 10.

Figure 10 Adding a component class

(2) Create a new ActionScript file, name it main, and then save it in the folder of the instance, and then enter the control code.

* This class is an extended component class * @author lbynet * @version 0.1 */ Package { Import Flash.display.MovieClip; Import flash.events.Event; public class MAGIC_MC extends MovieClip { private Var Dis:number; Public Function magic_mc () { Init (); } Private Function init () { var Random = 1 + math.round (math.random () *4); This.gotoandstop (Random); This.scalex = This.scaley = Math.random (); Generate random numbers from 5 to 5 random numbers dis = Math.Round ((math.random ()-.5) *10); This.addeventlistener (Event.enter_frame,enterframehandler); } Private Function Enterframehandler (event:event) { This.y + 5; this.x = dis; This.scalex-=.005; This.scaley-=.005; } } }

Tips and Hints:

The 19th and 20 lines of code are to create a random number between 1~5 for the component class, so that the movie clip symbol class moves the playhead to and stops on the specified time frame when instantiated (when it is created).

The Math.random () method produces a random number between 0~1, the Math.random () *4 method returns a random number between 0~4, and the Math.Round () method is rounded up or down to the nearest integer and returns the value, so 1+math.round ( The Math.random () *4) method obtains a random integer value between 1~5, and the gotoAndStop () statement moves the movie clip's playhead to and stops on the specified time frame.

By using the Math.random ()-0.5 method to generate the random number between -0.5~0.5, then multiply by 10 to get the random number between -5~5, You then use the Math.Round method to round and get an integer, so that when the mouse pointer moves from the bottom up, the effect of the spark falling is generated, as shown in Figure 11.

Fig. 11 The effect of spark falling

The 30th line of code is a fixed acceleration in the direction of the y-coordinate of the spark, while the 31st line is the random acceleration between a -5~5 of the spark in the direction of the x-axis coordinates.

(4) Press Ctrl+enter key combination to publish the program.