Category: Articles

When using mxmlc (the Flash Flex AS3 command line compiler) I wanted to create a folder structure for sharing a common libraries but for different examples and apps that have their own sibling folders. This would keep the parent folder of both the library and the apps clean.

Ex:

com.hosford.core

com.hosford.controls

apps.clock

apps.diceRoller

I use Windows and batch files for mxmlc. I prefer to copy a new version of the batch for each need and edit rather than type at the command line. Thus I can just click the batch file in a Window for each iteration.

I also do not use any environment variables so the batch file allows for hard paths were needed.

Assume in apps.clock the source file was ClockApp.as

Its package would be:

package apps.clock{

The imports are as you can expect:

import com.hosford.controls.* 

The mxmlc line is in a Windows batch file is as follows:

The -source-path option is the item that allows ClockApp.as to find the com libraries. The += adds to any environment path you also have.

Debugging Flash in a Web browser creates all sorts of issues and clever solutions. Anywhere to having one Flash movie talk to another through LocalConnection, to a floating TextField or TextArea object or Movie containing such with a grabber and perhaps some buttons to using the difficult built in remote debugging built-in.

Adobe now has a Flash Debugger version. One of its features is outputting the trace function to a local file. A bit geeky on how to go about setting up that but it can be done. And so others have created solutions already.

One solution is FlashTracer. This is a Firefox plug-in that uses the Flash debugger version.

Once installed you will be seeing trace statements from the millions of Flash Movies on the Internet where the publishers failed to check “Omit trace actions” on their final publish.

But more so you can debug tricky client server Flash web apps quicker seeing your trace statements in a Window.

FlashTracer Version 2.0 download Note the Mozilla plug-in page has the older 1.3.1 1 version of FlashTracer.Flash Player Debug Version Download

The author is Alessandro Crugnola in case the links above get moved.

A good instructional site that covers installation and use is Flash PowerTools: FlashTracer for Firefox just be careful as the links here take you to the Firefox plug-in pages and that has the older 1.3.1 1 version of FlashTracer.

Just be careful as the links here take you to the Firefox plug-in pages and that has the older 1.3.1 1 version of FlashTracer. Other than the download links, follow the few short instructions here and you are good. The instructions do not cover the new features in 2.0 however but the product is relatively simple with just a few buttons and options.

After the plug-in installation, the instructions have you enter in a path that you modify to the location and name of the output file.

In my case the path was: C:\Documents and Settings\MyUserName\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

You also can open this same output file in an editor like Dreamweaver or TextPad and use their search functionality. The file will update as you are using Flash movies in FireFox as well.

Flash is very useful for creating simulations. One example I did was for the Avaya IP office phones.

The use of Flash for simulations is wide open territory of potential.

Using Flash to Simulate Flash

One use I think requires serious consideration is using Flash to simulate Flash development. With the widespread move to developing complex applications with Flash we find the problem of successfully communicating the interactivity and animation timings of creative ideas.

Add to that requirement the Flash movies dynamically consuming and generating data. The data may include user data such as ecommerce but could also be UI data to configure the UI dynamically. In other words they cannot be hand coded on the time lines in Flash. Rather the interaction and animation is communicated to software programmers to reproduce in Actionscript that consume data from a server for the dynamic processing.

The High Cost and Failure of Flash Development

This communication from creative to developers is where you have a lot of failure or at least a lot of costly repetitions. WE have various vehicles such as storyboards and “comps” and flow charts and use cases to help in the process.

The programmer produces from these communication vehicles the end product. A good programmer can produce exactly what was requested. Therein the problem begins. You can get what you ask for which is not what you think you want.

Often the finished result fosters reconsideration because a moving picture is worth a thousand words. Details such as how fast a fade out of an item like unselected menu choices or when another item such as the selected menu choice should begin to move becomes more visual as the programmer delivers your request.

Although such a simple set of animations seems easy to envision, it becomes more complicates as there is a need to also slide in a grid of product items from one direction and then fade out a background and more and more until words and screen shots fail your imagination.

Your  observation of what the programmer delivers then leads to the need to change it. Change then results in more costs and delays because the resource you are using for the iterative review need is incorrectly choosen.

Lack of Skills In Communicating Animation and Interactivity

In a project with a major international consumer products company I met very creative marketing talent. They had vast resources and skills for dealing with print and broadcast media. They along with interactive consultants also could envision very creative ideas for interactivity and animation on a broad level. Dealing with the details however revealed a handicap.

They used their expert skills in design communication in these medias to design a large rich internet application upgrade for their web site. During the development process completed complex Flash code was changed over and over as the review process produced a need to change.

Now you might say that is not a good. But in the case of a consumer products company, spending time and money to get it right for marketing is key. Despite creative visions they had on the broad scale, the details were missing. Somewhat like watching a movie over and over and seeing something new each time. Well that is what animation and interactive design is about.

Still this process of iterations to get it right resulted in delays and frustrations because they were missing an important step.

How to Use Flash Simulations in Flash Development

Along the way I recommended a solution. Continue to use the current communication vehicles such as Powerpoint storyboards and Photoshop renderings. However add one step between those and the programmer. That is to use Flash to simulate.

Simulation allows for viewing the end result without the pain of producing the full working model. To do this efficiently you simply use the standard Flash IDE. You can even use junior college students with Flash skills to take the story boards, graphics and do some or all of the work.

Simulations may or may not allow interaction. For example the simulation may start after a user interaction and merely show the sequence of events up to the next step. This is how storyboards are used. The storyboard shows the key frames. The animators make the in between frames.

Once the Flash simulation is complete, everyone can view and comment. The simulation can then be modified cheaply from tweaking to showing more detail to get it right.

Then the simulation along with the other supporting communication documentation become the starting material for the Flash programmer.

The result is less programming resources, better software and less frustration trying to visualize the end result.

One of my favorite items is to develop Flash components where the skins and even sizes are controlled by external data. Or as we say they are data driven.

One technique to deliver those parameters is via style sheets.

Flash allows you to create any style property you want. So you are not limited to just CSS standards. For example you can create a style named outerBorderGutterWidth. Flash will provide it nicely in the StyleSheet object.

I recently created a slide out menu component. It contains default skin and size parameters. Its data is dynamically driven as you might expect. But also its skin defaults are dynamically changeable both at design time and run time.

The component can open close by sliding up, right, down and left. The slide’s tween can do any of the easing in the Flash Tween component code such as bounce, elastic, regular, strong, back and none. As well the speed is a property of the component.

When the component is accessed on stage as a drag and drop or in code or in code, these properties can be set. On stage we use the Flash component parameters panel. In code we set these properties via the init parameter of attachMovieClip method. As well we can expose class properties for runtime access per design needs.

Great for the programmer! But can we give access to less technical user?

Part of the component properties is a style selector. As well as part of an overall site framework a style sheet is made available to component. If the style selector contains custom properties they override any created at instantiation either from attachMovie code or on the components parameters panel.For example a properties in the style sheet selectors may be

.testSelector{

backgroundColor:)xff0ff;
openDirection:up;
openCloseTweenEasing:Bounce;
openCloseTweenSeconds:1;
scrollBarVisiblity:always;

}

Thus the open direction is up, it uses a bounce easing for one second. I do like bounce. And the scroll bar is visible even when there are not enough items to merit it.
When the component is used in a movie, the selector as well the other properties can be set via the attachMovie init object property or in the component parameters panel.
In the component we might have these as initialization parameters for example:

[Inspectable(name=”style selector (ex:myStyleSelector)”)]
public var _styleSelector:String;
private var __styleSelector:String;

[Inspectable(name=”open position” enumeration=”Top,Left,Right,Bottom”, defaultValue=”Bottom”)]
public var _openPosition:String = “Bottom” ;
private var __openPosition:String ;

[Inspectable(name=”Open close animation easing”, enumeration = “Strong, Bounce, Elastic, Regular, Back, None”)]
public var _openCloseTweenEasing:String = “Regular”;
private var __openCloseTweenEasing:String;

In the constructor I copy the initialization properties to a private variable to prevent access after initialization. Thus they are write once unless they are exposed via a method.

The component then will choose the selector properties as an override to those in code or in the components properties panel. For example in the constructor or in an initialization function.

Also in the constructor on in an initialization method at style object is obtained from the framework loaded stylesheet and the properties are checked for overrides as follows:

__styleSheet = _global.styleManager.getStyleSheet();
__style = __styleSheet.getStyle(“.” + __styleSelector);
if (__style.openCloseTweenEasing != undefined)
{
__openCloseTweenEasing = __style.openCloseTweenEasing;
}
This gives a level of component customization in the system that does not require touching code. Generally users do not change style sheets, so a technician without programming or Flash skills may be required. However via content server interfaces users can get at style values in a code controlled environment. The content servers can generate style sheets.

At least with AS 2 and Flash 8 we sure do have a number of ways to initialize a component: attachMovie init parameter, Flash components parameters panels and  dynamically from data sources including style sheets. Still we have traditional methods such as passing them as a constructor argument list or creating a constructor argument class.