Flash fun Mouse effect big battle

Source: Internet
Author: User
Tags insert
Mouse | Effects from a very early version, using Flash can make a lot of interesting mouse effects, let's revisit, make a few interesting mouse effects.

   first, the realization principle

In fact, the principle of mouse effects are the same, let clip first stop in a frame above, when the mouse is slipping, play the corresponding special effects. A clip looks not good-looking, but dozens of clip placed in the scene, by the size of the winning, mouse trigger play the corresponding effect, it looks quite spectacular.

Here we will implement three different instances, each representing a type of mouse effect.

Ii. Example 1

This example implements the mouse effect on the line transform, and the mouse effects associated with the line transformation are similar to this one.


Effect Preview

   Example 1 source file download please click here.

1, create a new scene, with "Ctrl + F8" to create a new movie Clip, named "Line Elem", in this Clip scene with the drawing tool draw a line.

2, with "Ctrl + F8" to create a new movie Clip, named "Line Elem 2", in this Clip scene with a rectangular tool to pull a small rectangle, adjust the color of the rectangle appropriately.

3, with "Ctrl + F8" to create a new movie Clip, named "line", this Clip timeline of the second frame right click, choose to insert a blank keyframe, the first step of the Clip "line Elem" dragged to the second frame of the scene, and add the following statement above the action panel of the second frame:

Stop ();

4, in the "line" clip the timeline of the third frame on the right mouse button, choose to insert a blank keyframe, drag the clip "line Elem 2" in the second step to the scene in the third frame, select Line Elem 2 in the scene, and set Alpha to "48%" in its property panel. Right-click on frame 50th of the timeline clip and select Insert Keyframe. Click the third frame of the timeline and set a rotating animation on its property panel, as shown in Figure 1. Add the following statement above the action panel on the third frame of the timeline:


Figure 1

This.swapdepths (2); Note 1

Note 1: Set the depth of the instance of this clip to avoid blocking other instances while playing.

Add the following statement to the action panel on frame 50th of the timeline:
gotoAndStop (2); Note 1
_level0[temp] = "0"; NOTE 2
This.swapdepths (1); Note 3

Note 1: After the effect is played, return to the original state.
NOTE 2: Set the variables in the main scene.
Note 3: Reset the depth of the instance of this clip and respond to the mouse action again.

5, back to the main scene of the film, from the gallery to drag 20 "line" clip instances into the scene, adjust their position appropriately. Name the first instance of line clip as "T1" and add the following statement above the action panel of the clip:

Onclipevent (load) {
temp = "T1flag"; Note 1
}
On (rollover) {
if (_root.t1flag = = "0") {
_root.t1.gotoandplay (2); NOTE 2
_root.t1flag = "1"; Note 3
}
}

Note 1: Set the value of the variable to be used in the clip.
Note 2: Play the animation effect of the mouse trigger.
Note 3: Set the variable to stop responding to mouse action when it is played.
Name the second instance of line clip as "T2" and add the following statement above the action panel of the clip:

Onclipevent (load) {
temp = "T2flag";
}
On (rollover) {
if (_root.t2flag = = "0") {
_root.t2.gotoandplay (2);
_root.t2flag = "1";
}
}
Name the third instance of line clip as "T3" and add the following statement above the action panel of the clip:
Onclipevent (load) {
temp = "T3flag";
}
On (rollover) {
if (_root.t3flag = = "0") {
_root.t3.gotoandplay (2);
_root.t3flag = "1";
}
}
......

In turn, do the same for other clip, noting that the instance numbers involved in the naming and variables are changed.

6. The mouse selects the first frame in the main scene timeline and adds the following statement to the action panel:

Stop ();
T1flag = "0";
T2flag = "0";
T3flag = "0";
T3flag = "0";
T4flag = "0";
T5flag = "0";
T6flag = "0";
T7flag = "0";
T8flag = "0";
T9flag = "0";
T10flag = "0";
T11flag = "0";
T12flag = "0";
T13flag = "0";
T14flag = "0";
T15flag = "0";
T16flag = "0";
T17flag = "0";
T18flag = "0";
T19flag = "0";
T20flag = "0";

Remarks: Sets the flag bit for playback and initializes it.

At this point, an example of a mouse effect on the production completed. Press CTRL + F8 to see the effect of the animation, add the clip instance in step sixth to see better results.

Iii. Example 2

This example implements a mouse effect on the location of the clip movement. The mouse movement makes the clip move the special effects, with this instance's production all does not have the difference.


Effect Preview

   Example 2 source file download please click here.

1, create a new scene, with "Ctrl + F8" to create a new movie Clip, named "Arc1", in this Clip scene with the Ellipse tool to draw an ellipse, and fill in the color.

2, with "Ctrl + F8" to create a new movie Clip, named "Arc", the previous step in the "Arc1" Clip dragged into this Clip scene, in the timeline of the first frame of the action panel, add the following statement:

this._x = random (500); Note 1
this._y = random (600); NOTE 2
This._rotation = random (360); Note 3

Note 1:this represents this clip, which sets the x-coordinate of the clip to be a random value.
NOTE 2: Set the y-coordinate of the clip to a random value.
Note 3: Set the rotation direction of the clip to a random value.

3, insert the keyframe above the eighth frame of the arc clip and add the following statement to the action panel of the frame:
Stop ();

4, in the "arc" clip frame 20th above the Insert Keyframe, the scene of the "Arc1" clip to the right to move a distance. Set an animation effect on the property panel of frame eighth of this clip, as shown in Figure 2. Add the following statement above the action panel at frame 20th of the clip timeline:


Figure 2
gotoAndPlay (1);

5. Back to the main scene of the movie, add the following statement to the first frame of the timeline:
Stop ();

6, drag the "arc" clip to the scene and add the following statement to the Clip action panel:
On (rollover) {
This.gotoandplay (9);
}

7, select the scene of the "arc" Clip, the Constant "CTRL + C" and "Ctrl + V", copying many instances out, so that the effect looks more spectacular.

8, the production of examples to this completion, press "Ctrl + Enter" can see the effect.

Iv. Example 3

This example implements the mouse effect on background effects, and the background-related mouse effects are similar to those of this example.



Effect Preview

   Example 3 source file download please click here.

1, create a new scene, with "Ctrl + F8" to create a new graphic, named "Tween 7", in this clip scene with the Ellipse tool to draw a circle, and to fill in the color is light yellow.

2, with "Ctrl + F8" to create a new movie Clip, named "Object", this Clip the first frame of the action panel add the following statement:
Stop ();

3. Right-click the second frame of the timeline in the "Object" Clip, select Insert a blank Keyframe, and the "Tween 7" Clip in the previous step are dragged into the scene of this frame, selecting the "Tween 7" Clip in the scene and setting the argument above its property panel as shown in Figure 3.


Figure 3
4. Right-click the 15th frame of the timeline in the "Object" Clip, select Insert a keyframe, select the "Tween 7" Clip in this frame scene, and set the parameters on its property panel as shown in Figure 4.


Figure 4
5. Right-click the 30th frame of the timeline in the "Object" Clip, select Insert a keyframe, select the "Tween 7" Clip in this frame scene, and set the parameters on its property panel as shown in Figure 5.


Figure 5
6. Right-click the 45th frame of the timeline in the "Object" Clip, select Insert a keyframe, select the "Tween 7" Clip in this frame scene, and set the parameters on its property panel as shown in Figure 6.


Figure 6
7. Right-click the 75th frame of the timeline in the "Object" Clip, select Insert a keyframe, select the "Tween 7" Clip in this frame scene, and set the parameters on its property panel as shown in Figure 7.


Figure 7
8. Right-click the second frame, 15th frame, 30th frame, and 45th frame of the timeline in the object clip, and set the parameters in the property panel above as shown in Figure 8.


Figure 8
9, with "Ctrl + F8" to create a new movie Clip, named "Tracer", this Clip the first frame of the action panel add the following statement:
Removemovieclip (this);

10, back to the main scene of the film, the second step in the production of "object" clip dragged to the scene, named "Object0."
11. Insert a new layer above the timeline of the movie main scene, named "Control", drag the "tracer" clip made in step Nineth to the scene in this layer, name "Follow" and add the following statement to the Clip action panel:
Onclipevent (load) {
ypos = 0; Note 1
xpos = 0;
Xdiv = 0;
Ydiv = 0;
Elength = 0.8;
fluid = 0.04;
_x = _xmouse;
_y = _ymouse;
}
Onclipevent (enterframe) {//NOTE 2
Ydiv = number (Ydiv*elength) +number ((_parent._ymouse-_y) *fluid); Note 3
_y = _y+ydiv;
Xdiv = number (Xdiv*elength) +number ((_parent._xmouse-_x) *fluid);
_x = _x+xdiv;
}

Note 1: Initialize each variable.
Note 2: This function is triggered when the clip is played.
Note 3: Sets the value according to the distance of each clip to the mouse.

12, in the home view of the first frame of the action panel add the following statement:
active = false;
var ypos = 100;
dist = new Array ();
var totalobjects = 50;
function generateobjects () {//NOTE 1
if (mystatus=true) {
startpos = 100;
for (i=0 I
Object0.duplicatemovieclip ("Object" +i, i); NOTE 2
j = i;
K = k+1;
if (j%10 = = 0) {
Ypos = ypos+25;
startpos = 100;
k = 0;
}
This["Object" +i]._x = ((20*k) +startpos); Note 3
This["Object" +i]._y = ypos;
}
Mystatus = false;
}
object._visible = 0;
}
Generateobjects (); Note 4
function Attachline (number) {//Note 5
TotalCount = totalobjects;
For (l=0 L)
Xdist = follow._x-this["Object" +l]._x;
Ydist = follow._y-this["Object" +l]._y;
Dist[l] = math.sqrt (xdist*xdist+ydist*ydist);
This["Object" +l].values = Math.Round (dist[l));
This["Object" +l].gotoandstop (Math.Round (dist[l));
This["Object" +l].swapdepths (Math.Round (dist[l)) *100);
}
}
_root.onenterframe = function () {//Note 6
Attachline (14);
};
Stop ();

Note 1: Define a frame function.
Note 2: Copy a clip.
Note 3: Sets the position of the copied clip.
Note 4: Invokes the previously defined frame function.
Note 5: Sets the individual values for the follow instance.
Note 6: Call the defined frame function.

13, this example to complete the production, press "Ctrl + Enter" to see the effect of the instance.

v. Summary

As you can see from the three examples above, the main point of making mouse effects is only two: one is to make good effects of the clip, only special effects produced, the overall effect looks good; the second is to deal with the scene in the placement, how to pendulum, how many, can change the overall effect.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.