The technique of realizing color changing background in flash

Skills

Effect Introduction:

This example skillfully uses the Flash color object, the frame and the label jumps the technique as well as the function creation method. The result of this example is also very interesting: as long as the mouse gently slide, the background of the animation has changed color; If you jump to a color-changing background Click Mode, you can click the mouse to change the color of the background. OK, let's do the design below.

Demo Effect:

Click here to download Source Files

1. Open Flash MX 2004, as shown in Figure 1, to create a new flash document. Press the shortcut key CTRL+F3 open the Properties panel, as shown in Figure 2, click the Document Properties button to open the Document Properties Panel (accelerator ctrl+j), set the scene size to 255px x 255px, the background color black, and the frame frequency to 12fps.

　　

Figure 1, Figure 2

2. Understand the structure of the middle and frame of the main scene before making it, as shown in Figure 3. This is convenient for future design.

　　

Figure 3, Figure 4

3. Click the Rectangle tool and disable stroke color, as shown in Figure 4. Press the SHIFT key and pull a rectangle in the scene with the left mouse button. Click the drawn rectangle as shown in Figure 5 to set the properties panel so that it covers the entire scene exactly.

Figure 5

Tip: Press the shortcut key ctrl+k to open the "Arrange" panel, click the "Relative Stage" button, and then select the rectangle in the scene, clicking the button in the panel to make the object fast and scene alignment. In the previous step, you can do this by clicking the match height and width, align left, align top three buttons in the panel.

Use the "Arrange" panel can be easy to align objects and other operations, I hope readers can remember ctrl+k this shortcut key.

4. Transforms the rectangle in the scene into a movie clip symbol. Click the rectangle that you just drawn, press F8, and click the "Movie clips" radio button in the "Convert to symbol" Panel, and name it "rectangle." As shown in Figure 6.

Figure 6

5. Click the rectangle movie clip symbol in the scene, and the entity name is set to MC. As shown in Figure 7.

Figure 7

6. Press the shortcut key Ctrl+f8 to create a new button symbol named Move color. In the edit scene of the move color symbol, click the Text tool, and in the up frame, write the word "move mode" four, and the color of the word is yellow. Click the hit frame and press F6 to insert a keyframe. Click the Rectangle tool and draw a rectangle to cover the text in the hit frame.

Note: If you do not set the click area in the hit frame, you will default to text as the selection area, resulting in difficult to click the button. Some text buttons are not easy to click for this reason.

7. Press the shortcut key Ctrl+l open the library panel, right-click the "click Color" button and click "Copy" in the pop-up menu. In the component copy panel that pops up, type click Color, as shown in Figure 8. Then the "Click Color" button "move" Word changed to "click", the other settings unchanged.

Figure 8

Design scene:

1. Double-click the name of Layer 1 in the Timeline panel, and the name of the layer is background. Click the rectangle component in the scene, press F9 to open the Actions panel, and enter the following code:

Move mouse to perform action
Onclipevent (MouseMove) {
Attach the X coordinate of the current position of the mouse to the red parameter of the movie
_ROOT.R = _root._xmouse;
Attach the y-coordinate of the current position of the mouse to the green parameter of the movie
_root.b = _root._ymouse;
_ROOT.G = _root._xmouse+_root._ymouse;
Calling the Mccolor () function
_root.mccolor ();
}

2. Click the 3rd frame of the background layer to press F6 to insert a keyframe. Right-click the "Rectangle" component in frame 3rd, press F9 to open the Actions panel and change the event "MouseMove" in the action Onclipevent to "MouseDown".

3. Click the Insert Layer button in the Timeline panel to add a new layer and modify the layer's name to "Jump". Click on the 1th frame of the layer and write the words "click your mouse" in the upper-left corner of the scene. Press the shortcut key Ctrl+l open the library panel, drag the "Click Color" button in the library to the lower right corner of the scene. As shown in Figure 9.

Figure 9

4. Click the 3rd frame of the jump layer and press F6 to insert a keyframe. In the Properties panel, the frame command is "lable", as shown in Figure 10. Replace the text in the upper-left corner of the frame scene with the word "click your mouse" and substitute the "click Color" button in the lower-right corner to "move the color Change" button.

Figure 10

5. Click the "Color-change" button, press F9 to open the Actions panel, enter the following code.

Click and release the left mouse button to trigger the event
On (release) {
Jump to Label tab
gotoAndStop ("label");
}

6. Click the "Move Color" button, press F9 to open the Actions panel, enter the following code.

On (release) {
Jump to frame 1th
gotoAndStop (1);
}

7. Click the Insert Layer button (icon 7) in the Timeline panel to add a new layer and modify the layer's name to "code". Click the 1th frame of the layer and press F9 to open the Actions panel and enter the following code.

Create a new Color object
ChangeColor = new Color (MC);
Initialize the color parameters of the background component
R = 0;
g = 0;
b = 0;
Create the Mccolor () function
function Mccolor () {
The Setrgb () function sets the color value of the movie, and the color property of the movie is reset within
Changecolor.setrgb (R << | g << 8 | b);
}
Stop ();

Well, the effect here is done. Press the shortcut key Ctrl+enter test the effect. After you finish the effect and fully understand the effect of the code, then design the color-related effect is very easy.