James rice
About the author: James is a free creator focusing on Web and provides Web development consultation to individuals, small or large business companies. Visiting his personal studio: jamesrice.net, his personal Weblog: Jamieblog.com
Reading level: 8.7
Interpoxity: This tutorial uses a little mathematical computing skills, I hope some friends who are hobbies ActionScript scripts.
Flash's basic knowledge You have already learned, but you have never understood how to create a fine web site based on the designer's angle. In this tutorial, I will show you a simple way to create an interactive animation, and use ActionScript technology in animation.
In the example, ActionScript will be used to scales a basic graph, other than other occasions, such as motion, transparent effects, or color changes when motion, etc. Suppose you have generally understood some of the ActionScript syntax and use some tools that create Flash animations, such as Dreamweaver Flash MX. If you don't know much about these, I suggest you temporarily stop, first read a little flash primary tutorial.
In our project, a Slider Bar with a handle (handle, you can understand the steering wheel), which will be used to control a square size on the Stage (stage), drag the handle, The square will expand or shrink with it.
Picture 1:
begin
First, we need to set our stage and create a few symbols, build a new Flash document, and set 550 pixels wide, 500 pixels. Setting the frame rate of 25 frames / sec.
Image 2:
Next, create 3 simple Symbols-all movie CLIPs (clips, clips). Make each symbol, select Insert> New Symbol. We will store these Symbols in Library (library), and we will place them on the Stage.
Name the first movie clip is "Shape", and create a 10 x 10 pixel size square, use the Align panel to locate the square to the center of the vertical and horizontal direction, while the square registration point (positioning point ) Should be in this square center.
Picture 3:
Let's return to the main timeline, create a new movie clip, name it "Handle", use it to control the square size we have created. "Handle" size is a small rectangle 8 pixels wide, 30 pixels high, like a square, center aligned to the vertical and horizontal position.
Picture 4:
Returns to the main timeline Create the last symbol - "Handle" track line, create this movie segment name "Slider". In this section, simply put a 400-pixel horizontal line, using a line type of 1 pixel. Then, align the line, the left coordinate is x = 0, y = 0, and is done with the Align panel.
Image 5:
So far, we have made three Symbols we need. Now, consolidate "Handle" and "Slider", click from the Library panel and enter the "slider" symbol we just created, insert a new layer above the current layer, dragging one from the Library panel according to the following figure Handle "Symbol Example to the Stage. Set the location of the Handle with the attribute panel: 0, -15, and name "Handle" with this instance, this handle will be positioned on the left end of the Slider-track line, its properties See the picture below: Picture 6:
Your Slider-Track Line now looks like the picture below:
Picture 7:
Introduction ActionScript code:
It is an introduction of ActionScript! In the Slider symbol just now, build a layer on the existing two layers and named "Actions". Select the first frame on the ActionS layer and open the Actions (ActionScript) panel. Copy or retrophotize the following code:
Handle.onpress = function () {this.startdrag (false, 0, 0, 400, 0);}; handle.onrelease = function () {this.stopdrag ()}
The code contains two events, the first handle.onpress function defines: When our cursor is on the symbol instance "Handle" and what will happen when the mouse is pressed. Among them, we use the flash function startdrag (); this will allow us to drag this handle from left to right, limit the drag range in the drag of the value in the drag action, this function looks This: StartDrag (Lock, Left, Top, Right, Bottom).
The "lock" parameter is True or false: whether the object being dragged is in the center of the drag range, and this parameter is paired in this tutorial, and we are more concerned about how to limit Slider's sport range, we Setting Top and Bottom coordinates 0, LEFT and RIGHT are 0 and 400, so that Handle can slide along our preset range. The second function handle.onrelease is the drag and drop to Handle will be stopped when the mouse is released.
Return to the main timeline, create a layer named "Control", place a slider instance on this Stage, and locate it at 75,450. If you choose Control> Test Movie (Test Movie), a slider will appear, drag your handle left and right, this handle does not control something.
Now, create another layer on the main time line, named "Shape", dragging a square graphic symbol from the symbol library to this Stage, locating it at 270, 210 and naming it in the properties panel " ".
Photo 8:
As for the Slider movie clip, we now need to add some actions to the main timeline, create a layer on the existing layer in the main timeline, and name it "Actions". Click and open the Actions panel on this layer of this layer, place the following code in the first frame:
shape.targetWidth = shape._width; shape.targetHeight = shape._height; shape.onEnterFrame = function () {var speed = 5; this._width = (this.targetWidth - this._width) / speed; this._height = (THIS.TARGETHEIGHT - this._height) / speed;}; the first two lines of code initialize our two variables. We create variables TargetWidth and TargetHeight and set them equal to the initial height and width of graphic symbols. Note that this initialization only occurs once: at the beginning of our movie.
The second part of the code specifies an OnNternterFrame event handler for symbol shape. This event may be more unfamiliar with you, but soon you will know its benefits! Some of the action code defined in OnenderFrame will execute in each frame, if your frame rate is 25 frames / sec, the action code in Onenterframe will run 25 times / sec.
In this function, we used a mathematical formula to define changes in graphics. The calculation code of the width and height is the same because we handle a square and is equal to zoom.
Due to the identity of the code line of the width and height, a line in the two lines of code is described in detail: calculate the true height code:
THIS._HEIGHT = (this.TargetHeight - this._height) / speed;
THIS._HEIGHT is the true height of the graphics; after this value changes, the size of the graph will be reflected in the movie.
THIS._TARGETHEIGHT is a variable used to maintain the trajectory to reflect the true height change.
Real height this._height and target height this._targetHeight's difference is true height increment, because each frame must perform this line code, the true height THIS_HEIGHT will quickly approach the target height this._targetHeight, the same graphics The size will have some traces of changes. This is the key part of this tutorial!
If your mathematics is not very good, it is a bit confused, please take a piece of paper and a pen. Write the initial height of the graph: 10, the target height: 100, repeat the code, you will see that the real height will get closer to the target height, adjust the "speted" variable to determine the fast level of the real height to the target height.
start operation
Almost complete! You can test a movie (if you want to do this). You will see the slider on the bottom and a small square (this square is stationary). Why don't you move this square? Because we haven't informed sliding bars to change these two values: TargetHeight and TargetWidth.
Double-click the slider let's edit this symbol again, click on the first frame on the ActionS layer and reopen this ActionS panel. You will see drag and drop code that we just added for Slider slider symbols. Just add a little code to here, complete all the features of this movie. Use the following code instead of the existing code:
Handle.onpress = function () {this.startdrag (false, 0, 0, 430, 0);}; handle.onrelease = function () {this.stopdrag ()} Handle.onterframe = function () {_Root.shape.targetWidth = this._x 10; _root.shape.targetHeight = this._x 10;}; the first two functions are the same, the third function is new, it seems to be a little familiar. For, we use the Onenterframe event handler to link the coordinates of the Handle on the sliding bar together with TargetWidth and TargetHeight, and set the target width and height of the X coordinate plus 10.
Since the X coordinate value of the Handle is defined in the Stardrag () function ranges between 0-400, the target size of the zoom graph is between 10 and 410 pixels (width: 10-410, high: 10-410), You may take " 10" and make the graphic size of 0 or less, I don't want it to disappear, huh, huh.
Congratulations!
Return to the main timeline, click Control> Test Movie (test movie), test it! If you do full according to the steps above, you will see the correct demo.
Download all Sourcecodes: http://www.sitepoint.com/examples/actionanim/source_file_mx.fla
