Google analytics has changed the way its tracking occurs. It now uses a different javascript file, ga.js, instead of the legacy urchin.js. I don’t understand fully how it works or what it has changed, but this guy does. He was generous enough to write and release a plugin to add the new tracking system to WordPress.
A friend (who won a Zune, lucky bastard!) and I went to Microsoft’s Phizzpop design challenge in Austin earlier tonight. The attendance level was great and the designs were off the charts. The design problem involved creating a video portal for a Houston based indie film company called Micro Cinema.
The competing companies were Frog Design, Telligent, Projekt202, Thirteen23, Pop Labs and Neudesic. Each team received 2 days of intensive WPF and expression training, after which they were given the design problem and a little over 2 days to design / code the solution. The results were more prototypes than applications, and some were nothing more than back to back images.
Frog Design’s entry was pretty impressive, just for the sheer amount they had completed. Working videos and a good portal structure, and a decent design helped earn them a middle of the pack placement in my mind. They focused a little too much on the “emotion” of the movies though.
Projekt 202 really impressed me in the competition. I had heard of the company before, but their entry caught me completely off guard. Though I thought their design was not that impressive visually, they showed a tremendous understanding of the goals of the portal and of Micro Cinema. They easily had the best vision for the portal out of any of the competitors. Again, the only thing that I thought could have been improved was the aesthetics of their design.
Thirteen23 really stole the show with their design. I had never even heard of them before tonight, but man do they have some talented designers and developers. They really showed an in depth understanding of the technology and top notch design ability. Though I thought their entry lacked the vision of Projekt202′s, their implementation was incredible. Unless they were playing tricks with URL’s, the site was actually online, and looked really complete when compared to the others. There were animations in the interface, and you could tell it was just much further along than the others. Congratulations to thirteen23, they’ll move on to face the winner’s of the other regional design challenges at the SXSW Interactive Festival!
Once you install Flex Builder beta 3 milestone 4 and open up an Actionscript class you might be greeted by this little gem:
If you find it as distracting as I do, here is how you dump it:
Click on Flex Builder menu item at the top, then click on preferences. Navigate to the section shown on the image below then select the Actionscript Occurences button, then just uncheck the “text as” option:
There are a lot of issues you run across when dumping the Flash IDE and doing pure AS3 projects in Flex Builder (the subject of many future posts), but one of the first ones you’ll run across is the issue of embedding fonts.
There are a number of solutions, but none of them are very elegant or well organized. I hate the idea of embedding fonts at compile time, because it gives you zero control over when you import and register your fonts, and it increases the necessary load time of your initial SWF. Plus its just plain ugly. If you had an FLA as the root of the project, it wouldn’t be an issue at all, you could simply embed the font in each text field you throw on the stage (which you can still do, so long as your text field is in a sub clip that is not directly referenced in the library), but your fonts are not very organized if you choose to do it that way either.
If you encase all your fonts in a SWF, and then give them direct class representations, you can keep track of all your fonts from a centralized SWF and keep their representative classes in a directory. Then you have control over when you load and register those fonts, as well as their organization. People who work on your projects after you can also see exactly what fonts you’ve embedded as well. With Flex Builder 3′s advanced refactoring you can also change an entire font across all text fields that use that font in just a few clicks (try that in your FLA!).
So, to start this you need a flash extension created by Tink, you can find it at this link. The plugin was made to do a similar process with Movie Clips (which turns out to be a very efficient way of auto generating classes that can then be linked to content in a SWF), but there is an updated version at the bottom that allows for fonts to be exported as well other movie clips. Its very similar to writing the classes in the Flash IDE, linking them to their representative MovieClips then exporting that swf and making use of the classes. Except here the classes are auto generated and exist in the flex project rather than in an FLA project. It isn’t completely necessary to have the command installed, but having it saves you a ton of time.
Here is the link to the source of the project if you want to use it to follow along. Here is a link to the finished work, which consists of two text fields being animated to show that the fonts are embedded.
So to start, create a flex builder ActionScript 3 project. create packages for fonts and swfassets, in the project above I create a com folder and place the view folder in it, then I place the fontassets and swfassets folders under the view folder. Now create another fontassets folder on the same level as the com folder, and create an empty fla in that folder:
Once you’ve created the FLA, open it and add fonts to the library (right click on the library and select new Font). I used Futura and Minion Pro. You must make sure the name that you name the font is the exact name of the font (case and space sensitive).
Now we need to set the font to export for Actionscript by linking it to a class. Right click on the font and select linkage. You can name the class whatever you want, its the package thats the important part. Make sure that the package exactly resembles the package that you have it stored in Flex. You’ll get a warning from Actionscript that no definition can be found for the class. We don’t give a rats what Flash thinks though, because we’re about to auto generate our own class! In my case the package name com.view.fonts:
Now we need to actually create the class that will represent our font in our Flex Builder project. To do that its time to activate that command I told you about a bit earlier. Go to window => other panels => create classes. That should open a window up for you. Now change the directory to project directory so that it points to the directory that contains the com directory. This means it will export the classes it sees and place them in the com=>view=>fonts directory. So set your directory and click on the create classes:
Now you should see these classes auto generated in Flex Builder in the fonts folder. The comment at the top will mention its been auto generated as well. Now all you need to do is add a public static constant to the top of the file that represents the Name of the font, which you’ll use when you set text fields to use the font. Here is the Futura class file. Now the swf that contains the fonts must be imported before they can be used. ApplicationDomain is important in this context, so you must set it to currentDomain so that the fonts will be registered and visible across the project.
fontAssetLoader = new Loader();
fontAssetLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onFontAssetsLoadComplete );
fontAssetLoader.load( new URLRequest( AssetURL.FONT_ASSET_URL ),
new LoaderContext( false, ApplicationDomain.currentDomain ) );
Once they’ve been loaded, you need to register them:
/**
* Called when the font assets have been loaded
*
* @param evt
*
*/
private function onFontAssetsLoadComplete( evt : Event ) : void
{
Font.registerFont( Futura );
Font.registerFont( MinionPro );
isFontAssetLoadComplete = true;
onAllLoadComplete();
}
Once you’ve done that, you can use them in subsequent text fields you create! Here is the class in the project that actually instantiates and uses the text field.
You’ll notice I also do basically the same procedure with a MovieClip class that I create in an FLA and then overwrite. It works essentially the same way with some quirks (that I’ll probably write about at a later date). In that class I have several sub clips on the stage, which I then place the text fields in. This is necessary for this method to work, as the text fields must be dynamically created. Lots of coders let the designers create the actual dynamic text fields (this whole process is obviously irrelevant for static fields). More often than not I end up encasing those text fields in sub movie clips anyways so that they can be tweened and animated according to the designer’s needs. Since the text field itself is dynamic it has to be linked in Actionscript, so the extra 8 or so lines of code it takes to do dynamically create it in Actionscript is worth it.
So there you have it, you’re just a little more separated from those designers than you were before! And you don’t have to use their shitty Flash IDE to write your code in either.
Recent Comments