Tag Archives: ActionScript 3.0

Metaballs

Posted on by

This week I’ve been working on creating a liquid effect in Flash. After a little research and a relapse to my got old 3D days I remembered a principle called ‘Metaballs‘ or ‘Iso surfaces‘. This is a nice way to replecate fluid dynamics in a 2D or 3D environment. So after some web browsing I found a nice implementation in AS3 by Szataniol. The only problem with this implementation was that it lacked alpha, which I needed to be able to apply some filters for a more realistic effect. This was easily solved by adding an extra render pass to calculate the mask. I’ll post the code for that below.

I hooked up the ‘renderer’ from Szataniol to the Box2D physics engine and starting messing around. I ended up making a couple of different versions:

I’ve set up my Main class in such a way that I can easily switch settings to create the different effects by using a different Model class.

[insert class diagram…]

TBC…

Fonts and loading times

Posted on by
Reply

When embedding fonts there are a couple of things you need to keep in mind.

  1. When will you need them? (i.e. during the loading)
  2. How to embed them? Using the IDE or Flex?
  3. Where will you embed them?

Since there is no way to export you library items in another frame than the first in AS3 you need to look for alternatives.

An alternative would be to just accept the increased file size when embedding them in the first frame and showing no information to the user when this is loading. I have noticed though that a simple Latin-1 font adds about 30 kB. One could reason with the widespread availability of broadband this shouldn’t be too bad.

The other option is to embed the font in an external file and decide not to use it for the loader. This keeps your file size down and increases initial loading, that way you can show the user sooner what is happening.

Also keep in mind that when you use a standard embed tag with Flex the embedded font will take up more space than when you use the Flash IDE to embed the fonts. You can avoid this though by specifying in the embed tag which characters you want to embed. A disadvantage of using the embedding with the IDE is that you won’t know for sure if your embedded fonts work until you have uninstalled them from you machine or test on a machine that doesn’t have the font.

Embedding in using the IDE goes as follows:

  1. In the library click
  2. ..

To embed a font in Flex you use the following code:

< View plain text >
ActionScript

  1. // embedding fonts using flex
  2.  
  3. // note: leave the unicodeRange part out is you want to embed the entire font.
  4. [ Embed( source="Arial.ttf", fontName="Arial", mimeType="application/x-font-truetype", unicodeRange="<span><span class="character">U+0020-U+002F</span></span>" ) ]
  5. public var Arial:Class;

Now if you decide to load the font from an external file, you’ll need to register the freshly loaded font with the Flash player.

< View plain text >
ActionScript

  1. // register the font with the player
  2. // where appDomain is a reference to the application domain the externally loaded font is in
  3. var arial:Class = Class(appDomain.getDefinition( "Arial" ));
  4. Font.registerFont(arial);

Some useful links about embedding a subset of a (unicode font):
– Unicode Character Table
– Yahoo on runtime font embedding

That’s about it for embedding fonts.

Update:
If embedded fonts aren’t showing up when compiling with Flex 4, add embedAsCFF=”false” to the embed-tag.

Masks

Posted on by
Reply

The other day I was trying to animate a mask on a Sprite. It was working only very jerkily or not all. After a lot of trial and error I decided to re-read the docs on masking a Sprite. It turns out you need to add the mask to the the Stage before you can animate it. Quite strange when you are used to just setting the mask in ActionScript 2.

< View plain text >
ActionScript

  1. var mc:Sprite = new Sprite();
  2. // ... fill mc with something
  3. var myMask:Sprite = new Sprite();
  4. // ... draw the mask
  5. addChild(mc);
  6. addChild(mask);
  7. mc.mask = myMask;
  8. // .. now animate away!!! :)