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:

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.

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:

1. We have to embed the font.
2. We have to find the internal font name.
3. We have to say a textfield to use an embeded font.

On top of the we have to seperate if we are using:

1. FlashIDE
2. flex, flexbuilder or flashbuilder, ...

And finally we have to seperate if we want to use

1. the text property.
   1. without fontfaces (just regular, bold or italic).
   2. with mixed fontfaces (bold, italic, ...).   
2. the htmlText property.

That’s it for today. In the next post we will see how we can embed a font into the swf file.

Blitting - The art of fast Pixel drawing.

To display objects on screen in flash games Movieclips or Sprites are used very often. Sure this is the easiest way to handle it and if there are not much objects this is OK. But when performance comes in play there is a much better way to display objects - blitting. Blitting reduces the overhead of managing display objects in the flash player and allows you to use the saved CPU power to display more objects or to use it where you really need it.

Blitting

Blitting stands for BLock Image Transfer and describes a technique of drawing pixels on screen. The idea is quite simple. Instead of creating tons of MovieClips we create one Bitmap and paint all objects on it. So the flash player has just to manage one object. With flash 8 (I think) the BitmapData object was introduced. This object allows direct access of pixel data in images. And this is what we are going to do.

For this I'll write the same application one version with MovieClips and a second version with blitting. The application will be very simple. It will create moving objects on screen and as long as a certain FPS count isn't reached flash will add one object. If the FPS count falls to much one object will be removed automatically.

The average number of objects on screen will indicate which version runs at a better performance.

I'll not describe how to create MovieClips, but I'll explain how blitting is done.

First we need the BitmapData object. The BitmapData object represents the content of a Bitmap object. It gives us direct access on pixel basis. Additionally we need a Bitmap object. This object represents the display object we can add to stage, we also link our bitmapData object to it. This is the way our pixels comes on screen.

The BitmapData object offers different ways to manipulate its pixel content. The fastest was to bring something to it is the function copyPixels. With this functions we can transfer pixel data from one BitmapData object to another one. We also can determine the position where pixels will appear. For this we need an additional BitmapData object holding the data we want to show on screen. To do this we are simply drawing a MovieClip on it.

Technically this is all we need to do.

X and Y describes the point where objectData is drawn in screenData.

For more information about BitmapData object follow this link:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html

 

demofile using MovieClips: click here

demofile using blitting: click here

Here you can download the source of the demo files: click here

plasma

You can reload the page to see different effects.

 

Some weeks ago I needed some eye candy for my latest game. The easiest way was to put some plasma in the background. But mostly plasma algorithms generate a repetitive pattern and i wanted a better one.

 

I found this post in david's blog: http://www.gibbongames.com/?p=167

 

Unfortunatley this program is written in blitzmax, a language I don't know at all. But the syntax is easy to understand, so it took just some hours to port it.

I have added one nice feature. You can define how many lines are calculated by render circle. So you can screw down the fps of the plasma effect and use the CPU for what you really want to do.

download: click hear to download a demo project.

 

p.s.: My favourite line of code in this project is

 

if ( ubyte[plasma_id] & 128 )
                            ubyte[plasma_id] =  (~ubyte[plasma_id])&0x7F;

 

It's a very good example of the power of bit operation.

ReferenceError: Error #1056: Eigenschaft X in Y kann nicht erstellt werden.

Ich habe mich letztes Wochenende vier Stunden damit herumgeschlagen, dass CS4 meine Fla nicht kompiliert, sondern mit der fehlermeldung #1056 abbricht.

 

Als ich vom Stammtisch nach hause kam, war es mir plötzlich völlig klar.

 

X ist ein Object, dass irgendwo auf einer Zeitleiste in der Fla liegt.
Y ist die Klasse mir der die Hauptzeitleiste verknüpft ist.

 

X wird beim Kompilieren zur Klasse Y hinzugefügt und genau das unterbinder der Kompiler, da eine normale Klasse ein unveränderbarer Datenkontainer ist dessen Struktur nicht verändert werden kann.

Lösung:

Die Klasse Y muss als dynamisch deklariert werden.