Toxiclab.org

Photo text banner using the Action Script and mouse cursor

24.2.2010, 14:55
Submited in: Flash | Total Views: 16994

In this thoroughly explained, detailed flash lesson, I will show you how to create photo text banner using the action script code, mouse cursor and some special flash tricks. You can use this text banner for some web site as presentation. Using this lesson, you will also learn how to import any photo into a flash stage, how to apply action script code on any text movie and much more.

Example:

Move your mouse over text right and left!



Step 1

First, save the photo below that we will use for this lesson!





Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 440 pixels and the height to 308 pixels. Select any color as background color. Set your Flash movie's frame rate to 38 and click ok.

Step 3

Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the photo that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Create a new layer above the layer background and name it text.

Step 6

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

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

Then, type Keira Knightley on the position like it is shown on the picture below!



Step 7

While the text is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

Select the Selection Tool (V) and click once on the text to select it. Then, go to the AS panel (F9) and enter this code inside the actions panel:

onClipEvent (load) {

 init = int(Math.random()*50)+75;
 this._xscale = init;
 this._yscale = init;
 sc = 3;
}

onClipEvent (enterFrame) {


 mod= this._xscale/100;


 this._x+=(_root.distance/50)*mod;


 if (this._x > 375) {
  this._x = -75;
 } else if (this._x <-75) {
  this._x = 375;
 }


 if (Up == 1 && this._xscale<=scTar) {
  this._xscale += sc;
  this._yscale += sc;
 } else if (Up == 0 && this._xscale>=scTar) {
  this._xscale -= sc;
  this._yscale -= sc;
 }

}

Step 9

Create a new layer above the layer text and name it action.

Step 10

Hit Ctrl+F8 key on the keyboard to create a new movie clip symbol. Name it action_mc and hit ok.

Step 11

Go back now on the main stage (Scene 1). After that, move action_mc movie from flash library on the flash stage. After that, while the movie clip is still selected, go to the AS panel (F9) and enter this code inside the actions panel:

onClipEvent (enterFrame) {

 _root.distance = 150-_root._xmouse;
}

We're done!

Please Enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials