Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Typewriter Text in Flash

    ●   Text and Font are very important. Words must stand-out against the background and be easily understandable.

    ●   Spelling out the words is very effective in getting your viewers to follow along …


Learn About:

Drop Shadow FilterActionScript 3Bevel Filter

  •  This tutorial is part of the Aesop's Fables Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #1: Create a New Folder ~

Create a New Folder by Right-Clicking on the desktop …

new folder

… name the new folder: FIRST_NAME_LAST_NAME_PROJECT_NAME.fla


Step #2: Move your .fla File into the Folder ~

Drag your .fla file into your New Folder:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: Open your Project in Flash ~

Now open your PROJECT in Flash:


Step #4: Text Tool ~

Get the Text Tool or hit the keyboard shortcut letter (t) …

… and select some text you already have:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #5: Dynamic Text ~

In Properties, select Dynamic Text:


If you want, try Aligning the text to center under Paragraph:


Step #6: Behavior: Multiline ~

Set Behavior: Multiline


Step #7: Filters ~

With the text box selected …

… go to: Window > Properties > Filters and click on Filters

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… add Drop Shadow

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and Bevel too.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

Experiment with all the filter settings!

 

Try different things!

 

Take a risk!

Step #8: Embed the Font ~

When you have everything looking the way you want it, hit Embed …

… and select All:


Step #9: Instance Name ~

At the top of the Properties menu, find the (Instance Name) area …

… and type the (Instance Name) EXACTLY as shown: textbox_txt


Step #10: New ActionsScript File ~

Go to: File > New … and select: ActionScript File

… copy and past this code:


package  {
    import flash.utils.Timer;
    import flash.text.TextField;
    import flash.events.TimerEvent;

public class TypeFX {

    private var timer:Timer;
    private var text:String;
    private var pos:int = 0;
    private var field:TextField;

    public function TypeFX(field:TextField, speed:int = 42, text:String = null) {
        // constructor code

        this.field = field;

        if(text != null)
        {
            this.text = text;
        }
        else
        {
            this.text = field.text;
        }

        field.text = '';

        timer = new Timer(speed, this.text.length);
        timer.addEventListener(TimerEvent.TIMER,update);
        timer.addEventListener(TimerEvent.TIMER_COMPLETE,kill);
        timer.start();
    }

    private function update(e:TimerEvent):void
    {
        pos++;
        field.text = text.substr(0,pos);
    }

    private function kill(e:TimerEvent):void
    {
        timer.removeEventListener(TimerEvent.TIMER,update);
        timer.removeEventListener(TimerEvent.TIMER_COMPLETE,kill);
        timer.stop();
        timer = null;
        text = null;
        field = null;
    }

    }

}


Step #11: Save your File ~

Go to: File > Save as … name it: TypeFX.as and save the file in your newly created ROOT folder.


Step #12: Actions Layer ~

Click on your Actions keyframe again keyframe actions

… then hit (f9) f9 open the Actions panel and copy this code …


	new TypeFX(textbox_txt);

… and paste it below any other code you may already have.


Step #13: See If It Works! ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter


Step #14: Keep Going ~

Repeat for each Scene in your work, changing the (Instance Name), for instance: textbox2_txt and copy and paste this code:


	new TypeFX(textbox2_txt);


Last Step: Save and View your work ~

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.


Other Resources: http://www.ciiycode.com/0iH6iUXUPgUQ/flash-as3-typewriter-with-some-extra-effects