Archive for December, 2007

Image Smoothing… a must know!

So I decided to start working with graphics a bit more. Nothing too exciting, but I wanted to have the earth rise and start rotating in a little flash ad for my company’s website. I cut out a nice picture of the earth, imported it to the stage and started scripting. I used a simple tween, which I will post about soon, and all was well…. kinda. So the earth rotated fine but it looked kind of jagged and pixelated at some points during the movement. I figured this was just something I would have to live with and moved on. I came across and article in Justin Everret-Church’s blog that talked about image smoothing. Justin is the project manager for Adobe’s Flash player.

Long Story short, I tried it. It makes a huge difference and it is scary to think that I might never have come across that feature. When you import an image to the library (jpg, gif, or png), right click it and select properties. When you do that there will be an option called “Allow Image Smoothing.” I do not know of any drawbacks to this yet but I do know that it makes a huge difference when animating images.

Comments

Embedding Fonts

This post piggy-backs on the previous post about adding text to the screen.? Sometimes just adding text does not cut it.? This matters specifically when you want flash to render a font and not rely on the fonts that the user may or may not have installed.? Doing so will ensure that the text you want to display is displayed the way you want and the same way for everyone.? The font file is actually embedded in your SWF file.

I came across font embedding for a different reason.? I wanted to put dynamic text on the screen and then modify some of its properties.? I tried to change the alpha of the text and quickly realized that it did not work.

When you embed the font with the SWF flash actually renders the text which allows you to apply filters to the text and change properties such as the alpha.? This is not possible with out embedding.

Embedding is easy!

Start first in your Flash IDE and right click inside the library.? Then click "New Font..." select the font you want, name it whatever you want, and click ok.? Note:? If you are using a font and you also want to use a bold face of the font you need to import them separately.

Embedding Fonts 1

Embedding fonts 2

Now you should see the font listed in your library.

3.png

Now for the fun part:? right click the font in your library and click "linkage."? When the linkage window opens check "export for actionscript" and pick a class name that you will remember.? For Futura Medium I chose "FuturaMed."

4.png

Now you can access the font with actionscript!

Lets go in to the actions panel and write a little code.

First we need to create a font object:

var myFont:Font = new FuturaMed();
This creates a new instance of the font we embedded in the Flash library.? Notice that the font object name "FuturaMed" should be the same as the Class name you gave your font on the linkage panel.

There is really not much else left to do.? For the sake of saving space I wiill refer to my previous post Let’s make a text field appear.? We just need to change a few more things to apply the font object to the text.? First we need to attach the font to our textFormat object.? In the last example I used and object called "textFormat."

textFormat.font = myFont.fontName;
Now the font object is attached to the textFormat object that is applied to your textField object.

You would probably assume, like I did, that it would just work now.? Nope.? You need to add one more line of code to your textField object.
myText.embedFonts = true;

Now you are all set.? Below I will include the complete code for this exercise so you can see it all together.

Actionscript:
  1. // Create your font instance
  2. var myFont:Font = new FuturaMed();<strong>? </strong>
  3.  
  4. // Set your text formating up
  5. var textFormat:TextFormat = new TextFormat();
  6. textFormat.size = 20;
  7. textFormat.color = 0xFF0000;
  8.  
  9. textFormat.font = myFont.fontName;?  //?  here we apply the font to the formatting object
  10.  
  11. //?  Set your text field up
  12. var myText:TextField = new TextField();
  13. myText.autoSize = TextFieldAutoSize.LEFT;
  14. theText = "Hello world.";
  15. myText.text = theText;
  16.  
  17. myText.embedFonts = true; ?  ?  ?  ?  // set embedFonts to true and we are good to go.
  18.  
  19. myText.setTextFormat(textFormat);
  20.  
  21. // put it on the stage
  22. addChild(myText);

Comments (1)