Embedding Fonts in Flash Pro

MarkBlog

Something occurred to me just yesterday that, whilst we’ve had this solved for sometime, it took a LOT of figuring out, googling and otherwise smacking the keyboard in frustration.

For anyone who has tried to embed a font into an AS3 project – or if you’ve tried and found this after searching Google – you can know it’s a pain and for whatever reason, doesn’t always work!
What jogged my memory was me starting a new project.  There I was, re-using code and getting the entire project structure all sorted.  I added a simple TextField, ran it, everything looked fine.  When I tried it on a different machine, it all looked horrible – the font hadn’t embedded.

Fortunately, somewhere in the pile of scraps of paper, I wrote down the procedure that worked for me and *BLAM* problem solved!  So, for anyone out there who’s suffering this same issue, here’s the procedure I use to achieve this:

  1. Include the font within your FLA.
    In the library, right-click and choose “New Font”
    Play around with the settings, make sure you tick the symbols you want to include (I usually just go for uppercase, lowercase, numbers and punctuation, rather than just tick “All”
  2. Export the font for ActionScript
    Still in the Font properties dialogue – if you closed it, right click it and choose properties, from the library.  Next, hit the ActionScript tab.  Tick “Export for ActionScript”.  Check the “Class” so that you know how to call your font (I usually just call mine “EmbedFont” so that I can copy and paste code from one project to the next… and I usually only embed a single font, so it’s not really a big deal!)
  3. Include the font in your code
    Now, this is the part that is often hit-and-miss!  We’ll do the whole code chunk in a second, but that’s the basic procedure.

And now the code:
(This code will show you how to embed a font and display it in a TextField)

  • The necessary Imports
    We need to bring in several AS3 classes in order to fully embed and use the font.

import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.Font;
import flash.text.TextFieldAutoSize;

  • Create our Variables
    You can create and instantiate these at the same time, if you prefer… I usually only call the constructor when I really need it!

private var embedFont:EmbedFont;
private var textFormat:TextFormat;
private var displayText:TextField;

  • Instantiate the Font and TextFormat…
    First, we have the Font and TextFormat.  You have to use a TextFormat if you want to ensure that your font will be embedded and used!

this.embedFont = new EmbedFont();
this.textFormat = new TextFormat();
this.textFormat.font = this.embedFont.fontName;
this.textFormat.size = 18;

  • And instantiate the TextField
    The key thing here are the calls to defaultTextFormat and setTextFormat.  I use both.  You shouldn’t have to, but it works… and if it ain’t broke, why fix it?

// Create the text field
this.displayText = new TextField();
this.displayText.embedFonts = true;
this.displayText.defaultTextFormat = this.textFormat;
this.mdisplayText.textColor = 0x000000;
this.displayText.setTextFormat( this.textFormat );
this.displayText.autoSize = TextFieldAutoSize.LEFT;
this.displayText.mouseEnabled = false;

  • Don’t forget…
    To add the text field to the stage!

this.addChild( this.displayText );

[NB: You can use the textFormat to set the font colour OR you can call textColor on the TextField itself.  Whichever is the last you call will be the colour that is set.  So if you call textColor and then you call setTextFormat, then the TextFormat’s colour will be the one that is used!]

If you use the above, that should work just fine and the font you want to embed will be carried over to any and all machines, even if it isn’t installed.  Which is great if you’re deploying an SWF to a web page, or if you’re running an AIR application on multiple platforms!

___________________________________

New Artwork for Skin Ink

MarkNews

In the upcoming release of Skin Ink, we have now secured the artistic talents of tattoo artist Luke Naylor, of Origins Tattoo in Yorkshire.

Luke (and his apprentice!) will provide new stencils and background flash art for the game, along with those provided by our resident artists!
The latest version will be hitting the stores for testing in the coming weeks – exciting stuff!

Bamboo Development Centre: Fixed!

MarkBlog

You hear some people warn of working with large companies.  Well, I can absolutely say this is NOT the case when working with Wacom!

Our issues were escalated to one of the engineers working on the Development Centre and Bamboo Dock and after a truly enlightening conversation – they’ve all been resolved!
So I thought it might be best to let the World know, just in case anyone else hits these little niggles.  I say ‘niggles’, as they’re not really problems… mostly because it was either my PC or my non-caffeinated-late-night-brain *shakes fist*

No Pressure (or other events)
If, like me, you come across this one – just make sure that ‘BambooCore.exe’ (on Windows… sorry to everyone who uses OSX, but I’m sure there’s an equivalent!) is running.  For no raisin whatsoever, my PC decided that it doesn’t want to let this process run by default, nor allow the Dock to start it, either.
You can safely start it manually, or uninstall and reinstall the dock – this fixes ALL!
In fact, if you haven’t done this in a while, it might be worth checking you have the latest dock, as there’s been tonnes of fixes and updates.

Some other things that were pointed out to me:

  1. If you’re building a ‘Mini’ – which generates a WCM file to run within the Bamboo Dock, then you’ll want to interface with the BambooMiniGlobals.  This is how you’ll get access to the pen pressure, which tip is currently used (pen or eraser) and all that jazz.  More details here.
  2. But, if you’re building (or porting) a complete AIR application, then things are a little different.  You see, Mini’s run as a child of the Bamboo Dock, and therefore it’s process.  As a Mini, you get access to the Dock’s globals… but not as an AIR.  Here one must use the DockConnectionManager class.  More details here.

So, if you’re not seeing any pressure events, check the necessary processes are running AND make sure you’re calling the right classes from within your application!

My Development Centre is Invisible!
This happened to me.
If you caught my previous blog, you may have noticed that I postulated it could be down to my updating to the latest Adobe AIR version… I did also say that might have been a coincidence.
Well, *I* still don’t know for sure if it was, but I can say that the current Development Centre works just fine on the latest version of AIR!

If, like me, you find that the Development Centre window disappears then here are a few little things to try:
(Oh, and please note the typical “I accept NO liability for loss of data or damage”.  Seriously folks, try theses things at your own risk… they did, however, work for me!)

  1. That old ‘Windows’ adage – retry, reboot, reinstall.
    In this case, the latter should potentially help, here.  Make sure you fully remove the Bamboo Development Centre, then download and install the most recent version.
    (I also had an odd issue with trying to reinstall the latest version over the top of my old version.  It said that the ‘AIR file was corrupt’.  Turns out it wasn’t corrupt, but just AIR refusing to install over the top of the old version.  Weird, huh?)
  2. Remove the BambooDevelopmentCenter folder from your Application Data.
    On older XP machines this is in C:\Documents and Settings\<username>\Application Data\ then in here, you should see the BambooDevelopmentCenter folder.
    Remove it.
    Now try and fire the application again.  If this doesn’t work, do this process again but do not run the application, instead, go through step 1 above.
    (on Vista or Win7 machines, this folder is C:\ProgramData\Application Data\Roaming\ and it’s the same folder name)

 

After that, everything was hunky dory!
I guess I should get back to work… and now you’ve finished this post, so should you! ;-)

___________________________________

Making Games: Magazine Article!

MarkNews

Those fine folks over at Making Games have sent us an early copy of our article “Skin Ink: A Post-Mortem” in which we detail the 6-weeks spent developing our entry for the Dare with Bamboo competition.

Grab yourself a copy of the magazine and not only will you be helping to support us, but also a great publication!

NativeWindow and AIR

MarkBlog

Anyone following us on Twitter may have seen an interesting issue we uncovered relating to the latest version of Adobe AIR (2.6.0.19140), the Bamboo SDK and the NativeWindow class.

The problem:
CustomChrome windows rely on interaction to the NativeWindow class.  One method is to import the NativeWindow components and name your own instance in the application.  That way, when you want to move, minimize or close (or any of the functions that you would associate with NativeWindow) you simply call your named instance.
However, what we found – doing it this way will cause your application to no longer receive Bamboo Events.

That’s right!  No pressure sensitivity.  No pen/eraser tip changes.  Nothing.

Strangely, all you have to do is make calls to “stage.NativeWindow.<blah>”, completely remove any other references and everything’s happy again.
(Except my scalp… and the hair that I pulled out to get to the bottom of this!)

Now, whilst this solves CustomChrome windows in your own application – it seems to have broken the Bamboo Development Centre!
It simply will not open.
When we run it, there’s the application in the task bar… but it’s invisible.  Sort of a Window-Ninja, if you will.  You can even get the minimize/maximize animation, but still it’s not displaying.  And I can’t even re-install the AIR package, as it’s telling me it’s corrupt.  Yet this is the one that worked prior to the AIR update.

And simultaneously – or coincidently, whichever way you want to look at it – the Bamboo Dock stopped working!  Although this appears to be because, for some strange reason, BambooCore.exe refuses to run automagically after a system reboot.
You can easily navigate to the install path and fire the executable manually… but it’s definitely a strange one.

 

A little digging and you can find that in this latest update of AIR that there is a change to the NativeWindow class… a VERY significant change.  This new one allows you to have “owned” windows (the name made me chuckle, heh, ‘I pwned your window’… moving swiftly on).
I wouldn’t have thought that the changes to allow this functionality would break other applications… or would they?  Not knowing how these other tools were built – just how to get into them for our benefit – it’s difficult to speculate.

I would postulate: Gremlins.
As Holmes says “when you have eliminated the impossible, whatever remains, however improbable, must be the truth?”

___________________________________