Embed Size (px)
Citation preview
Interface Introduction 1
I will let you know--what makes up SWF Quicker’s simple yet powerful interface. Toolbox, main operation area, Class window, Properties panel, Action panel and Output panel introduced here can definitely help your later learning.
Series: SWF Quicker 2.0 Estimated Time of Completion: 15 minutes
1. Launch SWF Quicker 2.0. Let’s have a tour of the interface.
2. This is Toolbox. Some of the tools have a drop-down arrow on the right bottom. Click it; you can get several other tools.
3. The following is main operation area which is consisted of Timeline and Stage. The Timeline of Sothink SWF Quicker is the work space where a movie's contents are organized and controlled. Layers and frames constitute the major parts. On the left is the Layer Section; on the right is the Frame Row. We can make animated effect by inserting keyframe. We can also use ActionScript to control a movie.
Back to Top >>
4. This window is to help you to create and modify classes. To create a class, you must first create an external ActionScript (AS) file. Classes can only be defined in external script files. After your editing, you can click File->Save as to save it in your program for your next use.
5. The following are Properties panel, Action panel and Output panel.
The Properties panel is to set the properties of the selected element, which could be main movie, shape, movie clip, button, sound, text, video, group or frame.
The Properties panel displays the basic settings for the entire movie and the most common commands when you don't select any object on the canvas.
If you have not created motion, the settings for motion will be inactive except the sound setting.
Select text on the canvas, and specify its properties in the Properties panel.
When you select the instance of shape, movie clip or button, you can enter instance name, and then you can use ActionScript to control the movie such as tellTarget() or writing a target path.
The Action panel is to add ActionScript to a movie, so as to better control the movie, or make it easy to create complicated animated effects that can not be accomplished by only using Motion. You can add ActionScript to every keyframe of a movie, or a movie clip, or a button.
The Output panel displays information that helps users troubleshoot the movie and view the value of an expression in the scripts.
Interface Introduction 2
This tutorial introduces six panels named Shape, Scene, Transform, Layout, Library and Movie Explorer panel to you.
Series: SWF Quicker 2.0 Estimated Time of Completion: 10 minutes
6. Shape, Scene, Transform, Layout, Library, Movie Explorer panel. The Shape panel is to set the attributes of selected shape symbols.
The Scene panel is to store scenes in this movie document. SWF Quicker provides more than one scene, just like scenes in film, and we can create numerals of different scenes and switch them freely. You are about to experience the feeling of directors.
The Transform panel is used to position, scale, skew and rotate an instance, and to create color transform.
The Layout panel is to set the alignment of multiple selected instances in the movie, horizontally or vertically.
The Library panel is to store all the symbols in the current document. Automatically, everything you draw on the canvas will become a Shape symbol stored in the panel, and the text you input will become a Text symbol.
The Movie Explorer panel provides easy access to the elements used in the current movie and lets users select an element on the canvas quickly.
That’s the end of the introduction for SWF Quicker’s interface. In the next section, we will show you the basic Flash creation.
How to Make a Gradient Color
This tutorial focuses on showing you a popular skill in creating Flash - making gradient color.
You can have a special effect from making gradient color and overlapping shapes.
Just like this:
Series: SWF Quicker 2.0 Estimated Time of Completion: 25 minutes
1. In shape panel, direct input R: 102, G: 102, B: 255 on the right. Set the line width as 0. 2. Select round rectangle tool and input 20 in the value box located in the bottom of tool panel. Draw a round rectangle on the canvas.
3. In Library, rename shape symbol as "background". Right-click symbol "background" in Library and choose copy, then right-click again to choose paste, you can get a duplicatate of symbol "background". Rename it as "button shadow".
4. Insert a new layer -- layer 2 and drag symbol "button shadow" to the canvas in layer2. Make sure the instance of symbol "background" is placed under the instance of symbol "button shadow". To align the button shadow and background perfectly, we can set the alignment in Layout panel. First, please select the two shapes on the canvas, and then click Align center and Align middle.
5. Select the instance of symbol "button shadow". First, set the line color and line width: Line color is R: 0, G: 51, B: 204, line width: 0.25. Then set the fill style in shape panel as linear. After you choose Linear in Fill style drop-down menu, the gradient definitions bar shows up, with a pointer at each end. A pointer looks like a small triangle, representing a color in the gradient. Select the left pointer and set the color as R: 0, G: 0, B: 102. Set the color of right point as white.
6. Select fill transform tool and click button shadow, a control line with a center point and a handle at each end will appear inside, drag one handle to make the control line vertically. See the difference between the following two shapes? The gradient of shape 1 is from left to right; the other one is from top to bottom.
7. Make a duplicate of symbol "button shadow" in Library and rename it as "light".
8. Insert a new layer and drag symbol "light" to the canvas. Make the three shapes overlapped completely by using Align options in layout panel. Select "light", set the line width as 0. Select the left pointer and set the color as white, Alpha value as 100%, the color of right pointer as white, Alpha value as 0.
9. Select the instance of symbol "light" on the canvas and adjust its size and position like this:
10. That is the crystal button we want. You can add some characters on it.
TIP: The Fill color is the color of an entirely enclosed area, where can be filled with solid color, gradient colors (linear and radial color) and bitmap by using SWF Quicker, We take linear color as an example in this lesson. Other ways are also quick and easy to master. Go for it!
How to Make a Guided Motion
When you'd like to have a shape motion along a path, the Guide Line tool will help you to accomplish your desire. SWF Quicker provides several tools for you to draw guide path and makes the work of guided motion quite easy.
Series: SWF Quicker 2.0 Estimated Time of Completion: 15 minutes
1. Launch SWF Quicker 2.0. Draw a star.
2. Hit F6 to insert a keyframe in Frame 40. Create a motion tween between frame 1 and frame 40.
3. Select pencil guide line tool and draw a star motion along a path.
4. Select Frame 1 in layer 1 and drag the star on one of the point of the guide line. Snap the center of the shape to the beginning point.
5. Select frame 40 in timeline and drag the star on the other point of the guide line.
6. OK, the guided motion is done, click preview button to see the effect.
7. Select "Orient to guide line" checkbox, the star will rotate along path. There are some settings for Rotation:
None: Prevents rotation. Auto: When you create a rotating motion, this option keeps the original rotation. CW (Clockwise): To make an instance do clockwise rotation. CCW (Counterclockwise): To let an instance do counterclockwise rotation. Ease: Adjusts the rate of change between tweened frames. Times: Specifies the number of times the instance rotates.
TIP: Did you notice the black triangle on the right bottom of Guide Line Tool? Some other tools as follows hided in it, click it for a short while to see it.
How to add a link to an object in SWF Quicker
You can add a link to button and movie clip in SWF Quicker. The following tutorial is to show how to add an URL link to a button.
Helpful Hints:
Q:How can I make a simple button? A: Please refer to the tutorial guided on creating a button .
Q: Besides button, what other symbol can I add ActionScript to? A: The ActionScript only can be added to Keyframe, button and movie clip.
So before you add a link to an object, please make sure that it has been converted into a symbol like button or movie clip at first.
Q: Can I specify the window into which the document should load? A: You can enter the name of a specific window or select from the following reserved target names:
_self specifies the current frame in the current window. _blank specifies a new window. _parent specifies the parent of the current frame. _top specifies the top-level frame in the current window.
Just like the following:
Code:
on(Release) { getURL("your link address here", "_self"); }
Q: How to add email link in Flash movie? A: The same way with URL link. Choose this button and in the Action panel input:
Code:
on(release) { getURL("mailto:[email protected]", _self); }
Note: you should use quotations to surround the URL and target.
If you have any other questions, please leave your words here. Thanks in advance!
Fading In and Out Effect
Here I will show you a little bit complex but widely used Flash skill, called fading in and out.
Series: SWF Quicker 2.0 Estimated Time of Completion: 15 minutes
1. Launch SWF Quicker 2.0
2. Choose Oval tool in Toolbox. Press SHIFT to draw a round. TIP: Press SHIFT when you use oval tool and rectangle tool, you will get a round and square respectively.
3. Click frame20 and choose Insert>Keyframe or hit F6 to insert a keyframe there.
TIP: What is keyframe? A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let SWF Quicker create the contents of frames in between; you should create keyframes only at those points in the artwork where something changes.
4. In Transform Panel, select Alpha in the combo box besides Color transform, set its value as 20%.
See the effect, that’s what we want.
5. Right-click any of the frames before frame20 and choose Create Motion Tween in the context dialog box.
6. OK£¬that is Fading out effect, press Ctrl+ENTER to preview it.
Do you accomplish it? Sure you are on the right track. To make a Fading in effect, please set the Alpha value as 0 in frame1 and 100% in frame 20.
Frame by Frame Animation
Here I will let you know what fame-by-frame animation is with a simple sample. Take your earphones, you can feel more about the couple's quicksteps.
1. Launch SWF Quicker; Import the twelve prepared images to library. Now they are listed in library. In properties panel, select a background color and set the size of canvas as Width: 625; Height: 300. Tips: To import multiple files at one time, you can press Shift or Ctrl to select them.
2. Press Ctrl+ F8 to create a new movie clip symbol and name it snail. Now, you enter into movie clip-editing mode.
3. Insert a keyframe in frame1-12 respectively. Click frame 1 and drag the symbol image 1 from library to canvas, and then click frame 2 and drag the symbol image 2 to canvas. Use the same method until you put different images in each keyframe. Remember to position these images as X: 0, Y: 0.
4. Again to create a new movie clip, use text tool to write words on the canvas. I write "Nothing Gonna Stop Us!" as the topic. After that, right-click the text and choose Effect->Create effect. Select the effect you like. Tips: To add more than one text effect, you should first insert a keyframe in the frame where you want to start the next text effect, and then continue effect adding.
5. Back to the main movie. In frame 1 of layer 1, drag the symbol "snail" twice to design window and put them in proper position. Insert a new layer and drag symbol "text" to the design window, and also put it in proper position.
6. You can also give this animation a sound. In this tutorial, I present a sound to imitate the running of snail. In Library panel, click the movie clip "snail" to enter into movie clip-editing mode and insert a new layer. I will add the sound in the keyframe, which we see the feet of the snail are on the ground. After my carefully observing, frame 3 and frame 10 are the right ones. Import sound file run.wav to library. Insert keyframes in the two frames and drag sound symbol from library to canvas; the sound will be added to timeline automatically.
OK, the work is almost done, you can place something in front of the snails, like cake, whiskey,
crystal... all are depending on your imagination. I present them a lovely house. That's it. Surely you are on the right track!
Glad to share time with all of you!
Click run.rar (99.08 KB) to get source file.
Static Text and Dynamic Text
In this course, I focus on showing the difference between static text and dynamic text. You can write your favorite sentence right after the one I offered. OK, have a try.
Series: SWF Quicker 1.6 Estimated Time of Completion: 20 minutes
Firstly, it’s better to have a general idea about static text and dynamic text. Dynamic texts allow users to input something or change its content implemented. Take this one as an example, you can write your sentence on it or change mine. The other one is static text, like its name-static, you can not input anything in it or change any character, but it has its own advantages. The text can have different font, color and size.
Now, I’ll show you how I get this Favorite sentence box.
Step one: Launch SWF Quicker Set the background color in properties panel. Well, I like dark background; you can select the color you prefer.
Step two: Design static text. 1. Select text tool, and look at properties panel. By default, text type is static. Set the properties for the title and write title on the canvas. Up to you! 2. After select the text, right-click it to choose Break Apart. Each character now can be considered as a separate object. Right-click the text again to choose Create Old Style Effect… 3. In the pop-up dialog box, choose an effect you like. Well, I like Rotate>Overturning3, and I take it.
Step three: Design dynamic text 1. Select Text tool. Look at properties panel, change type to dynamic, hit editable button, which has a pencil on it. Tips: To show the border of the text field, hit show border button with a square on it 2. Drag a text box on the canvas to show the text field. Write your sentence. 3. Click preview button to see your presentation. You can write your favorite sentence here.
Thank you for sharing your favorite sentence with me. Hope you have as much fun as I had.
Click text.rar (2.13 KB) to download source file.
How to Use AsBroadcaster object
The ASBroadcaster object has four methods, I will introduce them in details.
Code:
static function initialize(o:Object); //This is a static method, meaning to create a _listener, which is used to store all listener objects. //Add each functions as event source for o. Then what is the function of event source?
static function broadcastMessage(msg:String); //Message;
//This method is broadcast method; one of the key functions of event source is to broadcast a message saying "Something happened!" to public.
static function addListener(o:Object); //Login listener method, in another word, to decide whom the message is sent to.
static function removeListener(o£ºObject); //Logout listener method that means the message is not sent to anyone any more.
It seems that AsBroadcaster object is just a little bit complex. For help with understanding it, I will give you some examples:
Code:
//-------------------Initialized Part ------------------------------------ var headquarters=new Object(); //Headquarters is a place to send message, we call it event source. AsBroadcaster.initialize(headquarters); //call static method "initialize" of AsBroadcaster object to add each functions as event source to headquarters. var soldier=new Object(); //generate soldier object. soldier.onAttack=function(){ trace("soldier will attack //the action the soldier performs when he receives "onAttack" message. } soldier.onGuard=function(){ trace("soldier guard here!"); } headquarters.addListener(soldier); //Insert soldier as listener of headquarters, he must comply to headquarters’ commands from now on. var armored=new Object(); armored.onAttack=function(){ trace("armored will atack!"); } armored.onGuard=function(){ trace("armored guard here!"); } headquarters.addListener(armored); var artilleryman=new Object(); artilleryman.onAttack=function(){ trace("artilleryman will attack!"); }
artilleryman.onGuard=function(){ trace("artilleryman guard here!"); } headquarters.addListener(artilleryman); //-------------------Demonstrate as Follows------------------------------------ trace("headquarters’ first command"); headquarters.broadcastMessage("onAttack"); //Headquarters use "broadcastMessage" method to broadcast "onAttack" command. trace("headquarters’ second command"); headquarters.removeListener(soldier); //Headquarters use "removelistener" method to logout the obligation that soldier has to follow commands. headquarters.broadcastMessage("onGuard"); //Headquarters use "broadcastMessage" method to broadcast "onGuard" command. Notice: Soldier can not receive this command right now.
OK, test it now!
Now, let us see the limits of AsBroadcaster here: 1. How to broadcast the message "Attack NO.1 target." sent out by headquarters? We certainly can custom an "onAttackNO.1target" method for soldier and then listen the message "onAttackN.1target" broadcasted by headquarters, but will you custom numbers of similar commands if a great number of commands needed to be sent? How can you write the targets if they are produced randomly? How can the soldier distinct the different command senders and perform the different actions while he is probable to listen broadcast from "Command Post"? Absolutely, soldier can not make sure message "onAttack" is from headquarters or is from "Command Post". Therefore, the first limit of "Asbrodcaster" is that it can not give any specification or any parameters though it broadcasts a message.
2. We take two event sources called "headquarters" and "command Post" as an example. Suppose that we want to give command power to "Command Post" and give defend power to "headquarters", for that headquarters can command attack and defend actions of armored and artilleryman, they can send message "onAttack", something unexpected happens: Soldier attacks at the same time. To avoid this error, headquarters have to "removeListener(soldier)" before attacking performance. Besides, they have to "addListener(soldier)" after broadcasting message "onAttack". Is it complex? Now we get another limit of "Asbrodcaster": It doesn’t care about which event the listener is listening though it logins a listener.
3. The last limit is come from the second one that is "Asbrodcaster" object can sometime make work inefficient. Suppose that there is another airman and it has "onAirAttack" event method which follows headquarters’ command. It is absolutely a waste of time that soldier, armored and artilleryman try to execute "onAirAttack" event method when headquarters broadcaster "onAirAttack" message.
Glad to share the time together. Hopefully it is helpfull to you. Any time, good luck!
Use SharedObject to Save Local Data
Shared objects are quite powerful: they offer real-time data sharing between objects that are persistent on the local location. You can think of local shared objects as "cookies."
Description: SharedObject can be taken as a small database, we use it to store any data type supported by Flash, such as, number, character string, array, object, etc. ShareObject can be divided into local (exist client-side) and long-distance (exist serve side). Extension of local shared object is .sol. For windows2000 (xp), the default storage path is “Application Data\Macromedia\Flash Player\Server domain name path\Flash movie name”; for Windows98 (xp), the default storage path is “Documents and Settings\[User]\Application Data\Macromedia\Flash Player\ Server domain name path\Flash movie name.
Method summary for the SharedObject object 1. SharedObject.getLocal: Returns a reference to a locally persistent shared object that is available only to the current client. 2. SharedObject.flush: Immediately writes a locally persistent shared object to a local file. 3. SharedObject.data: The collection of attributes assigned to the data property of the object, which will be shared and/or stored. If you get the above knowledge, you can use shared object to store external data now.
Example:
Code:
//For instance, some variables such as weapon, up, down, left, right, jump, atk in SWF game; //Use following sentences to write to local data; var so:SharedObject = SharedObject.getLocal("keyset"); so.data.sword = weapon; so.data.up = up; so.data.down = down; so.data.left = left; so.data.right = right; so.data.jump = jump; so.data.atk = atk; so.flush();//Immediately write data, If this method is not called, Player can also call them automatically when it shuts down. //======================= //Use the following sentences to read local data.
var so:SharedObject = SharedObject.getLocal("keyset"); weapon = so.data.sword; up = so.data.up; down = so.data.down; left = so.data.left; right = so.data.right; jump = so.data.jump; atk = so.data.atk;
Local shared object can only storage data in default path, and extension can only be .sol.
Hope you are on the right track! Thanks for sharing time with me~
How to Understand Several Keywords
What do _root, _level and depth do? Many novices are confused by these key words. They can not get the meaning and function; furthermore, they are barred when referring to apply AS. Let’s get down to deep our understanding of these keywords right now.
Series: SWF Quicker 2.0
_level and path
Let’s talk something about the catalogue of this file before we begin this lesson. It is really similar to SWF file.
I have a mypath.txt saved in local internet, I put this file in a folder named AStarArithmetic, which belongs to download folder of C disc. So the path showing the specific direction of mypath.txt is: c:\downloads\AStarArithmetic\mypath.txt. Movie clip or other objects saved in SWF follow the same rule.
Continue with the analogy above. _level0, _level1 and _level2 can be compared to C, D and E discs. Downloads and AStarArithmetic just like two movie clips, and mypath.txt is the final movie clip. You can visit mypath.txt by using the specific path: _level.downloads.AStarArithmetic. Do you get it? Please notice that you can not name a movie clip as mypath.txt, I just take mypath.txt as an example.
About _root
_root can be compared to root. Continue with the analogy above: The root of c:\downloads\AStarArithmetic\mypath.txt is C disc. The root of any file in the C disc is C disc. Likewise, the
root of any movie clip of _level0 is level0.
What is depth?
Depth is different from _level and _root. It is related to display order. The bigger the depth is, the upper it displays. The most important function of _level and _root is to identify the path of movie clip in SWF.
It is better to notice that _level has its default depth, and each movie clip has its depth to distribute. The depth value ranges from -16384 to 1048575.
Why each _level has its default depth?
That is because all _level including _level0, _level1, _level…belong to the higher catalogue-movie clip, which is SWF itself probably. _level0 lie in -16384 and _level1 lie in -16383. SWF may support about 955599999999 _level from deducing.
You can even switch the depth of _level0 and _level1 if you don’t want the default depth of them. Have a try. I will give an example:
1. Open a new file.
2. Write loadMovieNum("dog.jpg",1); in frame one. Enter a file name that is in your local internet, and then create a new layer and draw something in it. Make sure this layer lasts for 30 frames. In addition, the new loaded picture and the things you draw in the layer are overlapped, or you can not see the effect.
3. Write following scripts in frame 15:
Code:
trace("_level0.depth="+this.getDepth()); trace("_level1.depth="+_level1.getDepth()); this.swapDepths(1);
4. Write following scripts in frame 30:
Code:
trace("_level0.depth="+this.getDepth()); trace("_level1.depth="+_level1.getDepth());
stop();
OK, you will find the things in _level0 are moved to _level1 when _level0 and depth 1 are switched. The result is as follows:
Code:
¡¡_level0.depth=-16384 ¡¡¡¡_level1.depth=-16383 ¡¡¡¡_level0.depth=1 ¡¡¡¡_level1.depth=-16383
Is it a little bit interesting? Glad to share my thought with you!
Click root.rar (27.16 KB) to download the source file.
TIPS: Each level should include something, or you can not trace, for instance, the function trace (_level1.getDepth ()) is invalid if you don’t use function loadMovie to load something to _level1.
It is easy to understand the words mentioned-each movie clip has its depth to distribute. That means _level2 can have its depth if _level1 has its depth. There is no conflict between them. The display of them is decided by the depth.
Handling Keyboard Events
Handling keyboard events, play a key role in ActionScript, has been widely used especially in SWF games nowadays. It includes five types: 1. Handling keyboard events by checking with button. 2. Handling keyboard events with key object. 3. Handling keyboard events with keyboard listener. 4. Handling keyboard events with Function onKeyUp and onKeyDown of movie clip 5. Handling keyboard events with event keyUp and keyDown of movie clip. You can get the amazing effect by mastering them.
Series: SWF Quicker 2.0
1. Handling keyboard events by checking with button.
You can either respond to mouse event or keystroke event with function "on" of button. I’ll give you an example, write scripts for button and press X in keyboard, the output panel will deliver a message: X is pressed.
Code:
on (keyPress "x") { trace("X is pressed"); }
Please notice that the letters should be lowercase while checking the letters in keyboard. Some specific scripts, which represent some special letters in SWF are convenient for you. The Action panel prepared completed events of mouse movement and key stroke.
For checking <Left>, you can use ActionScript as follows:
Code:
on (keyPress "<Left>") { trace("Left is pressed"); }
You can input various "on" function or combine various events in a "on" function. Customizing your shortcut keys comes easily in this way. I’ll give you an example as follows:
Code:
on (keyPress "<Left>") { _root.myMC.prevFrame(); } on (keyPress "<Right>") { _root.myMC.nextFrame(); }
The first sentence above means the movie clip myMC back one frame when you press Left keystroke. The second sentence means it steps up one frame when you press right keystroke.
Click keyboard1.rar (971 Bytes) to get source files.
2. Handling keyboard events with key object
For that it is not proper for durative pressed key though it functions well, it is always out of our choices for designing keyboard handled games, which we often use key object to make. Key object composed of method, constant and function are included in catalog "object/movie". You can check whether some keystroke is pressed or not. The following ActionScript can help you check whether Left keystroke is pressed.
Code:
if (Key.isDown(Key.LEFT)) { trace("The left arrow is down"); }
Function "Key.isDown" backs a Boolean value. Function backs to true when the corresponding stroke parameter is pressed down, or it will back to false. Constant "Key. LEFT" represents Left stroke in keyboard. Function backs to true when Left keystroke is pressed down.
Some constants represent the corresponding keystrokes; I will show some basic constants: Key.BACKSPACE Key.ENTER Key.PGDN Key.CAPSLOCK Key.ESCAPE Key.RIGHT Key.CONTROL Key.HOME Key.SHIFT Key.DELETEKEY Key.INSERT Key.SPACE Key.DOWN Key.LEFT Key.TAB Key.END Key.PGUP Key.UP
The above ones are function keys. How to express letter keys of keyboard? Checking key code with function "Key.isDown()" can help you. Take an example as follows: the key code of letter X is 88.
Code:
if (Key.isDown(88)) { trace("X is pressed"); }
The above codes means: use function Key.getCode to tell you whether you press X letter keystroke. Function "Key.isDown" backs to true when you press x letter keystroke. "X is pressed' will be outputted in output window.
Click keyboard2.rar (350 Bytes) to get source files.
3. Handling keyboard events with keyboard listener. (Recommended)
Suppose that you are checking keystroke action with event "onClipEvent(enterFrame)" of movie clip, and at the same time, the movie clip lasts for a great many frames with a low speed computer operation. Such things are likely to happen: the keystroke action is ignored when Function "onClipEvent(enterFrame)" does not function in time the moment you press the keystroke. If that, many effects you desired can not make.
Besides, there is another problem: handling keyboard events with key object can not distinct long lasting pressing a keystroke from fast and repetitious pressing a keystroke. In a lot of games, we need to execute an action by pressing a keystroke once, such as the game about fire or let fly (a missile) from a weapon. We even make long lasting pressing a keystroke as pressing keystroke only once. How to deal with this problem? Keyboard listener, which is for listening the keystroke action can help you. First, you need to set a keystroke listener. You can use following action to tell program the event you need to listen:
Code:
Key.addListener(object);
Key.addListener takes object as its parameter, which is appointing to object, which can be taken to handle the event when listening event happens. The above codes are handling the event by appointing to object. To let the object handle the event, it is meaningless to set listener if you don’t set a corresponding event function. The functions of Keystroke listener are as follows: onKeyUp and onKeyDown.
Code:
Key.addListener(object); _root.onKeyUp = function() { trace(Key.getAscii()); }; //The ASCII code output in output panel the moment you press and release a keystroke.
Click keyboard3.rar (350 Bytes) to get source files.
4. Handling keyboard events with Function onKeyUp and onKeyDown of movie clip
It is similar to the method three. For that SWF can add listener to MovieClip, TextField and Button, etc., you can use function onKeyUp and onKeyDown directly.
One more thing should noticed is that onKeyDown can function only after you active and set input focus. First, set the properties of focusEnabled of movie clip as true. And then make sure this movie clip get focus. You can navigate the focus to movie clip by using function Selection.setFocus() or set the Tab key. Codes are as follows:
Code:
mc.tabEnabled = true; //the movie get focus from Tab key. mc.focusEnabled = true; //movie can get focus. Selection.setFocus(mc); //set focus for movie. mc.onKeyUp = function() { trace(Key.getAscii()); }; stop();
The ASCII code output in output panel the moment you press and release a keystroke. The difference between method three and method four is that the former need not to add listener.
Please notice: it does not function when you drag mouse. You can get focus again by pressing Tab key because the movie clip lose focus now.
Click Keyboard4.rar (489 Bytes) to get source files.
5. Handling keyboard events with the event "keyUp" and "keyDown" of movie clip.
It is important to get the concept of this method very clearly before you use it. Movie clip includes two events "keyUp" and "keyDown", which are related to keyboard. Such as follows:
Code:
onClipEvent (keyDown) { trace(Key.getAscii()); } //the ASCII code output in output panel the moment you press a keystroke;
"Key.getAscii" means to back to ASCII code, which is corresponding to keystroke. ASCII is an integer. Each letter of the keyboard has its own corresponding ASCII code, such as the ASCII of letter A is 65, "B" is 97, "+" is 43. Please notice: ASCII Code is only for Letters but not for function keystrokes. I will tell you how to input the corresponding letters of keystroke in output panel?
You can use "fromCharCode" of object "String" to change ASCII to letters. Continue use the above codes as an example. Can you find what’s the difference?
Code:
onClipEvent (keyDown) { trace(String.fromCharCode(Key.getAscii())); }; //the corresponding letter output when you press a keystroke except function keystrokes.
Click keyboard5.rar (453 Bytes) to get source files.
Hopefully it is useful to many of you. Any time, Good luck!
How to Make a Blur Filter Effect Slideshow
In this tutorial, you will learn how to make a slideshow with Flash blur effect. No ActionScript is adopted in this sample, you only need to apply the newly added feature of SWF Quicker V4.0 – Flash filter to realize this fantastic effect easily ... Let's start!
Series: SWF Quicker V4.0 Estimated Time: 30 Minutes Preparation: Download the images (1.jpg, 2.jpg) used in this tutorial.
Step 1 Add Flash Blur Filter Effect for the First Image 1. Launch Sothink SWF Quicker V4.0. 2. Choose File -> New -> New Movie to create a new blank document. And then go to the Properties panel, and set the movie properties as follows:
3. Choose File -> Import to Library, and browse to import the images I provided for this sample. Now in the Library panel, you'll see this:
4. Drag the “1.jpg” image from the library to the stage. 5. While the image is still selected, go to the Transform panel, and set its X, Y values to 175, 130, as follows:
6. On the stage, right-click the image and select Convert to Symbol from the pop-up menu. And
then choose “Movie Clip” in the newly opened dialog to convert this image to a movie clip symbol.
7. Click on frame 10 of layer1, and press F6 to insert a keyframe. After that click on frame 20 and press F6 again. 8. While you're still on frame 20, select the image and open the Filter panel. Now click the Add Filter button and select Blur in the pop-up menu. And then you can set the options for the Blur filter as follows:
9. Go back to frame 10 and open the Properties Panel, and then choose Motion in the Tween drop down list. Now the timeline is displayed as follows:
Step 2 Add Flash Blur Filter Effect for the Second Image 1. Insert a new layer (layer 2) in the timeline. 2. Click on the frame 15 of layer 2 and press F6 to insert a keyframe. 3. Drag 2.jpg from the library to the stage. While the image is still selected, go to the Transform panel, and set its X, Y values to 175, 130. 4. Now convert the image to a movie clip symbol. (Repeat the 6th operation of step 1) 5. After that click on frames 25, 35 and 45 of layer 2 and respectively press F6. Now the timeline is displayed as follows:
6. Go back to the frame 15 of layer 2, select the image and apply Blur filter for it. (Repeat the 8th operation of step 1, and set same properties for the Blur filter.) 7. Select again the frame 15 and open the Properties Panel, and then choose Motion in the Tween drop down list. 8. Click on frame 45, select the image and apply Blur filter for it. (Repeat the 8th operation of step 1, and set same properties for the Blur filter.) 9. Go back to frame 35, open the Properties Panel, and then choose Motion in the Tween drop down list. See the current timeline:
Step 3 Smoothly Transit Back to the First Image 1. Insert a new layer (layer 3) in the timeline. 2. Click on frame 40 of layer 3 and press F6 to insert a keyframe. 3. Drag 1.jpg from the library to the stage. While the image is still selected, go to the Transform panel, and set its X, Y values to 175, 130.
4. Now go back to the frame 40, select the image and convert it to a movie clip symbol. (Repeat the 6th operation of step 1) 5. Click on frame 50 of layer 3 and press F6. 6. Go to the frame 40, select the image and apply Blur filter for it. (Repeat the 8th operation of step 1, and set same properties for the Blur filter.) 7. Select frame 40, open the Properties Panel, and then choose Motion in the Tween drop down list. See the current timeline:
Step 4 Preview Your Movie 1. Press Ctrl + Enter in your keyboard to preview the movie, now you will get the effect shown in the beginning of this tutorial.
Have a try!
Simple Puzzle
Drag the picture pieces to proper position of the pane. The original picture underside has adoptive function, which can make your layout more precisely. Besides, it will deliver a message saying you win the game if you do it perfectly. Why not have a try?
Series: SWF Quicker 2.0
1. First, some preparations are needed. Choose a picture about 320*240. Use Photoshop or other software to cut it into 12 pieces about 80*80px, and then save them with names pic1, pic2… for later use.
2. launch SWF Quicker, set the size of canvas as 400*520px.
3. Click File>Import to import the 12 picture pieces you prepared and lay them on the latter half of stage according to the order of original picture. Select the piece on the top left corner. Press F8 to convert it into movie clip and name it check1. Do the same to the rest pieces and name them check2, check3…check12 respectively.
4. Enter bi…b12 as instance name for these movie clips in properties panel. Instance name allows you to target movie clip and button instances in script. Select all movie clips and set the alpha value as 30% in Transform panel. That is to make the movie clip hazily enough and user can not draw a distinction among those picture pieces.
5. This is an important step-design a movie clip to drag picture pieces. That embedding a button into a movie clip is a way to use codes multiple times. Create a button symbol and name it button_body. In button-editing mode, insert a keyframe in Hit frame and use rectangle tool to draw a square about 80*80 and its position is (0, 0). Create a movie clip and name it button_action. In movie clip editing mode, drag “button_body” from library and set its coordinates as (0, 0).
6. Select “button_body” you currently drag to canvas. In Actions panel, enter following scripts.
Code:
on (press) {//press down your cursor; startDrag(_parent, false, 50, 50, 350, 550);//let picture pieces dragged in limited area; _parent.swapDepths(100);//put picture in top layer to mask the other pictures; } on (release) {//release mouse; stopDrag();//stop dragging; _parent.swapDepths(_parent._name.substr(1));//put picture in bottom layer; for (i=1; i<=12; i++) {//detect position of picture piece; var theMC:MovieClip = eval("_root.b"+i);
//if the center of dragged piece enters into a movie clip used for detecting position; if (_parent._x<=theMC._x+40 and _parent._x>=theMC._x-40 and _parent._y<=theMC._y+40 and _parent._y>=theMC._y-40) { _parent._x = theMC._x;//set coordinates of picture piece and make it absorbed to corresponding position; _parent._y = theMC._y; } } }
Dragging component “button_action” is done. It will be used multiple times in the following designing.
7. Create a movie clip and name it pic1. In movie clip-editing mode, drag button_action from library to canvas, and set its coordinates as (0, 0). Drag the “pic1.jpg” imported at the beginning to canvas and set its coordinates as (0, 0), repeat this way until all of the pieces have their own corresponding movie clip.
8. Create a button and name it button_back. That is to replay game.
9. Back to main movie and name the existing layer as “checkPosition”. Create another three layers and name them “puzzle”, “AS” and “button” respectively. Drag pic1…pic12 from library to canvas, and enter p1…p2 in turn as instance name for them in properties panel.
10. Extend two frames in each layer. Select “button” and convert frame 2 as keyframe, input frame label as “over”. Use text tool to write “congratulations” in the center of canvas. Drag “button_back” to canvas and lay it on proper position, then add following ActionScript to the button:
Code:
on(release){ prevFrame();//back to previous frame and replay. }
11. Select Action Layer and select frame1, add ActionScript as follows:
Code:
stop(); for (i=1; i<=12; i++) {//game initialization; var theMC:MovieClip = eval("p"+i); theMC._x = random(260)+70; //lay the piece on the top half area of the scene; theMC._y = random(120)+70; } _root.onEnterFrame = function() { b = 0; for (j=1; j<=12; j++) { var theMCp:MovieClip = eval("p"+j); var theMCb:MovieClip = eval("b"+j); if (theMCp._x == theMCb._x and theMCp._y == theMCb._y) { //dictate whether the piece is on the right position, if yes b += 1;//variable plus one } } if (b == 12) {//if all of the pieces are in the right position. gotoAndStop("over");//display that you win the game; } };
Here, Puzzle is done; press Ctrl+Enter to see your presentation.
Besides, you can add time limit, increase game difficulty or add a button to show or hide the complete picture.
Click puzzle.rar (43.7 KB) to download source file.
Create a Spotlight Effect
Want to create a mask motion? You will learn the basic skills in this course to become familiar
with SWF Quicker so that you can create simple yet impressive animations.
Design Preloader Totally by ActionScript
The preloader mentioned in this tutorial are totally designed by ActionScript. All of them can be made by copying the ActionScript. I suggest you could read these codes carefully and learn something about ActionScript if you know about AS. Surely you can get more excellent preloader effect in you further creation. One more thing, we don’t offer the source file here.
Series: SWF Quicker 2.0 Estimated Time of Completion: 30 minutes
For that different frame in SWf has different content, the load speed of frames are always different. It is not exact to get the load proportion by _currentframe and _totalframes.
In this tutorial, we use _root.getBytesLoaded () which is the number of bytes loaded in memory and _root.getBytesTotal() which is the total frame number of movie to get the more exact proportion.
Preloader Effect 1 - Display the load percentage dynamically.
1. Add a blank frame in frame 1; the animation begins to play in frame 2.
2. Copy the following codes in frame 1; the movie begins to play as far as it is loaded completely.
Source code here:
Code:
stop (); _root.createTextField ( "myload_txt" , 1 , 0 , 0 , 0 , 0 ); with ( _root.myload_txt ) { //set the text background = true ; //whether the text block has a background or not; backgroundColor = 0x336699 ; //background color of text block; textColor = 0xFFFFFF ; //text color; type = "dynamic";//font type is dynamic; selectable = false ; //whether the text can select or not; autoSize = "center" ; //control auto sizing and align of text; _x = Stage.width/2; // x-axis of the text; _y = Stage.height/2;// y-axis of the text; } onEnterFrame = function () { var Loaded = _root.getBytesLoaded (); var Total = _root.getBytesTotal (); _root.myload_txt.text = Math.floor (( Loaded / Total )* 100 )+ "%" ; if ( Loaded == Total ) {
onEnterFrame = null ; removeMovieClip ( _root.myload_txt ); play (); } };
Preloader Effect 2
1. Designing Truth The truth for designing preloader can be divided into three parts: Step one: create a circle to update data. Two ways as follows: (1) make preloader in two frames and use command gotoAndPlay(1) to generate circle; (2) Make it in one frame and use command onEnterFrame to generate circle. Step two: use command get getBytesTotal()and getBytesLoaded() to get file data. Step three: use graphic or animation to show the date got in step two. Generally, the data can be exactly shown in text.
2. A Simple Sample I will show you an example step by step: (1) Import a movie in SWF Quicker and create a new scene put ahead the scene panel.¡¡ (2) Add the following ActionScript in first frame:
Code:
stop (); //four function for drawing lines, they are movie clip name of drawing line, depth of movie clip; //width and transparent of line; function dr ( nam , de , d , al ) { na = createEmptyMovieClip ( nam , de ); na . lineStyle ( d , 0x9900cc , al ); na . _x = Stage.width/2-120 ; na . _y = Stage.height/2 ; na . lineTo ( 240 , 0 ); } onEnterFrame = function () { var a = getBytesTotal (); var b = getBytesLoaded (); //get loaded data; if ( b < a ) { dr ( "b1" , 0 , 30 , 30 ); dr ( "b2" , 1 , 20 , 30 ); dr ( "b3" , 2 , 20 , 100 ); b3 . _xscale = b / a * 100 ;
//draw three line to show load progress; } else { delete onEnterFrame ; b1 . removeMovieClip (); b2 . removeMovieClip (); b3 . removeMovieClip (); play (); //load over, delete graphic and function; } };
Here is final effect of this sample:
Code:
stop(); sw = Stage.width; sh = Stage.height; // Stage.showMenu = false; //hide the context menu of right button; cs = 60; //grid density r = 2550; d = r/Math.SQRT2; //grid slope; p = Math.PI; //customize constant PI createEmptyMovieClip("ln", 1); ln.lineStyle(0, 0xffffff); for (var i = 1; i<=cs; i++) { ln.moveTo(sw/2+r*Math.cos(i/cs*p), -d+300+r*Math.sin(i/cs*p)); ln.lineTo(sw/2+r*Math.cos(i/cs*p+p/2), -d+300+r*Math.sin(i/cs*p+p/2)); } //draw a background with gradient color; createEmptyMovieClip("bg", 0); with (bg) { colors = [0x6666ff, 0xffffff, 0x660099]; alphas = [30, 30, 80]; ratios = [0, 100, 200]; lineStyle(5, 0x00ff00); matrix = {matrixType:"box", x:200, y:115, w:50, h:450, r:p/2}; beginGradientFill("linear", colors, alphas, ratios, matrix);
moveTo(-200-sw, -100);
lineTo(200+sw, -100); lineTo(200+sw, 100+sh); lineTo(-200, 100+sh); lineTo(-200, -100); endFill(); } // r1 = 50; r2 = 170; nu = 32; //they are three parameters of center circle; cr = 600; //cr is radii of center circle; createTextField("te", 5, 75, 100, 160, 100); te.textColor = 0x9900ff; //create text to show loaded data; function fo1(nam, de, ro) { na = createEmptyMovieClip(nam, de); with (na) { _y = 40; lineStyle(0, 0x000000, 0); colors = [0x6666ff, 0xffffff, 0x660099]; alphas = [130, 130, 20]; ratios = [0, 120, 200]; matrix = {matrixType:"box", x:-cr/2, y:-cr/2, w:cr, h:cr, r:p/2}; beginGradientFill("radial", colors, alphas, ratios, matrix); //Use ActionScript to make gradient fill; moveTo(r1, 0); var bl = Math.cos(p/nu); for (var i = 1; i<=ro; i++) { curveTo(r1*Math.cos(i*p/(nu/2)-p/nu)/bl, r1*Math.sin(i*p/(nu/2)-p/nu)/bl, r1*Math.cos(i*p/(nu/2)), r1*Math.sin(i*p/(nu/2))); } lineTo(r2*Math.cos(ro*p/(nu/2)), r2*Math.sin(ro*p/(nu/2))); for (var i = ro; i>=1; i--) { curveTo(r2*Math.cos(i*p/(nu/2)-p/nu)/bl, r2*Math.sin(i*p/(nu/2)-p/nu)/bl, r2*Math.cos((i-1)*p/(nu/2)), r2*Math.sin((i-1)*p/(nu/2))); } lineTo(r1, 0); endFill(); } } //use this function to draw center circle, which is draw by curverTo; onEnterFrame = function () { ab = _root.getBytesLoaded(); bb = _root.getBytesTotal();
//get data sb = int(ab/bb*nu); fo1("di", 4, sb); di._x = 275; di._y = 200; di._yscale = 25; di._rotation = -30; //call function to draw fo1("yz", 3, sb); yz._xscale = 100*Math.pow(3, 0.5)/2; yz._yscale = 25; yz._alpha = 30; yz._x = 275; yz._y = 360; //make another transparent center circle at the bottom as shadow of upper one; if (ab<bb) { te.text = "download: "+int(ab/1000)+"K/"+int(bb/1000)+"K\rpercentage: "+int(ab/bb*100)+"%"; // show load data; } else { te.text = int(bb/1000)+"K Finished!\rClick the circle to go >>>>;" di.onPress = function() { delete onEnterFrame; te.removeTextField(); di.removeMovieClip(); yz.removeMovieClip(); ln.removeMovieClip(); bg.removeMovieClip(); play(); }; } };
That is the final effect:
Code:
onClipEvent (load) { this._x = 180; this._y = 300; _root.ss.createTextField("tt", 1, 70, 50, 100, 20); _root.ss.tt.textColor = 0xff0000; _root.ss.createEmptyMovieClip("louding", 2); with (_root.ss.louding) {
lineStyle(0, 0x0000ff, 0); moveTo(0, 0); //originating point; beginFill(0xff0000, 100); lineTo(0, 10); lineTo(10, 10); lineTo(10, 0); endFill(); } _root.ss.createEmptyMovieClip("loudingk", 3); with (_root.ss.loudingk) { lineStyle(0, 0x000000, 100); moveTo(0, 0); //originating point; lineTo(0, 10); lineTo(200, 10); lineTo(200, 0); lineTo(0, 0); } } onClipEvent (enterFrame) { load = int(_root.getBytesLoaded()/_root.getBytesTotal()*100); _root.ss.tt.text = "loading"+load+"%"; _root.ss.louding._width = 2*load; if (_root.getBytesLoaded() == _root.getBytesTotal()) { _root.play(); } }
That is the effect:
Preloader effect 3
1. Import a movie in SWF Quicker and add a new scene ahead of Scene panel. 2. Add the following ActionScript in the first frame of the new scene.
Preloader Effect 4
1. Open a movie in SWF Quicker and add a new scene ahead of Scene panel. 2. Create a new movie clip and drag it to first frame of new scene, name it "ss" in properties panel. 3. Add the following ActionScript in the first frame of the new scene.
Glad that I could help. Remember, the world is your imagination.
An Example of a Simple Preloader
Overview: The following is an example of a simple preloader. While you access the page, a "Loading..." message appears until the flash movie has finished loading.
Steps: (take reference of the preload.sqf file available in the source file.)
1. Launch Sothink SWF Quicker.
2. In the blank document, rename Layer 1 as Bottom Border, add a keyframe in Frame 1 to place a background border.
3. Create a new layer 2, rename it as Banner Frame, and add a keyframe in Frame 1 to put a banner. (Now a background frame in layers 1 (Bottom Border) and 2 (Banner Frame) has finished.)
4. Add another layer 3, rename it as Preloader. Create a movie clip ("mc") in Frame 1. In the example, a very simple movie clip is used with 3 layers: a layer containing text explaining what was happening, and 2 layers for a masking effect with the word "Loading ....". It is to display the preloading message before the flash movie is completely downloaded.
5. Add layer 4 and rename it as Main Movie to place the main movie in Frame 4. When all movie frames loaded, the main movie shall start.
6. Add layer 5 and rename it as Text. Use Text tool to input %. And use Text tool again to draw a text block. Set this block text as "Dynamic" and input "textvar" in Var box.
7. Finally add an action layer consisting of the following 3 key frames: Action Layer - key frame 1 action script:
Code:
if (_framesloaded >= _totalframes) { gotoAndPlay (3); } else { _root.textvar = int((_framesloaded/_totalframes)*100); }
Action Layer - key frame 2 action script:
Code:
{ gotoAndPlay(1); } Action Layer - key frame 135 action script (the last frame in the example movie):
{ stop();
Preloader Design
Have you ever met such problem: you get a smooth preview of artwork in local internet, but it seems stopping and starting at intervals after it uploads to internet? We can not keep away from meeting this problem. Is there any way to solve it? Certainly, what you need is to add a preloader that lets users know nothing is wrong with the connection and the movie is loading. In this tutorial, you will get some designing ways of preloader.
Series: SWF Quicker 2.0 Estimated Time of Completion: 30 minutes Prepared work: download Sothink SWF Quicker -- http://www.sothink.com/product/swfquicker/download.htm
1. Design a simple and static preloader.
Characters "loading" disappear when the Flash is loaded completely.
Before we get down to designing this preloader, let’s analysis why SWF happened to stop and start at intervals and what the truth of creating a preloader is.
As everybody knows, we use streaming technology to play movie that means one frame is loaded, one frame is played. It takes a while to wait for the playing of the frame which is loaded too much content such as sounds and symbols. Adding preloader is to let the movie starts right after frames are totally loaded. The key point of designing a preloader is whether the total frames are loaded or not.
Suppose that you already have a movie made, how to add a simple preloader?
First, do the following to each layer: Select all the frames in the layer and right-click to choose Cut Frames. Press F7 to insert a blank keyframe in frame 1 and 2. In frame 3, right-click to choose Paste Frames. I will show you the timeline as follows: The timeline is displayed like this:
Remember to do the above step to each layer. If you use ActionScript such as gotoAndPlay(2), you should adjust the frame number in the bracket after adding blank frames.
We now begin to design preloader in the two blank frames.
First, select one layer and write "loading" on the canvas. Select another layer or add an action layer if there is only one layer in you Flash. Change frame 2 to a keyframe. Whether the whole frames are loaded to memory is decided by checking from frame 2. In another word, the movie begins to play when the check result shows the movie is loaded completely, or it will back to frame 1.
We use _framesloaded, which is frame number loaded in memory and _totalframes, which is the frame number of this movie to check the state of loading. That means the flash is loaded completely if two numbers are equal.
Finally is jumping command. Adding gotoAndPlay(3) between If and Else means to play completely loaded movie; adding gotoAndPlay(1) before Else means back to frame 1. The ActionScript in frame 2 is as follows:
Code:
if (_framesloaded == _totalframes) {
gotoAndPlay(3);
} else {
gotoAndPlay(1);
}
The preloader is done! Load it to your server to see the effect.
2. Design a preloader with ProgressBar.
You are about to experiment with the designing of preloader attached a ProgressBar.
ProgressBar lets users know the left time of loading Flash. This lesson has the same truth as the former one though it is a little bit complex.
First, input three blank frames at the beginning of movie.
In frame 1, write "loading…" on the canvas and draw a rectangle with a transparent fill color and black line as ProgressBar.
Draw another blue rectangle with a blue fill color and no outline border as rate of progress.
Convert it to movie clip. Double-click the movie clip to edit it in movie clip-editing mode.
Make the top left corner of the movie clip on the center of the movie clip-editing mode.
Back to main movie. Because we edit the blue rectangle in movie clip-editing node, it is off the original position in main movie now. Select the movie clip and adjust it inside of ProgressBar by direction keystrokes.
Select the movie clip and input an instance name such as "load" in properties panel. After that, set the alpha value of movie clip as 0. That is to hide the ProgressBar which in a state of 100% before it plays the first frame.
In the following, we will add ActionScript in frame 2 to control the length of ProgressBar and
check whether the movie is loaded or not. Obviously, the difference lies in the content of frame 2.
Select another layer or create an action layer, insert keyframe in frame 2 and frame 3.
The ActionScript in frame 2 is as follows:
Code:
load._xscale=_framesloaded/_totalframes*100;
load._alpha=100;
The instance name in line one is scale of X coordinate, which can be set as _framesloaded / _totalframes * 100.
The content in frame 3 is similar to the simple preloader. The only difference lies in the frame number in bracket.
Code:
if (_framesloaded==_totalframes) {
gotoAndPlay(4);
} else {
gotoAndPlay(1);
}
The preloader is done! Load it to your server to see the effect.
See more details, please click preloader.rar (8.41 KB) to download source file.
Menu without ActionScript
With my friend-SWF Quicker, you can create excellent navigation even without ActionScript though it is a bit complex here.
Series: SWF Quicker 2.0
1. Launch SWF Quicker. Set movie's width as 760; height as 105; frame rate as 60. 2. Draw a line on the canvas, set its line width as 1, color is gray.
3. Create a new movie clip and name it mcMenu1, write characters “Home” on the canvas and set its properties as following: font: Arial; font size: 14; font type: static; align: align center. Insert a keyframe in frame 10. Reduce the text size to 80%. Please notice to adjust text position about (0, 0). After that, create motion tween between frame 1 and 10.
4. Add ActionScript in frame 10:
Code:
stop();
5. Make a copy of mcMenu1 and rescale text size to 110% in Transform panel. Please notice to adjust text position about (0, 0). TIP: to get a copy of a symbol, Right-click mcMenu1 in the library and choose copy in context menu, then right-click any place of library and choose paste.
6. Create a button and name it btnMenu1. In frame up, drag mcMenu1 to stage. In frame Over and Down, drag mcMenu1z to stage. Draw a rectangle the same size with the characters to define the area of the button that responds when clicked.
7. We have finished one button, another six named btnMenu2 btnMenu3 btnMenu4…btnMenu7 are needed respectively. They represent “Sample”, “ActionScript”, “Tutorials”, “Photograph”, “Diary” and “Download”.
8. Now, we start to make content of the scene. Convert the gray line in mentioned in step 2 to MC and name it group. Double-click it to enter editing-mode.
9. Insert a keyframe in frame5 and drag gray line to position (200, 0). Insert a keyframe in frame 345.
10. Insert a new layer, insert a keyframe in frame 2 and drag the gray line from library to stage-(0, 0). Insert a keyframe in frame 6 and drag the gray line from library to stage-(300, 0)
11. Repeat the above method to create 6 layers. Start-stop frame of gray line were back forward a frame in each layer in turn. The interval is 100 pixels.
12. Insert a new layer. Insert a keyframe in frame 10. Drag btnMenu1 to stage and position it on the left of first gray line. Insert keyframe in frame 14 and 25 respectively. In frame 14, remember to position it between the two intervals and nearer to the second one. In frame 25, please remember to place btnMenu1 in the middle of two intervals.
Timeline in frame 14:
Timeline in frame 25:
13. Use this method to lay out these seven buttons, extend the frames of each button layer to 54 frames. Add a layer AS and insert a keyframe in frame 54, add ActionScript as follows:
Code:
stop();
14. We use mask to make the sub-buttons appearing the same time. We make a mask motion between frame 55 and 66 to let the buttons come out.
15. We are now to make single sub-button’s appearing effect. All of the sub-buttons are visible when they first step into your eyes, but only the one you place cursor on is visible while others are disappear. See more details, you can download the source files at the end of this lesson.
16. We are now to add ActionScript to each sub-button, for instance, to add the following ActionScript which means to play a specific frame when cursor over the button in the Home button. Other buttons are the same but only frame tagging.
Code:
on(rollOver) { gotoAndPlay("menu1"); }
17. Insert a new layer above layer submenu; create a transparent button in this layer as hit area. The play head back to frame tagging-allmenu when mouse rolls out of button
Code:
on(rollOut) { gotoAndPlay("allmenu"); }
18. Finally, Please adjust the position of the gray line to (-200. 40) to let the menu display completely.
See more details, you can download the source files from menunoas.rar (16.05 KB).
FLEXIBEL NAVIGATION
Zooming is inhibited in the above SWF. You can make it greater in size to get the full dragging effect while you place it in Web page.
Since the designing task that making six buttons and placing them properly are easy for you, I will focus on explaining the codes but not the designing process. For more information, please refer to source file at the end of this tutorial I provide for you.
I want to share my idea formed before I get down to making this navigation menu with all of you. Let us back to observe this chain motion. The other buttons keep a distance and an angle with the one you press and drag. How to make it? First, enter a0, a1, a2… as instance name of the movie clip to contact corresponding number 0, 1, 2, 3… and then we can control the contact between the buttons around by plusing or minusing the numbers. That is we called circulation. Many skills are included in the following codes I show you.
Code:
stop(); fscommand("allowscale", false); //the following customize the event when you press and release the button. this.dragging is to indicate that the button is pressed down; //it is to avoid the collision between mouse control and computer control; //_root.dr is to indicate one of the buttons is pressed down in main scene; function doDrag() { this.startDrag();
this.dragging = true; _root.dr = true; this.pres = true; this.gotoAndStop(2); } function noDrag() { stopDrag(); this.dragging = false; _root.dr = false; this.pres = false; this.gotoAndStop(1); } //change icon when cursor over; function showme() { this.gotoAndStop(2); } //back a random coordinate. Use the distance between it and original coordinate which is less than 15 to make a slight shake; function rando(x, y) { six = Math.random()*30+1+(x-15); siy = Math.random()*30+1+(y-15); } //following is to control move; function makemove() { //it can be divided into several circs: one is that no button is pressed down in main movie. Write an original position; //generate random move by random function and back to original position; if (!_root.dr) { if (random(80) == 1) {//It move it self even if you don’t touch it; var s = random(6); rando((_root["a"+s].oldx), _root["a"+s].oldy); _root["a"+s]._x = six; _root["a"+s]._y = siy; } //the following is flexible move formula. First to talk about “k”, which is to partition the distance between current position and target point. “vx” increases gradually when “dx” decreases. “dx” changes to negative when “vx” exceeds target point. Then”vx” decreases gradually and back to move to make a ceaseless shake; var dx = this.oldx-this._x; var dy = this.oldy-this._y; this.vx += dx*k; this.vy += dy*k; this._x = this._x+this.vx; this._y = this._y+this.vy; this.vx = this.vx*damp; this.vy = this.vy*damp;
//one circ is that one button is pressed down but not the current button; } else if (!this.dragging && _root.dr) { mytxt = new String(this._name); namenumber = Number(mytxt.charAt(1)); //it is not button 0 or button 5; if (namenumber != 0 && namenumber != 5) { var xdis = this._x-_root["a"+(namenumber+1)]._x; var ydis = this._y-_root["a"+(namenumber+1)]._y; var ang = Math.atan2(ydis, xdis); // design a target which distance itself 90 and approach to the near buttons including the one before and after it; var tarx = _root["a"+(namenumber+1)]._x+Math.cos(ang)*90; var tary = _root["a"+(namenumber+1)]._y+Math.sin(ang)*90; this.vx += (tarx-this._x)*k; this.vy += (tary-this._y)*k; this.vx = this.vx*damp; this.vy = this.vy*damp; var xdis = this._x-_root["a"+(namenumber-1)]._x; var ydis = this._y-_root["a"+(namenumber-1)]._y; var ang = Math.atan2(ydis, xdis); var tarx = _root["a"+(namenumber-1)]._x+Math.cos(ang)*90; var tary = _root["a"+(namenumber-1)]._y+Math.sin(ang)*90; this.vx += (tarx-this._x)*k; this.vy += (tary-this._y)*k; this.vx = this.vx*damp; this.vy = this.vy*damp; this._x += this.vx; this._y += this.vy; //the circs of button 5. We take button 0 as a fixed point which is always back to original position; } else if (namenumber == 5) { var xdis = this._x-_root.a4._x; var ydis = this._y-_root.a4._y; var ang = Math.atan2(ydis, xdis); var tarx = _root.a4._x+Math.cos(ang)*90; var tary = _root.a4._y+Math.sin(ang)*90; this.vx += (tarx-this._x)*k; this.vy += (tary-this._y)*k; this.vx = this.vx*damp; this.vy = this.vy*damp; var xdis = this._x-_root.a0._x; var ydis = this._y-_root.a0._y; var ang = Math.atan2(ydis, xdis); var tarx = _root.a0._x+Math.cos(ang)*90; var tary = _root.a0._y+Math.sin(ang)*90; this.vx += (tarx-this._x)*k;
this.vy += (tary-this._y)*k; this.vx = this.vx*damp; this.vy = this.vy*damp; this._x += this.vx; this._y += this.vy; } } } //initial number here; k = 0.4; damp = 0.7; numFeet = 5; forbid = 0; // bind six transparent buttons to respond dragging, the coordinates is corresponding to six buttons one by one.; for (i=0; i<=5; i++) { _root.lines.attachMovie("b", "a"+i, -i); _root.lines["a"+i]._x = _root["a"+i]._x; _root.lines["a"+i]._y = _root["a"+i]._y; _root["a"+i].oldx = _root["a"+i]._x; _root["a"+i].oldy = _root["a"+i]._y; _root["a"+i].pres = false; } //add event for 6 button movie clip; for (i=0; i<=5; i++) { _root["a"+i].onRollOver = showme; _root["a"+i].onPress = doDrag; _root["a"+i].onRelease = noDrag; _root["a"+i].onReleaseOutside = noDrag; _root["a"+i].onEnterFrame = makemove; _root["a"+i].follow = 0; _root["a"+i].vx =0; _root["a"+i].vy =0; } //follow the coordinates of 6 button movie clip and draw a line between them; _root.lines.onEnterFrame = function() { _root.lines.clear(); _root.lines.lineStyle(1, 0, 50); i = 0; while (i<=numFeet) { if (i != 5) { _root.lines.moveTo(_root["a"+i]._x, _root["a"+i]._y); _root.lines.lineTo(_root["a"+(i+1)]._x, _root["a"+(i+1)]._y); } else if (i == 5) { _root.lines.moveTo(_root.a5._x, _root.a5._y); _root.lines.lineTo(_root.a0._x, _root.a0._y);
} i++; } };
Dragging effect can be made by pressing the movie clip "button"; adoptive effect can be made by rolling over a movie clip "button". We use a transparent movie clip to detect the above two effects, one more needs to kown, function “hitText” is key function here. The following codes are added to the transparent movie clip.
Code:
onClipEvent (load) { this.oldx = _parent._x; this.oldy = _parent._y; } onClipEvent (enterFrame) { this.dx = (_parent._x-this.oldx)*(_parent._x-this.oldx)+(_parent._y-this.oldy)*(_parent._y-this.oldy); if (_root.forbid == 0 || _root.forbidname == _parent._name) { if (_parent.hitTest(_root._xmouse, _root._ymouse, true)) { _root.forbid = 1; _root.forbidname = _parent._name; t = substring(_parent._name, 2, 1); this.ok = 1; if (this.dx>=20000 && _root["a"+t].pres == false) { _parent._x = this.oldx; _parent._y = this.oldy; _root.dr = false; _root["a"+t].dragging = false; _root.forbidname = _parent._name; _root.forbid = 0; _root["a"+t].gotoAndStop(1); } else { _root.dr = true; _root["a"+t].dragging = true; _parent._x = _root._xmouse; _parent._y = _root._ymouse; _root["a"+t]._x = _root._xmouse; _root["a"+t]._y = _root._ymouse; } } else {
if (_root["a"+t].pres == false) { if (this.ok) { _parent._x = this.oldx; _parent._y = this.oldy; _root.dr = false; _root["a"+t].dragging = false; this.ok = 0; _root.forbidname = _parent._name; _root.forbid = 0; _root["a"+t].gotoAndStop(1); } } } } }
The function of codes above are: the buttons are following cursor when your cursor is close to button, just like you have already touched the button and to drag it. The farther the cursor is away from the original coordinates, the more weak the adsorption is.
Now, I will talk something about the rule of flexibility.
Design a Button
Take a tour of this tutorial and you will get the way to create a button
Create a Button
In this tutorial, I focus on telling you how to create a button.
Series: SWF Quicker 2.0 +Estimated Time of Completion: 15 minutes
1. Launch SWF Quicker. Select Insert>New Symbol.
2. In New Symbol pop-up box, name it button.
3. Now, you enter into button-editing mode. A Button is made up of four states: Up, Over, Down and Hit as shown in the illustration below:
TIP: Let us know some details of the four states first. Up: The Up state is the default appearance of the button. It is displayed when the movie is playing and whenever the mouse is outside the button Over: The Over state is displayed when the mouse is moved inside the button. Down: The Down state is the 'clicked' appearance of the button. It is displayed when the mouse is clicked inside the button Hit: The Hit state defines the active area of the button that reacts to mouse event. It is an invisible state and is never displayed.
4. Draw an ellipse on Up state. That is the default appearance of the button. Hit F6 to insert keyframe in Over, Down, Hit respectively. The program inserts a keyframe that copies the contents of the Up frame.
5. For constituting the distinction among the three states, we need to give each state a different color. Select Over frame in timeline and click ellipse on the canvas. In transform panel, click the down arrow on the Color box to set the color. Either select a color from the drop-down color picker, or directly input the RGB or HSV value on the right as well as the Alpha value to change the transparency of a color.
6. Please use the same method to change the color of Down Frame. The Hit Frame is not visible
on the canvas, but defines the area of the button that responds when clicked. Verify that the image for the hit frame is large enough to cover the images of the other three frames.
7. Click Scene 1 to back to the main movie again, and then drag symbol 1 from library to the canvas. Now press Ctrl+ENTER to preview it. Try to move your cursor over and press the button, sure you will get the effect.
Just like each movie clip instance, each button instance is an ActionScript object with its own properties and methods. You can give a button an instance name too, by inputting the name in the Properties panel and manipulate it with ActionScript.
XML Basics
Here is the basic syntax of XML; I will explain the methods and properties of XML in common use with a simple example.
Series: SWF Quicker 2.0 Estimated Time of Completion: 18 minutes
1. Build XML object:
Code:
var myXML = new XML();
2. Load XML file:
Code:
myXML.load("data.xml");
3. Ignore white space in XML file:
Code:
myXML.ignoreWhite = true;//Default setting is false.
4. Process function of XML Object:
Code:
myXML.onLoad = function(success) { if (success) { statements; } }
5. Contents of "data.XML" file: <xml version="1.0" encoding="UTF-8" ?> <data1 name="imagebear"> <data2 name="mariger">xiaoshandong</data2> <data3 name="mariger3">xiaoshandong3</data3> </data1>
6. Using trace to display the return value:
myXML.childNodes[0] will return: <data1 name="imagebear"> <data2 name="mariger"> xiaoshandong </data2> <data3 name="mariger3"> xiaoshandong3 </data3> </data1>
myXML.childNodes[0].nodeName will return: data1
myXML.childNodes[0].attributes.name will return: imagebear
myXML.childNodes[0].childNodes[0] will return: <data2 name="mariger"> xiaoshandong </data2>
myXML.childNodes[0].childNodes[0].nodeName will return: data2
myXML.childNodes[0].childNodes[1].attributes.name will return: mariger3
myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue xiaoshandong
Code:
var myName = myXML.firstChild.firstChild; trace(myName.nodeName);//data2 will be exported. myName = myName.nextSibling; trace(myName.nodeName);//data3 will be exported, childNodes[0] is equal to firstChild.
7. If you test the following codes and look at the trace value, you will understand the usage.
Code:
var myXML = new XML(); myXML.load("data.xml"); myXML.ignoreWhite = true; myXML.onLoad = function(success) { if(success) { myArray = myXML.childNodes[0]; trace(myArray.attributes.name); trace(myXML.childNodes[0].childNodes[1].firstChild.nodeValue); trace(myXML.firstChild); trace(myXML.childNodes[0].nodeName); trace(myXML.firstChild.attributes.name); trace(myXML.childNodes[0].childNodes[1].nodeName); trace(myXML.childNodes[0].childNodes[1].attributes.name); trace(myXML.firstChild.firstChild); trace(myXML.firstChild.firstChild.nodeName); trace(myXML.firstChild.firstChild.attributes.name); trace(myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue);
var myName = myXML.firstChild.firstChild; trace(myName.nodeName); myName = myName.nextSibling; trace(myName.nodeName); } };
Hopefully it is helpful to you!
Use XML to Construct Simple and Dynamic Website
I will take a simple sample to show you how to easily and fast develop SWF website with dynamic interface designed by SWF Quicker and XML file construction. It can be updated easily
by modifying XML file. If website space doesn't support database environment, or the quantity of data is too small, using XML is definitely the best choice.
Series: SWF Quicker 2.0 + Estimated Time of Completion: 35 minutes
In this sample, we will design an artwork collection. Here is datasheet construction:
Write these data in XML. Build a data.xml file as follows:
Code:
<?xml version='1.0' encoding='UTF-8'?> <data> <web> <project name="SWF Quicker 2.0" src="quicker.swf" intro="..."/> <project name="SWF Decompiler 2005" src="sdcp.swf" intro="..."/> <project name="Glanda 2005" src="glanda.swf" intro="..."/> <project name="DHTMLMenu 6.3" src="dmenu.swf" intro="..."/> </web> <animation> <project name="Snow" src="snow.swf" intro="..."/> <project name="Liquify" src="liquify.swf" intro="..."/> </animation> <game> <project name="Type Practice" src="practice.swf" intro="..."/> <project name="Tetris" src="tetris.swf" intro="..."/> <project name="Crazy Rocket" src="pipeadv.swf" intro="..."/> </game> </data>
Some small problems should be discussed here:
At first, encoding='UTF-8', which I used means that the data coding mode is UTF-8, is convenient for reading data in SWF, and at the same time can display the correct text on any language platform. You can, certainty, use other coding modes, which you have to mark in ActionScript with syntax.
For that XML is a tree data construction, its syntax is different from traditional datasheet. I define marks such as <web>...</web> and <game>…</game>, which denote the category of datasheet I made ahead. The part within these marks are items belonging to this category and then define each record in the marks like <web>…</web>:
Code:
<project name=" SWF Quicker 2.0"" src="quicker.swf" intro="..."/>
OK, let’s see the interface layout of SWF Quicker.
Code:
stop(); infoDefault = ""; showSrc = ""; nowBtnName = "no"; nowNum = 0; //Load data.xml file. xmlObj = new XML(); xmlObj.ignoreWhite = true; xmlObj.load("data.xml"); xmlObj.onLoad = function(success) { if (success) { trace("XML load success!"); parseXML(); } else { trace("XML load failure!"); } }; arr_WEB = new Array(); arr_ANIMATION = new Array(); arr_GAME = new Array(); //Add data of web, animation, game to the three arrays- arr_WEB, arr_ANIMATION, arr_GAME respectively.
function parseXML() { web = xmlObj.firstChild.childNodes[0].childNodes; for (var i = 0; i<web.length; i++) { arr_WEB[i] = new Object(); arr_WEB[i].name = web[i].attributes.name; arr_WEB[i].intro = web[i].attributes.intro; arr_WEB[i].src = web[i].attributes.src; } animation = xmlObj.firstChild.childNodes[1].childNodes; for (var i = 0; i<animation.length; i++) { arr_ANIMATION[i] = new Object(); arr_ANIMATION[i].name = animation[i].attributes.name; arr_ANIMATION[i].intro = animation[i].attributes.intro; arr_ANIMATION[i].src = animation[i].attributes.src; } game = xmlObj.firstChild.childNodes[2].childNodes; for (var i = 0; i<game.length; i++) { arr_GAME[i] = new Object(); arr_GAME[i].name = game[i].attributes.name; arr_GAME[i].intro = game[i].attributes.intro; arr_GAME[i].src = game[i].attributes.src; } } function showIcon(cate) { clearIco(); fileIconX = 20; fileIconY = 105; for (var i = 0; i<eval("arr_"+cate).length; i++) { temp = fileIcon.duplicateMovieClip("ico"+i, i); temp._x = fileIconX; temp._y = fileIconY; temp_name = eval("arr_"+cate); temp.name = temp_name[i].name; temp.intro = temp_name[i].intro; temp.src = temp_name[i].src; //Set event "RollOver", "RollOut" and "Release" for each icon. temp.onRollOver = function() { //Display the information of each icon in text field. _root.curName = this.name; _root.curIntro = this.intro; if (this.btnPressed!=true) { this.gotoAndPlay("mouseOver"); } }; temp.onRollOut = function() { //Delete information
_root.curName = infoDefault; _root.curIntro = infoDefault; if (this.btnPressed!=true) { this.gotoAndPlay("mouseOut"); } }; temp.onPress = function() { //Press button and open SWF file in new window. getURL(this.src,"_blank"); this.gotoAndPlay("press"); this.btnPressed = true; }; fileIconX += 27; //Set position for each icon, change to a new line if the number of icons is more than 9, because there is not enough space to include more than 9 icons. //You need to design yourself. if (i == 8) { fileIconX = 20; fileIconY += 28; } } } //Delete the function of last icon group. function clearIco() { var i = 0; while (this["ico"+i]!=undefined) { this["ico"+i].removeMovieClip(); i++; } }
OK, the codes of function are done. We now apply them in the buttons "web", "animation", "game". Please add ActionScript in web button:
Code:
on (release) { _root.currCate="WEB"; showIcon("web"); }
We can deduce the release event of other two buttons.
The XML of dynamic website is done and we can test it to see if XML file can be loaded and converted to same amount of icons displaying at once. After that, the relative brief-introduction
can be shown when users place cursor on the corresponding icons. Click the icon; you can launch new webpage to display SWF. You can modify the detailed process methods as your desire.
OK! The content in this sample is almost done. You can modify as your desire.
Add ActionScript in frame 1 of main scene:
Tips: You needn’t do any modification in SWF if you want to add new artwork in web category; the only thing needed is to direct add a data item in XML.
Here, can you feel the power of XML data descriptive function? It can define marks, and the tree data construction can be directly read as XML object by SWF. It is so convenient. One more thing you need to know is that SWF currently can not direct support modifying XML file. That can be made by asp or php serve-side script.
Click xml.rar (7.12 KB) to download source codes:
Design a Window Blind
In this course, I focus on showing the basics of SWF Quicker, including using Paint Bucket tool, getting instances of a symbol, as well as modifying the Z-order of the objects.
Series: SWF Quicker 2.0 Estimated Time of Completion: 20 minutes Suggestions: It’s better to analyze the picture first before you get down to the course. The process of analyzing will help you to understand the following steps, and at the same time, make your next presentation in a creative way. The window blind is consisted of several rectangles, and each with linear gradient… Have you got it? Ok, go for it.
Step one: Launch Sothink SWF Quicker. By default, the program will create a new file when startup. The property of the canvas is Width: 400; Height: 300; Color: white.
Step Two: Create one piece of the window blind 1. Use rectangle tool to draw a rectangle on the canvas, make its width the same as canvas. Select Paint Bucket tool in Tools panel, set its fill color as following:
Tips: To make your shape no rim, just set the size of its outline as zero.
2. Change the gradient direction of the rectangle.
Step three: Make a control bar Draw a rectangle without rim, color: Black. Make it the same size as canvas and cover it completely. Draw two thin bars on it as following.
Step four: Get multiple pieces of window blind 1. Set the black rectangle on the left of canvas, and select the piece of window blind to active it. Select Modify>Z-order>Bring to front. 2. Right-click the piece and choose copy in the context dialog box, then right-click again to choose paste, use this method to get multiple piece.
Tips: In spite of copying, you can also get instances by dragging the symbol from library. The two methods can get the same effect.
Step five: Arrange the pieces Before you arrange them, you first have to select them, use transform tool to drag an area from right to left, including all the pieces. Click modify>Align>Align centre. Then make vertical spacing equal manually and drag two bars back to original place.
There you have it! Any time, good luck.
By the way, if you want to learn how to design a controllable window blind, please enter into tutorial>Interactivy.
Volume Controller
This tutorial is divided into two parts; the former is about drawing the symbols included in this controller, the latter is about using ActionScript to control it. Have a try, move the button to listen the volume changes.
Series: SWF Quicker 2.0 Estimated Time of Completion: 35 minutes
1 Launch SWF Quicker and set the background color as green.
2 Create a movie clip and name it RotateButtonPIC. Draw a round on the canvas and select a proper fill color. Set its line width as 0. Make a copy of this round and reduce its size as the following illustration. TIP: set coordinates of movie clip as X:0, Y:0 in Transform panel.
3 Create a movie clip and name it RotateButton, drag RotateButtonPIC to center of the stage. To make its precise position, you can refer to Transform panel. Insert a key frame in frame 50 and 100 respectively and set the rotating angle as the following. After that, create motion tween between frame 1 and frame 100. Add ActionScript in frame 1:
Code:
stop();
Rotating angle in frame 50:
Rotating angle in frame 100:
4 Create a button symbol and name it button. In button-editing mode, draw a rectangle in Hit frame. For that the Hit state defines the active area of the button that reacts to mouse event and it is an invisible state that is never displayed, any color you choose would be OK.
5 Create a movie clip and name it slider. Drag button symbol from library to editing area.
6 Import a MP3 file to library and name it sound.
7 Back to main movie and drag movie clip RotateButton from library to stage. Then you get an instance, which is now placed in frame 1 of layer one. In properties panel, enter rotate_mc as the instance name. Rename Layer I as rotate.
8 Insert a layer and name it button. Use drawing tool to draw the scale of the button and add the scale numbering. Add a dynamic text block on top left and input volume as Var in properties panel.
9 Insert a new layer and name it slider, drag movie clip slider from library and adjust it size. Enter slider_mc as its instance name in properties panel.
10 Insert a new layer and name it as. Add following ActionScript in frame 1:
Code:
stop();//stop movie at this frame; ss = new Sound(); // create a new sound; ss.attachSound("sound");//bind sound in library; ss.start(0,200); //begin to play sound and circulate 200 times; volume = ss.getVolume();
11 Double-click movie clip slider in library and select the button inside it, and then add following ActionScript to button:
Code:
on (press) { startDrag(this, false, left, top, right, bottom); // press mouse and start to drag. The dragging area is limited; dragging = true;//set Var as ture; } on (release, releaseOutside) { stopDrag();//release or release outside button, it stop dragging; dragging = false; // set Var as false }
12 Back to main movie and select movie clip slider. Add following ActionScript to it:
Code:
// It is to set coordinates of huadong_mc, which included button. The limitation is huadong_mc can only move horizontally; // only move 100 onClipEvent (load) { top = _y; left = _x; right = _x+100; bottom = _y; } // get coordinates of huadong_mc when Var is True. Notice to delete decimal fraction onClipEvent (enterFrame) { if (dragging == true) { n = getProperty("_root.slider_mc",_x); n = Math.round(n); // Set the a in a range of 0-100 a = 100-(n-Math.floor(left)); // the value of volume _root.volume = a; // the value of indicating movie clip and stop at volume. _root.rotate_mc.gotoAndStop(100-_root.volume); // it is volume of the sound, it is highest when X=LEFT; It is lowest when X=RIGHT; _root.ss.setVolume(_root.volume); }
}
13 No sound is playing when you press Ctrl+Enter to preview it. What is the matter? That is because we fell in calling the sound in library. Please right-click the sound in library to open Linkage dialog box.
The dynamic text block is used for testing; you can delete it in presentation as your desire.
See more details, click volume.rar (701.45 KB) to download source file.
Sound Controlled Switch
Do you find any way to control the sound included in your movie? You can first import sound to the timeline of movie clip and then control the sound by controlling the movie clip. Another widely used way is to use ActionScript to bind sound in the library. I will focus on showing you this method. Take earphotos and control the music.
Series: SWF Quicker 2.0
1. Launch SWF Quicker and import a sound file.
2. Right-click the sound file in library and select Linkage in the pop-up box. Set Identifier as sound.
3. Use text tool to write "sound stop" on the canvas and set the Var as btnText. Convert it to button, enter btnSound as instance name in properties panel.
4. Add a dynamic text block, which shows current play position information on the canvas and set its Var as curPos.
5. Add following ActionScript in frame 1 of main movie.
Code:
ss=new Sound(); //cods for bound sound; ss.attachSound("sound"); ss.start(); soundPlaying = true;//set current play state; function onEnterFrame() { curPos = ss.position+"ms"; //take millisecond as unit to show current sound position; }
6. Add following ActionScript in button
Code:
on (release) { if (soundPlaying == true) { ss.stop(); _root.soundPos=ss.position;//write current playback position this.btnText = "Sound Start";
soundPlaying = false; }else{ ss.start(_root.soundPos/1000);//continue playing from pause position; this.btnText = "Sound Stop"; soundPlaying = true; } }
See more details, click soundCtrl.rar (695.98 KB) to download source file.
Supported Video File Formats
You can import video files in a variety of file formats, depending on your system. Supported video file formats are as follows:
Series: SWF Quicker 2.0 Download: To download Sothink SWF Quicker, please click here -- http://www.sothink.com/product/swfquicker/download.htm
*.mpg, *.mpeg: *.mpg and *.mpeg are the coding formats used by standard commercial VCD, SVCD, and DVD movies.
*.m1v, *.m2v:
*.m1v and *.m2v are the coding format used by standard commercial VCD, SVCD, and DVD movies. Not including video streams.
*.vob: *.vob is a DVD movie file that contains MPEG video and AC-3 or other audio data.
*.wmv, *.asf: *.wmv and *.asf are Windows Media video stream formats. Note: You need to install Window Media Player. The version of Window Media Player is different according to the version of video encoder. We recommend the latest version Window Media Player 10, You can download Window Media Player 10 here-- http://www.microsoft.com/windows/windowsmedia/default.aspx.
*.avi: *.avi is a Windows multimedia video format from Microsoft. Note: AVI is a system builds-in encoder including standard uncompressed formats—AVI and compressed formats--IndeoVideo, MPEG, MicrosoftVideo1, Cinepak. All of them can be supported in SWF Quicker directly. For importing some of MPEG-4 compressed formats such as DIVX, XVID directly, we recommend installing FFDShow MPEG-4 Video Decoder, which can make better support in SWF Quicker. You can download FFDShow MPEG-4 Video Decoder here-- http://www.free-codecs.com/download/FFDShow.htm. For AVI movie, which is recorded by DV, you need to install corresponding manufacturer video encoder according to different DV equipments.
*.mov, *.qt: *.mov and *.qt are QuickTime video file format. Note: You need to install QuickTime Alternative. You can download QuickTime Alternative here-- http://www.free-codecs.com/download/QuickTime_Alternative.htm.
*.rm, *.rmvb: *.rm is RealMedia video stream format. *.rmvb is a type of video file, playable with RealPlayer from RealNetworks. Note: You need to install Real Alternative. You can download Real Alternative here-- http://www.free-codecs.com/download/Real_Alternative.htm.
*.mp4: *.mp4 is MPEG4 Video Format. Note: You need to install FFDShow MPEG-4 Video Decoder. You can download FFDShow MPEG-4 Video Decoder here-- http://www.free-codecs.com/download/FFDShow.htm.
*.3gp: 3gp is a file format which is used in mobile phones to store media (audio/video). Note: You need to install FFDShow MPEG-4 Video Decoder. You can download FFDShow MPEG-4 Video Decoder here-- http://www.free-codecs.com/download/FFDShow.htm
.
Note: For QuickTime video format, you should install QuickTimeAlternative and need not install QuickeTimePlayer. The same, for RealMedia video format, you should install RealAlternative.
Since there are so many types of video files currently, we recommend installing famous video and audio integrated codec package--K-Lite Mega Codec Pack, which makes the variety types of video materials you collect and design are supported in SWF Quicker easily. You can download K-Lite Mega Codec Pack here: http://www.free-codecs.com/download/K_Lite_Mega_Codec_Pack.htm.
Tips: We don't add uncommon video file formats in file filter. You can try to change the file extension to one of the recognizable formats, for instance, SWF Quicker doesn't recognize "m2t", which is the extension of MPEG2 (HDV HD mode-1) and it is sure to be the MPEG video streams. It’s better to change it to mpg and then import into SWF Quicker. There are certainly some formats that SWF Quicker can not support. It is better to save source file before you import these files, for that importing these files may lead some problems to SWF Quicker even make SWF Quicker exit.
Video Delivery Options
When we talk about delivering Flash Video, two options step into our mind: Embedded video and use ActionScript to playback external FLV file. Here I tell you the difference between them and help you choose one to match your needs.
Series: SWF Quicker 2.0
Embedded Video
Let’s start with embedded video, this method benefits the designers who are familiar with timeline, nevertheless, when you use this method to deliver video, users are likely to experience following limitations:
1. Large SWF files and long download times: This method dramatically increases the size of your SWF file, resulting in long publishing times and poor viewing experiences because users have to wait a long time to download the SWF before playback.
2. Audio sync issues: The frames-per-second rate of the video and the Flash movie must match or else the audio and video will be out of sync. Audio and video sync is limited after approximately 120 seconds of video. As a result, you may not get the expected looks.
3. Likely to cause Flash Player crash: For that this method dramatically increases the size of your SWF file, Flash player preserves large part of memory when you attempt to download or playback the SWF file which embedded video.
When to Use Embedded Video Because of these limitations, this method is only recommended in some cases when you absolutely need the video to be in the same file as the SWF file and the video is short and small.
Use ActionScript to Playback External FLV File
Comparing to embedded video, the method Playback external FLV offers a number of benefits over embedded video, including following:
1. Fast to preview and text Flash: For that you only need to publish the SWF interface during creation activity, you can preview Flash fast and the same time minimize the test time.
2. Quicker to start playback: Unlike embedded video, the file starts playing before it has completely downloaded.
3. Easy to update: To add or change content independently of the video player without the need to republish the SWF file is relatively easy.
4. Better performance: The performance and result of your video playback will definitely be better for that the FLV and SWF files are separate. The problems we met such as lack of sync between the fps rate of the video and the fps rate of the SWF file will never be a problem.
5. Easy to add title to video content: You can use call-back function to visit metadata of the video.
For embedded video, we can put video file into Movie clip and control any state such as play, pause, stop, fast forward, etc and process control block of the movie clip. And we control it just the same as we control Movie clip. For more detailed information, please refer to tutorial “Movie Play Forward or Backward-Simulate Video Player”.
In the above tutorial, the only difference lies in step 1. To embed video, you should import video file to the movie clip which has an instance name “video”. The other steps are totally the same.
The Settings of Coding of Importing Video File
You should balance various factors, including descriptive action, file size, bandwidth, frame rate, keyframe interval and pixel size of video. You can specify values of some of the factors. I show you the recommended settings list here:
You should follow some regular rules when you deliver the compressed Flash video on internet.
1. Higher bandwidth or we called Data Rate can get more video action, bigger file size, better frame rate, bigger pixel size.
2. That the Less action and smaller file size decrease the used bandwidth.
3. The keyframe rate decreases according to the decrease of bandwidth. Lower keyframe fate leads to a blurred picture and the same time reduce the required lever of bandwidth.
4. Keyframe rate, frame rate and data rate ought to be increased when action increases. The clips included more action should deliver more information to player. Since they use additional keyframes, it is not proper to deliver with a lower bandwidth.
5. Please reduce the frame size when the bandwidth is limited and quality is very important.
Before you import video file, you should set the frame rate of the SWF in advance, since the frame rate is decided by the settings of current movie.
Click File->Import to import video file to the stage, or you can also import it to library and the place it on the stage.
When you import a video file, you can also apply customized compression settings as follows:
Tips: You can also save the Video as an external FLV file, so you can play it using ActionScript 2.0 in SWF Quicker without embedding it in the movie.
Other Information You Need to Know
What is Bit rate?
Bit rate is the transmission speed of binary coded data. Before you code Flash video, you need to specify bit rate for code. The bigger the bit rate is, the higher quality the video and audio are. Select a proper bit rate: such as, if most visitors can use 56kbps modem, it is better not to offer 2Mbps bit rate video.
Keyframe and Increment Frame in Video
Flash video codes are a series of keyframes, which get completed and compressed images in a fixed time interval, attached some relative information such as: how to modify pixel of keyframes in order to generate the increment frame between current keyframe and next keyframe. Decoder creates increment frame based on keyframe during the process of playback. Keyframe interval is increment frames between keyframes. The bigger the interval is, the more difficult the decoder tries to find lost frames. Besides, there is no data rate big enough to compress and transmit data bit. Consequently, if the video clips with amount of action have big intervals, the pictures generated surely have a low quality. SWF Quicker can automatically insert different keyframe according to different size of each picture in each frame. This can better the quality of picture but in some sort increase the size of video file.
Glad to share our learning experience together, hopefully it is helpful to you!
Download To download Sothink SWF Quicker, please click here -- http://www.sothink.com/product/swfquicker/download.htm
Create Flash Video
Take the detailed tutorial tour to learn how to import a video as an embedded file in a few minutes.
Series: Sothink SWF Quicker 2.0 Prepared work: download Sothink SWF Quicker download Movie.wmv -- Movie.zip (700.69 KB)
1. Launch Sothink SWF Quicker. By default, the program will create a new file when startup.
2. Click File-->Import, in the pop-up dialog, select movie.wmv by browsing your local internet and click OK.
3. Specify video setting. You can specify the dimension of the video and also bit rate. Now please input Width: 164; Height: 132.
4. Click Finish to close the Import Video wizard. SWF Quicker will add the necessary frames to play the video.
5. Set the width and height of the background in property panel (If it is not open click view-->properties to open it). Width: 164; Height: 132.
6. Move your video on the canvas and cover it completely.
7. Click Export in the toolbar to export an embedded video as a .swf or .exe file, which retains the compression settings applied when the .swf or .exe file was created.
Is that easy? Absolutely!
Playback External FLV File
I have presented you with an article talking about the difference between embedded video and Using ActionScript to playback FLV. Now, I will give you an example to deep your understanding and practical skills of the latter one, which we recommend a lot.
Series: SWF Quicker 2.0 Estimated Time of Completion: 30 minutes Prepared work:download Sothink SWF Quicker
1. Before you begin this learning experience, you should prepare some components first, I suggest copying them from the source file. Click videoctrl.rar (3.88 KB) to download the source file. Tips: For that the FLV file is large in size -- about 2749KB, we didn’t include it in .rar file for your downloading. In fact, the FLV file in this tutorial can be replaced by any other one.
2. The external video source file formats can be converted to FLV file format by third-party software, such as Sothink Flash Video Encoder, Sorenson Squeeze and so on. Besides, SWF Quicker can also convert video source file to FLV video stream. Click File->New->New Window to open a window. In this tutorial, I click File->Import to Library to import the video file "videocontrol.avi". Click open and then set the parameters in Import Video popup box.
For that our bandwidth is 512K for DSL customers, you can direct select DSL (512Kbps), and set the width and Height as 320×240. Under the same bandwidth, the smaller the frame size is,
the higher quality the video is. For details about settings of showed in the following dialog box, you can refer to the article "Video Delivery Options".
Tips: You should select "Save a copy of the Flash Video File" (*.flv) to export video file.
Click Next to convert video file, after that, please close the new window and back to the first window. In this tutorial, I present you with videocontrol.flv, you can direct copy it from source file.
3. Set canvas size as 400×320, frame rate as 25. Position each component on proper place of stage as following illustration. To make better control, it is good to place different components in different layers and you can also give each layer an easy-to-distinct name. One more thing, you need to make the two buttons—Play button and Stop button overlapped. The visual properties of the two buttons can be controlled by ActionScript when movie playback.
Tips: Remember to give the video window on the stage a size more than 320×240 in Transform panel.
4. Enter "progress" as an instance name for progress bar and double-click the instance on the stage to enter into movie clip-editing mode. As the following illustration shows, layer3 is the mask of layer2. The rectangle in layer2 with an instance named "bar" and the triangle in layer 5 with an instance named "thumb" will move rightwards by using ActionScript along with the rate of progress of playback. The "thumb" can locate the specified position of the progress bar according to rate of progress when you drag it.
The ActionScript in layer 6 is :
Code:
stop();
Add ActionScript for "thumb":
Code:
on(press)
{
//Start to drag and limit the drag area.
this.startDrag(true,-72,11,72,11);
this.draging = true;
//Pause the video.
_root.oldvalue = _root.mediaPlaying;
_root.mediaPlaying = false;
_root.my_ns.pause(true);
}
on(release)
{
//Stop dragging.
this.stopDrag();
this.draging = false;
//Return to play state
_root.mediaPlaying = _root.oldvalue;
_root.my_ns.pause(!_root.mediaPlaying);
}
on(releaseOutside)
{
//The same to event "release".
this.stopDrag();
this.draging = false;
_root.mediaPlaying = _root.oldvalue;
_root.my_ns.pause(!_root.mediaPlaying);
}
onClipEvent(mouseMove)
{
//Compute the current proportion and call the function "scrubbing" to locate specified position for video while dragging.
if (this.draging)
{
_parent.bar._x = this._x -72;
_root.scrubbing(Math.floor((this._x+72)/144*100));
}
}
5. Back to main scene. Double-click the volume controller to enter into editing mode; the layer fracture is as follows. The crystal ball with an instance name "VolBtn" in layer 5 is volume control handle, which control the volume according to proportion when you drag crystal ball.
Add ActionScript to "VolBtn":
Code:
on(press)
{
//Start to drag and limit the drag area.
this.startDrag(true,0,-60,0,60);
this.draging = true;
}
on(release)
{
//Stop dragging
this.stopDrag();
this.draging = false;
}
on(releaseOutside)
{
//Stop dragging
this.stopDrag();
this.draging = false;
}
onClipEvent(mouseMove)
{
//Compute current proportion and set the volume when you drag.
if (this.draging)
{
percent = Math.floor((60-this._y)/120*100);
sound.setVolume(percent);
}
}
onClipEvent(load)
{
//Initialize audio object, target movie clip is set as movie clip which includes video, It is "_root" in this sample.
var sound = new Sound(_root);
}
6. Back to main scene. Right-click library panel and select "New Symbol", enter "video" as symbol name. Please note the symbol type is "Video", click OK to finish creating new symbol.
Insert a new layer in timeline and drag it to ahead of other layers. I will put a video window in this layer. Drag the symbol "video" from library to stage, and then you get the a transparent video window, which is an instance of video symbol. Set the transparent video window's size as 320×240 and enter "my_video" as its instance name. Tips: To select the transparent video window on the stage, you can click the cross line.
7. Insert a new layer as AS layer. Add actionscript in first frame as follows:
Code:
//Create local connection.
var my_nc = new NetConnection();
my_nc.connect(null);
//Create stream which is used to playback FLV file by the specified object "NetConnection".
var my_ns = new NetStream(my_nc);
//Attach the video import signal "NetStream" to video object instance "my_video".
my_video.attachVideo(my_ns);
//Set the buffer time.
my_ns.setBufferTime(5);
//Playback FLV file.
my_ns.play("videocontrol.flv");
//Get FLV file information, "duration" value is the length of time of FLV video stream.
my_ns.onMetaData = function(infoObject:Object)
{
totalTime = infoObject.duration;
};
//Get play state, set the relative variables when video stream finishes playback.
my_ns.onStatus = function(info)
{
if (info.code == "NetStream.Play.Stop")
{
mediaPlaying = false;
isEnd = true;
setPlayBtn(true);
}
};
//Set progress bar and time information.
function onEnterFrame()
{
if (mediaPlaying)
{
setTime(my_ns.time);
setBar();
}
}
//Set progress bar, converse the proportion of current time and total time to the location of progress bar.
function setBar(percent:Number)
{
if (percent==undefined)
percent = Math.floor(my_ns.time/totalTime*100);
progress.thumb._x = percent/100*144-72;
progress.bar._x = progress.thumb._x-72;
}
//Converse the time properties (unite is second) of video stream to format--"hour: minute: second: millisecond", and then set them to corresponding text block.
function setTime(aTime)
{
var Hours = Math.floor(aTime / 3600);
var Residue = aTime % 3600;
var Minutes = Math.floor(Residue / 60);
Residue = Residue % 60;
var Seconds = Math.floor(Residue);
Residue = Residue % 1;
var Millisecond = Math.round(Residue * 1000);
var TimeString = Hours + ":" + (Minutes < 10 ? ("0") : ("")) + Minutes + ":" + (Seconds < 10 ? ("0") : ("")) + Seconds + ".";
if (Millisecond < 10)
{
TimeString = TimeString + ("00" + String(Millisecond));
}
else if (Millisecond < 100)
{
TimeString = TimeString + ("0" + String(Millisecond));
}
else
{
TimeString = TimeString + String(Millisecond);
} // end else if
time = TimeString;
} // End of the function
//Locate the specified position for video stream according to proportion when you drag the progress bar. Remember to do some specific change when you drag the control handle to any place of the progress bar.
function scrubbing(percent:Number)
{
if (percent == 100)
{
isEnd = true;
setPlayBtn(true);
}
else
{
isEnd = false;
setPlayBtn(!oldvalue);
}
my_ns.seek(percent*totalTime/100);
setTime(my_ns.time);
} // End of the function
//Set the visual state of play button and pause button.
function setPlayBtn(bool:Boolean)
{
playBtn._visible = bool;
pauseBtn._visible = !bool;
}
//Initialize some variables.
mediaPlaying = true;
isEnd = false;
playBtn._visible = false;
stop();
8. Add ActionScript for Play button.
Add ActionScript for Pause button as follows:
Code:
on(release)
{
//Stop video playback, locate on initial position.
//You should use "my_ns.close();" if the video playback end stream, which can be used in other aspect.
mediaPlaying = false;
my_ns.seek(0);
my_ns.pause(true);
//Set Play button state and initial progress state.
setPlayBtn(true);
setBar(0);
}
Add ActionScript for play button as follows:
Code:
on(release)
{
//Playback video. If the video ends, it replays.
mediaPlaying = true;
if (isEnd)
{
my_ns.seek(0);
isEnd = false;
}
my_ns.pause(false);
//Set the Play button state.
setPlayBtn(false);
}
Add ActionScript for pause button as follows:
Code:
on(release)
{
//Pause playback.
mediaPlaying = false;
my_ns.pause(true);
//Set Play button state.
setPlayBtn(true);
}
Tips: For that the file name used in my_ns.play() is relative path, the FLV file and SQF ought to be saved in the same directory. The same, the SWF file published and FLV file also should be put in the same directory.
OK, everything is done! Press Ctrl+Enter to preview you presentation now.
Tips: You can put a list of FLV file in SWF Quicker and let users to specify the one they want to playback; or you can put them in the external XML file. SWF can read the XML file in order to get playback list, it is convenient for updating at any moment.
Glad to share learning experience with you!
How to Make a Counter by Sothink SWF Quicker
Do you want to know how many visitors surfed on your website? I guess your answer is yes. But how to do and which tool can create such a counter? Now, I will solve all the problems and show you the steps to create a counter.
Here, I will make this visit counter by Sothink SWF Quicker. Sothink SWF Quicker is a Flash editor to make Flash-based applications for website. It can create Flash games, Flash videos, interactive animations, text effects, slide shows, etc. By following the steps, you will get the counter like this:
Let’s begin to learn how to make counter:
Prepared Work and the Softwares Have Been Used:
Make sure your web site server has PHP installed
Adobe Dreamweaver CS3
Get the wonderful images, and use them to beatify your counter
Install Sothink SWF Quicker (See its interface) http://www.sothink.com/product/swfquicker/download.htm
Steps:
Step One: Make Background Image
Launch Sothink SWF Quicker and you will see the above screenshot. Click the canvas, and then set the canvas size in the "Properties" panel.
Import an image (Get the 1.jpg from zip file). Right click the empty area in the "Library" panel, and choose the option "Import…" from the context-menu.
Drag this image to the canvas, and adjust its position, size, etc in the "Transform" panel. You will see the frame 1 changes into keyframe from blank keyframe in layer 1.
Copy the image, and paste it into the canvas. Choose this image, and set its properties in the "Transform" panel.
Make sure the background image always showing. We insert the keyframe in the frame 40.
Step Two: Add Text and Write ActionScript for Them
Add a new layer by clicking the button (see figure), and then add text on it.
Choose the tool "Text" in the "Tools" panel. And drag a rectangle on the canvas, input the text "Count" in it. You can set the text properties in the below "Properties" panel.
Still choose the tool "Text" in the "Tools" panel. And drag another rectangle on the canvas, enter the "Properties" panel, set Type as "Dynamic" and Var as "count". You will see the frame 1 changes into keyframe from blank keyframe in layer 2.
Select the frame 2, and right-click to choose "Convert to Keyframe" from context-menu.
Select the frame 40, and right-click to choose "Insert Keyframe" from context-menu.
The timeline will display like this:
Choose the frame 1 in the layer 2, and enter the "Action" panel, input the below ActionScript:
this.loadVariables("count.php?num="+random(99));
Note: count.php should be the same name with your PHP page.
Choose the frame 2 in the layer 2, and enter the "Action" panel, input the below ActionScript:
this.loadVariables("count.txt?num="+random(999));
Choose the frame 40 in the layer 2, and enter the "Action" panel, input the below ActionScript:
gotoAndPlay(2);
Step Three: Export the Flash Counter
After all the work is done, you can click "Export" button to export this Flash counter.
Choose a directory to save this SWF file, and name it "count.swf".
Step Four: Make a PHP Page
Open your Dreamweaver, and create a PHP page named as "count.php".
Enter the "Code" view, and remove all the code in it. You need to paste the below code into the Dreamweaver.
<?php $count = file_get_contents("count.txt"); $count = explode("=", $count); $count[1] = $count[1]+1; $file = fopen("count.txt", "w+"); fwrite($file, "count=".$count[1]); fclose($file);
print "count=".$count[1]; ?>
Step Five: Make an HTML Page
Open your Dreamweaver, and create a PHP page named as "c.html".
In the "Design" view, click "Insert > Media > Flash" to insert the “count.swf” into the page.
After inserting the Flash, the result will be like this:
At last, upload all the files include count.swf, count.php, and c.html to the server, which PHP is installed on it (make sure these files are saved in one folder), to test if the counter works well.
Hope this tutorial can help you.
The users who register Sothink SWF Quicker can get source files. Contact us to get source files by Email to: Please write subject "Getting the source file of Counter" to [email protected]
Use Array Batch to Load External Pictures
It is a little bit complex to load external pictures with loadmovie function. Using array batch can make it much easier.
Series: SWF Quicker 2.0
1. Prepared work: load all pictures in a new folder. Use "acdsee" to open this folder. Select all pictures and choose Rename in editing menu. As the following illustration shows, use the default options "use template to rename files", "use numbers to replace #'s", "start at", etc. All the pictures will be renamed according to "Rename Template".
2. Launch SWF Quicker 2.0. Set the size of the canvas as Width: 640; Height: 480. Draw a rectangle and convert it into a new movie clip symbol, make seven copies of it. Why seven? Because we have eight pictures to load totally. Please lay them as follows:
Rename them as mc1, mc2……mc8.
Write following script in frame 1:
Code:
pic = new Array(); for (var i=1; i<9; i++) {
pic[i] = "t"+i+".jpg"; loadMovie(pic[i]£¬ "mc"+i); }
Click arraybatch.rar (97.98 KB) to download the source code.
How to Make a Mask Effect
This tutorial is aimed to develop you from elementary to intermediate standard. It is better to learn the elementary tutorial first if you are beginner of Flash creator.
eries: SWF Quicker 2.0
Take it easy. It is better to share some ideas which can be a resource of creation before we get down to learning this tutorial. Spotlight effect is always mistiness, how can we make such “mistiness”? An ellipse area with transparent center can help us. It is an radial gradient, which changes from bright white to dark background.
I will focus on the source codes and their explanations. I’m sure you can accomplish it!
1. I will show you the timeline first.
Action Layer: the actionscript used in this presentation. Circle: the circle which is following your cursor. Round: it is the round mask. Bright_line: the line is brightening up when the circle goes across it. Line: it is the dim line, which shows that cursor does not go across it. Shadow: it is the area which places the light gradient. The area has a shape same with motion_mask of Layer motion_mask.
Pic: the illuminating target is laid here.
2. The stage is displayed as follows:
It is better to pay attention to some details: one is the light symbol, double-click it in the library. You will find its sharp-angle is on the center of the stage. You can make it following the cursor without moving its tail. The other one is shadow symbol. You can find nothing on the stage while you double-click it in the library till layer 1 is clicked. It is a sector girding. To see it clearer, you can change the background color into anther color. Yes, it is a shape with radiate fill style.
3. The codes for the action of following cursor are explained here.
Code:
this.onEnterFrame = function() { if (_xmouse>620) { light._rotation = -60; //if the X axis of the cursor is above 620, spotlight will rotate -60 degree. Light is the instance name of spotlight. } else if (_xmouse<80) { light._rotation = 30; } else { //if the cursor motions in a range of 80-620 X axis. mask._xscale = (_xmouse-50)/4+70; //the height of the instance mask in layer motion_mask is changed as the position of cursor. //I think the number is proper. You can also change them into what your desire. mask._yscale = (_xmouse-50)/4+70; //the height of the instance mask in layer motion_mask is changed as the position of cursor. shadow._xscale = (_xmouse-50)/4+70; //the height of the instance mask in layer shadow is changed as the position of cursor.
shadow._yscale = (_xmouse-50)/4+70; //the height of the instance mask in layer shadow is changed as the position of cursor.
light._rotation = -(_xmouse-260)/6; //the setting of light’s rotation is from calculating the position of cursor. //the size is reduced according to the actual effect. mask._rotation = -(_xmouse-260)/6; shadow._rotation = -(_xmouse-260)/6; } };
The codes of circle and round are not mentioned. We use them to follow the cursor.
Click maskeffect2.rar (354.28 KB) to download the source code.
