Smoothing Loaded Images in AS3

Wed Jun 23 06:11:51 2010

Today, there I was, sitting at my desk working hard on a project involving loading images into a ActionScript constructed gallery. I needed the images in the gallery to animate and scale, as one would expect to be able to do with rich internet content.

Herein the problem lies, because the images looked very pixelated when they did anything other than just remain still.

Now, this isn't a big problem if you know how to go about it the right way, but I would imagine that there are tons of people out there who need to do the same kind of thing in their galleries, and probably 9 times out of ten are frustrated by the quality of the images output in the flash player. After all, rich internet applications should display rich image content. Then it hit me! Why not write a little about it here and spread the message that, although the flash player can sometimes be a CPU hog, it is something special, even when dealing when dealing with images.

As you will have probably seen by now, in the top left of this post there is a .swf file playing a scaling image, which reads "I love AS3" (and I admit proudly that I do). At the bottom of the swf there is a button, which when pressed will add/remove bitmap smoothing to the image loaded. Smoothing in ActionScript 3 is surprisingly simple and can be done by setting the smoothing property of any Bitmap instance to true. Take a look at the example below.

var ldr:Loader = new Loader();
addChild(ldr);
ldr.scaleX = ldr.scaleY = 5;
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
ldr.load(new URLRequest("myImage.jpg"));

function imageLoaded(event:Event):void{
   var contentToSmooth:Bitmap = event.target.content;
   // contentToSmooth.smoothing = true;
}

If we were to compile this code as it, assuming we've entered the correct URL to the image, we should see our image scaled by 5x and looking quite pixelated depending on how high the quality is of the image used. Now all we have to do to see the effects of smoothing is uncomment line 9 by removing the // from the beginning and recompile. This time you should notice a much less pixelated image displayed, even at 5x the size.

If you're interested in the example at the top left of this post, you can download the source code below.

Download BitmapSmoothing source code

Sequal Pro - Impressive!

Mon May 24 01:11:56 2010

I've been working a lot in PHP lately and almost always to connect to a mySQL database. I'm used to working in Terminal and the command line to create, read, update and delete (CRUD) my web pages and for people just starting out with mySQL, there is of course the more user-friendly phpMyAdmin. However, I've been mooching around the net and stumbled upon something I now don't know why I hadn't searched for before - Sequal Pro.

So what does it do?

Sequal Pro is a database management software and it's quite quite slick, let me tell you. There is virtually no wait time for pages of information to reload/refresh, as opposed to using phpMyAdmin, and it's more visually convenient than using the command line as it has a really easy to use GUI which allows you to view databases, tables and their contents with a few clicks of the mouse. The best thing of all is that it's free. You can check it out here on the Sequal Pro web site.

I am so impressed with this little gem that I wanted to post a recommendation here to urge everyone who uses mySQL to at least try it out.

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 lastest 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.

Most recent posts

  1. Getting around Apple's silly rules for iOS 10
  2. Localising App Names for iOS and Android
  3. Today - Powerful To-Do App Now Available on iOS & Android
  4. New app 'Gem Plinko' Released on iOS
  5. Spooktacular Creeps For iOS & Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories