headermask image

header image

Cross Hairs Rollover

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!

Fun Flash - Advanced full flash site - Part 3

Part 3

Menu and menu animation



You will learn how to design a menu and how to animate it after that. You will also learn how to apply action script code on it.

Step 1

Create a new layer above the Content Animation layer and name it menu.



Step 2

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a Trebuchet MS as font and bold it.
3. Choose 15 as font size,
4. Select #2F560C as color,
5. As the rendering option, select Use Anti-alias for readability.

Step 3

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a Trebuchet MS as font and bold it.
3. Choose 15 as font size,
4. Select #2F560C as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type on the left side of header menu text. See the picture below.



Step 4

Take the Selection Tool (V) and select the all menu text. Then, press F8 key (Convert to Symbol) to convert this menu text into a Movie Clip Symbol.



Step 5

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 6

After that, take again the Selection Tool (V) and select only the “About me” text. Then, press Ctrl+X key (Cut).

Step 7

After that, create a new layer above the layer 1 and name it About me. Then, select it and press Ctrl+Shift+V key (Paste in Place).

Step 8

Take again the Selection Tool (V) and select only the “contacts” text. Then, press again Ctrl+X key (Cut). After that, create a new layer above the About me layer and name it Contacts. Select that layer and press Ctrl+Shift+V key (Paste in Place).

Step 9

Double click on layer 1 to rename its name in Home. What we now have’ We have a three texts of menu placed in separate layer. See the picture below.



Step 10

While you”re still on layer home, press F8 key to convert it into a Movie Clip Symbol.



Step 11

Then, click on frame 25 and press F6 key.

Step 12

It”s time to animate the first text (button) in menu. While you”re still on frame 25, take again the Selection Tool (V) and double-click on the movie clip (Home) to go in its inside.See the picture below.



Step 13

While the “Home” text is still selected, press again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol. See the picture below.



Step 14

Take the Selection Tool (V) and move the frame 1 on frame 2. See the picture below.



Step 15

After that, click on frame 10,11 and 20 and press F6 key.

Step 16

Go back on frame 10, take the Selection Tool (V), click once on the button and go to the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Tint in it, for Tint color choose black and put it down to 100%. See the picture below.





Step 17

Take again the Selection Tool (V), and select frame 10. Then, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

Click again on frame 10 and press Ctrl+C key (Copy). Then, click on frame 11, press delete key, and after that Ctrl+Shift+V key (Paste in Place).

Step 18

After that, click on frame 2 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Frame Label type go1. See the picture below.





Do that also for frame 11, but for this time for Frame Label type go2.

Step 19

Right-click anywhere on the gray area between the frame 2 and 10 and frame 11 and 20 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 20

Create a new layer above the layer 1 (layer 2). Then, using the drag and drop technique, move it below the layer 1.

Step 21

Click on the first frame of layer 2 and paste this code inside the action panel (F9).

stop();

As the web develops, Flash programming continues to be a dominate force for finding creative solutions for modern needs. Web 2.0, and demands for interactive social media marketing are becoming formidable in the internet world, and these needs require a savvy, visually stimulating form of media to communicate with users. Enter Flash and Action Script - the engine behind many of the most successful interactive websites on the internet. Most notably, Flash has served the online gaming community by providing players with the ability to play live casino games online without the need to download software. This innovation is a testament to the genius of flash: Strong Random number generation programming, catchy graphics, gaming algorithms, and realistic casino style play are successfully captured in a single flash movie file. Flash's benefits also cater to the sports betting side of the game as well. Many odds-making websites use Flash media to display interactive, up to the minute betting odds during the Fall football season for those who love NFL betting. This important time of year is big for online casinos as well: players placing bets on sports patronize casinos while waiting for the results of NFL betting contests to come in. Similarly, in the Winter and Spring, where basketball betting and online blackjack rage as customers flock to various gaming sites, Flash facilitates a wide variety of user interfaces that provide for realistic experiences, quick transactions, and superior visual stimulus. The future looks bright for flash applications in the sports betting world - lines, odds, and important action-script driven interfaces will be required to meet the needs of the gaming world.