My Flash Resource – New Ideas and News for Applying Flash to Complex Gaming Apps

Latest News and Developments

April 17, 2008

Crosshairs Rollover Text Effect

by @ 2:34 pm. Filed under Flash Tutorials

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 My Flash Resource 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!

Drag and Drop Initiates Action Effect

by @ 2:34 pm. Filed under Flash Tutorials

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.

Flash Tutorial Image

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 the My Flash Resource Tutorial.

« Previous PageNext Page »

My Flash Resource - A continually growing collection of tutorials, thoughts and interests of a Flash Animator and/or Developer.

categories:

other:

New Feedburner Feed!


Feel free to syndicate.

Learning Material

Flash Resources:


Listed on BlogShares
  • Resources