indieas

Lately I was programming on a web art project which is now ready to see.

This image gives you an impression. To see more click the image.

Something that I haven’t noticed for a long time are dynamic xml definitions. What it is; Its a very easy way to construct xml with dynamic content. Here is a short example:

var nodeValue:String = "bis naii";
var attributeValue:String = "mich";
var xml:XML = <speech speaker={attributeValue}>{nodeValue}</speech>;
trace( xml ); // <speech speaker="mich">bis naii</speech>

The {} braces are replaced by the variable value. You can also place more complex stuff inside these curly braces. Here is another example:

var xml:XML = <root />
for ( var i:Number = 0; i < 3; i++ ) {
    xml.appendChild( <child>{"content: " + ( i + 1 )}</child> );
}
/**
 * gives:
 * <root>
 * <child>content: 1</child>
 * <child>content: 2</child>
 * <child>content: 3</child>
 * </root>
 */

In some situations this way of constructing an xml structure is very practical….

For more infos check senocular’s page about XML

I bet you all got already the Error #2148 when developing. In my case this happens often when I am developing an application where some resources are local and some are already from a backend server. For example I have a local config.xml just right next to my swf application and some other data from a backend server somewhere on another domain.

Now this is a problem as you can either publish your swf with local-security sandbox or network-security sandbox but in my case I need both as I have local resources and network resources. So I go through both ways;

local-security sandbox way

I can access my config.xml but when I try to load the data from another domain the following popup shows up:

In the Security Settings Manager that opens when you click Settings… you can add the remote domain and restart the browser then the swf should be able to access this domain. But I personally prefere the network-security sandbox way:

network-security sandbox way

Here you publish your swf with the network-security sandbox by adding the -use-network=true to the flex compiler or setting the Local playback security to Access network only in the Flash CS4 publish settings. This way your swf can access any domains from the internet. So in my case no problem to load the data from my backend server. But when load my local config.xml I get the following error:

Error #2148: SWF file file:///demo.swf cannot access local resource config.xml. Only local-with-filesystem and trusted local SWF files may access local resources.

The fastest solution to get rid of this error you go to the Security Settings Manager and add a new location for mac: / and for pc: c:/

The Security Settings Manager is a bit buggy. So restart your browser and check again if its really saved. Finally this entry allows the swf file to read local files. Here you allow full access to your machine which can be a security problem. It’s better to specify the root folder of your flash/flex projects. This way all your projects swf are trusted and can access all files in the subfolder of your flash/flex projects folder.

Thanks to a hint of nada there is a way to come around of the buggy Security Settings Manager. You can add a new cfg file in the FlashPlayerTrust directory (win: C:\windows\system32\Macromed\Flash\FlashPlayerTrust | mac: /Library/Application Support/Macromedia/FlashPlayerTrust ) and add your trusted folders in this cfg file. So my config file:

/Library/Application Support/Macromedia/FlashPlayerTrust/flexprojects.cfg

contains one single path to my flex projects:

/Users/mich/Flex Projects

And all my projects have access to local resources that are in this folder or in subfolders. One entry and you dont have to worry about any local access restrictions.

Summary

Both ways you are able to access both local and network resources. The advantage of the network-security sandbox way is that you have to add an entry only once and not every time you access a new domain. Specially if you set it up with your root flex/flash projects folder all your projects have automatically access.

I’m sure that everybody that ever try to apply a stylesheet to a textfield in Flash encountered some problems. Thats why I though I will write a summary about the workaround that I found so far.

First thing to know is how flash can apply css on text. If you set for example:

textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

You can style the text between tags here: <b>..</b> and <h1>…</h1> if you define css definition for these tags. An example css file would look like:

b {  font-weight: bold; }
h1 {  size:16; }

and the corresponding as source to set the styleSheet would be:

private function onLoaded( e:Event ):void {
// The TextLoader is a class from the indieas library
var loader:TextLoader = e.target as TextLoader;
var css:StyleSheet = loader.getDataAsCSS();
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";
}

Here its important that you set the text property after setting the styleSheet otherwise it will not apply the styles.

So far everything works as expected but what if you also want to style the normal text without any tags. You could wrap the text content in another tag like:

<text>Hello is it <b>me</b> you <h1>looking</h1> for.</text>

But thats not very handy instead we use the TextField own property defaultTextFormat. We can transform a css into a TextFormat and apply that as defaultTextFormat like this:

var styleObject:Object = css.getStyle( "*" );
var defaultStyle:TextFormat = css.transform( styleObject );
textField.defaultTextFormat = defaultStyle;
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

Again here the order of applying defaultTextFormat, styleSheet and text is important. If you have a styleSheet applied and you want to set the defaultTextFormat it will throw an error. So if you want to reapply the defaultTextFormat do it like this:

var style:StyleSheet = textField.styleSheet; // save the styles to reapply them later
textField.styleSheet = null; // set this null to allow seting the defaultTextFormat
textField.defaultTextFormat = // new format;
textField.styleSheet = style; // reapply styles
textField.text = textField.text; // reapply text

The last thing to mention is the textField.condenseWhite property. Very often you load your content from an xml file and like to show a node content in a textField. But as the xml itself has linespaces and breaks the shown text is weird formatted. To avoid this use textField.condenseWhite = true. To make a new line just add a <br/> tag to your xml content and make sure your textfield has multiline set to true.

Summary:

• use defaultTextFormat for default text style.
• transform the defaultTextFormat from a StyleSheet style.
• properties set order: defaultTextFormat, styleSheet, text.
• set condenseWhite = true when setting xml content to the texfield.

To play around download a demo FlexBuilder project here.

After my introduction article about my workflow I like to dig in a bit deeper and describe you my way of working with Flash and Flex. So far we have the assets ready to use but we need to add functionality to the assets so how do we join these to things together. One approach would be to extend from the exported MovieClip. So in my example that would be:

package {
 public class ControllBar extends ControllerBarDraft {

 public function ControllBar() {
 super();

 playButton.alpha = 0.5;
 }
 }
}

This way we have all assets on the timeline ready to use. Nothing more to do. But there is one major drawback. What when we want to extend from another class that from our exported MovieClip? You maybe think this happens not that often – but it does – so we can use this approach.

Luckily there is another way to come around that problem. We can simply instantiate the ControllerBarDraft (exported from Flash through swc) and copy the assets to our main class. That would look something like this:

package {
 import flash.display.SimpleButton;
 import flash.display.Sprite;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var cbd:ControllerBarDraft = new ControllerBarDraft();
 var playButton:SimpleButton = cbd.removeChild( cbd.playButton );
 addChild( playButton );
 }
 }
}

This is pretty cumbersome to do that for everything placed on the ControllerBarDraft MovieClip so I was looking for a way to do that automatically. And I ended up with a simple but powerfull Draft class. The core is this method:

public static function copyAssets( from:DisplayObjectContainer, target:DisplayObjectContainer ):* {

 while ( from.numChildren > 0) {

 var current:DisplayObject = from.removeChildAt( 0 );
 target.addChild( current );
 }

 return from;
 }

This preserves the z-order but more important it copies the whole DisplayObject with its blendMode, filters, colorTransformations etc.  It also copies normal shapes that you draw in Flash on the timeline. Simply it just copies everything into your class that you will work on. The code with the Draft class looks like this:

package {
 import flash.display.Sprite;

 import org.indieas.util.Draft;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );
 }
 }
}

So the assets are in place on your ControllerBar class but you probably need a reference to the playButton that you put inside the ControllerBarDraft thats why you get back this draft reference. To get the playButton you have now autocomplete on the draft instance as you see:

So you can now decide if you need a reference as an attribute in your class or if you just have to setup a listener or do something once in the constructor as the following example shows:

package {
 import flash.display.SimpleButton;
 import flash.display.Sprite;
 import flash.events.MouseEvent;

 import org.indieas.util.Draft;

 public class ControllBar extends Sprite {

 private var playButton:SimpleButton;

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );
 playButton = draft.playButton;

 draft.stopButton.addEventListener( MouseEvent.CLICK, onStop );
 }
 }
}

This is now already very handy but as I have the Draft class I added some more functionality. I personally like the fact that I do the design part in Flash and the coding in FlexBuilder. But I am not a big fan of setting up position and width/height for everything I do by code. So I though that can do the Draft class for me and I added a method like this:

package {
 import flash.display.Sprite;

 import org.indieas.util.Draft;
 import org.indieas.widgets.scrollbar.ScrollBar;

 public class ControllBar extends Sprite {

 public function ControllBar() {
 super();

 var draft:ControllerBarDraft = Draft.copyAssetsFromClass( ControllerBarDraft, this );

 var scrollBar:ScrollBar = Draft.replaceAsset( draft.playButton, ScrollBar );
 }
 }
}

Now this is replacing my draft element “playButton” with a new instance of a ScrollBar class. The width, height, x, y and so on is automatically applied. What this allows you is to put placeholders in your design and swap them later with our DisplayObject classes you like. You can think of a design where you need a TextArea and some other visual elements around. You use a simple box as a placeholder where the TextArea should belong and export that and replace the placeholder with the TextArea class with the help of the Draft class. If there are design updates you dont have to change anything in your code you simple just adjust the placeholder in your MovieClip and hit CTRL-ENTER to update the swc.

So far I very happy with this workflow because it allows me to have full controll over my class – what I need as attribute – but also hide the elements I dont need. Something that I forgot to mention so far is the fact that you can work easily with multiple people on one project when they have their own fla files and export their swc’s.

If you like to play around with the Draft class you can either download the demo flex project or download our indieas library where you have also more stuff to explore.

You probably remember the mtasc compiler from the old AS2 times. One major benefit was the speed because it didnt compile the graphic assets all over again. With a right setup you can archive the same thing with Flash and Flex.
The key is the swc export feature of the Flash IDE:

If you export your MovieClips from Flash as Classes:

and add the swc in the Flex Builder as library:

you can access/create them by simply create a new instance:

You have to recompile (ctrl-enter in flash) the swc when you change something in your graphic assets. But in the FlexBuilder if you compile it just recompiles the source and includes the assets from the swc.
This workflow looks great in the first moment because you have autocomplete and strict typed access to the assets on the ControllerBarDraft. If you like to play around with the setup I made a simply actionscript FlexBuilder project that you can download here.

To use this workflow in an more advanced way, wait for the next article: Another Flash-FlexBuilder workflow: The Draft. Where I describe problems of this workflow as a nice workaround. Stay tuned.

In my current project I had to implement a bunch of the standard widgets or components. As you maybe already noticed by this entry I spent a bit more time to implement the widgets that I can use them in multiple projects. In the end I had the most common widgets like: Button, CheckBox, DropDown, Vertical- and HorizontalList, ScrollPane/Pane and TextArea.

The advantage of these widgets are:

• skin-able with flash like a flex component
• support for CSS
• small footprint
• usable in non-flex projects
• tight integration with modular

Check out the links section to download the indieas library.