Site hosted by Angelfire.com: Build your free website today!
Welcome to the Flash Tutorial.
This tutorial was written by Star_Cleaver and PikaExploder as a reference for all flash
users who have a question.

If you find errors in a script or in logic that you see on this page then report it to Star_Cleaver and it will
be fixed as soon as possible.(Please don't e-mail me asking for help with Flash, ask in the Flash forum).
Also, most of these codes are written by users of Flash MX so they might not be compatible with Flash 5.
If one of these scripts doesn't work for your specific situation then visit the Flash Forum and i'm sure that one of
the regulars would be glad to help you build your script. Thank you.


Sections

  • Where to get Flash
  • The menus
  • Making symbols
  • Gradients
  • Importing/Adding sound and pictures
  • Sprites and Bitmap editing
  • Animating/Walk Cycle
  • PreLoaders
  • Scroll Bars
  • Moving Objects with AS
  • Boundaries
  • hitTest
  • Dragging and Dropping Items
  • Using a Tween
  • Scrolling Backgrounds
  • Custom Cursor
  • Disable TAB key
  • Variables and Data Types
  • The Sound Object
  • Properties of Movie Clips
  • Hiding the right click menu


    Where to get Flash

    Macromedia Studio MX Free Trial Downloads

    Macromedia Products (Try/Buy)

    Macromedia Educational Store - cheaper versions of the product for those who qualify

    (Thanks to Newgrundling for all of that)

    -Back to Top-

    The Menus

    Flash has lots and lots of menus that house all of the things you need. I will only talk about the ones that i use alot.

    Property Inspector: this is your most valued menu. You can access it by pressing ctrl+F3 or by going to window->properties. This menu will show you all of the options available for each tool when selected and give you the details of objects you have selected at the time. Also if you just click on the blank stage the property inspector will allow you to change the background color or you movie and the size of your movie(these options are also available by pressing ctrl+J or through modify->document.

    Actions Panel: This menu is where you place all of your ActionScript(AS). You can acces it by pressing F9 or throught window->action. Click on the item you can to add actions too and then open it to add actions to that object. If open this panel you will see that there a list of all of the scripts available for flash, located in the sidebar. The buttons on the top allow you to do different things. They are pretty much self-explanatory in their purpose. If you go to the "view options" button you can change from "Normal Mode" to "Advanced Mode" and vice versa. Normal Mode is where you select your scripts and flash "helps" you build them by giving you the options for that script. Advanced Mode allows you to free-style your script. This is good if you are copying and pasting scripts into your movie from outside sources. But when building in Advance Mode, always make sure to use the "Check Syntax" button to check for errors in your script.

    Timeline:Your timeline is another important menu in Flash. It shows you what information you have where in your flash movie. If you right-click a frame you will all of the options you can select for that frame. Keyframes are "markers" on the timeline that tells flash that something changes on the frame. For Example: if you are trying to make an animation of a man walking, you will need to insert a new keyframe for each change in his stance. If not flash will change the content of the precious frame and you will have just a still image. Blank Keyframes are frames that have no content in them. The rest of the options are self-explanatory and the "Create Motion Tween" option will be covered later.

    Transform: This menu is accessed through window->transform or by hitting ctrl+t. This menu allows you to rotate, streatch and skew items on the stage. Just select the item you want to transform and change its values in this menu.

    Color Mixer and Color Swatches: Available through Shift+F9 and Ctrl+F9(and through window->color mixer/color swatches),these menus help you to select colors you want to use. They should look familiar if you've ever used Paint before. Just select the color you want. You can also change the Alpha value of an item through this menu. The alpha is the transparency of the color. 100 is opaque and 0 is not visible at all.

    Library: Windows->library or F11. This is where all of your assets are stored. Just drag your assets on to the stage to add them.

    Scenes: Windows->Scenes or Shift+F2. This is where all of your scenes are listed. You can add them, delete them, and move them from this menu.

    -Back to Top-

    Making Symbols

    What are symbols Symbols are your best friend in Flash. They are drawings that you have made that can be used over and over again without having to redraw them. They are found in the library. As a rule of thumb, if you use a picture more than once in a movie, like a background, then make it a symbol. It will help reduce your filesizes in the end.

    Types of Symbols Graphic: These are the basic symbols. They are static images of your drawing.
    Movie Clips:These are symbols that have timelines inside of the MAIN timeline. And these timelines run independently of the main timeline. So if the main timeline is stopped, this object will keep playing. They are also necessary for AS.
    Buttons:These are exactly what the name says, they are buttons that you can click. They are pretty worthless unless you have some actions attached to them. These are different then the other two symbols. Because if you right-click you button instance on the stage and go to edit, you will see that it has four frames, labeled "UP", "OVER" ,"DOWN", and "HIT". The UP frame is what the button will look like when you aren't hovering the mouse over it. The OVER frame is what the button will look like when you have the mouse over the button. They DOWN frame is what the button will look like when you click it. and The HIT frame is the actual area of the button that is active and will read the mouses. so if you have a big square and the hit frame is a circle, the button will only read the mouses presence over the circle part. The HIT frame is also not visible at all. so don't worry about making it look good. Also, if you only have a HIT frame for a button, the button will be invisible. It will appear a transparent blue color on the stage but won't be seen in the final project.

    -Back to Top-

    Gradients

    These are very useful things right here. They are quite simple to make but have lots of things you can do to them. Okay so make your object and then select the fill using the arrow tool. Then open up the color mixer. Then from the drop-down menu, change the fill from "solid" to "linear" if you want a linear gradient or "radial" for a radial gradient. You'll see your usual color mixer menu exept you'll see a little bar that displays the gradient and then under it is two arrows. These arrows are you two extreme colors of your gradient. You can move them around to change the gradient and you can also change the colors by clicking the arrow and then changing the color in the box. You can also add more arrows if you'd like by hovering the mouse below the bar until it has a plus sign next to it. Then click and it will add another arrow. This way you can make some very cool looking gradient.

    Now say you want to alter the shape of your gradient. This is when its time for the "fill transform tool." You'll see three "handles" that allow you to alter the fill. One let's you rotate, one let's you stretch the fill, and another let's you move the fill altogether.

    -Back to Top-

    Importing/Adding sound and pictures

    Importing them: If you want to bring sounds and pictures into your flash movie then this is how to do it. Just go to file->import or file->import to library(i'll explain the difference later) then select your file that you want to import. Not that hard, right? Now if you choose "import" then your item that you imported will appear on the stage, unless it a sound, then it will appear in the library. If you choose "import to library" then the items will appear in the library. This is good if you are importing a bunch of pictures at one time adn you don't want them to appear on the stage.

    Adding them:pictures:To add pictures just open the library and it should be there ready to drag onto the stage. Then place them where you want.
    sounds:To add sounds you can do one of two things. You can do the same thing as with the pictures or you can click on the frame you want to add it too and then open the property inspector and add it there. There should be a drop-down menu labeled "sound" then select your sound. Then you will also notice some other menus. These are very useful and i will explain why. Also you can find some great soudn fx at Flashkit and some great royalty free sound at NG Audio Portal.
    Effect: This menu lets you add some pre-made effects for you. Just select what you want. But its better to click "edit" and go in and add the effects for yourself. When you click "edit" you'll notice that you can see the "sound waves" of the sound. There should be two of them if the sound you imported was in stereo. These are the left and right channels. Now do you see the little white boxes in the corner of the view box. Click on it and drag it up and down. The lower you make it, the softer the sound will be. Now just click in the middle of the view box. It creates another box. You can move it up and down too. You can make multiple boxes to add some cool effects to your sound. Just use the Play button to test your sound. Also make sure the effects box is set to "custom" when using custom effects.
    Sync: This box allows you to set the sync of the music.
    "Event" is the default setting. It sets the sound to start playing on that keyframe and after it starts playing it will keep playing until its done, regardless of whether the main timeline is stopped or not.
    "Start" is much like "event" except that Start WILL NOT allow the sound to play if another instance of that sound is already playing. This is good for buttons that play a sound on press because if the person clicks the button 20 times the sound will not play twenty times but only once until it is completed then it will play again on press.
    "Stop" will stop any and all instances of a sound that are playing. This is useful if you only want to stop one sound instead of stopping them all with a StopAllSounds() command(we'll get to that one later)
    "Stream" will lock the sound to the timeline and it will have priority over the animation meaning that flash will slow down or speed up the animation to keep the sound on track. A streamed sound will stop when the timeline reaches the last frame fo the animation. This is good if you want to sync sounds to the timeline like for voices or sound effects. But streams setting is not good for looping because no matter how many times you tell a streamed sound to loop, it won't. So to loop a streamed sound would mean to add separate instances to the timeline which would take up lots of space!
    Loop: This option let's you loop a sound for a set number of times. This will not work on Streamed sounds but works great for start and event sounds. If you want a song to play for what seems like an eternity, just set its loop to a very high number like 999 because then it will loop 999 times before stopping. If you don't want the sound to loop then set it to 0.

    -Back to Top-

    Sprites and Bitmap editing

    Some of you might like the way sprite movies look and you want to make your own. Well you might have noticed if you import sprites into flash that they have a nasty white box around them. You have just discovered the "white box of death"!! Don't worry this is easy enough to fix if you know what you are doing. Well, you can use two methods to remove the "white box of death." *note: these methods can also be used to edit regular pictures.

    break apart: The first one is a little more tedious but it will give you a better look in the end. It uses the Break Apart command. Just select your sprite and then hit ctrl+b or modify->break apart. This will make your picture editable. Just use the eraser tool and zoom in real close and erase that white box!

    Trace Bitmap: This method might degrade your image quality a bit and its its not good for complex pictures because it will take up a lot of space, but it sure is a whole lot easier. What it does is turns the bitmap into vector art, the native art of flash. Okay what you want to do is select your image and goto modify->trace bitmap. Then you will see a little box with some options in it. After you select you options you can select portions of the picture to edit, just like a piece of art you created in Flash.
    Color Threshhold: This option sets the number of colors that will be allowed in your final product. The colors are averaged together in relation with each other by the distance between them as described in the Minimum Area. What flash does is it looks at the pixels within the minimum area and it averages them. If the color threshold value is bigger than the difference of the RGB of the two pixels then they are considered the same color. Therefore, the lower the Color Threshold, the more colors are in the final project and the higher it is, the less colors. This number ranges from 0 to 500.
    Minimum Area: This is the radius(in pixels) that is used to compare the RGB values of the pixels when doing color threshold. This is a number between 1 and 1,000.
    Curve Fit: This option sets how smoothly the outlines are drawn. Select tight if the shapes in the bitmap are complex and smooth if they are smooth.
    Corner Threshold: This setting determines how edges are handled. If they are lots of corners in you bitmap, choose many corners, and if not pick few corners.

    -Back to Top-

    Animating/Walk Cycle

    Methods:Well we got some requests for this and i'm not much of an artist but i'll still explain the methods used to animate. There are two methods of animation: Tweening and Frame-by-Frame
    Tweening: You should have learned tweening before this so now i'll show you how to animate a person with it. So the best way to do this is to to break all of you persons body parts into separate symbols, such as: left arm, right arm, left leg, right leg....etc. So what you do is put each one of these body parts on a separate layer. Then you can rotate them and move them around by tweening them. Very simple but effective method. The only problem is that you can see the separate symbols.
    Frame-by-Frame: This method is very time consuming, i'll tell you that right off the bat and it requires some good artistic talent but the end result justifies the work. What you do is make separate keyframes and draw you character in each one, moving ever so slightly. This is when you can whip out your good old friend, Onion Skins. You'll see this option underneath the timline and what it does it make a "ghost" of the frames before that frame. This helps because you can see what you drew in the first frame and then just erase and re-draw whatever body part you want to move. F-by-F animation is very space consuming. Your filesizes will jump in no time. So the best thing to do is optimize. For example: if you have the frames of your character walking, make them into a Movie Clip. Then you can re-use this later in the movie if your character is walking again.

    Learning how to animate: Well, to learn to animate takes lots of practice. If you are in need of a good tutorial on drawing/animatin i suggest the tutorials by Percival. He has a good tutorial on the walk cycle. Check them out, you might find them helpful. Also, just search the internet for tutorials, you're bound to find something.

    Blur Effects: Ever wondered how some artists made that cool blur effect. Well, i will tell you how to do it, although you can't do it in Flash. So for all you people who are stuck with flash, you'll have to go without. But with those of you with Photosop, you can make a picture and use the Guassian blur filter. This will make the picture look blurry.

    Drawing Tablets: A drawing tablet is a piece of hardware that hooks up to your computer(normally throught USB) and it allows you to draw, with a pen, on your computer. Well, you draw on the tablet and its transfered to your computer. Its a lot better than drawing with that old mouse. Most tablets have pressure sensitive drawing areas that allow you to press harder and it draws thicker lines. They are compatible with Flash and will make drawing your animations a lot easier.

    I suggest you get a Wacom Pad. Wacom is a very good brand of tablet. Go check out their website. Wacom.com Browse around and look at what they have to offer. You can also check out other brands of tablets, i'm not saying you have to get a Wacom, but i find that they are very good, high-quality pieces of hardware. Just choose a size that is right for you, and you're wallet. Don't think that 4"X 5" is small. You'd be suprised at how much you can draw with the little ones.

    -Back to Top-

    PreLoaders

    Now that you are an animating machine you need to learn how to make a preloader for you movies. No one wants a movie that starts playing when its not loaded. Most NG users don't like this and will actually give a worse vote because of it. Especially since there is no excuse for not having a preloader. Well, you may think, "i have a good excuse, i don't know AS." Well, that won't work anymore now due to the NG Preloader. This is a preloader that you can attach to the beginning of any movie and it will work for it. Its quite handy for those of you who don't care to much for AS. But i will still show you how to make a simple preloader for your flash.

    We will go throught this in a step by step method so that you can easily follow along.

    1)make a new scene and make that your preloader scene. goto window->scene and make sure it is at the top of the list.

    2)make two layers in your new scene. call one of the "actions" and the other "loader".(just to help keep things straight.)

    3)in the loader layer, make two keyframes; one on frame 1 and the other on frame 3.

    4)on frame 1 of the loader layer make your text that says "loading". you can even make it a movie clip if you would like some animation to your preloader, whatever you wanna do, just keep the format the same.

    5)on the actions layer make three empty keyframes. name frame 1 "start" and name frame 3 "end"

    6)on frame 1 of the actions layer, put this in the actions panel:

    lBytes = _root.getBytesLoaded();
    			//defines the varibable "lBytes" as the amount of bytes loaded from the movie
    			tBytes = _root.getBytesTotal();
    			//Defines the variable "tBytes" as teh amount of bytes in the total movie
    			if (lBytes>=tBytes && tBytes>0) {
    				gotoAndStop("end");
    			}
    //tells flash that if the loaded bytes are greater than or equal to zero and the total bytes are greater than zero, then the timeline will progress to the specified frame.

    7)on frame two of the actions layer, put this in the actions panel:

    gotoAndPlay("start");

    //makes the movie loop back to the first frame so that your movie doesn't play before its loaded

    8)now on frame 3 of the "loader" layer, you need to make your text that says "play". make this text a button and in the actions panel put this script:

    on (release) {
    			play();
    			}

    PreLoader w/ LoadBar: This time we will go through how to make a preloader with a loadbar because a loadbar is just another way to keep the user informed of how the movie is doing in its load process.

    1)repeat all of the steps of the first preloader

    2)now go back to your loading screen and make a little rectangular box.

    3)select ONLY the fill from the box. Make the fill an MC and name it whatever you want BUT make sure that your registraion point is on the left! This is very important, don't forget to do it.

    4)Now select your MC and go open the transform menu; windows->transform and then make the width of the box 1%

    5)Now go to the stage and select your MC. Goto the property inspector and change the instance name to "box"

    6)Now select your MC and then open the actions panel. Now add this to your code, right below where you define the variables:

    percentLoaded = Math.floor((lBytes/tBytes)*100);
    			//makes a percent from the byteLoaded and totalBytes.
    			_root.box._xscale = percentLoaded;
    			//makes the _xscale of the box equal to the percentLoaded.

    7)Now that should make your loadbar. Test your movie by hitting ctrl+enter and then go to view->show streaming. Then it will show your movie as it would stream at a certain speed. To change this speed goto debug and then pick your speed.

    PreLoader w/ text: Now this one will show you how to make a preloader with text boxes that tell you what percent is loaded and how many bytes are loaded. Even more to make your preloader spiffy.

    1)Repeat the processes above, you can do a loadbar if you want although you'll still need the "percentLoaded = Math.floor((lBytes/tBytes)*100);" to make this work so hang on to that even if you don't do a loadBar.

    2)Now, what you need to do is make a dynamic text box on your load screen. Leave it blank then give it an instance name "percent"

    3)Go back into your actions panel and add this:

    _root.percent.text = percentLoaded+"% of "+lBytes+" K loaded";
    			//displays the percentLoaded variable with some text in the dynamic text box.

    4)Now it should diplay something like this: "50% of 1234 K loaded" That's all fine and dandy but what if you want the person to be able to see for themselves how much is loaded. Well that's when you can throw in your lBytes variable:

    _root.percent.text = percentLoaded+"% "+Math.floor(lBytes/1024)+" /"+tBytes+" K loaded";
    //the same as before except this time we are puttin the bytes loaded over our bytes total. remember to put Math.floor because you don't want decimals in your preloader. I used simple math to put sure that the bytes loaded were converted into KiloBytes. Remember 1024 Bytes = 1 Kilobyte

    5)It will display something like: "50% 1000/2000 K Loaded

    And you're done! Happy you! You made one kickass preloader! Now you can apply what you know about preloader and make even more options for your preloaders. You are only limited by your creativity now!

    -Back to Top-

    Scroll Bars

    Have something you want to scroll? Well, this will tell you how. There are many ways to make a scroller. I'll just tell you how to do the most advanced ones. The simple ways involve moving an MC along a tween by using nextFrame and prevFrame. Those are simple enough that if you know basic AS you should be able to do it.

    Text Scroller: I'm gonna show you how to scroll a dynamic text field.

    1)Make your dynamic text field on the main timeline or inside an MC or wherever you want to put it. Give it the instance name "textfield". If you decide to put it in an MC just change the targeting appropriately. Also, the way you want to populate your dynamic text box is with AS. Give the dynamic text box the var "text"(its in the property inspector when you select the dText box). Then on the first frame that your textbox appears on put this:

    text="your text that you want the dynamic text box to say"

    The another thing you want to make sure that your dynamic text box is set to multiLine for the line type(in property inspector)

    2)Make your drawings of your up and down buttons. Then save them both as buttons and then save both of the buttons inside a movie clip. So you should have an MC with two buttons inside.

    3)Now go edit you MC. On the first frame put this script:

    this.startScroll = function(active, type) {
    				if (active) {
    					this.type = type;
    					this.onEnterFrame = function() {
    						if (type == "up") {
    							_root.textfield.scroll--;
    			//Change last line to target your scroll object,(your dynamic text field).
    						} else if (type == "down") {
    							_root.textfield.scroll++;
    			//same as before
    						}
    					};
    				} else {
    					this.onEnterFrame = null;
    				}
    			};

    4)Now select your "up" button. Put these actions on it:

    on (press) {
    				startScroll(true, "up");
    			}
    			on (release, releaseOutside) {
    				startScroll(false);
    			}

    5)Select your "down" button. Put these actions on it:

    on (press) {
    				startScroll(true, "down");
    			}
    			on (release, releaseOutside) {
    				startScroll(false);
    			}

    6)And your done. Quite simple.

    *NOTE: That function was adapted from The Flash MX ActionScript Bible by Reinhardt and Lott. Copyright 2002.

    Scrolling a Movie Clip: What if what you want to scroll isn't text, what if its a picture or something similar. Well this script will do that for you.

    1)Make your MC. Give it the instance name "content". Put it under a mask layer so that you only see what you want them to see at one time or you can leave it how it is, whatever your preference.

    2)Make your buttons and put them in side an MC, just like for the text scroller. Now on your scrollbar MC put this code:

    onClipEvent(load){
    				scrollObj = _parent.content;
    				upScroll = false;
    				downScroll = false;
    			}
    
    			onClipEvent(enterFrame){
    				if(upScroll && scrollObj._y < scrollObj.startLimit){
    					scrollObj._y +=10;
    				} else if (downScroll & scrollObj._y > scrollObj.endLimit){
    					scrollObj._y -=10;
    				}
    			}

    3)Then edit your MC and put these actions on the "up" button:

    on (press) {
    				upScroll = true;
    			}
    			on (release, releaseOutside) {
    				upScroll = false;
    			}

    4)Put these on the "down" button:

    on (press) {
    				downScroll = true;
    			}
    			on (release, releaseOutside) {
    				downScroll = false;
    			}

    5)Now click on your "content" MC. Put these actions on it:

    onClipEvent(load){
    				maskHeight = 300;
    				startLimit = this._y;
    				endLimit = this._y - this._height + maskHeight;
    			}

    6)Now if you didn't make a mask layer than just define startLimit and endLimit as the points where you want the MC to start and where you want it to stop.

    7)And you're done.

    *NOTE: That function was adapted from The Flash MX ActionScript Bible by Reinhardt and Lott. Copyright 2002.

    -Back to Top-

    Moving Objects with AS

    This tutorial will show you how to make an MC move with the arrow keys.

    1)Open a new flash document and make an MC. Whatever you want it to be, if you're just praticing make it something simple like a box or ball.

    2)Now click on the MC and open the actions panel. Put in this code:

    onClipEvent (enterFrame) {
    				if (Key.isDown(Key.RIGHT)) {
    					this._x += 5;
    				}
    				if (Key.isDown(Key.LEFT)) {
    					this._x -= 5;
    				}
    				if (Key.isDown(Key.DOWN)) {
    					this._y += 5;
    				}
    				if (Key.isDown(Key.UP)) {
    					this._y -= 5;
    				}
    			}

    This code makes the MC move if the a key is down(pressed). You define the key as Key.RIGHT or whichever. Then if the if statement is true it preforms the actions, which is it moves the oject in increments of five. Now, you can change those increments to whatever you want as long as you keep the format the same. Just remember the movement of this MC will vary depending on the FPS. Now just take that script and you can apply it to many many things.

    -Back to Top-

    Boundaries

    Well, that last script may have had you worried since the object went straight off of either side without stopping. Well, this time we'll show you how to smarten your MC up and make it stop when it reaches a certain point.

    We are gonna just use that old script but this time we are going to add an && to the end of the if statement. Like so:

    onClipEvent (enterFrame) {
    				if (Key.isDown(Key.LEFT) && this._x>170) {
    					this._x -= 5;
    				}
    				if (Key.isDown(Key.RIGHT) && this._x<640) {
    					this._x += 5;
    				}
    				if (Key.isDown(Key.DOWN) && this._y<375) {
    					this._y += 5;
    				}
    				if (Key.isDown(Key.UP) && this._y>45) {
    					this._y -= 5;
    				}
    			}

    That "&& this._y>45" makes it so that the if statement won't be executed if the object passes a certain x or y coordinate on the stage. Just change the values of those limits and you should be fine. You can apply that script to whatever you want, just by changing your limits.

    -Back to Top-

    hitTest

    hitTest is a method that allows you to test to see if two MCs are touching or if an MC has crossed a certain point. This is very useful for collision detection, for say, between an enemy laser and your ship. First we'll talk about how to test for hits between two MCs.

    Two MCs: This is the basic syntax for a hitTest between two MCs:

    myMovieClip.hitTest(target)

    Its pretty self explanatory. Just put the name of one MC in for myMovieClip and then the name of the other where the "target" is. Then add some actions to it like.

    if(_root.Ship.hitTest(_root.laserfire)){
    			trace("THEY HIT!!!")
    			}

    That will cause the output window to say "THEY HIT!!!" if the two MCs collide. Pretty simple, eh?

    An MC with a point: This is the basic syntax for an MC and a point in space.

    myMovieClip.hitTest(x, y, shapeFlag)

    Again just replace myMovieClip with the name of your movie clip but this time enter an x and y coordinates. Now for the shapeFlag. The shapeFlag is a boolean(true or false) that will tell flash whether to test for a hit with the bounding box of the MC or the contents. Put "true" if you want it to test a hit for the contents of the box and false if you want it to test for a hit with the boudning box. Add some actions to it:

    if(_root.ball.hitTest(300, 100, true)){
    			trace("The contents hit the point!")
    			}

    -Back to Top-

    Dragging and Dropping Items

    Overview
    What purpose would this serve me? Dragging and dropping a symbol can be used in many different types of interactive Flash. The most commonly used is a dress-up game, in which you can drag clothes/items onto and off of a character.

    Dragging and Dropping a Button

    Why use this when I can use a movie clip? While dragging and dropping a movie clip is much more effective, this method is also commonly used. Some prefer it because you know you can interact with it once your cursor changes, as it does when over a button.

    How do I do it? First, make a button. Inside the button, you need the startDrag and stopDrag commands. So, right click your button and select "Actions". Inside your actions menu, put:

    on (press) {
    			startDrag ();
    			}
    			on (release) {
    			stopDrag ();
    			}

    This makes it so that, when you press on the button, dragging starts. And when you release the button, dragging stops. Finally, select your button and make it into a movie clip (F8). That way, the startDrag command only applies to everything inside the movie clip.

    Notes
    -If you would like to make an animated button, edit your button and put a movie clip on the "Up" frame.
    -You must have this within a movie clip, or the startDrag code will apply to everything on the stage, and everything will begin to drag.

    Dragging and Dropping a Movie Clip

    What are the advantages of using this method? Although the scripting is more complex, it saves a lot more time. It is also easier to make animated draggable objects, since you are only working on one level. But really, it all comes down to the user's preference.

    How do I do it? First, make a movie clip. Select your movie clip, and right-click it. Select "Actions" from the menu. Inside your actions menu, put:

    onClipEvent (mouseDown) {
    			if (this.hitTest(_root._xmouse, _root._ymouse)) {
    			startDrag (this);
    			}
    			}
    			onClipEvent (mouseUp) {
    			stopDrag ();
    			}

    This makes it so that, when the cursor is touching or overlapping the movie clip, and the mouse is pressed down, dragging starts. When the mouse is released, dragging stops. Now you are done. If you want to make your movie clip animated, edit it and add an animation on the timeline provided.

    -Back to Top-

    Using a Tween

    What is a Tween? A tween is a transformation from one object to another, or a change of properties inbetween frames.

    Motion Tweens

    What is a "motion tween"? A motion tween is a change of properties of an object. Properties that can be changed include: _x positon, _y position, _xscale (width), _yscale (heigth), _alpha (transparency), brightness, tint, or rotation.

    How do I make a motion tween? There are two ways to make a tween. One way is to right-click on the frame in which you want the motion tween. Select "Create Motion Tween" at the top of the menu. Your frame should now appear blue. Make a new keyframe somewhere further down on the timeline. Change the properties of the object on the second keyframe. If you made it correctly, there should be an arrow connecting your two frames. Test your movie to see the results. In the second way, select the frame in which you want the motion tween. Select your properties menu at the bottom, and find "Tween:". Pull down the menu and select "Motion". Now, insert a new keyframe, and change the properties of the object on that keyframe. You can ease the object in or out by slecting the amount of easing you want. Easing out makes it slow down before coming to a stop. Easing in makes it speed up before stopping.

    Shape Tweens

    What is a "shape tween"? A shape tween is a change from one image to another.

    How do I make a shape tween? Select the frame in which you want your shape tween. Go to your properties menu, select "Tween:", and then select "Shape". Make a new keyframe further down on the timeline. Draw a new image. If you made it successfully, the frames will all be green, and an arrow will be connecting the two keyframes. Test your movie to see the results.

    Notes
    -You cannot use a motion tween and a shape tween on the same layer.
    -Tweens move everything within the frames you use. If tweening more than one object, use separate layers.
    -You can make a motion tween with an animation. Simply right-click on your motion tween, and select any of the three edit options. Make the animation on the timeline provided.

    Applying the Tween

    Fading Make a motion tween. Set the alpha of the object being tweened to 100% on the beginning frame, and 0% on your ending frame.

    Moving a Character with a Tween Say you are making a walking animation. You have a character comprised of many different symbols. The way to do this is, tween every body part being used on a separate layer. After you have this done, you may want to make that sequence into a movie clip, so things don't get cluttered up.

    Scrolling Backgrounds Make a layer behind all of your other layers. Draw a background on that layer. Make a motion tween, and tween it left or right whenever needed.

    -Back to Top-

    Scrolling Backgrounds

    Overview Scrolling backgrounds play an essential part in platformer games, but can also be used in a variety of different Flash. Scrolling backgrounds can be simply an added effect to a movie, or a completely interactive background.

    Interactively Scrolling Backgrounds

    How does it work? All interactive scrolling backgrounds involve _x positions and/or _y positions. The concept mainly is: if this movie clip's _x(or _y) position is more than(or less than) or the same as #, tell the background movie clip to move along the _x(or _y) position by #.

    How do I do it? It isn't that easy, but it doesn't take a genious. Let's get started:

    1) Make a movie clip for your "character", or item that you are going to control.

    2) Add a basic movement script to your character:

    onClipEvent (load) {
    			speed = 5;
    			}
    			onClipEvent (enterFrame) {
    			if (Key.isDown(Key.RIGHT)) {
    			this._x += speed;
    			} else if (Key.isDown(Key.LEFT)) {
    			this._x -= speed;
    			}
    			if (Key.isDown(Key.UP)) {
    			this._y -= speed;
    			} else if (Key.isDown(Key.DOWN)) {
    			this._y += speed;
    			}
    			}

    You can modify how fast your character goes by changing the "speed" variable to a higher or lower number.

    3) Make a movie clip for your background that is going to be scrolling. Place it behind your character (possibly on a lower level), and be sure to give it an instance name.

    4) Time to add more script to our character. Add to your previous actions:

    onClipEvent (load) {
    			rightLimit = 525;
    			leftLimit = 25;
    			bg = _root.movieClip;
    			}
    			onClipEvent (enterFrame) {
    			if (Key.isDown(Key.RIGHT) && this._x >= rightLimit) {
    			bg._x -= speed;
    			this._x -= speed;
    			} else if (Key.isDown(Key.LEFT) && this._x <= leftLimit) {
    			bg._x += speed;
    			this._x += speed;
    			}
    			}

    You can modify it to your liking by changing the variables. "rightLimit" controls what _x position your character needs to be at to make the background scroll to the right. "leftLimit" does the same, except it controls the left side. "bg" is simply the instance name of your background. You can change "movieClip" in "_root.movieClip" to whatever you labeled your background's instance name as.

    Freely Scrolling Backgrounds

    Why would I want to use this? This can add as a great effect in a lot of animations or games. It saves you the effort of animating, and is much more efficient.

    How does it work? This is much more simple than interactively scrolling background. The main concept is: If the timeline is currently on this frame, move the movie clip along the _x (or _y) postion by ##. And in some cases: If the movie clip goes past the boundaries, move it's _x (or _y) position to ##.

    How do I do it? This is much simpler than the last one. Just try it:

    1) Make a movie clip that you will be using as your background.

    2) Open up its actions and add:

    onClipEvent (load) {
    			speed = 5;
    			}
    			onClipEvent (enterFrame) {
    			this._x += speed;
    			}

    Again, the speed can be modified. Just change the "speed" variable to a higher or lower number.

    3 [optional]) This step is for if you want to make your background reset when it reaches a certain point. Open up your background actions again, and add:

    onClipEvent (load) {
    			limit = 400;
    			reset = -400;
    			}
    			onClipEvent (enterFrame) {
    			if (this._x >= limit) {
    			this._x = reset;
    			}
    			}

    "limit" controls what _x position the movie clip needs to be at in order for it to reset. "reset" controls what _x position it resets to.

    Notes
    -If it is not what you are looking for (e.g: scrolls wrong way, not fast enough, not going to place you want it to go), fiddle around with it first. Don't give up. Change the variable numbers and test the results. Also, you may have to experiment with the ">="'s and the "<="'s. Those symbols mean "greater than or equal to" and "less than or equal to".
    -If you still have a problem which you have absolutely no clue how to fix, and you have already tried testing all sorts of different numbers, you can contact the author at princeconor@hotmail.com. Your question will probably be answered within a few days.

    -Back to Top-

    Custom Cursor

    Ever want to make a cool looking cursor for you flash movie? Well, its very simple and will a nice touch to your flash but i warn you to not go overboard with it. No one wants to see a flashing cursor throughout the whole movie, that will only pose as a distraction. But anyways, here's the howTo:

    1)Make an MC that you want to be your cursor. give it the instance name "cursor".

    2)Put these actions on your cursor:

    onClipEvent (mouseMove) {
    				_root.updateCursor();
    			}
    			onClipEvent (enterFrame) {
    				Mouse.hide();
    			}
    			

    3)Now put these actions on the first frame where the cursor appears

    function updateCursor() {
    			_root.cursor._x = _xmouse;
    			_root.cursor._y = _ymouse;
    			updateAfterEvent();
    			}

    4)That's it! Easy right?

    -Back to Top-

    Disabling the TAB key

    -This is self-explanatory really. This will make it so that in your games the players can't find hidden items by using the TAB key. Here's the basic script:

    on (keyPress "<Tab>") {
    				this.tabEnabled = false;
    			}

    See how that works? The fucntion "this.tabEnabled = false;" is only executed when the TAB key is pressed, disabling it for that button. So try it out and keep those cheaters from finding your secrets in your games!

    But what if you have buttons inside of MCs that you want to stay TAB-free? Instead of having to put this funtion on all of them you can just put this on the main MC:

    onClipEvent (load) {
    				this.tabChildren = false;
    			}

    Another very handy script is one that will disable ALL TAB functions for all your buttons. Very handy in some cases. It goes a little bit like this:

    _root._focusrect = false

    simple but powerful. This will make it so that NO button in the entire movie gets TAB recognition.

    Thanks to TheShrike and The_Super_Flash_Bros for bringing those scripts to my attention

    -Back to Top-

    Variables and Data Types

    What are variables?
    Variables are values that you can asign to a letter or word. Flash will store this data for you to change later or reuse.

    Naming your Variables
    To name a variable is to assign to give a variable a value. Now, remember, we're going to be using these variables over and over in your script so you want to give them names that you will remember. This is called descriptive naming. Example:

    firstName="joe"

    I gave that variable a name that i will remember. "joe" is someone's first name so i gave my variable the name "firstName".
    Another important thing to know is that you can't give a variable a name that starts with a number. You'll get an error or it just won't work. They can't have spaces in them nor can it be a keyword. By keyword i mean a word that flash recognizes as AS syntax. Like "Number". Flash will highlight that in blue(by default) because it thinks you are referring to the Number function.
    Now i said you can't have spaces in your variable names, yet you still want to be descriptive. To do this you can use "_"s or do what i did in my example. have the first letter of the first word be lowercase and the first letter of the second word be uppercase. This helps separate the words.

    Scope
    Enough of all that naming stuff because now we're going to talk about Scope. No, not the mouth wash but the boundaries inside which a variable is defined. Well what does that mean? I'll explain. The scope can be three different things:

  • timeline
  • local
  • global

    Timeline
    A timeline variable would be one that i used during my first example of firstName="joe". This variable will only be accesable from within its own timeline. So if you have an MC and you edit it and declar myVar on the first frame of it and then you do the same on the _root timeline, flash will store it as two different variables. you could make them have two separate values because they are on different timelines. And remember, you can access either variable by targeting it. Say you give your MC the instance name "box". _root.box.myVar would target myVar within the MC while _root.myVar would target the other variable.

    Local
    Local variables is a variable that is declared within a function by using the var keyword. Example:

    var myVar="joe"

    That declares the variable myVar as "flash". But i didn't put that inside a function, did I? So that means that flash declares it just as it would a timeline variable. So local variables are only meant to be accesed inside of a function and when that function call ends, so does the variable. Remember, if you declare a local variable, it is not accessable from outside its scope. Meaning you can't pull the it up using a target path as you can with the timeline variables.

    Global
    These are the niftiest variables there are in my opinion. Global variables are variables that you declare using the _global identifier and they can be accessed from anywhere without having to type out a target path. Here's an example:

    _global.glVar=1

    See how i had to put the _global identifier in front? Without that its just a normal timeline var. Also notice that i put "gl" in my var name. This is just another way to keep track of your variables and to keep your global variables separate from your other non-global variables. To read from global variables is the same as all others. But to write to them you have to identify them using _global.glVar. Example:

    _global.glVar++ //correct way - adds to the global variable glVar++ //wrong way - trys to add to a timeline variable trace(glVar); //correct way to read a global variable

    *Warning*
    Global variables sound like the way to go but sometimes they can be a big hassle. Here's how: say you were scripting and you declared a global variable from within an MCs timeline. Then you keep going in your game and by the end you relaize you need to change that var, but you can't find it! So please, don't use them recklessly. You'll know when to use them and when you can use a plain old timeline variable. Don't think this means global variables are evil but they shouldn't be used ALL the time. Just use them in cases when you have to access information from multiple timelines, otherwise, stick to timeline variables.

    Data Types
    Here i will explain the different data types. They are:

  • String
  • Number
  • Boolean

    String
    As you say in my very first example declared the variable firstName as "joe". Notice how i put the quotations around the name. This declares "joe" as a string. Strings are used to hold non-numeric values such as names. Strings will hold the formatting you give them. So if i said:

    myVar = "W i e r d     F   ormat   ting"

    it would keep the formatting you gave it. *Note: you can define strings with ("") or (''). It doesn't matter. But you can't use both you have to use one or the other. If you say:

    myVar="joe'

    you'll get an error. Also, if you use apostraphes with single quotes you'll also get an error. Like:

    myVar='Joe's house'

    Flash confuses the apostraphe with the end quote. Then it doesnt' know what to do with the leftover so it gives you a nice error. So in this case double quotes would be what you'd use.

    Number
    Like to do mathematical operations to your variables? If so then you need to declare them as numbers. This means you just declare them without quotes. But remember they have to be numbers. Example:

    myVar=1

    That's it. It stores the number one as myVar. Then you can multiply things to it, subtract from it, add to it, it doesn't matter. Now remember, don't use quotes on these or else you'll get wierd results, like this:

    x = "10"
    y = "11"
    trace(x+y);

    You'll get "1011". See it added them together but not in a math sense. So if you're going to be doing math operations to your numbers, then leave them as numbers not strings.

    Boolean
    reading = true
    typing = false

    Those are both booleans. As you will see, booleans can either be true or false and that's it. Nothing more. They have lots of uses in AS if there can only be two conditions. Like on and off type things. Hmmmm....not much more here.

    Special Values
    Null
    Null is a special value in AS that means nothing or no data attached to the variable. Example:

    x = null

    x as a string would output ("") while x as a number would output "0" and x as a boolean would equal false. This is useful if you're wanting to make a variable that you will define later. User input is an excellent example of when this would be used.

    Undefined
    You might have see this in the ouput window before. Undefined means that no value has been assigned to the variable. Alot of times this means you made a typo. Example:

    myVar="joe"
    trace(myVat)

    You'll get "undefined" in the output window. So when you get this make sure you're calling your variable from the right scope and that you haven't made any typos.

    -Back to Top-

    The Sound Object

    .swf

    What is the sound object?
    The Sound Object is a useful thing. It is used for playing and controlling sounds with ActionScript. This is a nice thing to have especially if its crucial to stop and start the sound via ActionScript events. You can always use a Movie Clip with a sound in it but that can be unreliable and just won't work in some cases. The sound object is also necessary if you want to dynamically control the volume, position, balance, and overall playback of the sound clip. The sound object is rather simple to use if you already know the basics of AS but if you are just starting with AS then you may have some trouble following the steps, so like always i will try to explain things thorougly and as clearly as possible.

    Constructing the Sound Object
    To use the sound object you must first construct it. This does not mean you build it like a house of legos but rather you are telling flash you want to use a sound and you define what sound you want to use. Let's take a look at the constructor.

    mySound = new Sound();

    "mySound" is the name of the sound object you are creating and is what you will use when calling upon it later so remember to use descriptive naming as we discussed in the var and data type section. "new Sound()" is you telling flash that you are making a new sound.

    Attaching Sound to mySound
    So we have the sound constructed. Not hard was it? Now we have to give meaning to that sound object we just created. To do that we must actually attach a sound file to it, and what better way to do this then to use the attachSound() method? Here's the syntax:

    mySound.attachSound("identifier")

    "identifier" is the song you are using. We won't ever actually put the sound onto any timeline. What we must do though is tell Flash to export that sound file because its necessary. So you must find the sound file in the library and right click it and select the "linkage" option. Select "export for ActionScript" and "export in first frame". You must now enter the "identifier" name in the linkage menu. This is how flash will know what sound file you are referring to. So when all is said and done you might have something like this:

    mySound.attachSound("NG1094")

    When you are entering the name in the "identifier" dialog box you don't need the quotes BUT you do need them when you are referring to it in the attachSound() method as I did.

    Playing the music!
    Finally! We will discuss how to get the music to play. This is done by using the start command:

    mySound.start(offset, loop)

    Both parameters are optional. The "offset" is where in the song you want the sound to start. The default is at the beginning. "Loop" is how many times you want the song to loop. The default is 1 time but even if you set it to 0 it will still play once through.

    Now that we know how to start the song we will learn to stop it using the stop command:

    mySound.stop("identifier")

    Same old stuff except you must enter the identifier of the song. This is the same identifier you use when you attached the sound. *Note: If left blank this will work just as the stopAllSounds() command would.

    Controlling the volume
    Controlling the volume is very simple. We will use the setVolume() method:

    mySound.setVolume(#)

    "#" is a number between 0 and 100. 100 being full volume and 0 being no volume or "mute".

    getVolume() is a method that returns the current volume of the song. Useful when making a way to control the volume and display the current volume.

    Controlling Balance
    When referring to "balance" i am talking of how much of the sound is being played through the left and right channels(usually corresponding the to left and right speaker). For this we use setPan() and getPan():

    mySound.setPan(#)

    "#" is a number between -100 and 100 where -100 is only the left channel and 100 is only the right channel. 0 is both channels playing at 100%.
    getPan() is used just like getVolume() except for the balance. It is used in the same ways we use getVolume().

    Duration, Postition, and onSoundComplete
    Yeah....so i ran out of section titles. I didn't know what to title this one but i think you can figure out what its for. ;)

    duration
    Duration is the property of the sound object that tells you how long(in milliseconds) your sound file is. This is good to use when you want to tell the user how long the song is.

    position
    If you are any good at guessing then you would have figured out that this is how far along the song is. This is also in milliseconds. So if you have a 20 second song and 5 seconds have played then this will return 5000. Like i said, all this is in milliseconds so you have to convert it to seconds. 1 second = 1000 milliseconds Now let's combine this with the duration property and you can tell the user how long the song has played out of the total song time, just like you would see in windows media player or a similar program.

    onSoundComplete()
    This is the onSoundComplete() method. This method will execute a function when the song is done playing. This is good for making songs into a playlist where when one song is finished the next will automatically play. Here's a simple example:

    onClipEvent (enterFrame) {
    				_global.mySound.onSoundComplete = function() {
    					trace("songs done");
    				};
    			}
    			

    That will trace "songs done" when the song is complete.

    Conclusion
    There a still a few methods and functions that i haven't discussed because they deal with loading and unloading songs and the like. I covered what i think is the basics of what you should know about the Sound Object and that if you can figure the above things out then you should be able to work the rest out just fine. So i wish you good luck in your sound manipulation.

    -Back to Top-

    Properties of Movie Clips

    What are Movie Clip Properties?
    Movie Clip properties are, well, properties. They are things that can alter a movie clip, and in a lot of cases buttons can be altered too. There's a lot of them so i won't be spending a lot of time on each one but then again, alot of them don't need a big explanation.

    How to implement them
    To use these just tack them on to the end of the movie clip's target path. Like so:

    _root.myMC._property = value
    this._property = value

    The list!

  • _x and _y
    These two properties control the x and y positions of the Movie Clip within the parent Movie Clip(or main stage if its not within a movie clip). Very simple to implement.

  • _width and _height
    These two properties control the width and height of the Movie Clip in pixels.

  • _xscale and _yscale
    These two properties control the x and y scale of the Movie Clip. This is in percent. If you use a negative percent it will flip the Movie Clip over. So if you said this._xscale=-100 it will make your movie clip look like a mirror image of itself.

  • _alpha
    This property controls the alpha value of the Movie Clip. Remember, the alpha value, when set at 0, is invisible and is completely visible at 100.

  • _visible
    Activates or De-activates a button or movie clip. This is a boolean value so its either true or false. This will set the thing to be invisible or visible. But say you have a button with an on(press) command on it. This property will disable that so the person can't click it. Get it?

  • _rotation
    This property sets the rotation in degrees of the Movie Clip. So if you set it to 180 it will do a half turn. Or 90 it will do a quarter turn.

  • _ymouse and _xmouse
    These properties are read-only. This means you can't set them but can only read them. It will return the value of either the x or y coordinates of the mouse.

  • _quality
    This property will allow you to set the quality of the movie. It has 4 settings: LOW, MEDIUM, HIGH, BEST. To set the quality of the whole movie you can do this:

    _root._quality="HIGH"

  • _name
    This property can read-write the instance name value of a Movie clip.

  • _currentframe
    This property returns the frame number at which the playhead is on at the time it is called. This can be useful if you want a movie clip to advance more than one frame everytime a button is clicked. Like so:

    _root.myMC.gotoAndStop(_root.myMC.currentframe+3)

    -Back to Top-

    Hiding the right click menu

    Overview
    If you've ever made a game you might notice that some people can beat it by just right clicking and hitting "play". Does this make you mad? If so, this will fix your problems. This is a very simple code:

    Stage.showMenu = false

    Put that on the first frame of your movie. And wallah! Like magic, the right-click menu is deminished to only the "settings" and "about flash player" tabs! One thing to keep in mind. If you use this on a movie that is very graphic intensive you may want to make a button to alter the quality since you can no longer do this from the right click menu.

    -Back to Top-



  • LAST UPDATED: 09/13/03

    As of 06/27/03



    Layout was created by Y3llow.