Flash Example Tutorial: Meteor Sky

Create a new movie with a width of 300, a height of 300, and a black background color. Create a new symbol "meteor", use rectangle tool to set stroke color to none, fill color to white, draw a rectangle, and then use Arrow tool to adjust the rectangle border to make it look like the figure. New component "Meteor animation", drag the "Meteor" component from the library to layer 1, set its alpha=0% in the effect panel, create keyframes in 20th, 45, and click Frame 20th to adjust the symbol alpha value to 100%. Adjust the position of the components on the 20th and 45 frames respectively. Creates a motion animation between frames 1th through 20 and frame 20th to 45th.

Figure 1

Create new symbol "flash", use Text tool to enter text Flash, set the font for text on the character panel, size and color (color is set to crimson). Then create a new Flash animation component, drag the "flash" component from the library panel to layer 1, set up keyframes in frame 10th and frame 25th, and in the effect panel, set the Alpha property of the "flash" component on the 1th, 25 frame to 0% and shrink by 50%. Set up motion animation between frames 1th through 10th frame, 10th frame to 25th frame, so as to make a text from scratch, and then gradually disappear animation effect. The same method produces "fireworks animation" and "Dreamweaver Animation" symbols (where the text of the fireworks symbol is blue, and the "Dreamweaver" symbol text is green).

Next is the background of the production, first set up the component "background", using rectangle tool draw a rectangle, in the info panel set its length, width is 300, and then set up "background animation" components, from the library panel dragged "background" components to layer 1, respectively, in the 1th, 25,26,45 frames to create keyframes. In the 1th, 26 frame input stop (), using the effect panel to set 1th, 26 frame symbol alpha value to 0%. Creates a motion animation between frames 1th through 25th, Frame 25th to 40th. Finally, we make the blue, yellow, green Three colors of each button, named "Fireworks", "flash", "Dreamweaver".

Back to Scene 1, drag the "background animation" component from the library to layer 1 and name it on the instance panel: yy. Create a new layer of Layer 2, drag the "Meteor animation" component from the library to layer 2, name it in the instance panel: XX, drag the other components to scene 1 in turn, and arrange them in the diagram. Insert frame at frame 2nd of each layer, create a new layer, and create keyframes in frame 2nd, as shown in Figure 2

Figure 2

Double-click the frame and enter the following as:

if (number (i) >50) {

i = 0;

}//When i>50, i=0

Duplicatemovieclip ("/xx", "xx" Add I, I);

SetProperty ("xx" Add I, _x, random (300));

SetProperty ("xx" Add I, _y, random (300));

Copy the MC with the name XX and use the random function to randomly set its coordinate value

Col = Random (0XAFAFAF) +0x999999;

Get a randomly generated color

Xzcol = new Color (_root["xx" add i));

Xzcol.setrgb (COL);

Assigning a color value to an MC

i = number (i) +1;

gotoAndPlay (1);

Grammar knowledge:

Random () function: Random is a fairly widely used function in ActionScript, which is to get 0 to an arbitrary integer between the specified integers. Using it, we can solve a series of effects, such as random display, random moving and so on. Is the basis of complex animation, the flexible application of random functions, we solve many practical problems, create a wonderful effect of the premise. Let's take a look at its syntax:

Random (value);

Parameters

Value: The upper bound of the generated random integer

Instance

The value returned by random (4) may be 0,1,2,3

New color () function: New color () is an object-oriented color function that must use the constructor new color () to create a color object before using a Color object

Instance. Syntax for new color ():

New Color (target)

Parameters

Target is a movie clip that uses this color scheme

Setrgb () function: Setrgb () is also an object-oriented color function that can specify an RGB value for a color object. Grammar:

Xxx.setrgb (0xRRGGBB)

Parameter 0xRRGGBB sets a 16-in RGB value, each of which is a rr,gg,bb of 16, used to specify the color, and 0x indicates the number is 16.

Instance

Xxx.setrgb (0x006699)

Why do you want to add as on frame 2nd? Because we know that every meteor is going to be there for a while, not all at once in the sky, so we should think about that when we make it. Let's take a look at the animation process, when playing to frame 2nd, copy a meteor element, then play the first frame, when playing frame 2nd again, copy a meteor element. That is, there is a frame interval between each copy, which results in a meteor-by-individual effect. Through the above operation, we have completed the production of meteor shower. As shown in Figure 3

Figure 3

Next we will learn how to control background color changes and other techniques on the basis of the previous.

First come to SCENE1, the new component is named "Synthesis", put the text you need in the first frame, I put in here is "Blue ideal 2 Anniversary", you can write your own free text to replace it, in the frame panel to set the first frame lable as: A, double-click this frame, Enter as follows:

Stop ();

j = 61;

h = 74;

K = 83;

In frame 2nd, the frame lable is set up, in the frame panel, the frames are: FW, drag the Fireworks animation component from the library to this frame, and set its Name property to "Fireworks" on the instance panel. Insert Blank keyframe in frame 7th and enter As:stop ().

To build a keyframe in frame 8th, frame lable for this frame in the frame panel is: DW, drag the "Dreamweaver Animation" component from the library to this frame, and set its Name property to "DW" on the instance panel. Insert Blankkeyframe in frame 14th and enter As:stop ().

Set up keyframes in frame 15th, frame lable for this frame in the frame panel: FL, drag the Flash animation component from the library to this frame, and set its Name property to "FL" on the instance panel. Insert Blank keyframe in frame 23rd and enter As:stop ().

Create a new layer and build keyframes in frame 6th. Enter as follows: if (number (j) >66) {

j = 61;

}

Duplicatemovieclip ("Fireworks", "fireworks" add J, J);

SetProperty ("Fireworks" add J, _x, Random (500)-300);

SetProperty ("Fireworks" add J, _y, Random (500)-300);

SetProperty ("Fireworks" add J, _xscale, Random (40) +100);

SetProperty ("Fireworks" add J, _yscale, Random (40) +100);

j = Number (j) +1;

gotoAndPlay ("FW");

Build keyframes in frame 13th. Enter as follows:

if (number (h) >80) {

h = 74;

}

Duplicatemovieclip ("DW", "DW" add h, h);

SetProperty ("DW" add h, _x, Random (500)-300);

SetProperty ("DW" add h, _y, Random (500)-300);

SetProperty ("DW" add h, _xscale, Random (40) +100);

SetProperty ("DW" add h, _yscale, Random (40) +100);

h = number (h) +1;

gotoAndPlay ("DW");

Build keyframes in frame 22nd. Enter as follows:

if (number (k) >89) {

K = 83;

}

Duplicatemovieclip ("FL", "FL" Add K, k);

SetProperty ("fl" Add K, _x, Random (500)-300);

SetProperty ("fl" Add K, _y, Random (500)-300);

SetProperty ("fl" Add K, _xscale, Random (40) +100);

SetProperty ("fl" Add K, _yscale, Random (40) +100);

K = number (k) +1;

gotoAndPlay ("FL");

Through the previous study, each of the above paragraphs as everyone should not ugly understand, and no new syntax appears, so I will focus on the meaning of doing so. First, the film will still be in the first frame, in the back of the first frame we have set up 3 frame lable, and each frame lable has a stop () command that stops the MC playing. In fact, the purpose of this is to divide the MC into 3 paragraphs, each paragraph is a different content. It is the triggering event that determines the content of which section is played. The time axis of this MC should be as shown in the figure. Let's take a look at how to set up the triggering event.

Go back to Scene1, create a new layer, drag the "composite" component from the library to the stage, and set its Name property to the instance panel: ZZ. Remember the "background animation" component we made in the previous section, where you should make sure that the "background animation" component is at the bottom of the layer and that the "composite" component is at the top of the "background animation" layer in the scene. You can do this by dragging layer on the timeline.

Finally create a new layer, the name "Fireworks", "flash", "Dreamweaver" three buttons dragged to this layer. and use the Transform tool and the rotation tool to adjust their position and size.

Right-click the Fireworks button, select Actions from the pop-up menu, and enter the following as:

On (rollover) {

Colx = +0x000099;

Xzcol = new Color (_root["yy"]);

Xzcol.setrgb (Colx);

Telltarget ("yy") {

gotoAndPlay (2);

}

Telltarget ("zz") {

gotoAndPlay ("FW");

}

}

On (release) {

Telltarget ("zz") {

gotoAndPlay ("a");

}

Telltarget ("yy") {

gotoAndStop (1);

}

}

From this as, we can see that when the mouse is over the "fireworks" button, the event is triggered, and the Name property for ZZ's MC will jump to the frame lable property is the one that the FW starts playing. The "Background animation" (in the previous section "Background animation" component is specified with the name attribute of yy) is also set to a new color and starts playing. We can also add similar as to the other two buttons according to the above as, and note that the gotoAndPlay ("FW") is replaced by the FW in the respective FL and DW.

Finally, let's look at some flash tips on color control.

You know there is a effect panel in Flash, you can adjust the color and transparency of the component instance. The Advanced (Advanced) settings option allows for advanced color and transparency settings, and is very powerful. And in the Flash5 action we can also use the Color object to the film pieces of the complex color control, in fact, through the effect panel to achieve the specific function of SetTransform (txform).

Txform is an object that contains members: RA (red ratio), GA (green ratio), BA (blue ratio), AA (transparency ratio), RB (red added value), GB (green added), BB (blue Value added), AB (transparency added value). They correspond to each value in the Effect-advanced settings box (the ratio to the left and the value added to the right). You can use the GetTransform () function to get the current color properties of the movie fragment, the Txform object. In the initial state, the ratio is 100 and the added value is 0.

For example, to set the color of a component to a pure red 0xff0000 (regardless of what color it turns out to be), or some other color (such as a yellow 0xffff00), make it the original color ratio of 0, with this color attached. So you can set Ra,ga,ba to 0, RB to 0xFF, GB,BB to 0, so you can get a pure red effect. Yellow is the same, as long as the GB also set to 0xFF on the line.

If you just need to get a solid color, don't bother settransform function, just use the SETRGB (RGB) function is enough. RGB is the color you want to set, such as the pure red 0xff0000 used in front of you.

However, in practice, it is often necessary to make a certain degree of change on the basis of the original color, rather than just a solid color. For example, to carry out a certain color balance, brightness adjustment, contrast adjustment and saturation adjustment and so on, then we must use a much more complex settransform function.

A syntax instance of a SetTransform function:

col = new Color (a);

Col.settransform ({ra:-100,ga:-100,ba:-100,rb:255,gb:255,bb:255});

Because the SetTransform function is more complex, we do not explain it in detail, and interested readers can study it by themselves.