Flash AS3 typewriter with some extra effects

Question

I'm trying to recreate the effect seen on this page: http://flupie.net/blog/2010/12/typewriter-effect-with-textanim-as3/ (example #2) But without all the separate files.

The reason why I dont just use that code, is because A) It uses text that's in a string, and I want to be able to apply the effect to textfields. B) It uses separate .as files, and I want it all to be 1 file (I want to upload this on DeviantArt later, and as far as I know, you can only upload the .swf)

So is it possible to recreate that matrix style typewriter effect, without resorting to separate .as files and apply it to textfields? I'm really more of a designer than a programmer, so this is just a little too much for me.

EDIT: To get some more clarification on what I intend to achieve. I want to build a character sheet for a fictional character (think: name, appearance, background, etc) and since this character is in the future, I want to give it a futuresque feeling. So the end result will contain several separate textfields and possibly some images. All these textfields should "run" at the same time. Perhaps I'll also add some more "pages" but I'm assuming this is done by just adding another frame to the timeline and a button to link to it.

I'm currently trying to decipher the code linked above, since that is precisely what I'm aiming to achieve, font and glow effects included.

What's wrong with separate .as files? When you publish to .swf it'll just be one file anyways. — CookieOfFortune
You can compile multiple ActionScript files into a single SWF. The SWF is a container file that holds code, art, and animations. The example you linked to is a single SWF. Additionally, can you clarify what you mean by "apply the effect to textfields"? The example you linked to applies the effect to a TextField object. — user1080806
Wait, really? I always thought .swf files still needed the .as files (goes to show how much I know). And by textfields, I mean just pre-written textfields on the canvas. — Cleverbird
Indeed, SWF files are prepackaged (programmers call them "compiled") and self-contained, and don't need to reference external ActionScript (because they contain it). Also, the textfields you place on the stage through Flash are the same TextField objects that your example references. Could you try replicating the effect in your example, and reposing the question with any specific problems you encounter along the way? — user1080806
While I certainly didn't get the answer I wanted... I actually got a much better one. I'll start tinkering with that example file, see if I can make it work the way I want it to. Hopefully I can figure it out on my own, but if not, I'll update this — Cleverbird

MickMalone1983 MickMalone1983 · Accepted Answer · 2012-10-23T00:07:38

I've written a class (just for you! - but it's quite simple and I'm bored...) which you can use to achieve this effect. Obviously, it's in your interest to take a look at this code at some point, but I'll show you how to use it - and it's very simple - without knowing how it works:

In flash, create a new ActionScript file, copy the code below into it and save it as TypeFX.as - in the SAME directory as your .fla project file:

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 = 200, 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;
    }

    }

}

Again, you don't need to understand that to use it, but it's quite simple when broken down, you might enjoy looking at how it works.

Now, take a TextField you want to apply a typewriter effect to - make sure it's set as 'Dynamic Text' and give it an instance name. For example's sake, let's call it myField - now, open the Actions panel. You can apply this effect in a couple of ways:

If you want to create a typewriter effect with the text which is already in the field (it'll clear it, then type it out), add the following code to the actions panel:

new TypeFX(myField);

This will type out the text which was present in the field with a 200ms interval between letters - if you want to change this interval, add a second argument:

new TypeFX(myField,500);

This increases the delay to 500ms

You can also send a string to type out, as opposed to using the text already in the field (this is recommended, it'll be easier to read later, trust me!):

new TypeFX(myField, 500, "The text to type into the field");

Just note that if you are using this method (passing a string) you need to specify a time (eg 500 above), you can't leave it blank like you can if you're just using the field text.

Hope this helps, let me know if you get stuck!

Flash AS3 typewriter with some extra effects

1 Answers