Beginners Flash Tutorial – Creating Dynamic Text

October 20, 2008 by admin  
Filed under CSS and XHTML, Flash Tutorials

High Quality Flash Tutorial Videos – Taught by Experts
We also have extensive Adobe Flash Tutorials in high quality video format. These are ideal for beginners who need to master Flash quickly

Title / Free Demo : Adobe Flash CS3 Tutorial Videos
Author:
James Gonzalez
Duration:
11 Hours – Lessons: 125

Creating Dynamic Text with Flash

This tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions; the code included is based on ActionScript 2.0

This Flash tutorial introduces the creation, editing and formatting of dynamic text and embedding fonts.

There are two main ways to create a dynamic text field in Flash, one using the flash interface and the other using ActionScript, this flash tutorial will give you a fundemental understanding of this works.

Create a textfield using the interface

Open a new flash document, and select the text tool:

text tool

Click and drag on the stage to create your text field, then type something in to start with. On the Properties panel (select Window > Properties > Properties if it isn’t already visible), select Dynamic Text from the first drop-down list and give the textfield the instance name ‘my_txt’:

textfield

Now, create a new layer in your flash movie by clicking the Insert Layer icon on the timeline:

new layer

This is the layer where we will put our ActionScript code, you can rename the layer ‘actions’ by double clicking on it (where it currently reads Layer 2) to keep your flash file well organised.

With the new layer selected, open the Actions panel either by pressing F9, clicking on the Actions tab if it is visible, or choosing Window > Actions. Type the following code into the actions panel:


Select All

 my_txt.text="new text" 

textfield code

Now test your movie by pressing CTRL+Enter or choosing Control > Test Movie

test text

You’ll see that your original text has been replaced with the text you specified in the code. However, you might also notice that the text appears less clear than it does when the textfield is static. To demonstrate this, go back to the layer with your textfield on it and create a new one, only this time choose static from the drop-down list. Enter ‘new text’ as the text and test the movie again, you should see a difference between the two fields:

static vs dynamic text

In order to make your dynamic text have a clear appearance, you have to embed the font in it. This means that information about the font will be included in your final exported SWF movie, so that the text will be displayed consistently wherever the file is viewed. Another advantage to doing this is that, if you use a font that the user viewing your SWF doesn’t have installed on their machine, the appearance of your movie will still be preserved, as the SWF contains the font information, telling the user’s machine how the text should be displayed. To embed the font, you have one of the following two options:
  1. Select your dynamic textfield on the stage and click the Embed button on the Properties panel, then choose Basic Latin (select OK):
    embed control
  2. On the library panel (Window > Library if it isn’t open) select the options button:
    options

    Select New Font and enter the following details:

    new font

    Press OK and you’ll see your font appear in the library. Right-click (CTRL+Click for Macs) on the font in the library and choose Linkage. Click the checkbox next to ‘Export for ActionScript’:

    linkage

    This allows you to refer to the font in your ActionScript code (the procedure is the same for any library item that you want to control using ActionScript). Select your code (‘actions’) layer and enter the following code (after your existing line)

    :


    Select All

     my_txt.embedFonts=true var tf:TextFormat=new TextFormat() tf.font="myfont" my_txt.setTextFormat(tf) 

    embed code

After following one of these two options, test the movie and you should see that the appearance of your text has improved. You should note that embedding fonts in your flash will increase the file size of your SWF, so only do it if necessary, particularly if your file is going to be viewed over the Web.

Tutorial on Creating a dynamic textfield using ActionScript

You can also create your dynamic textfield using ActionScript. To do this, enter the following code at the end of your script:


Select All

 var other_txt:TextField = _root.createTextField("other_txt", _root.getNextHighestDepth(), 20, 20, 200, 50) other_txt.text="other text" 
The parameters for the createTextField command are as follows:


Select All

 createTextField(instanceName, depth, xPosition, yPosition, width, height) 

Try not to be put off by the code if you’re not familiar with ActionScript. A good way to familiarise yourself with it is to experiment by changing some of the parameters (e.g. change the y position to 100 and you’ll see the text appear further down). To format this text, you need to use the ActionScript approach outlined above.

Comments

Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!

You must be logged in to post a comment.