Ubacoda.com is an independant developer of mobile applications. Welcome to the ubacoda.com blog!

Loading Fonts at Runtime with latest Flex 4 SDK

Tue May 11 03:27:29 2010

I wrote a post a while back about loading fonts at runtime. Nothing there has really changed, but I did want to clarify one thing on here. I just discovered that when embedding fonts with the latest Flex 4 SDK, I got an error with the following

[Embed(systemFont='OCR A Std', 
fontName="OCR",
mimeType="application/x-font",
unicodeRange="U+0041-U+005A")]

The error read:
Error: exception during transcoding: Cannot embed local font 'nameOfFont' as CFF. The CSS @font-face 'local()' syntax is not supported. Please specify a path directly to a font file using the 'url()' syntax. For [Embed] syntax the 'systemFont' attribute is not supported. Please specify a path directly to a font file using the 'source' attribute.

I found that adding the following solved this problem.

[Embed(systemFont='OCR A Std', 
fontName="OCR",
embedAsCFF='false',
mimeType="application/x-font",
unicodeRange="U+0041-U+005A")]

" No transcoder registered for mimetype 'text/fxg' " Error

Sat May 8 17:43:39 2010

Well, this has really bugged me for a while now... I've been using an older version of the Flex 4 SDK until recently and have never had this problem. When I downloaded the latest nightly, I was struck with the fear that I would never again be freely able to use FXG the way I had previous. I just couldn't understand why the Flex 4 SDK wouldn't be able to transcode Adobe's shiny new toy - FXG. It just didn't make sense. I actually wrote another rather popular post about how to embed FXG in ActionScript which showed the following method of using FXG.

The following doesn't seem to work using the latest Flex 4 SDK releases


[Embed(source='Flower.fxg')]
private var Flower:Class;		
private var flower:Sprite = new Flower();

But why wouldn't something that worked before, work now? For a moment, I thought it was a way to make you buy software that supported this feature, but that didn't make sense either, since the SDK is free as well as having an open source version.

Then it hit me. I'd remembered watching a video that someone from Adobe (at least he said he was) had posted online. The video showed something along the following lines

This seems to works fine!


import Flower;
var flower:Flower = new Flower()
addChild(flower);

I could never get this to work in the older versions of the Flex 4 SDK but that's right folks! What was pretty simple before has become even simpler! Now just treat the FXG graphic as you would any other class and the magic is retained. In the words of David Bowie, "Wham bam thank you mam!"

Trace Statements with the FLEX SDK

Fri Apr 30 00:57:05 2010

This is a topic I have long since intended to write about, but never got round to it. Well, anyway... trace statements in flex/flash are something that I would imagine we all use all the time, mostly for debugging purposes. There is a great little extension for the Firefox plugin FireBug called FlashBug, which allows trace statement output directly from within the browser. It is also possible to view this output via Terminal on OSX/Linux and command prompt on Windows. However, there are a few things that need to be set up.

First create a file call "mm.cfg" and place it in the following location:

On OSX: /Library/Application Support/Macromedia/mm.cfg

On Win: C:Documents and Settingsusernamemm.cfg

On Linux: home/username/mm.cfg

Next open the mm.cfg file and type the following inside.

ErrorReportingEnable=1

TraceOutputFileEnable=1

It may be obvious, but ErrorReportingEnable controls the ability to view error output and TraceOutputFileEnable controls the ability to view trace output. Setting each of these values to 1 turns these properties on. If, for example, you didn't want to view error output, simply turn the 1 to a 0, or delete the line ErrorReportingEnable.

Anyway, moving on. Create an ActionScript file that uses trace statements. I've pasted an example below for convenience. For test purposes, just save it as Main.as.

package{	
   import flash.display.*;
	
   public class Main extends MovieClip{

      public function Main(){
         trace("Trace output is working");
      }
   }
}

Next we need to compile it. If you aren't sure how to do this, you can take a look at my other post: Compile AS files with Flex SDK, which gives a more detailed "how to", or simply use Terminal/Command Prompt to open up fsch found inside the bin folder of the flex sdk (which you should already have), and type the following, obviously swapping in the location and file names where necessary.

mxmlc -o=output_location/your_filename.swf -file-specs=your_file_location/Main.as

This should compile the Main.as file and you should be left with a .swf file saved at the location you entered. Before you open this file, you will need to install the flash debug player from the Adobe website. You will find it under Debugger Versions. Once you have that installed run the swf file. A file called flashlog.txt containing any errors and/or trace output will be created in the following location:

On OSX: /Users/username/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

On Win: C:Documents and SettingsusernameApplication DataMacromediaFlash PlayerLogsflashlog.txt

On Linux: home/username/Macromedia/Flash_Player/Logs/flashlog.txt

To view this information in real time simply use FlashBug with Firefox or type the follow into Terminal

tail -f /Users/{username}/Library/Preferences/Macromedia/"Flash Player"/Logs/flashlog.txt

For added convenience to anyone using TextMate, go to Bundles > Bundles Editor > Show Bundle Editor and click on the little plus sign on the bottom left hand side of the bundle editor window. Choose New Command and name it whatever you want. I named it Tail Output. Make sure Save:Nothing, Input:None and Output:None are selected. Next enter the following content into the Command(s) window changing {username} to the name of your home folder on OSX (This is just a little bash program I wrote to tell Terminal to tail the FlashLog.txt file).

Note* tail -f and /User/{usersname}... should be on the same line.

#!/bin/bash
 
aplscr="tell application "System Events" to set terminalRunning to (exists process "Terminal")

tell application "Terminal" to activate
tell application "Terminal" to do script "tail -f 
/Users/{username}/Library/Preferences/Macromedia/'Flash Player'/Logs/flashlog.txt" 
in front window" osascript -e "$aplscr" &>/dev/null &

Next set Activation: Key Equivalent, and enter whatever shortcut you want to activate the command in Terminal. I chose ⌘T (T for tail). For the Scope Selector, enter source.actionscript.3.

After all that's done, it's probably best to quit and restart TextMate. Now all you have to do to start viewing the errors and trace out is press your Key Trigger in TextMate while editing an ActionScript file and Terminal should start up and read out all the trace statements.

And that's it! By this point, if you've done it right, you should be getting readout on Errors and Trace statements and all should be well.

Removing Duplicates from Arrays in AS3

Tue Apr 20 06:09:33 2010

Of late, I haven't been posting much on here because I am a little bogged down with work right now. I'm working on a few projects at the same time which is really taking up all of my time. One such project, however, gave me an interesting problem whereby I needed to remove duplicates from an array that was being looped, and on each loop items in the array were removed from the flash display list. Thus, if the same item was found again in the array during another loop and didn't exist anymore in the display list, it caused an error. Here's how I got around it.

package{	
   import flash.display.*;
	
   public class Main extends MovieClip{

   public function Main(){
      var array:Array = ["1973", "1963", "1999", "1879", "1879", "1963", "1999", "1973"];
      trace(array); //traces the original array	in which each item occurs twice;
		
      var newArray:Array = removeDuplicates(array);
      trace(newArray);//traces 1973,1963,1999,1879
   }
		
   private function removeDuplicates(array:Array):Array{
      for (var i:uint = array.length; i > 0; i--){
         if (array.indexOf(array[i-1]) != i-1){
            array.splice(i-1,1);
         }
      }
			
      return array;
      }
   }
}

Pretty simple really. All that's happening is that we loop backwards through the array we pass into the removeDuplicates function. While we move backwards through the array, we use indexOf to find the chronological value at i, and thus if any values found at the end of the array match elsewhere in the array but the indexes don't, the one at the end of the array gets pulled or "spliced" from the array. If you think about it, it makes sense.

I'm pretty sure someone will find a need for this. Hope it helps.

My Top 10 Mac Apps

Thu Mar 25 02:39:27 2010

As you may have guess I love Mac. As a programmer, I don't always appreciate everything apple turns out, but I believe that Apple supplies some of the very best hardware and software out there. On that note, I have been meaning to write top 10 favourite Mac applications and post them here. So without further a do...

*Note that all prices (if any) are as of March 2010.

10

Espresso ($79.95) - From the same people who produced CSSEdit comes Espresso. It's a little overpriced if you ask me, but does a good job of HTML/CSS and has a live (as-you-code) view feature. The PHP auto-complete can be a little messy at times but there are a few plug-ins available so it has a lot of potential to improve.

9

QuickScale (14.99 Euro) - This little app has been a life saver. As a programmer and designer, keeping file size down is very important, and what would normally take a great deal of time to do, gets done in a few secs with QuickScale. On one occasion, I remember a design change that required thumbnail images as well as full-size images. It was easy to create the thumbs I needed in just a few clicks.

8

Pixelmator ($59) - A very very very stylish and easy to use image editing software. Great value for money if you don't want to pay the price for Photoshop

7

Document Palette - One thing that is missing in Mac OSX is the ability to right click on your desktop and create a text file or HTML document. With this great little app, you can easily create new documents with simple shortcuts and even customize the default template files it uses.

6

Versions (€39.00) - Versions gives you a really nice interface to interact with Subversion. However, as well as being pleasant on the eyes, it allows you to keep bookmarks of any connections you frequently visit, which is really convenient if you are constantly moving files around.

5

De MonsterDebugger - This is a wonderful little debugger built using Adobe Air for Flash and Flex developers. If you are using a text editor like TextMate, or even if your not, this is a very nice addition to any ActionScripter's toolbox.

4

MAMP (Free but MAMP Pro cost $59.00) - MAMP is something I have come to need more than most other applications as it allows easy set up of a development server for web development and testing purposes. It can easily be turned on and off, there is minimal setup required and in most cases, it actually less space than installing Apache, PHP and mySQL by yourself. Great for PHP developers!

3

Transmit ($29) - Transmit is a nice FTP app that is full of features and very easy to use. I have never had a complaint with this. It even lets you open and edit files directly from the server. It has saved me a tone of time, particularly with last minute web design changes and website updates.

2

DropBox - Keeping myself organized with minimal effort has never been easy. I used to be a big fan of Box.net, but DropBox has changed the way I work completely, and the best of it is that this little gem will work on Mac, Win and Linux. Believe me, you'll probably hardly ever use your USB again, and it's 100% free! Amazing!

1

TextMate ($54)- For coding, Flash CS4 is mediocre, Eclipse is cool, Flex 3 is great, but my No. 1 love on my Mac is TextMate. It's simply the text editor that has it all. I just couldn't live without this wonderful piece of software. If you are a programmer and a fan of simplicity meets power production, I thoroughly recommend this.


So there you have it. You may not agree with my choices, but I find that my favourites change depending on what I'm working on at that time. Feel free to comment about your favourite apps.

Most recent posts

  1. Flashcards Maker - the app the helps you learn in a flash
  2. Convert Font Suitcase to TTF in 3 Easy Steps
  3. Rain or Shine - Weather Forecast Available Now!
  4. Getting around Apple's silly rules for iOS 10
  5. Localising App Names for iOS and Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories