Currently the posts are filtered by: AS3
Reset this filter to see all posts.

11.08.2010

10:24

Layout management for display objects

I am working hard at the next update for www.kineticarm.com. So I didn't have much time for the blog in the last month, sorry for that.

At my latest custom project I had a complex GUI system and the whole Movie had to be resizeable. So a layout manager seemed to be a proper solution. I just wanted to have a system where I define positions and sizes of the GUI objects once and without having to care about it afterwards.

I builded a static Layoutmanager class where I register all objects and a helper class that allows me to define position and size of each object.

Values can be defined absolute and relative as in CSS and referenced to top left and bottom right border.

all values ending with "px" are absolute
all values ending width "%" are relative
all values starting width "-" are referenced to bottom/right border.
all values starting with "+" or without any sign are referenced to top/left border.

On top of that all properties can be referenced to the stage or other objects as well. So if layout gets really complex it's possible to build unvisible dummy objects to align other objects to it.Here are some Examples:

// Created an instance from an object from the lib.
// and adds it to the stage
var obj1:MovieClip = new Item();
addChild(obj1);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj1);
lit.scale = false // the size isn't touched
lit.x = "90%"; // X pos. is 90% of stage width
lit.y = "50%"; // Y pos. is 50% of stage height
Layouter.registerObject(lit); // registers the object to the layoutManager
// Created an instance from an object from the lib.
// and adds it to the stage
var obj2:MovieClip = new Item();
addChild(obj2);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj2);
lit.reference = obj1; // values references to obj1
lit.scale = false // the size isn't touched
lit.x = "-100px"; // X pos. is 100 pixels left to obj1
lit.y = "0px"; // Y pos. is obj1.y
Layouter.registerObject(lit);

The only thing you need to do is to call the static method "arrange" of the LayoutManager everytime you want to rearrange all registered objects. This is mostly done in a function called at the stage's resize event.

Here you can download the source code with some examples.

PermalinkComments 0

AS3 / showcase

05.07.2010

22:40

flash's font hell 3 - Accessing the embedded font

Today we will fill a textfield and let it use an embedded font.

To fill a textfield it provides us two properties text and htmlText. It doesn't matter how the text field was created(in the WYSIWYG editor of programatically.)

Text with directly embedded font

This is the easiest way to asign a text. But it is less flexible too. We can't format the text at runtime. We just can change the textfield's properties in Flash and export the film again.

textField.text = "Today is a wonderful day!";

Text property with font from the library

This is basically working in the same way as the example above. But to asign a Font we need some additional lines of code.

textField.text = "Today is a wonderful day!";
var newFormat:TextFormat = new TextFormat();
newFormat.color = 0xFF0000;
newFormat.size = 18;
newFormat.underline = true;
newFormat.italic = true;
newFormat.font = "Arial";
textField.setTextFormat( newFormat );

HtmlText with directly embedded font

This is simply not possible to do.

HtmlText with font from the library

This is the most flexible way and it needs surprisingly less lines of code. There are just some points to care about when using this methode:

All formatting issues has to be done in html.
The embedFont property of the text field has to be set to true.

textField.embedFonts = true; // if we forget this line the text field wont show anything.
textField.htmlText = "Today is a wonderful day!";

So I think that's it. This was a small series with the results of the five day studies about the text field. I hope it saves you the time I invested in finding this out. And hopefully you will find it that usefull that you link to it :-)

Oh wait! There is just one more thing!

Font name

When we embed a font into the library we have to activate the checkbox "export for actionscript". This says flash to put the font into the swf file. With activating this option we have to give this library item an export name too. Unfortunately this isn't the name of the font we have to use in actionscript. While compiling the swf file flash generates new names for the embedded fonts. So at authoring time of the swf file we don't know the name flash will generate for a font.

How do we know the names of the embedded fonts? We have to write a small script that traces all font names. After executing it one time we can go back to our source code and access our font with its name.

var embeddedFonts:Array = Font.enumerateFonts(false);
for ( var i:int = 0; i < embeddedFonts.length; i++)
trace( "'"+embeddedFonts[i].fontName+"'", embeddedFonts[i].fontStyle, embeddedFonts[i].fontType );

In most cases the ordinary font name and the name flash generates to access it via actionscript will be the same. As soon as we embed a font as bitmap font its guaranteed a generic name. So keep it in mind.

Well, that's it.

Here you can download a zip file containing three flas to see all the stuff working.

fontEmbedding.zip

PermalinkComments 0

AS3

12.06.2010

17:10

Flash's font hell 2 - embedding a font

This time we will learn how we can embed a font into the swf file.

Last time we have heard the way how we embed the font depends on what tool we use to create the swf and what we want to do with the text field.

Flash IDE

In the flash IDE we have two ways to embed a font:

Text field properties

The easiest way to embed a font is to use the embed button in the text field's properties. This allows you to select exactly the characters you need.

pros:

* Holds the swf file as small as possible because just the needed characters can be embedded.

cons:

* There can just be one font linked to a text field. So it's not possible to combine different fonts or font variations like regular, bold or italic in one text field.

Embedding a font in the library.

A more flexible way to embed a font into the swf file is to put it into the library. This way we can link the font to a text field at runtime and so it allows us to use different fonts on the same text field. (If we use the text property we can just use one font at a time. To combine different fonts at the same time we have to use the htmlText property. More about it later.)

Don’t forget to activate the "export for actionscript" checkbox in the library's font entry. The linkage name is not important, we don’t need it. But it has to be activated to make flash putting the font into the swf file.

pros:

* Fonts are more flexible to use.

cons:

* If we put a font into the library, flash embeds all characters and we don’t have a chance to embed just some of them. This leads to bigger file size of the swf file.

Flex

In flex we just have one way how we can embed a font into a swf file. It’s the equivalent version of the second method in the Flash IDE. But here we can select characters to keep file size low.

Here is an example how it might look:

...
[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName='_Arial', unicodeRange='U+0020-U+002F,U+0030-U+0039')]
public static var _Arial:Class;
...

More about the embed metatag:
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_4.html

That' it for today!

We have now the font embedded in the swf file. The next time we will see how we use this font in a text field.

PermalinkComments 0

AS3

06.06.2010

13:18

Flash's font hell 1 - introduction

In the last weeks I was working on a web app for a big company making sun blinds. One of the objectives was to make it highly customisable and prepare multilanguage usage in future.

To meet all goals I planed to load all parameters and texts from a xml file. On top of that(to give the customer a bit more than he requested, what is a good practice in my opinion) I decided to fill all textfields with the htmlText property, this gives the customer the possibility to use the textfield's html capabilities. I never did this before in this way, so I didn't know what was awaiting me :-)

Firstly everything was working fine(the text was taken from the xml structure and fontfaces were controlled by html tags.), but then I tried to use the embedded font of the CI.

From this time on the whole project was frustrating me for several days. I am sure you know what I am talking about. It's hell to use embedded fonts in flash. I was searching the web and I just found other people asking how this is working and showing there not working source codes.

Finally after nearly a week everything was working as I wanted, but to get there I had to try every combination of commands in as3 with all embedding techniques of flash to see what's working or not and how it works. It was a hard piece of work and this problem decreased my hourly rate of this project a lot. But what really counts is I know now how it's working :-)

I decided to write in the Blog about it, in the hope it will safe you some time.

Introduction

To make flash using an embedded font in a textfield we have to do some classifications of the way we want to reach our goal and what exactly we want the textfield to do.

Our problem will split into three parts: