My Coding Life
Archive for the ‘Flash’ Category
A property list for embedding fonts with the [Emded] metadata tag.
January 20th, 2010 The purpose of this post is to document all the different properties available when using the [Embed] metadata tag to embed fonts into an SWF file. Much of this information is spread throughout Adobe’s documentation, and some of it came from personal experience while developing the Runtime Font Publisher extension. This list was generated out of a desire to see all this information in a single easy-to-read table.
While researching this post the most important points I discovered are that the Flex SDK uses three different font managers, that the font type (OpenType versus TrueType) often impacts the behavior of a property, and in a few cases, setting a value on one property will affect the behavior of a different property. As such I’ve repeated properties to point out behaviors specific to font type, and the notes point out instances where setting one property affects the behavior of a different property. Enjoy!
| Font Type | Property | Values | Notes | |
|---|---|---|---|---|
 |
 |
systemFont |
Exact name of a system font (e.g., "Arial") |
The font must be installed on your system. The JRE font manager is used to embed system fonts. The Flex SDK does not support embedding OpenType sytem fonts. |
 |
source |
Absolute or relative location of font file (e.g., "c:/akbar.otf") |
OpenType fonts are transcoded by the AFE font manager. | |
|
source |
Absolute or relative location of font file (e.g., "../akbar.ttf") |
TrueType fonts can be transcoded by the AFE or Batik font manager. Modifying the flex-config.xml file defines which font manager is used. |
|
|
|
fontName |
String alias | The fontName property is used to reference the font at runtime within the Flash Player. To shadow a font, that is giving it the same name as a system font, set the show-shadows-system-font-warnings compiler option to false. Shadowing a font often causes issues at runtime, especially if the system font that is being shadowed has a different weight or style than the embedded font. |
|
|
fontFamily |
String alias | Exhibits the same behavior as the fontName property. |
|
fontWeight |
normal | bold | heavy |
The fontWeight property must be set to the typeface style defined by the font file. Adobe’s documentation only references the three values, however some font files have a different typeface style. In theory, these could also be used. Have yet to test. |
|
|
fontWeight |
normal | bold | heavy |
The fontWeight property behaves the same for TrueType fonts as OpenType font when using the source property to embed a font. When the systemFont property is used, the font can be set to either normal or bold. I believe this styling is done by functions of the compiler, and not the exact font outlines defined in the font file. Must research more. |
|
|
fontStyle |
normal | italic | oblique |
The fontStyle property must be set to the typeface style defined by the font file. Adobe’s documentation only references the three values, however some font files have a different typeface style. In theory, these could also be used. Have yet to test. |
|
|
fontStyle |
normal | italic | oblique |
The fontStyle property behaves the same for TrueType fonts as OpenType font when using the source property to embed a font. When the systemFont property is used, the font can be set to either normal or italic. I believe this styling is done by modifying the outlines for the font, and not using the exact outlines defined within the font file. Must research more. |
|
|
|
unicodeRange |
Unicode characters written in U+hex notation. Also accepts string range names. | Ranges are specificed by dashes. Characters and ranges are comma delimited. String range names are defined in flex-config.xml. |
|
|
advanced- |
true | false |
By default the Flex SDK sets this value to true. Fonts that use advanced anti-aliasing appear sharper at smaller sizes. This property is ignored if the cff property is set to true. |
|
|
cff |
true | false |
Compact Font Format embedded fonts are created when set to true. CFF fonts are used by the Flash Text Engine. Classic textfields (flash.text.textfield) cannot use embedded CFF fonts. |
|
mimeType |
application/x-font |
This property must be set to succesfully embed the font. | |
|
mimeType |
application/x-font | application/x-font-truetype |
Unknown if using either mimeType affects behavior of embedded font. | |
Runtime Font Publisher; A Flash CS4 Extension.
Recently, I created my first Flash CS4 extension. The Runtime Font Publisher extension makes it easy to create, configure, and publish SWFs that contain fonts for runtime sharing. Each SWF that is created by the Runtime Font Publisher can contain a single font definition, or multiple definitions. For each font definition it is possible to configure the font name, font source file, font family, font style, and embedded character sets.
How-to use
Using a font SWF published from the Runtime Font Publisher is as easy as using the loader class to load the SWF and then updating the textformat object of a textfield to use a font name chosen in the Runtime Font Publisher. SWFs published by the extension will automatically register the fonts with the Flash Player when loaded.
As a simplified example, the following code loads the font SWF that contains the embedded fonts.var loader:Loader = new Loader();The Event.INIT handler then updates the textformat object of a textfield on the stage to match the font name of a font embedded in the font SWF.
var request:URLRequest = new URLRequest('RSFont.swf');
loader.load(request);
loader.contentLoaderInfo.addEventListener(Event.INIT, onInit);function onInit(event:Event):void {
//embedFonts must be set to true to display a runtime shared font.
textField.embedFonts = true;
var textFormat:TextFormat = textField.getTextFormat();
textFormat.font = "MyFont"; //MyFont is defined in the Font name field.
textField.defaultTextFormat = textFormat;
textField.text = "Some Text";
}
Known issues
Issues know to cause compiler errors include selecting a non-TrueType font for the Family, or selecting style properties incompatible with a specific font file. As the Family drop-down lists all device fonts on a system, selecting a font that is not a TrueType font will cause a compiler error. To quickly determine if a font in the Family drop-down is TrueType or OpenType (indicated by icon), select a textfield and view the Family drop-down in the Flash CS4 properties panel. The font SWFs use the [Embed] tag to embed the fonts. Adobe has a good tutorial on how to embed fonts as metadata. Understanding the details of Adobe’s article will make it easier to debug any compiler errors.
Further troubleshooting can be accomplished by viewing the source files the extension generates. Source files are saved into the \Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\Commands\RSFont\src folder on a PC, and /{username}/Library/Application Support/Adobe/Flash CS4/en/Configuration/Commands/RSFont/src folder on a Mac.
Selecting “All” within the Ranges list often results in SWFs that don’t include any font outlines. No compiler errors are thrown and it’s only obvious by the extremely small file size of the output SWF. Compiling the source with the command line against the 3.2.0 Flex SDK yields success. Could be an issue with the Flash CS4 IDE.
Download
Download the Runtime Font Publisher directly from my site. Please let me know what you think. I have ideas for more features, and I’d love to get more feedback. This extension will be submitted to the Adobe Exchange.
The MovieClip life cycle revisited. From Event.ADDED to Event.REMOVED_FROM_STAGE.
This post is a follow up to my previous post on the MovieClip life cycle. Previously I took a look at the sequence of events that occur during the life of a single frame. This post adds to the discussion by covering event types relevant to MovieClip display object children. Those events are Event.ADDED, Event.ADDED_TO_STAGE, Event.REMOVED, and Event.REMOVED_FROM_STAGE.
What follows is the same order of events from before, plus the four new events. The four have been around since Flash Player 9, they’re just new to my discussion. And to keep things short, I’m only going to discuss the new events in depth.
- Event of event type Event.ENTER_FRAME dispatched
- Constructor code of children display objects is executed
- Event of event type Event.ADDED dispatched from children display objects
- Event of event type Event.ADDED_TO_STAGE dispatched from children display objects
- Event of event type Event.FRAME_CONSTRUCTED dispatched
- MovieClip frame actions are executed
- Frame actions of children MovieClips are executed
- Event of event type Event.EXIT_FRAME dispatched
- Event of event type Event.RENDER dispatched
- Event of event type Event.REMOVED dispatched from children display objects
- Event of event type Event.REMOVED_FROM_STAGE dispatched from children display objects
A special note about these events. The order of the above is only specific to MovieClips added or removed from the timeline in the Flash IDE. Manually calling addChild() or addChildAt() will dispatch Event.ADDED and Event.ADDED_TO_STAGE events immediately after the add child call. The same holds true for the removeChild() and removeChildAt() calls, and the related Event.REMOVED and Event.REMOVED_FROM_STAGE events.
Steps 3 and 4
Event.ADDED and Event.ADDED_TO_STAGE are both dispatched when the playhead moves across the MovieClip timeline and encounters a keyframe with a new child display object. If the child exists in the frame immediately previous to the keyframe there a number of conditions that will still cause both events to be dispatched. Both events will be dispatched if the child exists on a different layer, or has a different instance name, or is being masked/unmasked. Masked is defined as the mask being added by keyframe to the mask layer. Unmasked means that in the next frame the mask layer is empty.
Regardless of the order that listeners are added, Event.ADDED is dispatched before Event.ADDED_TO_STAGE. If a child, in the frame the playhead is on, is not being added neither event will be dispatched.
Steps 10 and 11
Event.REMOVED and Event.REMOVED_FROM_STAGE are dispatched at the end of the current frame when a child exists on the timeline and does not exist in the next frame. There are other conditions that cause the remove events to be dispatched from a child that remains on the timeline. Conditions mirror those of the added events and include when the child in question appears on a new keyframe on a different layer, or the child has a different instance name, or the child is about to be masked/unmasked.
Regardless of the order that listeners are added, Event.REMOVED is dispatched before Event.REMOVED_FROM_STAGE. If a child is not being removed in the next frame, then neither event will be dispatched.
The MovieClip life cycle, Event.FRAME_CONSTRUCTED,
and Event.EXIT_FRAME.
The release of Flash Player 10 introduces two new frame related event types. Event.FRAME_CONSTRUCTED, and Event.EXIT_FRAME are the two new event types. These two new event types add another level of control for making animation sensitive changes to display list objects. The purpose of this post is to illustrate when these event types occur within a frame’s life cycle. Details will discuss the order that the events occur relative to Event.ENTER_FRAME, Event.RENDER, frame scripts, and constructor code of children display objects.
To provide context to the discussion it’s best to start with the order of events that are fired during a frame’s life cycle. This list was made by creating a Flash test file and looking at the currentFrame property of a MovieClip with the different frame event type listeners.
- Event of event type Event.ENTER_FRAME dispatched
- Constructor code of children MovieClips is executed
- Event of event type Event.FRAME_CONSTRUCTED dispatched
- MovieClip frame actions are executed
- Frame actions of children MovieClips are executed
- Event of event type Event.EXIT_FRAME dispatched
- Event of event type Event.RENDER dispatched
Steps 1 and 2
Flash Player 9 introduced Event.ENTER_FRAME, which is dispatched every time the playhead enters a new frame and is tied to the frame rate being run by the Flash Player. Event.ENTER_FRAME functions in much the same way as onEnterFrame() did in AS 2.0. In step 2 constructor code for any display list children is executed. This includes any display list objects extending from the native display list classes of the Flash API. The order of these two steps is the same as it was in Flash Player 9. Nothing new to report here.
Step 3
New to Flash Player 10 the event, Event.FRAME_CONSTRUCTED is executed. It’s important to remember the order for when this event is executed. At frame construction is the first time that it’s possible to start referencing newly added display list children of the MovieClip that is being listened to. This caused all sort of issues in Flash Player 9 after issuing a gotoAndStop call to a frame with display list objects that didn’t exist on the frame where the gotoAndStop call was made. Due to the fact that display list children had yet to be instantiated, targeting a display object child would return null the first time an Event.ENTER_FRAME was called after the gotoAndStop.
Steps 4 and 5
Steps 4 and 5 remain the same in Flash Player 10 as they did in Flash Player 9. First the frame actions of the MovieClip acting as a display object container are executed. Then the frame actions for display list children are executed. Note that in the Flash CS3 IDE the load order, a setting adjustable in publish settings panel, would affect the order that the display list children would execute their constructors and frame scripts. I haven’t found that dialogue in the Flash CS4 IDE publish settings, maybe Adobe removed it? In any case, by default, it uses a load order of bottom up in CS4. That means that display objects that are on a lower layer will have their constructor and frame scripts executed before display list objects on higher layers.
Steps 6 and 7
New to Flash Player 10, Event.EXIT_FRAME is executed in step 6. As it’s at the end of the frame life cycle, it would be good to use when there is a need to manipulate a display list object after its constructor and frame scripts have been executed.
Another possible use for Event.EXIT_FRAME is to replace calls in Flash Player 9 that were using Event.RENDER. Flash Player 9 introduced Event.RENDER, which according to Adobe documentation is dispatched right before the display list is scheduled to be updated. Depending on how one looks at it this may be true, as it’s at the end of the life cycle above, that would mean it’s at the beginning of the next frame life cycle. During testing for this article I found that according to the value of currentFrame on the MovieClip I had assigned all my listeners to, Event.RENDER was the last event to execute. In addition Event.RENDER first requires a Stage.Invalidate call before it is dispatched. On top of those two issues there were issues with dispatching Event.RENDER in the first few versions of Flash Player 9. Developers need to do sub-version detection of Flash Player 9 to ensure consistent behavior. For these reasons I suggest investigating Event.EXIT_FRAME to see if it works in place of Event.RENDER.
Despite the issues with Event.RENDER there are still times when Stage.Invalidate can be used. For example, calling Stage.Invalidate during mouse movements in Flash movies with a low FPS setting will smooth drag and drop animations.
GotoClip. A solution for Error #1009, gotoAndStop, gotoAndPlay and targeting children MovieClips.
One of the differences between ActionScript 2.0 and 3.0 is the behavior of MovieClip timelines and code targeting display list children. For example in AS 2.0 it was possible to call gotoAndStop or gotoAndPlay and then directly manipulate MovieClips at the targeted frame.
gotoAndStop(25);In AS 3.0 calling the equivalent code
child_mc._rotation = 25;
gotoAndStop(25);will yield a runtime error such as this.
child_mc.rotation = 25;
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MyFla_fla::MainTimeline/frame1()
GotoClip is a class that restores some of the AS 2.0 timeline functionality to AS 3.0 MovieClips. It will allow calls to be made like this
gotoAndStop(25);while avoiding runtime errors. The class makes it possible to target a display list child MovieClip anywhere on the timeline after a gotoAndStop, or gotoAndPlay call. Then within the same code block properties can be set on the child MovieClip. During runtime the GotoClip class behaves as a proxy to store the commands made to the child MovieClip. GotoClip then applies those commands when the Flash Player has successfully drawn the child MovieClip to the stage, thereby avoiding the typical runtime Error #1009.
var child:MovieClip = getChildByName("child_mc") as MovieClip;
child.rotation = 25;
GotoClip resides within a small ActionScript library I created called the AS3 Display List Library. The library resides on Google Code. It includes a Wiki and the downloads section includes samples with source code and a swc which can be used for compiling with Flash and Flex projects.
TheCaminus.com live now!
After months of development, all during off hours outside of my regular day job, it feels great to finally launch thecaminus.com. The site is the portfolio of Calgary based photographer Jamie Clark. The page design was a collaboration between Jamie and myself. I handled all the programming and motion design. There are nine sections and approximately 125 photos to view. A basic MVC framework was used to control the site, and the galleries are all driven by XML. Check the site out now and take a look at some amazing photographs. Congrats Jamie!
Embedding Flash, which method to use?
There’s a great article on A List Apart about the different ways to embed Flash content. It’s a great read if you’ve ever scratched your head when you’re wondering, “should I use the code that is written within the Adobe Flash Player detection kit, use SWFObject, or write my own?”
Embed methods covered include:
- Twice-cooked
- Nested-objects
- Flash Satay
- Adobe Flash player detection kit
- UFO and SWFObject
