The list of helpful Flex or Flash debug tools

For finding and reducing the number of bugs or defects,after your projects are built into applications you can run and debug them in Flex Builder or FlashCS3,the built-in debugger is convenient to use,but locally.Here is a list of some tools beyond the included debugging IDEs FlashCS3 and Flex2 that are helpful to making your Flex or Flash projects more bulletproof.

Reflexutil

Reflexutil allows Adobe Flex developers to debug and alter properties of components while running an application.

FxSpy

Flex-Spy allow you to inspect and dynamically change most properties and styles of the visual components in your Flex application.

XMLObjectOutput

XMLObjectOutput is a really cool tool for debugging when you are writing Flex Apps. It is somewhat similar to CFDump and displays the structure of any Object in Flex.

Flash Switcher extension for Firefox

This extension comes with all the currently published flash player plugins (from the version 2 to the most recent 9,0,16) and allows you to easily switch from one plugin to another, or also to remove the currently installed plugin (maybe for testing the express install).

Xray

For real-time debugging and spying on your code. It is 16KB for the connector that you add to your files but it is debugging in style. If you have any issues with a live app or to help during testing Xray is great. It also includes a nifty admin site that allows you to access objects and spy on your code at any time.

Xray (The AdminTool) is a “snapshot viewer” of the current state of your Flash application without impacting the performance or the file size of your application. Xray’s true nature is to look into the very guts of the Flash application and disolve the 2d myth you see on screen to a 3D tangible entity you can truly crawl through.

Debugging AS3 with firebug’s console

When using Firebug (a web developers Swiss army knife for browser debugging) you can also use actionscript to write to the firebug console with this class from marcosweskamp.

Alcon

Alcon (ActionScript Logging Console) is a lightweight debugging tool for ActionScript 2.0/3.0 developers that provide a way to output debugging information (traces) from the debugged application to an external output panel.

LuminicBox.Log

Main features:

Multiple output levels (LOG, DEBUG, INFO, WARN, ERROR, FATAL)
Inspection for Object and MovieClip types
Multiple output targets using Publishers (similar to log4j)
Flash 6 & 7 compatible. Flex is also supported.
Small filesize, about 3kb with all available publishers.
GUI Console for viewing and inspecting log messages.

debugit

DebugIt is a two-piece debugging tool designed to help developer debug Flash applications and content outside of the Flash authoring environment. Displays traced data in a seperate SWF so you can debug outside of Flash, while running your application in its shell/production environment.

Print_r Debugger

Brings PHP‘s “print_r” to Flash, invaluable once you start to use it. Free, Complete Source Available.

Sock4Log

JAVA application which displays traced data from SWF and other (PHP,Java…). It is created for retrieving xml log data from Flash Swf aplications which are using XmlSocketConnection.Could be a command line or windowed application.

flash-thunderbolt

ThunderBolt is a logger extension for Flash ActionScript 2 and 3 as well as Flex 2 and 3 applications based on the Firebug add-on for Firefox.

FlashTracer

It is a firefox add on that displays trace() output in a sidebar window.While running any .swf Flash file in your browser you can see all the output generated by the “trace” flash functions in this sidebar component.

RegExr:Free Online RegEx Testing Tool

RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx).

home at: gskinner.com/RegExr/.

Structuring Data and Serivces for Application Performance

Everyone wants their Flex application to perform well. We each want ours to be fast, with minimal wait times, and want it to run as seamlessly as possible. Well, one of the most important factors in getting this kind of response is the structure of your data model, and the results of your data services.

Here are a few tips regarding your data model to help you squeeze out the best performance from your application:

High-fidelity between your views and your service results/data model.
You should return data to the client in a structure that can easily be displayed in your views. The views shouldn’t have to perform complex transformations on the data in order to display it. Servers are much better at complex calculations than the flash player is. CPU cycles spent crunching data will not be used to render your application. Now, I’m not saying do not ever do a calculation client side… just keep this in mind, and don’t abuse it.

You also shouldn’t have to make subsequent calls to the back-end to retrieve more data (whenever possible). Multiple service calls requires the additional overhead of object serialization and accessing the data multiple times. If this can be limited to one call, or at least minimized, then the application will have a better response, and the user will not have to wait for multiple requests to complete.

Only download exactly what you need, when you need it.
Lazy-load the data whenever possible. Let’s say that you have an application that shows record albums. If you have hundreds of albums, and want to see a list of all of their names, then don’t pull down all the information about every album (track titles, composers, etc…). Only retrieve what you actually need to display: the album names, and ids that can be used to pull down more information whenever necessary.

The opposite also applies… If you need to display lots of information for a single album, pull down that entire album from the server. Don’t make the user wait for multiple server requests if it can be achieved in one.

Filter and sort data appropriately.
There are some cases where client side filtering and sorting of data outperforms additional requests to the server to filter or sort data. It can sometimes be difficult to determine which one is the best approach. If you are crunching large data sets based on nested data structures or complex relationships, it is often best to delegate that to the server. Modern databases are designed to handle this task very well. If you are filtering a smaller collection, with simple numeric or string comparisons this can be achieved client side using filter and sort functions on collections.

You’ll notice a theme here… there is a balance between pulling too much information, and too little. There is no such thing as a perfect application, and there is not a perfect scenario every time. Keep these tips in mind, and you will be on your way to having an application that performs great.

MXML/AS3 editor or development environment besides Flex Builder

Aptana

An integrated development environment for creating Adobe AIR^TM (formerly code-named Apollo) applications.

Intellij IDEA

IntelliJ IDEA is a commercial Java IDE by the company JetBrains.It allows programmers to quickly redesign their code.Many advanced features are supported by the IntelliJ 7.

• Smart code completion for MXML and AS files, with cross-resolution of code symbols between them, even inside of mx:Script blocks and attribute values
• Automatic code formatting, highlighting and styling
• On-the-fly code validation with instant quick-fixes
• Code insections to hunt perfomance bottlenecks, bad code practicies and other problems
• Rich set refactorings

FDT

FDT is an ActionScript plugin for Eclipse developed by Powerflasher.It provides support for AS3 and Flex development projects with syntax highlighting, code hinting, code folding and Live Error Highlighting to name a small percentage of the overall feature list.

SEPY

SE|PY is a FREE ActionScript editor for Adobe/Macromedia Flash files.

FlashDevelop

FlashDevelop is a .NET open source script editor designed mostly for Actionscript 2/3 development.

Free Tutorials for Flash

FREE Flash Sites:
http://www.webwasp.co.uk/
http://www.flashvista.com/

Colin Moock’s ActionScript 3.0 Ground Up Tour comes to Bangalore, India

Coming next month to India is ActionScript Expert Colin Moock for an extensive 1 day training workshop of ActionScript 3.0.

This full day workshop will include

• exposure to all major concepts of object programming
• understanding of classes and objects
• understanding of how to structure and write an ActionScript 3.0 Program
• to the Flex Builder 2 development environment
• pamphlet reviewing the days major concepts

This event is sponsored by Adobe and is completely free, but its best to register because it is a one day event so they might have a cutoff limit.

Date: 29th April 2008
Location: Bangalore
Website: http://www.adobeas3tour.com/

Actionscript for Javascript Developers

Here’s a collection of articles on transferring Javascript knowledge and syntax to Actionscript coding:

Actionscript: Javascript in Disguise

Evolution of Object Oriented Programming in Actionscript

Server-Side Actionscript vs Javascript

Syntax Differences between Actionscript and Javascript

Classes vs Prototypes in OOP

Actionscript Shorthand

Actionscript vs Javascript Developer Interview

Actionscript vs Javascript Cheatsheet

ECMAScript OOP

Prototype-based Programming

Drawbacks of Static Typing

Javascript Inheritance and Mixins

Actionscript Tips

Prototype-based Design Patterns

Compile AS3 with FlashDevelop3 using Flex sdk3 compiler.

Firstly, FlashDevelop 3 only runs on Windows XP/Vista, and requires the .NET 2 runtime. Additionally, to compile AS3 code you will need the Java 1.6 runtime and the Adobe Flex SDK. Ok, let’s go!

Part 1 – Downloading, Installing, and Compiling a SWF

Let’s begin by setting things up and compiling our first SWF.

1. Download the Adobe Flex SDK (just the SDK at the bottom of the page, not Flex Builder), and unpack it somewhere easy to find (C:\FlexSDK\Flex3\).
2. Download the latest version of FlashDevelop, install it and run it.
3. Create a New Project, under ActionScript 3 choose Default Project, and give it a name (”hello”).
4. In the Project Panel expand the “src” folder and open up “Main.as”
5. In the constructor add the code: trace(”hello world!”);
6. Hit Ctrl-Enter (or F5). A dialog should pop up asking if you’d like to open the AS3 context settings. Click “OK”.
7. In the “Flex SDK Location” input field enter the path from step 1 (or browse to it).
8. Hit Ctrl-Enter again. This should compile your code into a SWF and launch it in a tab. The Flex 3 compiler does incremental compiling, so the first compile might take a while, but subsequent compiles should be much faster.
9. Make a “whooping” noise! “hello world!” should be displayed in the Output panel. You’ll find the SWF sitting in the “bin” folder. Notice that the project panel let’s you look into the guts of your SWF.. pretty damn sweet!

Part 2 – Some Adjustments

By default, FlashDevelop launches SWFs in it’s own version of the Flash Player. At the time of this writing, the player doesn’t perform quite as well as the official debug version of the Adobe Flash Player (besides, we want all the goodness of the very latest Flash Player!). Also, I find the tabbed view weird. So let’s change our setup a bit.

1. Head on over to Adobe downloads, “Download the Windows Flash Player 9 Projector content debugger” and put it somewhere easy to find (C:\FlexSDK\FlashPlayer\)
2. Back in FlashDevelop, go to the main menu, click “Tools” and select “Program Settings” (or hit F10)
3. In the left panel, under “Plugins” select FlashViewer, and point the “External Play Path” to the debug player executable from step 1.
4. While you’re there, change the “Movie Display Style” to “External”. Click “Close”.
5. At the top of the Project Panel click the “Project Properties” button (third from the left).
6. Under “Test Movie” change the selection to “Play in external player”, and click “OK”.
7. Hit Ctrl-Enter. Make the universal “Whazzamm” sound!

Part 3 – Attaching Assets to the Stage

Perhaps “hello world!” is not that thrilling for you. Fine.

1. Create a folder called “lib” inside your project folder (alongside “bin” and “src”).
2. Fire up Adobe Flash CS3 and create a new Flash File (Action Script 3.0).
3. Save it inside the “lib” folder from step 1 and call it “assets.fla”.
4. In the Flash IDE grab the Oval tool and draw a circle.
5. Select the circle and convert it to a symbol by hitting F8 (or right-click and select “Convert to Symbol…”).
6. Give it the name “Circle” and expand the Linkage panel by clicking “Advanced”.
7. Under “Linkage” tick “Export for ActionScript” and click “OK”.
8. Open up your Publish Settings (Ctrl-Shift-F12), deselect “HTML”, and flip to the “Flash” tab
9. Tick “Export SWC”, click “Publish” and click “OK”.
10. Save the file and close the Flash IDE.
11. Flip back to FlashDevelop, and expand the “lib” folder in the Project Panel.
12. Right-click “assets.swc” and select “Add To Library”.
13. Replace our “trace” statement with the following code:
    var circle:Circle = new Circle();
    addChild( circle );
14. Hit Ctrl-Enter. Loudly exclaim “Golly, this is the biznis!”.

Part 4 – Extending Assets, Adding Interactivity

Perhaps a plain old circle on the stage doesn’t really do it for you. You want some motion. You want some interactivity. Some filters. Fine then. Let’s do it..

1. In the Project Panel, right click the “src” folder, select “New” “Class”, name it “ReactiveCircle” and click “OK”.
2. Head to the end of the line “public class ReactiveCircle”, type “extends”, hit Space and select “Circle”.
3. In the constructor type “filters = [new DropShadowFilter()];”
4. On the next line type “addEventListener(” and press Ctrl-Alt-Space (this enables autocompletion for all available classes, not just the imported ones). Start typing “MouseEvent” but hit Enter as soon as you see it selected. Complete the statement with “.CLICK, onClick);”
5. Move your cursor back onto the word “onClick”, press Ctrl-Shift-1 and hit Enter.
6. Inside the generated event handler add the code: x += 10;
7. Flip back to the Main class and change:
   var circle:Circle = new Circle();
   to
   var circle:ReactiveCircle = new ReactiveCircle();
8. Hit Ctrl-Enter.

Actionscript 2, Actionscript 3, MXML, Flex, Java and Javascript Comparison

Here’s a list of resources for migrating between Actionscript 2, Actionscript 3, MXML, Flex, Java, and Javscript development:
Java vs Actionscript 3

Actionscript 2 vs Actionscript 3

Actionscript 3 vs Javascript

Actionscript 1.1 vs Javascript

Actionscript 2 vs MXML Tags

Flex 2 MXML Syntax

Flex 3 MXML Syntax

Flex 3 Actionscript 3 Syntax

Actionscript 2 Learning Guide

Actionscript 2 Best Practices

Actionscript 2 Objects

Actionscript 2 Elements

Actionscript 2 Functions

MXML Specific Components

Adobe to Deliver AIR for Linux

Adobe Systems hopes to make nice with the open-source community and soon deliver a Linux version of its newly released Adobe Integrated Runtime.

Kevin Lynch, chief technology officer at Adobe, said the company is working on a Linux version of AIR, a run-time that lets developers use proven Web technologies to build RIAs (rich Internet applications) that deploy to the desktop and run across operating systems.

Speaking at the Adobe Engage event here Feb. 25, Lynch said that although AIR currently runs on Windows and the Macintosh, “I’m excited about the potential for AIR and Linux working together.” He demonstrated an Intel-based device that ran Windows and Linux, with AIR running on it.

“I think Linux and AIR is a great solution because Linux is a free operating system and AIR is free,” Lynch said.

Moreover, he said he would not be surprised if someone developed an appliance for AIR running on Linux.

Lynch played up Adobe’s interest in open-source technology. Major portions of Adobe AIR, such as the WebKit HTML engine, Tamarin ActionScript Virtual Machine and SQLite local database functionality, are open source, he said.

In addition, Adobe is committed to contributing to the open-source community on multiple fronts, including the release of the free open-source Flex framework and open-source BlazeDS for high-speed data connectivity, as well as active membership in the SQLite Consortium, company officials said.

Lynch said he wants to see AIR in as many places as possible, and Linux is another “very important” target for the AIR run-time. AIR on Linux will come later this year, he said.