/uploadpic/2007-7/200778121342190.swf
(Figure 1)First, introduce the various parts of the website
1. Background music player
2. Fast navigation stop
3 content display Stop message book
4.
Update journal MP3 download area My Music Room JE Room EMAIL links
5. The protagonist and some scattered small columns
The above is the basic part of the site street, anyway very messy, browsing the web site is not careful words, can not find good dongdong AH
After understanding the introduction of the production process pull! , the following code are some of the old writing, obviously some fat hehe!
The player has four parts, from left to right, the play button, the stop button loads the movie clips for the external SWF (the instance name is player), and the menu button.
There are 5 songs in the background music player
We can't put all 5 songs in this street Flash, because then the site's loading time is too long, the 5 songs into 5 swf files, for external loading
Click on the green up arrow on the far right of the player to pop up the song menu bomb
In fact, the arrow is a movie clip that contains a button and an animated piece of the dish (Figure 2)
Place the green button at the first frame and the frame action to stop and write the code on the button
On (release) {When the button is pressed, it jumps to frame 5th.
The 5th frame is the choice of background music menu animation, then you can select the song name button to load external music
The code to load the external SWF is:
Loadmovie ("url", level/target[, variables])(Figure 2)
If clicking on the leftmost play button will reveal that it is randomly playing any of these 5 songs, how does this actually
Now, in fact, just add the random code on this button:
On (release) {
The code is interpreted as: When the button is pressed, set the variable AA as a random integer between 0~5
If AA equals 0, the external SWF file named "Comb" is loaded into a movie clip with the instance named player and played.
This analogy when a AA equals 1 loads the second head ...
About Random:
Random (value)Value is an integer.
function; Returns a random integer that is between 0 and the integer specified in the value parameter minus one.
Click on the green Square (stop button). The song will be stopped.
It's actually adding code to the button:
On (release) {The code is interpreted as: Uninstall when the button is pressed, the SWF movie inside the player
About Unloadmovie:
Unloadmovie[num] (level/"target")Level to load the movie (_leveln). When you uninstall a movie from one level, in standard mode, the Unloadmovie action in the Actions panel switches to Unloadmovienum, and in expert mode you must specify Unloadmovienum, or select it from the Actions Toolbox.
The destination path for the target movie clip.
Action; Deletes a loaded movie or movie clip from Flash Player. To uninstall a movie that has already been loaded into the Flash Player level, use the levels parameter. To uninstall a movie clip that has already been loaded, use the target parameter.
The player part is finished.
The entire shortcut navigation bar is a film clip, and then in the navigation of the film clips, and then points to connect to the block object, practice similar to the above the player's menu production (Figure 3), no block in the time section, only need to modify the connection on it
You can make the menu display to the effect you want, but don't forget to add the Stop action code
Said that the streets are actually all parts of the site links, but are graphical, control the protagonist in the street Walk, and then click on the street building into the page to connect, a bit of game nature.
First of all, to draw the street, to play their own imagination, and then put all the prior painting of the building stacked up, became a street map (4)
(Figure 4)
Then put a link button on each symbolic building, such as making a "Je House" of a red-roofed house.
At the door of the house with the invisible button, used to connect to the "Je Room" this page (Figure 5)
(Figure 5)
If you want to make a connection to the mailbox, add a Stealth button to the screen of the mailbox and add code:
On (release) {Zhaoyi19801@sina.com is my own email address, can be changed.
Other buildings can be connected according to their own preferences.
There's also a big picture of a character conversation on the street (Fig. 6)
(Figure 6)
The only way to achieve this effect is to create a movie clip, place an instance name (CZSM) in the home scene, put the conversation content of the person and the large avatar in it, and separate it for Code control calls (Figure 7)
(Figure 7)
The dialogue between the figure and everyone is divided into a good arrangement
You can then click on the button on the person's body to pull up the dialogue with each person's animation, such as to the street with the MC l-j dialogue, first in LJ's body with the stealth button to invoke the second segment of the animation code (Figure 8):
On (release) {Code Explanation: When the button is pressed, specifies that the instance named "Czsm" (a previously done movie clip that shows everyone a conversation) jumps to frame 50th and runs, and frame 50th is an animation of the dialog with MC-LJ (Figure 9), which results in a different picture of the conversation with everyone (Figure 10).
(Figure 8)
(Figure 9)
Add code on this button frame 50th is the content of the dialog with MC-LJ
(Figure 10)
Click on Mc-lj and then talk to LJ
Careful people will find that during the day browsing the site and browsing the site at night, the picture will be different (Figure 11) (Figure 12), when the day to enter the site, the sky is blue, but also can hear the voice of the car dealership, a night in the sky hung the moon, very quiet appearance, some things only at night to see, How is this approach implemented?
(Figure 11)
(Figure 12)
In fact, this approach is to use the Date object to read the browser's system time to achieve, according to the system time to decide to display the day or night pictures
First take the background blue sky and moonlight To do an example:
First, the background, the background is a movie clip. A total of two frames, the first frame for the day (blue sky) image, the second frame for the Night (moonlight) image. After you do this, just add the following code to the movie clip:
Onclipevent (load) {Code interpretation: First create a Time object (date) object to read the browser's system time, if the time between 6 o'clock and 18 o'clock is the daytime time, the movie clip jumps to have the day frame and stop.
Otherwise (else) jumps and stops the frame that has the night screen as the night. Such a painting, it is not easy to achieve the effect is not very simple, the use of this code can also achieve a lot of results, as pictured above, there is nothing on the wall during the day and the Mc-je is standing under the wall, one night to browse, on the wall will appear a blue-colored silly cat, the wall below the station people replaced by the Arabs, the production method:
Put Mc-je and Arabs into a movie clip frame 1th to 20th, place Mc-je Frame 25th to 65th for Arabs and Cats (Fig 13)
(Figure 13)
Then add the above code to the movie clip to achieve the effect.
In fact, the night on the wall of the cat is a small game, when clicked on the cat it will be called to jump into the air, if it has not landed in the case to click it again, it will be two jump, under it will be recorded at the same time, to see who clicks the most times, if the cat on the ground, the number will return to zero, Here is a little game of the specific production method:
1. Make a movie clip of the cat first, 1 to 20 frames picture the cat moving around the screen, then set a variable hit=0 in the first frame (Figure 14), 25 to 33 frames the picture the cat jumps (Figure 15), 35 to 43 frames to do the cat the 2nd time to jump the screen (Figure 16)
(Figure 14) (Figure 15) (Figure 16)
2. The game mainly by the cattle to achieve, and then start making buttons. The first step is to add an invisible button to the section where the cat is moving (Figure 17). Add action code:
On (release) {Code Explanation: When you press this button, jump to frame 25th and run (frame 25th is the first time the cat jumps the screen, so click the second button the cat will jump up)
(Figure 17) (Figure 18) (Figure 19)
The second step is to achieve the cat's two jump, in the cat jumps that part, and then add as a stealth button (Figure 18), and add action code:
On (Press) {Code Explanation: When the button is pressed to go to the 35th frame and run, (35 frames is the cat two stage jump screen), variable hit 1 (in fact, is the combo number +1)
The third step is to achieve in the two-hop cat under the Count display, first to draw a text box, and then set the dynamic text, and then the text box to set the output variable to hit (Figure 20), so that the text box will display the value of the variable hit.
(Figure 20)
Then this click on the cat's little game is done.
When browsing the website, the visitor points the mouse to control the protagonist to walk, realizes each part the link, below said how realizes after clicking the mouse protagonist moves the technology.
First of all, the main character film clip's internal structure is arranged:
1th frame The protagonist standing motionless screen (Figure 21)
5th to 15th frame of the scene when the protagonist walks (Figure 22)
25th to 34th frame the scene of the running time (Figure 23)
The main character's internal structure has been arranged, then we have to do the code part.
Before writing the code, set up a few initial variables to add to the movie clip of the protagonist:
Onclipevent (load) {Code Explanation: Set the main character's moving speed is 5, the protagonist's movement range, the top boundary is 290, the bottom boundary is 335, the left boundary is 80, the right boundary is 450
(Figure 21) (Figure 22) (Figure 23)
To continue adding code:
Onclipevent (MouseDown) {Code explanation: When the mouse is pressed. Set the value of the variable XX to the current mouse x axis value, set the value of the variable yy is the value of the current mouse Y axis (in fact, when the mouse is pressed when the coordinates of the current mouse is locked). If the mouse double-clicks, the movie clip jumps to frame 25th and runs (the frame that has the run action), otherwise jumps to frame 5th and runs (the frame segment where the move is moving)
About the mouse double click event Mouse.doubleclick () is described in the "making part of my Music room".
Onclipevent (MouseDown) {Code Explanation: This code is to control the main character of the left and right face, specifically as follows, if when the mouse is pressed, the X axis position of the mouse (variable xx) is greater than the position of this movie clip (protagonist), then set the protagonist face to the right and set another variable _ROOT.F 1, otherwise set Variable _ROOT.F 2, The protagonist is set to face to the left, in the future judgment, if _ROOT.F equals 1, it means the main character facing the right, _ROOT.F equals 2, the main character is facing the left.
The script code on the lead movie clip is finished, and then double-click the internal script to edit the movie clip
First, write the code for the Walking section:
if (_x<_root:xxx) {Code explanation: When the main character's X axis is within the right boundary (_root.xxx), it goes into the curly braces to continue executing the program, when the protagonist's X axis is smaller than the mouse's x-coordinate, the protagonist movie Plus (move to the right) _root.speed value, (_ Root.speed is the initial speed variable to start setting is 5)
When the main character's X axis is within the left boundary (_ROOT.XXS), it goes into the curly braces to continue executing the program, when the main character's X axis is larger than the mouse's x-coordinate, the protagonist movie is subtracted (move left) _root.speed value.
When the main character's Y axis is within the lower boundary, it goes into the curly braces to continue executing the program, when the main character's Y axis is larger than the mouse's y-coordinate, the actor's movie minus (moving up) _root.speed half (_root.speed/2=2.5)
When the main character's y-axis is within the upper boundary, then continue to execute the program, when the main character's Y axis is smaller than the mouse's y-coordinate, the protagonist's film Plus (Move Down) _root.speed half (_root.speed/2=2.5)
After writing the code, insert the above generation into the frame of the Walking section (Figure 24).
(Figure 24) (Figure 25)
Next, write the code for the running section:
if (_x<_root:xxx) {This code and walking part of the code is basically the same meaning, but is to speed up the pace of walking, (_root.speed*1.5), the pace of walking by 1.5, that is, the speed of the run is 1.5 times times the original speed, if the speed of running faster point can modify these parameters.
After you write the code, insert the inside frame of the running section (Figure 25).
Well, the protagonist of the march of the control of all written well, try the effect is not bad Oh!
When the protagonist moves, when the protagonist goes to the far right or left, the street will move along with the protagonist's movement, the following is a description of the steps to make a street scroll
First of all, putting everything on the street into a movie clip is a street, then give the street an instance of "streets", and also do two stealth video clips used for collision detection, one on the left side of the scene, one on the far right, the instance named "R", "L" (Figure 26)
(Figure 26)
These two stealth movie clips are used to trigger street movement events, and when the protagonist collides with the movie clip "R" on the right, the street moves to the left, hitting the movie clip "L" on the left, and the street moves to the right-hand side to achieve the desired effect. In this case, you must add a new action script under the leading character walking and running code:
if (This.hittest (_ROOT.R)) {Code Explanation:
If this movie clip collides with the movie clip "_ROOT.R" (the rightmost stealth clip) in the main scene, continue with the code inside the curly braces, if the street coordinates are greater than 50 (why greater than 50), in fact, to keep the street fault from being exposed to the screen, Because you can't draw an infinitely long street, set the variable _ROOT.F to 1 (the protagonist facing the right) and start moving the street. (_root:speed-2) is the amount of movement that can be set on its own.
If this movie clip crashes into the "_ROOT.L" (leftmost stealth clip) of the main scene, continue with the code inside the curly braces, if the coordinates of the street are less than 535 (IBID.) Set the variable _ROOT.F to 2 (the main character faces to the left) and move the street.
About the use of collision HitTest:
Mymovieclip.hittest (x, y, Shapeflag)The coordinates of the click Area on the X stage.
The coordinates of the click area on the Y stage.
and coordinates are defined in the global coordinate space.
Target may intersect or overlap the destination path of the hit area specified by MovieClip. Target usually represents a button or text input field.
Shapeflag A Boolean value that specifies whether the entire shape of the specified instance is evaluated (true) or only the border (false) is computed. You can specify this parameter only if the click Area is identified with the x and y coordinate parameters.
method, and computes the instance specified by MovieClip to determine whether it overlaps or crosses the hit area identified by the target or x and y coordinate parameters.
Usage 1: Follow the Shapeflag setting to compare the X and Y coordinates with the shape or border of the specified instance. If Shapeflag is set to true, only the area that is actually occupied by the instance on the stage is computed, and true if x and y overlap any point. This is useful for determining whether a movie clip is in a specified hit area or hotspot area.
Usage 2: Calculates the border of target and the specified instance, and returns true if they overlap or intersect at any point.
Okay, pull! Street part of the production process has not finished, we can also try to do their own pull!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
