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.

An exciting day... (Objective-C: not for the faint of heart)

Wed Mar 24 02:02:20 2010

Today is an exciting day. I received an email from Adobe saying that the new Flash Builder 4 is just on the horizon and I have received word that Flash CS5 will (fingers crossed) be available around April 22 (don't hold me to that).

Those two things alone have brightened my day, but wait... there's more. I also received an email regarding the Corona SDK for iPhone development. It had already been announced on the Corona website that Corona had planned to add support for the iPad, and not only was the iPad beta confirmed yesterday, but also Corona announced that they would also being entering the beta phase for Android support.

Now this is great for those who cannot take the excruciating pain of learning Objectve-C. "It's not that bad", I hear some say, and I must admit that after mastering my first 'Hello World', I quite agree. However, Corona feels very similar to ActionScript and in comparison to the Adobe iPhone packager that will hopefully be available next month, the use of Lua makes it much lighter.

As a programmer I am very much intreaged by all the implications... but perhaps all the 'ActionScripters' out there shouldn't get too excited yet - what with the colossal amount of programmers out there who have already made their app and are just readying their eager trigger finger for the CS5 iphone build button - it may just be too much to compete with unless your idea is truly original.

Using AMFPHP Is Not As Difficult As It Seems

Sat Mar 6 02:43:56 2010

AMFPHP is great if you want to connect to a database, mainly because the data you send is converted to binary making it's probably the fastest way to get your data from A to B. Below is a simplified explanation of how to get connected and I have included a simple class to conveniently call a connection anytime you want to send or receive data.

First of all, you will have to go to the AMFPHP Webpage and download the necessary files. (There should be a download link on the top left of the webpage). Once downloaded and unzipped, I generally change the name of the folder to 'amfphp' (if it's not already) as the version number that sometimes gets added to the name can be a little hard to remember, especially if you are working with multiple servers. However, if you think you can remember it, then you don't have to change anything. It's just something I do. You will, however, have to put this folder on your server. For this example, I will be assuming you have placed it on the root of your server, so in other words "http://yourdomain.com/amfphp".

Next up, click here to download my AMFConnect files. Included in this folder is a file called TestService.php. You will need to upload this file to the 'services' folder inside the amfphp folder you uploaded earlier. If you then go to "http://yourdomain.com/amfphp/browser/index.html you will confronted with the AMFPHP service browser where you can see all your goodies in one place. Find the TestService in the list on the left and click it. You will see a description of the testFunction that the class TestService contains. Below is a 'Call' button. Clicking will call the function testFunction and you should see "Function is working" displayed in the output window at the bottom. Any services you write in the future can be tested in this window.

Writing a AMFPHP Service

The following class is an example of a simple service that can be used with AMFPHP. You can use it as a template for other services you write simply changing the word MyService to the name of the file, and changing the function myFunction to any name you want. You can have as many functions in a service as you like, all of which will be viewable in the AMFPHP service browser talked about earlier.

<?php
class MyService {	
   /**
   @desc Write your description here
   */
   function myFunction(){
      return "Hello World";
   }
}?>

Connecting ActionScript to a Service

In ActionScript, all we really need to do to connect to AMFPHP is the following few lines of code.

var netConnection:NetConnection = new NetConnection();
netConnection.connect("http://localhost/amfphp/gateway.php");
netConnection.call("MyService.myFunction",new Responder(onRead, onFault), sendData);

On line 1 we create a NetConnection, which will allow us to connect with the world outside of the swf file that will be created upon compilation. We then pass the url of the place we want to connect to using the connect(url) method of NetConnection shown on line 2. Finally, on line 3 we use the call() method to initialize the connection passing in a few parameters.

Before I continue to explain what parameters go where, it's important to know that NetConnection can be used for a number of purposes and the following explanation is specific to connecting to AMFPHP.

Continuing on, to connect using the call() you have to pass in the name of the class and method you want to call in the form of a string. As show in the example, we can call "myService.myFunction". So if we want to connect to the TestService we uploaded and call it's testFunction, we would pass "TestService.testFunction". Next we have to pass in a Responder. As the name suggests, this will respond to our call and tell us whether is was successful or not. You can create a responder in a separate variable, but I have chosen to pass it directly into the call method for simplicity's sake. The responder will need to receive two functions. The first function it receives will be called on a successful connection to AMFPHP, and vice versus, the second will be called on a failed connection. Most people call these function onRead and onFault. In the example, theses functions have not been created, but I'm sure that if you are reading this, you will know how to do that. Alternatively, you could pass in two inline functions like this:

new Responder(function():void{/*do this on success*/}, function():void{/*do this on fault*/})

Finally, the last parameter that we can pass in is data to be sent. I generally like to pass an Object or an Array because you can send multiple sets of data in one call and easily retrieve them in the PHP files. That being say, you could simple send as little as a String or a Number. I suppose that depends on what you want to do.

Connecting the Easy Way Using My AMFConnect Class

I have to say that this is a toned version of a similar class that I created for personal use for all my connections. Admittedly, I don't feel comfortable sharing all that hard work and plus I think it helps your own understanding to be forced to create some of this stuff for yourself. But I would like to give you a big push in the right direction, so I have included a convenience class to get you more than started.

Inside the AMFConnect folder you downloaded earlier is a class called AMFConnect to do all the connection work for you. Simply change the url inside the connect call to the location of your amfphp folder on your server. The class requires two arguments. The first is the class and function you want to call in the form of a string. The second is data to be sent. To use it, first import AMFConnect and then call the following method.

var sendObj:Object = { data : "Send Data" };
AMFConnect.connect("TestService.testFunction", sendObj); 
// traces Send Data:Received Successfully
If you don't pass sendObj, the NetConnection will not send any data
MFConnect.connect("TestService.testFunction");
// traces Function is working

So there you have it. It's pretty easy to send a receive data using AMFPHP. If you are having trouble, you may need to look around for information on crossdomain.xml, which I won't go into here but should solve the majority of your problems. Anyway, for those just starting out in this area, I hope this has helped.

Most recent posts

  1. Rain or Shine - Weather Forecast Available Now!
  2. Getting around Apple's silly rules for iOS 10
  3. Localising App Names for iOS and Android
  4. Today - Powerful To-Do App Now Available on iOS & Android
  5. New app 'Gem Plinko' Released on iOS

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories