Rich Rodecker’s blog on flash, flex, actionscript, javascript, and php, with a dash of randomness
Archive for May, 2008
One note about hacking CS3′s UIComponent to fix Event.RENDER
May 30th
Recently I posted about an issue about Flash CS3 components, wmode=transparent, and Event.RENDER, and in that post mentioned the UIComponent hack. One problem I did run into after using that hack was with custom CellRenderers, they didn’t work properly when loaded into another swf (when the parent swf exported it’s own CellRenderer). The fix was simple enough though: I just commented out the stage.invalidate(); line in callLaterDispatcher() and the loaded CellRenderer worked fine again.
Update: I’m going to have to call myself on this one…I must have done something screwy during my testing, because when I went back to it, I couldn’t get it to work. I wound up having to add the custom cell renderer from the child swf into the parent swf, which is reeeaaaal dirty but it’ll have to do for now.
Flex: Don’t forget to ‘Export Release Build’
May 28th
Generally while working on a project in Flex Builder, when you run your app it generates a debuggable swf and outputs it to the bin-debug folder. Note that this is not the ‘final’ or ‘live’ version that you deploy as your app…it’s bloated with debugging code and such. For that you need to select Project > Export Release Build…, and (by default) it will create a bin-release directory which contains the final output files to deploy the app.
IE doesn’t pass query parameters properly on file redirects
May 27th
Hot on the heels of my last flash development issue craziness comes this doozy: In Internet Explorer, if you redirect a request to a swf to another file, and add new request parameters in the redirect, IE will not pass the new parameters to the final object…it will only pass the original query params.
For example: You want myserver.com/somepath?var=1 to redirect to myserver.com/mySwfFile.swf?differentVar=2, the swf will be loaded into the page receiving the parameters of var=1… and not differentVar=2.
Quite painful if you want to redirect older existing content to newer content. Of course, this works seamlessly in Firefox and Safari.
Whoa…Actionscript 3, in Javascript!
May 27th
Someone put together an AS3Wrapper for Javascript, to enable you to code in AS3 syntax while writing javascript code. It claims to support the Full Flash API. That is probably the one thing that might interest me in writing any sort of javascript 
Flash CS3 components, wmode=transparent, and Event.RENDER
May 23rd
If you see at that title and know what I am talking about, then you know my pain. Almost 2 days of work down the drain trying to figure out why the project I was working on worked fine in 9.0.115, but not any version earlier than that in Firefox and Safari.
Long story short, I stumbled across this tech note :
The plugin version of Flash Player does not fire flash.events.Event.RENDER when wmode is set as transparent. (198515)
which led me to this post from Jesse Warden about fixing the CS3 components. Made the changes he spoke of in the article (except I didn’t delete the component shim, i just added a new fl.core.UIComponent to my class path) and everything worked fine again. Joy.
Dynamically loading fonts at runtime
May 21st
Had a crazy time with this one...mostly, I think, due to FlashPlayer's security mechanisms, which was making it a little difficult to test locally.
Anyway, I created the font swfs using flex, since that would allow me to set select a range of fonts to embed, as opposed to using a font library asset in a CS 3 swf, which doesn't.
Creating the font swf in Flex is mega-easy. What i did was set up a project in FlexBuilder named 'Fonts', then created another runnable Application class that matches the name of the font. By the way, Scott Morgan's article on YDN was where I got most of this from. I just changed a couple of small things from his article.
Here's the entire AS class that I used to export the font. This class declares the fonts as embedded assets and gives the font assets a class name. In the constructor for the class, the font is registered with the flash.text.Font class using Font.registerFont(fontClass). That's it.
ArialNarrow.as
Actionscript:
-
package
-
{
-
import flash.display.Sprite;
-
import flash.text.Font;
-
import flash.system.Security;
-
-
public class ArialNarrow extends Sprite
-
{
-
-
/**
-
* Embed the fonts in all of their different variations that we want to have accessible.
-
* Remeber that bold is a 'fontWeight' and italic is a 'fontStyle'.
-
* The unicode range is the basic Latin 1 character set.
-
*/
-
[Embed(source='assets/Arial Narrow.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontWeight="normal", mimeType="application/x-font-truetype", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')]
-
public static var ArialNarrow:Class;
-
-
[Embed(source='assets/Arial Narrow Bold.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontWeight="bold", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')]
-
public static var ArialNarrowBold:Class;
-
-
[Embed(source='assets/Arial Narrow Italic.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontStyle='italic', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')]
-
public static var ArialNarrowItalic:Class;
-
-
[Embed(source='assets/Arial Narrow Bold Italic.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontWeight="bold", fontStyle='italic', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')]
-
public static var ArialNarrowBoldItalic:Class;
-
-
public function ArialNarrow()
-
{
-
super();
-
Security.allowDomain("*");
-
registerFonts();
-
}
-
-
/**
-
* Flash keeps a table of fonts available for embedding.
-
* In order to let Flash know that we have loaded a new font
-
* available for embedding, we need to register that font's class reference
-
* with the Font class.
-
*
-
*/
-
public function registerFonts():void{
-
Font.registerFont(ArialNarrow)
-
Font.registerFont(ArialNarrowBold)
-
Font.registerFont(ArialNarrowItalic)
-
Font.registerFont(ArialNarrowBoldItalic)
-
}
-
-
}
-
}
Couple of notes about the embed metadata tags. First, i had to set the fontFamily attribute to the name of the font as I was going to use it in the app. I was using HTML text, so <font face="Arial Narrow" ... ></font> worked fine. Also, as noted in the comments in the class, when embedding multiple variations of the same font, keep in mind there is a distinction between 'fontWeight' and 'fontStyle'. Don't try to declare 'bold' as a fontStyle or you will get errors like 'exception during transcoding: Font for alias with bold weight was not found at:'.
Another hugely important thing to note is that in the swf in which you are loading the fonts into, there can be no references to the font already. If you have text fields on stage or anything that use that font, it won't work. I had to go back and set all my text fields to use _sans. Once I removed all references to the font, the loaded font showed up. I use Charles debug, and it was through that which I actually found out I had the font reference in the main swf. If you click on the swf in the structure pane, then click on the response tab up top, it gives you a breakdown on the fonts that are in your swf (there's a 'swf' tab on the bottom once you are looking at the response window, the info about the swf is in there).
RegExp note to self
May 12th
I'm always forgetting this simple piece of code, so I'm putting it up here:
Match any character, any number of times: (.*)
Guttershark Actionscript Library
May 12th
Came across another Actionscript library today, called Guttershark. This one is not Flex-specific, and is targeted towards Flash web site development, much like Gaia. Note the use of 'library' instead of 'framework'...I think that is a specific designation by the author to separate it out from the existing sets of frameworks out there. It is still in essence a framework, but there's lots of individual goodies in there that aren't dependent on using the entire library.
Taking a look at the DocumentController entry in the API docs should give you a good idea of what Guttershark is about. If you do a lot of flash web site development, it's worth a look to check it out.
mxna good to go?
May 5th
mxna is now redirecting to http://feeds.adobe.com. It's running pretty nice now, hopefully it stays this way.
Mate Flex Framework
May 5th
I just heard about the new Flex framework Mate (pronounced ma-tay) from asfusion. After spending some time going through their site I gotta say I am VERY impressed, both by the framework itself, and the documentation they have put together (considering how many times I've been let down by poor documentation in the past, Mate's is great by comparison) .
The framework is tag-based, easy to follow, and looks like it should be pretty easy for people to pick up. It uses EventMap files which contain EventHandler child tags which describe what to do in response to a certain event....call service, set a property on an object, etc. Some cool things I noticed right off the bat:
- the way their system works, you can use model objects in the Cairgorm style (one ModelLocator singleton) or in the PureMVC style (proxy/"manager" objects managing their data) and it works the same either way.
- Objects can be created and cached for future reference in response to an event
- The framework uses "injector" tags to set/bind properties of one an object to another.
There's definitely a lot more cool stuff going on in Mate. Go check it out at http://mate.asfusion.com/
