Actionscript Artist

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.

Found this Flash music video of Radiohead’s song Creep (acoustic version) featuring characters from MTV’s series Low Morale;. It comes from an animation group called Monkeehub. The actual creator is Leith Bahrani. This kind of stuff blows my mind, check it out.

Earlier this year Google adapted so that it would actually search some of the content contained in Flash Movies (swfs). Below are some interesting articles about optimizing you Flash Sites for Google and other search engines embracing Flash:

– How to Design Flash Pages for Google
– A modern approach to Flash SEO
– How to SEO Flash

I stumbled upon this website last night using a FireFox extension called Stumble Upon. Its a depiction of all of the US and Coalition Military Fatalities since March 20th, 2003. We have Tim Klimowicz to thank for this ingenious Flash creation, it is truly amazing what one can do when they put their mind to it.

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.

This is another post about why online Flash Applications are better and more usable than online HTML applications. If you are using a wireless connection or even just an unstable connection then there is potential to loose your connection from time to time. If your in the middle of filling out an HTML based form or application and you loose your connection then all of your session data will be lost and you’ll have to start the process over.

This does not happen with Flash-based applications, you will retain all of the current state information offline. When you get back online you can continue using the application without loosing the data that you’ve entered in. This is just another reason why Flash is more usable than HTML for online application development.

Check out this Flash website, the winner of the original sound category at Flash Forward 2006 in Seattle. A whole new way to learn guitar from Mr. Fastfinger. Truly one of the best instructional guitar sites out there. Many thanks to Mika Tyyskä for creating this learning unique site.

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!

The following is a movie named Little Foot by Adam Phillips of Bitey Castle. Truly amazing the things you can do with Flash. He’s an inspiration to us all.

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.