Actionscript Artist » AS2 Tutorials

Simple but Highly Effective Box Animation

Anders — Mon, 06 Nov 2006 03:04:42 +0000

Effect: You have 2 or more boxes (circles, triangles, whatever). The middle of one is colored, you click on a different box and the middle color slides to the box you clicked with a cool sliding effect (a faded trail). This effect is highly re-usable and easy to implement with different shapes and several of them. Source code included! Concepts: actionscript animation, button press.
The following effect is as follows:

Click here for the source file.

This Flash Tutorial will be presented in a step-by-step format.

1. Open Flash and create a document with size 400X200. Create a three layers and label them as follows:

2. In the boxes layer, draw a square with the border a different color than the inside. I’ll be using a black border with a green inside.

3. Click on the center of the box (the green part), right-click and select “copy” (or just press +c). Click on the “square01″ layer and place the square in the same place by right-clicking and selecting “paste in place” (or just press ++v).

4. Lock all layers, except the “square01″ layer. Click on the square and turn it into a movieclip. Do this by clicking of the tab “insert>new symbol…” (or press F8) and select movieclip. Select the movieclip and put the following actions on the movieclip:



5. Unlock the “boxes’ layer.  Click on the square (select the outline and the middle).  With the box selected, press F8 to turn it into a symbol and select “movieclip”.  Name this movieclip “box01″.  Double-click on the box01 movieclip.  Now select just the middle square (not the outline), turn it into a movie.  Now change the alpha property (located on the properties panel, under the heading “Color:”) to 0.  
6. Go back to the main timeline and copy the box movieclip a few times and name the other boxes: box02, box03, box04, etc.
7. Go to the “Actions” layer and insert the following code:
// box buttons:
// basically we are just defining locX
// and locY to equal the x and y position
// of the box
box01.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box02.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box03.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box04.onPress = function() {
  locX = this._x;
  locY = this._y;
}

Now run your movie and you should have a square that moves to the box that you click on.
8. In order to get the fade effect, we will have to add two more layers below the “square” layer.  Copy the “square” movieclip and paste one copy on each of the two new layers.  Click on each of these copies and change the actionscript in the following way.  Change the speed to a slightly lower number and add the following actionscript after the  code about the speed:
this._alpha = 70;

9. Do this again for the last layer, but make the speed slightly lower than the last layer and add this actionscript:
this._alpha = 40;

Okay, that’s all.  This Flash tutorial is done.   
Feel free to leave me a comment as to how you liked the tutorial.  Also let me know what other tutorials you would like me to post or even what else you’d like to see on this site.

The Tank: Part 2: Rotating and Shooting the Cannon

Anders — Sun, 17 Sep 2006 17:02:06 +0000

In this Flash tutorial you will learn how to make the cannon on the tank rotate wherever the mouse is pointing and shoot whenever the left mouse button is clicked. Topics covered in this tutorial: mouse angle detection, onMouseDown event, duplicateMovieClip, rotation and actionscript controlled motion.

Click here to see the completed swf file.

Begin by downloading the following Flash file: tankPart2_rotation_artillery.fla. This file contains all the movieclips that you will need without the actionscript. We will fill that in during the tutorial.

Edited: Here is the source file.

This tutorial is broken up into two main sections:
i. Cannon Movement

ii. Firing the Cannon

Cannon Movement

**The method we are going to use to detect the mouse angle is only approximate. Its not perfect, but it is fine for our purposes and for most games or movies that you can create with it.

First familiarize yourself with the project file. Notice the cannon movieclip is named “cannon_mc”. There is also an invisible movieClip named “mouseTarget” Also notice that we have 3 frames in the timeline. In the “Cannon Actions” layer we have 3 keyframes.

1. In the first keyframe place the following action:

startDrag("mouseTarget", true);

This action allows the movieClip “mouseTarget” to follow the mouse around wherever it goes. This is how we will be able to detect the mouse’s position relative to the tank, think of this as the crosshairs of where you will shoot.

2. In the 3rd keyframe place the following action:

gotoAndPlay(2);

By placing this action is frame 3 we have created a continuous loop between the 2nd and 3rd frames. This is necessary so that we can continuously recalculate the mouse’s position.

3. We calculate the mouse angle in the 2nd keyframe. All of the following actions will be placed in the 2nd keyframe of the “Cannon Actions” layer.

i. First we figure out the x and y distances of the mouseTarget from the tank.

// calculate the distance from tank
// to mouse click in terms of (x,y)
xDistance = mouseTarget._x - tank_mc._x;
yDistance = mouseTarget._y - tank_mc._y;

ii. Next we calculate the normalisation factor and use it to determine the mouse angle. I am not going to get into all the details of this mathmatical equation. Basically, normalization is the process of breaking up two values into relative proportions of each other. We use normalisation to figure out the approximate percentage of rotation within each of the four quadrants surrounding the tank. All you need to know is that this formula works in calculating the approximate mouse angle (its not exact, but good enough for this tutorial). Without further ado here is the code:

    // the normalisation factor is equal to
    // the sum of the absolute distances of
    // x and y.
    normalise = Math.abs(xDistance) + Math.abs(yDistance);

    // determine the direction
    if ((xDistance >= 0) && (yDistance >= 0)) {
        mouseDirection = 90 * (yDistance/normalise);
    } else if ((xDistance <= 0) && (yDistance >= 0)) {
        mouseDirection = -90 * (xDistance/normalise) + 90;
    } else if (((xDistance)<=0) && ((yDistance)<=0)) {
        mouseDirection = -90 * (yDistance/normalise) + 180;
    } else {
        mouseDirection = 90 * (xDistance/normalise) + 270;
    }

Okay, thats it for the "Cannon Movement" section. Run your movie and see if it worked!

Firing the Cannon

To uncover the bullet movieClip, first hide the tank and cannon layers ( do this by clicking the on the first dot next to the layer name). Now you should see a little green dot (our bullet). I have named this movieClip "bullet_new". The basic concept behind making the bullet fire is to duplicate the bullet_new movieClip and make it move towards where the mouse was click. Okay lets get started.

i. Click on the second frame of the "Cannon Actions" layer and add the following:

// set mouse values for artillary

// initially these will be "nil,nil" before
// this frame loads
mouse_x = mouseTarget._x;
mouse_y = mouseTarget._y;

These coordinates will be used to tell the bullet where to go. The reason we put them in the second frame is so that the initial bullet_new movieClip will always keep its original coordinates.

ii. Click on the first frame of the "Bullet Actions" layer and add the following actionscript:

    // initialize newBullet which will
    // be used to denumerate the new movieclips
    // created below.
    X = 0;

    onMouseDown = function() {
        X++;
        duplicateMovieClip(”_root.bullet_new”, “_root.bullet_new.bullet” add X, X);
    }

This basically creates a new movieClip named "bullet_new.bulletX". Each mouse click creates a new movieclip. The "X++" is short for "X = X + 1". So each new movieclip has a unique name and identifier. Review duplicateMovieClip in the ActionScript Dictionary if you don't understand this.

iii. Now for the actionscript to make the "bullet_new" movieclip move. Click on the &"bullet_new" movieclip and insert the following actions onto the movieclip:

    // when the movieclip loads
    onClipEvent(load){
        // Set the variables up to be equal to where mouse is when clicked.
        xDest = _root.mouse_x;
        yDest = _root.mouse_y;

        // Set the alpha visibility to be full.
        this._alpha = 100;
    }

    onClipEvent(enterframe){
        // if the xDest has been changed then
        // move bullet from the cannon to
        // the mouse location
        if ((this._x != xDest)) {
            // move bullet towards mouse click
            this._x += (xDest-this._x)*.1;

            // slowly make bullet disappear
            this._alpha -= 4;
        }

        // See if the yDest has been changed
        if (this._y != yDest) {
            this._y += (yDest-this._y)*.1;
            this._alpha -= 4;
        }
    }

// when the movieclip loads

onClipEvent(load){

// Set the variables up to be equal to where mouse is when clicked.
xDest = _root.mouse_x;
yDest = _root.mouse_y;

// Set the alpha visibility to be full.
this._alpha = 100;

}

onClipEvent(enterframe){

// if the xDest has been changed then
// move bullet from the cannon to
// the mouse location
if ((this._x != xDest)) {

// move bullet towards mouse click

this._x += (xDest-this._x)*.1;

// slowly make bullet disappear
this._alpha -= 4;

}

// See if the yDest has been changed
if (this._y != yDest) {

this._y += (yDest-this._y)*.1;
this._alpha -= 4;

}

}

Okay, thats it! Now test your movie and see if it works.

Add-on to the Tank: Part 1: Basic Movement

If you add all of the code from the last part, then making this work for the movable tank is quite simple.

i. Add the following code to each of your LEFT and RIGHT arrow key press functions:

_root.bullet_new._x = _root.cannon._x;

ii. Add the following code to each of your UP and DOWN arrow key press functions:

_root.bullet_new._y = _root.cannon._y;

iii. Delete the SPACEBAR key press function and of course use the new mouseDown function from Part 2 and delete the one from Part 1.

Thats it, we're done! Here's the final result:

Thank-you for participating in this Flash tutorial.

The Tank: Part 1: Basic Movement and Artillery

Anders — Sun, 10 Sep 2006 13:00:04 +0000

This tutorial will be presented in a step-by-step format.Click here to preview the finished project. The completed source file is here

1. Download the source file move_tank.fla, extract and open the fla file. In this file you will find all the creative assets involved in this project. However there will be no actionscript in the file. This is what we will be creating in this tutorial.

2. Okay so now you have the opened file ready to go. Take a look around at what is contained in the flash document. On the stage there are two movieclips, the tank which is named “tank_mc” and the bullet which is named “bullet_mc”.

If you double click on the tank you will see its contents. There is the tank graphic and the two tank track movieclips.

Go back to the main timeline. The last element we will look at is the bullet movieclip which is aptly named “bullet_mc”. Double click on it and have a look at its contents. Its simply a motion tween of a bullet going forward and then disappearing at the end. The disappearing tween is done with the alpha property of the bullet movieclip.

Now that you are familiar with all the graphical parts of our project. We can move on.

3. Go back to the main timeline and take a look at the layer named “Actions”. This is where all your actions for the entire project will be located.

**Having all the actions in one convenient place is the industry standard and if you don’t normally do this then you probably should start. The reason for this is that it makes it much easier to go back and edit your project.

Click on the first frame of the actions tabs and open the actionscript window (Shortcut key: F9).

i. We’ll start with the inital conditions. Initially we want the bullet on the stage but we don’t want to see it. So we put the bullet_mc at frame 10 where it’s invisible.

// initial conditions

bullet_mc.gotoAndStop(10);

ii. Okay now for the fun stuff. The following is how you will control your tank with the arrow keys. We start by creating an event, namely the ‘enterFrame’ event. This means that the commands within this statement will be active as soon as this movie loads up and will continue to me active unless we delete the movieclip. First, we will have to define some initial conditions pertaining to the speed of the movement of the tank.

    tank_mc.onEnterFrame = function() {
      // forward and backward motion speed of the tank
      tankSpeed = 5
      // side to side movement of the tank
      sideSpeed = 2
    }

Now for the key press movement. We will start with the right arrow key which will control forward movement.

    tank_mc.onEnterFrame = function() {
        // forward and backward motion speed of the tank
        tankSpeed = 5

        // side to side movement of the tank
        sideSpeed = 2

        // if key is down and key = right arrow (Key.RIGHT)
        // then increase the tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.RIGHT)) {
            this._x+= tankSpeed;
        }
    }

    tank_mc.onEnterFrame = function() {
        // forward and backward motion speed of the tank
        tankSpeed = 5

        // side to side movement of the tank
        sideSpeed = 2

        // if key is down and key = right arrow (Key.RIGHT)
        // then increasethe tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.RIGHT)) {
            this._x+= tankSpeed;
        }

        // if key is down and key = left arrow (Key.LEFT)
        // then increase the tanks x position
        // by 5 (tankSpeed).
        if (Key.isDown(Key.LEFT)) {
            this._x -= tankSpeed;
        }

        // if up arrow is pressed then move tank
        // up 2 px (sideSpeed)
        if (Key.isDown(Key.UP)) {
            this._y -= sideSpeed;
        }

        // if down arrow is pressed then move tank
        // down 2 px
        if (Key.isDown(Key.DOWN)) {
            this._y += sideSpeed;
        }
    }

Okay now press “ctrl + enter” to run your movie. Notice that you can press more than one arrow at a time and it responds. This is because we used a separate if statement for each arrow key. Had we nested them all in one “if else if” statement we would not have this functionality.

iii. Finally, its time to make our tank fire some artillery. There are two different ways we will make this happen. One is with the “spacebar” and the other is with a left-mouse click. We’ll start with the “spacebar” shooting mechanism. Its basically the same as the arrow key presses.

** This goes in the tank_mc.onEnterFrame with the key presses.

    // if spacebar (Key.SPACE) is pressed then
    // play bullet animation.
    if (Key.isDown(Key.SPACE)) {

        // This code puts the bullet_mc at the end of the
        // cannon barrel.
        bullet_mc._x = tank_mc._x + 22;
        bullet_mc._y = tank_mc._y;

        // this plays the bullet animation. I start at frame 3
        // because then I get the bullet in motion instead
        // of it starting stationary.
        bullet_mc.gotoAndPlay(3);
    }

Now for the mouse click artillery. The following code uses an event called onMouseDown. OnMouseDown executes whenever the mouse is clicked.

    // while left mouse butting is pressed
    onMouseDown = function() {
      // establish bullet position
      bullet_mc._x = tank_mc._x + 22;
      bullet_mc._y = tank_mc._y;

      // play the bullet animation. The reason I start at
      // frame 2 here is because this action is slightly less
      // responsive than the key press function.
      bullet_mc.gotoAndPlay(2);
    }

Alright thats it! Press ctrl+enter to run your movie and see how it all turned out. Stay tuned for the next tank movement tutorial which will be all about rotating the canon and shooting in different directions. The artillery is greatly improved upon in Part 2.

If you enjoyed this tutorial then continue on to The Tank: Part 2: Rotating and Shooting the Cannon

Glowing Text Effect

Anders — Thu, 15 Jun 2006 01:29:37 +0000

In this Flash tutorial you will learn how to make text glow (this effect will also work for anything drawn in Flash). The glowing edges around the text will ease in and ease out in this animations. Topics include: soften fill edges, alpha control, and basic tweening. No actionscript involved and source file is included.

The source file for this tutorial is here.

This Flash tutorial is presented in a step-by-step format. Feel free to use your own settings when it comes to background and text colour. I will only show what I used.

1. Open a new Flash document (shortcut key: CTRL+N). Name you first layer ‘text’.

2. Change the background colour to black.

3. Type in some text, use a fairly large font (I used 38px), and change the colour to white.

4. Break apart the text. Do this by selecting the text, right-click and select Break Apart (shortcut key: CTRL+B). Do this twice until the text has turned into pixels.

5. Create a new layer below the current layer and name it ‘Glowing Text’. Copy your text and paste it in place on the new layer. Paste in place means that you paste it in the exact same spot as the one you copied. The shortcut key for this is CTRL+SHIFT+V.

6. Lock the ‘text’ layer and select the text in the ‘Glowing Text’ layer.

7. With the text selected, goto Modify>Shape>Soften Fill Edges Use the following settings: Distance: 10px, Number of Steps: 15, Direction: Expand.

8. Now you should be able to see the glowing part around the text. Select all of the text again and convert it to a movieclip symbol. Goto Modify>Convert to Symbol (shortcut key: F8).

9. Insert keyframes in the following places in the ‘Glowing Text’ layer: frame 10, frame 15, and frame 25. Use shortcut key F6 to insert these keyframes.

10. Insert the following alpha levels for your movieclip into the corresponding keyframes of the ‘Glowing Text’ layer: frame 1 (alpha=0%); frame 10 (alpha=65%); frame 15 (alpha=65%); frame 25 (alpha=0%). The alpha proporties is located in the properties panel (also the movieclip must be selected).

11. Insert motion tweens between the frame 1 and 10 and between 15 and 25. To insert a motion tween click anywhere between the two frames that you want the tween and select ‘Motion Tween’ in the Properties panel at the bottom of the screen.

12. Insert a frame on the ‘text’ layer at frame 25. Right-click on frame 25 and select New Frame. Your timeline should look like the following:

Run your movie and check out the results and you should have glowing text. This effect can be used on anything drawn in Flash, just use the soften edges technique and this method. It could make a good button rollover effect if you set it up properly. Anyways I hope you enjoyed this Flash tutorial.

Drag and Drop Initiates Action

Anders — Mon, 24 Apr 2006 18:09:03 +0000

In this Flash tutorial you will first create a symbol (object) that you can drag and drop around the screen. Next you will create a drop zone area that will cause the symbol (object) to react when it is dropped into the target area by performing a hit test. As always the completed source file is included.

Download the source file: drag_n_drop.fla

This Flash tutorial will be presented in a step-by-step format. Even though the source file and the example includes two different drop areas, I will only be teaching how to make one of them.

You should be able to figure out how to make more are completing this Flash tutorial.

Set up the Timeline

1. Open Flash, create a new Flash Document and create three layers labelled (from top to bottom): Actions, drag_me symbol, landing area.

Creating a drag – able symbol in Flash:

2. On the first frame of the ‘drag_me symbol’ layer, draw whatever it is that you want to be you drag and drop object, I used my cartoon head. Use the selection tool to select your entire drawing and turn it into a movieclip symbol. You can do this by clicking Modify>Convert to symbol (or using the shortcut key: F8).
3. Name your movieclip (the instance name) ‘drag_me’. The instance name is located in the properties panel.

4. We have to edit the movieclip, so double-click on the movieclip and you will be in editing mode. Notice the little crosshairs in the top-left corner of your graphic, we want these to be in the exact middle of your graphic. So select your graphic and move it until the crosshairs is in the middle. This is important for when we perform the hit test later. When your done, go back to the main timeline by double-clicking outside of you graphic.

5. On the first frame of the ‘Actions’ layer. Add the following actions, which will allow your movieclip to be drag and drop (ed):

    // drag while mouse is pressed.
    drag_me.onPress = function() {
        startDrag(this, false);
    }

    // stop dragging when mouse button is released.
    drag_me.onRelease = function() {
        stopDrag();
    }

    // stop dragging when mouse is released outside,
    // just to make sure the object gets released.
    drag_me.onReleaseOutside = function() {
        stopDrag();
    }

Test your movie and see if it works.

Create the landing area

6. On the first frame of the ‘landing area’ layer, draw a landing area. I used a circle and a square. After you have drawn the landing area convert it into a movieclip the same way you did in step 2. Name your movieclip circleHit (instance name) or whatever you want, but I have used circleHit in my source file. You also have to edit this movieclip to make the crosshairs appear in the center on the symbol like you did in step 4.

7. Now for the tricky part. You have to create a hit test so that you can perform an action when the ‘drag_me’ clip is dragged into the landing area. The reason you centered the two movieclips you made is so that when we get their x and y position we will be refering to the center of the movieclip symbol rather than the top left. The following actionscript will define the target area that we will trigger the actions:

// calculate circle hit area
C_hitLeft_x = circleHit._x - 6;
C_hitTop_y = circleHit._y + 6;
C_hitRight_x = circleHit._x + 6;
C_hitBottom_y = circleHit._y - 6;

8. Next we define the conditions for a hit using an if…then statement in the drag_me.onRelease function:

     drag_me.onRelease = function() {
        stopDrag();

        // if drag_me is in the circle hit area then make it black
        if (this._x < C_hitRight_x && this._x > C_hitLeft_x && this._y < C_hitTop_y && this._y > C_hitBottom_y) {
            this.gotoAndStop(5); // perform some action.
        }
        else {
            this.gotoAndStop(1); // else do nothing
    }

In my source file I have made my ‘drag_me’ movieclip a little more diverse. I basically just change its qualities throughout the timeline so that on Frame 5, I put a stop() action and made the symbol completely black. That is why my action is this.gotoAndStop(5). I decided to leave this out of the tutorial because ideally you can perform any action you want at this step, I’ll leave that up to you. Following is the complete actionscript for this tutorial, all of these actions should be placed in the first frame of the Actions layer.

    // calculate circle hit area
    C_hitLeft_x = circleHit._x - 6;
    C_hitTop_y = circleHit._y + 6;
    C_hitRight_x = circleHit._x + 6;
    C_hitBottom_y = circleHit._y - 6;

    drag_me.onPress = function() {

        startDrag(this, false);

    }

    drag_me.onRelease = function() {

        stopDrag();
        // if drag_me is in the circle hit area then make it black
        if (this._x < C_hitRight_x && this._x > C_hitLeft_x && this._y < C_hitTop_y && this._y > C_hitBottom_y) {

            this.gotoAndStop(5);

        }
        else {

            this.gotoAndStop(1);

        }

    }

    drag_me.onReleaseOutside = function() {

        stopDrag();

    }

Your done, thank-you for participation in this Flash 8 tutorial.

Crosshairs Rollover Text Effect

Anders — Mon, 10 Apr 2006 01:07:47 +0000

In this Flash tutorial you will create a rollover effect using masks. The crosshairs will follow your mouse cursor as you move over the text. Topics involved: startDrag actionscript, masking, drawing a target using radial gradient tool. Source file included.

Here is the source file for this Flash tutorial.

This tutorial is presented in a step-by-step format.

1. Open a new Flash document (shortcut key: CTRL+N).

2. Name your first layer ‘actions’.

3. Place the following actionscript into the first frame of the ‘actions’ layer.

// allow the movieClip ‘mouse_target’ follow the mouse cursor.
startDrag(mouse_target, true);

Note: I am using Flash 8 to create this tutorial, your version of Flash may require different notation. If you get an error with this script then try it without the double-quotes(“) around the movieClip name ‘mouse_target’.

4. Create 3 more layers below the ‘actions’ layer and name them as follows from top to bottom: ‘text mask’; ‘crosshairs’;’text background’.

5. Goto the ‘text mask’ layer and turn it into a mask. You can accomplish this by right-clicking on the layer name and chosing the ‘Mask’ option. Notice how this made the ‘crosshairs’ layer move over. This means that whatever you put in the ‘text mask’ layer will only show up if it is covered by the movieClip that will be located in the ‘crosshairs’ layer.

6. Now unlock the ‘text mask’ layer and type in the text that you want to use for this movie. The bigger the text the more you will be able to see this effect.

7. Break-apart the text twice so that all that remains is a bitmap. Accomplish this by right-clicking on the text and choosing ‘Break Apart’ (shortcut key: CTRL+B).

8. Highlight all of the text and copy it, then paste it in place on the ‘text background’ layer so that it is in the exact same spot as the copied text. Do this by right-clicking on the highlighted text and choosing ‘Copy’ (shortcut key: CTRL+C). Then on the ‘text background’ layer right-click on the stage and select ‘Paste in Place’ (shortcut key: CTRL+SHIFT+V).

9. Draw the crosshairs in the ‘crosshairs’ layer and turn it into a movieClip labeled ‘mouse_target’. I will outline how I drew my crosshairs.

i. Start by drawing a perfect circle with no border. Hold shift will drawing to make a perfect circle. Choose a size that is slightly larger than the height of your text. You can change the overall size later if you want.

ii. Highlight your circle and click on the paint bucket in the color chooser panel. Now choose ‘Radial’ under the ‘Type’ heading. Use the following settings.

iii. For the circle in the middle, I choose the eraser tool and set it to the biggest circle setting, then click it once in the exact middle of you circle.

iv. The crosshairs were make by highlighting a horizontal line in the middle of the circle and pressing delete, do the same for the vertical line.

v. The outer black circle was made outside of the main circle and then moved over top of the existing circle. Make this slightly smaller then the main circle. I used line width 2 and no fill, only outline.

vi. Highlight the whole crosshairs drawing and turn it into a movieClip. Goto Modify>Convert to Symbol and select ‘Movie clip’. Label this movieClip with the name ‘mouse_target’. Double-click on the movieClip to edit it. Now highlight the entire drawing and move it so that the center of your drawing is on the center of this movie clip (denoted as a small crosshair).

Congratulations you’ve successfully completed this Flash tutorial! Run your movie to see the results. Let me know how you did! Tutorial is presented as is, if you have trouble with it, then try and try again, thats how you learn!

Flash Plugin Detection in Flash 8

Anders — Tue, 07 Mar 2006 15:10:45 +0000

Flash plugin detection is very easy to implement in Flash 8. Its actually built-in. In this tutorial I will show you how to activate Flash plugin detection for whatever version of Flash that your Flash document requires.

This Flash tutorial will be presented in a step-by-step format:

1. Open the Flash document that you want to insert Flash plugin detection on or create a document.
2. Go to Publish Settings. Click File>Publish Settings (shortcut key: CTRL+SHIFT+F12).
3. In the Formats tab, make sure that Flash (.swf) and HTML (.html) are checked. Click on the HTML tab.

4. Click the box next to Detect Flash Version. Select the version you require for your movie (the default is Version 8 ).

5. Click Publish at the bottom of the window and your done.

The Flash plugin detection script is located in the HTML file that was created when you published your movie. If you want to use the Flash plugin detection in a different HTML file then take the scripts between the tags from your original HTML file and put them into your new HTML file (between the tags).

Thank-you for participating in this Flash Tutorial.

Gradient Sweep Photo Effect

Anders — Fri, 03 Feb 2006 17:10:35 +0000

This flash 8 tutorial will be presented in a step-by-step format. The source file is here .

1. Open Flash. Create a new document (CONTROL + N). Make the stage slightly bigger than the photo you want to use. Also make the background color of the stage black (or whatever color you want, I’m using black).

2. Click on the first layer and name it image. Import an image of your choice (goto File>Import>Import to Stage or just press CONTROL + R). Place the image within the boundaries of the stage.
3. Create a new layer above the image layer and name it rectangle. Now draw a black rectangle without an outline approximately 2X the width of the image. You may have to zoom out (View>Zoom Out or press CONTROL + -) to make this easier.

4. Click on the rectangle and turn it into a movieclip symbol(Modify>Convert to Symbol or press F8). Double-click on the rectangle movieclip to edit it. With the rectangle selected change the color setting to match the following:

5. Now double-click somewhere outside of the rectangle to return to the main timeline. Place the rectangle over top of the image so that the solid black part covers the entire picture. Now insert a keyframe in the rectangle layer at frame 12. Also insert the actionscpript: stop(); on this frame.

6. At frame 12 of the rectangle move the rectangle movieclip to the left until it no longer covers the image at all. Now right-click anywhere between frame 1 and frame 12 of the rectangle layer and select motion tween. This will create a tween that makes the rectangle move from frame 1 to frame 12.

7. Now click on the 12 frame of the image layer and insert a frame (right-click and select New Frame or press F5). Your timeline should look like this:

Run your movie, because your done! I have only shown you how to implement the gradient effect one way (from right to left). I’ll leave it to you to figure out how to make the gradient effect do other more interesting things. Thanks for participating in this Flash Tutorial.