TextField and buttonMode

Right so you want to create a click-able bit of text. So you create a TextField and stick your text in there and then you'll be wanting to addEventListener on that. Excellent, you've made your text click-able.

You might be thinking "that's great, but why doesn't my mouse pointer change when I hover over the text". Well, that's because you need to define the buttonMode to be true, to tell Flash that this thing you're creating is going to be a bit like a button.

However, TextFields can't have a buttonMode. Only descendants of Sprite can have buttonMode. So what you need to do is create a Sprite and add the TextField to that before adding the Sprite to the stage.

"But my mouse pointer still doesn't change when I hover over the text!?!"

Well that's because the Sprite you've created is empty apart from TextField and the TextField is still dealing with the MouseEvent.MOUSE_OVER by itself. We need to tell Flash that anything contained in the Sprite should be ignored in terms of what the mouse is doing.

That's where mouseChildren comes in.

sprite.mouseChildren = false;

... and your mouse pointer should now change when it's over the text.

Embedding fonts

Right, bare in mind this is using Flash CS3 Professional and AS3 so it might be different for different people out there, but this is my description of the damned nightmare I had trying to get fonts to embed in a that version of Flash and Actionscript.

Basically I didn't get much out of the docs so I was left fumbling around by myself. I'm using a Document Class (keeping the AS separate) so I wanted a way to embed a font directly from there. The things I found seemed to be targeted at Flex users and as far as I could see don't work within the Flash CS3 environment. I'll happily be corrected on this if anyone knows different.

So I went back into the .fla and embedded a font directly into the Library using the (old fashioned) 'right click' -> 'new Font' method. Which is fine. You have to give your font a name which then appears in the library. Let's call it the Library Name. I'm using Verdana so I use 'Verdana' as the Library Name. Seems fair enough.

Secondly like any good little flash boy I right clicked on the Font itself in the Library and chose the Linkage option (don't forget linkage, right?). I 'Export for Actionscript'. I also need to give the font a Class Name. It looks like this then involves the flash.text.Font class. Well, I don't really know what that means but fine. I'm guessing I'll be using that Class Name to get at the font from within Actionscript. So I make it memorable but slightly shorter than the real font name ('Verd').

So far I have a Library Name which I can see, and a Class Name which is something to do with Actionscript. I'm thinking I'm set.

I get into my Document Class create a TextField. I set embedFonts to 'true'. Then I create a TextFormat and give it a colour, size etc. This is where I should be setting the font value. This is the Actionscript part of the process so naturally I use the Class Name for the font.

textformat.font = 'Verd';

WRONG!

OK that didn't work. No text appears. Well what else then maybe I should try the Library Name. It's a long shot but it just might..... oooh it worked! How strange. So from within Actionscript I need to use the Library Name to access the font. Oh well now I know....

A bit later I'm doing something similar and user Helvetica 55 Roman as the font. I happily create everything exactly as before and confidently use the Library Name as the identifier.

WRONG!

Nothing happens. No text. Huh? I try the Class Name. Nothing. I try changing these names. Nothing. I go back to my previous file using Verdana. I check the Font. Check the Linkage. Everything looks the same. Why isn't it working? I copy the Verdana script (and font) into this new .fla - it works! Why won't the Helvetica font work!?!?!?

Well if you know the answer then you're probably already laughing at my stupidity. What I finally worked out is that although you need to embed the font into the library of your .fla giving it a Library Name, and you really need to then make sure the Linkage settings are right, giving it a Class Name, in fact the only name you need for the TextFormat is the actual font name. Just the one you know it by. The one it's actually called.

My trouble with Verdana was that I'd "accidentally" used that name as the Library Name so it "unfortunately" worked fine. For the Helvetica I'd not used the right name for either the Library Name or Class Name and therefore it wasn't until I tried

textformat.font  = 'Helvetica 55 Roman';

that anything showed up.

I won't forget this. Hopefully someone else can learn from it too ;-)

Flare

I've been having a look at the Flare actionscript library for creating interactive visualisations and the like. Interestingly they've packaged in a Tweener like tweening library and a physics library too.

Considering I've been using Tweener loads and I've been looking at APE a bit recently too I wonder whether this would be a good replacement for both or is a bit limited to what they've wanted to achieve within Flare.

There's an excellent demo and API documentation.

I'm mostly interested in the ForceDirecedLayout but being in alpha at the moment it seems that they haven't got round to examples and tutorials for that aspect. One to watch though I think.

Goodbye onEnterFrame

Right so firstly I discover onEnterFrame() is gone. Bugger! What have they done with it?

I used to use onEnterFrame() all the time. Probably too much. It was down to a lack of knowledge I'm sure, but there were few problems that I couldn't manage to onEnterFrame() my way around. A generous dollop of checking here and a few instructions there. Sometimes my onEnterFrame() function could become a long list of if's waiting and waiting like Vladimir and Estragon.

At first glance it's simply been replaced (as with a number of other things) with the general addEventListener() function. This allows you to attach a bit of code to an "event" and then set it off when that event happens. That could be a mouse-click or a rollover, it could be a bitmap or some XML loading.

For onEnterFrame() the event you're looking for is ENTER_FRAME and so before you know it you're back where you were only with a nice sloppy AS3 smile on your face!

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void
{
      trace("and another frame gone!");
}

... but wait!

If I just insert that into my old code I've missed a trick. You see my old onEnterFrame() function with it's long list of if statements was doing me no good. All those if's returning false most of the time, long and unwieldy and hard to decipher the day after tomorrow.

What this new addEventListener() is actually encouraging me to do is use it for just that purpose. Instead of checking and checking and checking again, I need to attach my nugget of code to the event I'm waiting for. Then once it happens my code will get run. Not only that but I'm left with nice, clean, well organised actionscript which I can come back to in over a week and still understand.

The thing which I'm still confused about right now is that apparently the addEventListener() method can be called on any object that is part of the event flow, but what is the event flow? And what objects are part of it?

I must look into that.

About me

OK a little background. I'm a designer working for a UK telco. In web design generally but it's pretty general. I started with HTML in 2000. Got a job which quickly taught me CSS and JavaScript and then did a bit of Perl before a huge amount of PHP. That pretty much became what I did (+ MYSQL naturally) before I decided that actually I wanted not to program but to design. So I jumped.

Since then I've been getting to grips with all Adobe's software (not to mention Visio!) and particularly Flash has become something which most interests me. Not surprisingly perhaps as it seems to satisfy my visual/creative urges while involving that kind of programming/problem solving I still enjoy.

I choose Flash over Flex (for now) as I want to keep the visual emphasis in the mix and not move completely into application design (although I see the overlap and I'm willing to be convinced).

So previously I've used Flash Proffessional 8, ActionScript 2 and I've looked at Flash Lite (1 is limited, 2 seems good but handset coverage was frustratingly low when I last checked).

I've recently upgraded to Adobe CS3 and thought, considering the introduction of AS3 that this is the time I should really crack Flash - which basically to me means ActionScript.

That's me and this is the subsequent blog.

AS Tart

Someone once said that blogging was a good way to learn about something. Well he's to blame for what follows, not me!

Enjoy!