Optimizing SWF files with Flex Optimizer

I found a reference to optimizing SWC files with Flex Optimizer and I figured I would run some tests through SWF files and see what effects it had in it.

To my surprise the Optimizer tool did optimize the SWF files but just by a few bytes:

Test 1:
…_concept1_v1_alt.swf (56569 bytes)
…_concept1_v1_alt_optimized.swf (56456 bytes)

Test 2:
…600_Flash_v1.swf (38164 bytes)
…600_Flash_v1_optimized.swf (38127 bytes)

I also ran a test against a custom SWF file inside a SWC file and this is the result:

…DropDown/library.swf (14810 bytes)
…DropDown/library_optimized.swf (11723 bytes)

So the SWC files are bloated with extra information no needed and can be compressed quite a bit but SWF file no love. And it does make sense since the SWF files that I was testing contain a lot of graphics but I still gave it a go.

Here you can ind more information about Optimizing RSL SWF Files.

PureMVC Framework from The Flex Show podcast

These are notes that I took while listening to the podcast, by no means the information should be taken as final.
Feel free to listen to the podcast and let me know if you notice any discrepancies from what it was said on the podcast and what was written here.

Notes from PureMVC Framework – The Flex Show

Intro

Cliff Hall – Architect of the PureMVC project
Cliff stared doing Assembly language for Commodore 64 in 1982 ( one analogy Cliff used was that programming in Assembly is like building a skyscraper out of molecules you are constantly evaluating the number of bytes that the arguments and instructions are taking, you are constantly just looking at things on a microscopic level, and it is awesome because you really make it do what you want it to do, but it is difficult to make really large applications. Higher level languages that are more English like allows to express our thoughts in a much more natural way to us)

Newer OOP languages allows you to use Design Patterns to assemble “teams” to fix issues just as you would assemble teams to fix business issues.

Problem that needs to be solved

Flex is a big framework and in some ways it is a toolkit. Tools that you can take and assemble, but the important thing is how you assemble those items together properly.
All different applications people build break down to basic small problems
Once you use PureMVC all you have to worry about is problem domain and concentrate only on this
Assuming I am new to Flex and PureMVC how would you explain it to me?

Understanding the scope of what the framework is trying to do for you

PureMVC separates the issues in 3 piles

MODEL : Data
VIEW : Representation of Data
CONTROLLER : Bridges the two ( model + view ) and it is where the hefty logic in the application happens (update view and model)

Using MVC allows you to use views components and transfer them to a different system since it is not tied specifically to one application. Similar happens with Model, you can take it and use it in a different environment.

By making this separation you can move your Views to a different area and in a similar way you can move your Models since they do know about the existence of each other.

The Logic is not spread across the whole application but contained in their own area. You can also scale easier.

The business logic often goes into the controller?

Into the controller region, usually it is embodied in commands that are executed by the controller.

PureMVC has been ported to different languages. The issue is not if MVC is the wrong solution is the implementation that needs to be studied.

Proxies are objects that represent the Data.

Expanding on the Mediator Pattern

Move the data from the Model, for instance the Command
A command start up the application and instantiate the Proxies that will represent the Model and model will insatiate that will wrap around the view components

The application will build itself first and then tells PureMVC to start up. then builds proxies and mediators, Proxies might go and request data right away or when it is required

Say the proxies ask data that is needed to populate the application. Once the information is back into the Proxy, the proxy will send a notification.

In the view component you will use an event (like clicking on a button) and sends an event “add user”.

The Mediator will be listening for that event and the will send a notification that might be picked up by a command that will tell a proxy “Go get me a user”.

The Mediator when they are registered with the View Component they list all the notifications they are interested in. When the notification comes back from Proxy then it acts upon it, and that is how data gets from the Model to the view without binding.

The components expose an API and knows nothing about the API apparatus at all. events it will emit and properties that can be set. And the Mediator knows properties it can edit and events it can listen to.

Compare PureMVC to Cairngorm

The viewHelper and how they are implemented.
You access through the components, you bind items directly and tie up to the system.
Have worked with it and it is good but a lot of people didn’t get it, saw some some prototypes ready to be turn into an app scrapped and started from scratch because the people didn’t know much about design patterns, Flex or Cairngorm. So it seemed like Cairngorm set a high bar just to get started.

Other ports

There was a talk about some ports during the recording of this podcast but by now there has been almost 10 ports.

Mike Chambers asks: Are you still using ActionScript 2? (or 1)?

Mike Chambers posted the question on his site: Are you still using ActionScript 2? (or 1)?

Many people have placed their 2 cents to answer and I wanted to take a stab at it:

Short Answer : AS1 = No, AS2 = Yes.

Long Answer: I haven’t touched AS1 for years now and I haven’t had a reason why or at least the company I am working for and my freelance clients haven’t requested it. In regards to AS2 I still use it continuously. I would say that AS2 is 20% of my work while the other 80% is AS3. The reason being is because there are clients that they still need to reach broad audiences and we need to compile movies compatible with older players. Granted a lot of people have upgraded their plug in but when your marketing package has to reach the most people possible then you have to do your best to provide the proper services.

Many times when we think of Flash/Actionscript development we think of Website or Application development but one big item that uses flash heavely is banner development, some banners are almost micro sites and the requirements for banner deployment are still very rudimentary. Most sites that serve banner ads still require Flash 6, 7 or 8. Some are taking the leap to Flash 9 but under test/beta environment so if you have a game/micro site that will be loaded into a banner you still have to write your code in AS2.

Papervision AS2 reflected bitmap

I have been working on a paper vision in AS2, as you know the AS2 version was dropped as soon as AS3 was out so many of the PPV2 features were never applied to the first version. Anyways, if you ever wanted to portrait a bitmap on one side reflected directly from the library, this should help you:

[as]private function simpleSkin (source : BitmapData ) : MaterialObject3D
{

var tbmp = tar.createEmptyMovieClip(“tbmp”, tar.getNextHighestDepth() );
tbmp.attachBitmap(source, tbmp.getNextHighestDepth(), “auto”, true);
var tw : Number = tbmp._width ;
var th : Number = tbmp._height ;
tbmp._x = -100;
tbmp._y = -100;

var myM : Matrix = new Matrix();
myM.a = -1;
myM.tx = tw;

var myBitmapData:BitmapData = new BitmapData(tw, th)
myBitmapData.draw(tbmp, myM);

tbmp.removeMovieClip();

var mat = new MaterialObject3D();
mat.bitmap = myBitmapData;
mat.oneSide = true;
mat.smooth = true;

return mat
}[/as]

The benefit of always cleaning after yourself (AS Analogy)

When we were kids we had the pleasure of having mom, dad or an older sibling cleaning after ourselves. So if we left any dirty clothes on the floor or any dirty dishes on the table after eating any older mature adult would come up and clean up the mess.

As we grew old hopefully we were thought to clean after ourselves and also we were thought the benefits of doing so. Such as having a nice clean apartment to show off to your friends, or being able to find a wife because girls like to come to your place since it is always clean rather than knowing that if they visit you they wont know where to sit wether on top of pizza boxes or your dirty laundry on the couch. And some other benefits that your parents through rationale or fear put in your head and you have in there until today.

Now you entered the world of Actionscript programming either by choice of by accident, if you entered this magnificent world of Actionscript by choice and your teachers thought you well you were probably thought to clean after yourself just as you did at home, now if you arrived to Actionscript programming by accident you might have not known the benefits of doing a little bit of clean up after you were done working with certain items (properties). Specially if the project you are working on is small.

Not only that but if you have been working with AS1 (Actionscript 1) or AS2 (Actionscript 2) you would have flash doing all the cleaning for you. Take a look at the following example in AS2

[as]
// AS2
var myShirt = this.attachMovie (“Shirt”, “myShirt”, this.getNextHighestDepth() );
myShirt._x = 100 ;
trace(myShirt._x); // 100
myShirt.removeMovieClip();
trace(myShirt._x); // undefined
var myShirt = this.attachMovie (“Shirt”, “myShirt”, this.getNextHighestDepth() );
trace(myShirt._x); // 0
[/as]

What a beauty! if I remove my object from the stage the _x property of the object returns as expected “undefined”. So by now we have once again being spoiled by our wonderful programming parent Actionscript. Who does the cleaning for us after removing an item from the stage. Now eventually Actionscript grew up and became more like an adult that wants you to be responsible for your items and not having to clean up after yourself all the time. This is not only good but it helps you to keep track of what you are doing and how to handle different items.

Going back to the home-parent analogy we can think of this as when we were kids we didn’t know neither cared of how our shirts and pants were cleaned. All we knew is that we were able to walk in our closet and find a new clean shirt or pants if we needed. Now with Actionscript you were able to do the same in AS1 and AS2. if you used an object and deleted it from the stage it would magically get washed, ironed and back into our closed for a later use.

Now lets see what happens with AS3, so lets try a very similar sample as the one above:

[as]
// AS3
var myShirt : Sprite ;
myShirt = new Shirt;
myShirt.x = 100 ;
addChild(myShirt);
trace(myShirt.x ); // 100
removeChild(myShirt);
trace(myShirt.x); // 100
[/as]

So when I remove an item from the stage (Display List), the it stays in memory and Flash still knows its there, as you can tell on our second trace statement we were able to get the “x” property from our object even though we removed it with removeChild. So how do we “clean” after ourselves in AS3? Well we tell flash that we wont use the objects anymore by setting them to null or undefined, it just depends of what kind of object or property you are working with.

So to fix our issue we do the following:

[as]
var myShirt : Sprite ;
myShirt = new Shirt;
myShirt.x = 100 ;
addChild(myShirt);
trace(myShirt.x ); // 100
removeChild(myShirt);
trace(myShirt.x); // 100
myShirt = null ;
trace(myShirt.x); // see below
// we would get a beautiful error as follows in the third trace:
//TypeError: Error #1009: Cannot access a property or method of a null object reference.
// at ___fla::MainTimeline/frame1()
[/as]

Success we were able to remove the object from the stage and also cleaned up after yourself. You might be thinking, how lame! I dont need to keep track of my objects since there are only 3 of them. That is fine but when you are writing an application and you have 1000 objects or better yet you add Sprites, MovieClips, Sound and Video to your application (or swf movie ) then you would be glad you learned early in the game to clean up. Remember AS3 is maturing and is not going away so this is the new standard and you must adapt to what daddy Flash is telling you to do ( or is it mommy Flash? )

Disclaimer: I have been meaning to post something about “cleaning up after yourself” for quite a while and finally decided to push this analogy live. But by no means is the perfect analogy and specially for those programmers with 100 years of experience but it is mainly to explain the basics of adding and deleting objects from the stage for those who have difficulty understanding the concept.

Continue reading “The benefit of always cleaning after yourself (AS Analogy)”

Documenting your classes with ASDoc in a MAC

After following different tutorials of how to run ASDoc on your computer and failing I finally was able to figure out a way to have it running with almost no issues at all, so I thought I would share my steps here for those of you still struggling with he situation.

1. First and most important install ANT on your computer.
(a) Download ANT and you can follow the command line instructions if you have Admin rights on your computer but if you don’t have admin rights then you can follow these steps.
(i) After you download ANT and you have UNZIP the files open /user/local/ with a text editor that allows you to browse hidden or locked files (I used TextMate by creating a new project).
(ii) After you open the folder with your text editor, if you have the choice do a file.open source (in my case with TextMate I just right click the folder and did a “Reveal in Finder”).
(iii) Dump your Unzipped files in the /user/local/ folder and now you should have something like /user/local/apache-ant.
(iv) Set a Permanent aliases for ant (another tutorial for those who do not know how to do this)
2. Download the Free Flex SDK ( At the time of this writing I used Flex3SDK Beta).
3. Place the FLEX SDK anywhere in your machine (in my case I used Applications/FLEX).
4. This step is option since you can set a permanent alias for FLEX or in my case since for some reason my aliases didn’t work properly for FLEX so I just declared where the asdoc was located in my build.xml

Thats it, now to test this just run a build.xml and if everything is installed properly you should be able to have beautiful documents created by ASDoc.

Here is a Build.xml sample:

[php]
< ?xml version="1.0" encoding="utf-8"?>















[/php]

Continue reading “Documenting your classes with ASDoc in a MAC”

Stop sound of loaded SWFs in AS3

Until now I didn’t have any issue when removing an item from the display list until the item had sound in it. This has to do with an application I am working on which loads several SWFs and they have to be turned “on” and “off”. When the SWF has to be turned off the sound has to go with it. So having the item be removed from the DisplayList was the first “answer”, but of course if every listener has to be removed from any item that is being removed from the DisplayList the sound object is not an exception. But how do you do that? Again the first logic was to add a new Sound object to the loaded SWF and then control the sound in that way but that didn’t fly. Looking in the docs with more detail we find the SoundTransform and here is a description “The SoundTransform class contains properties for volume and panning. The following objects contain a soundTransform property, the value of which is a SoundTransform object: Microphone, NetStream, SimpleButton, SoundChannel, SoundMixer, and Sprite”

So with that knowledge in mind now we can control the sound of the loaded SWF’s and here is a sample of what I was working with.

[as]
package {

import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;
import flash.display.Loader;
import flash.utils.Timer;
import flash.media.SoundTransform;

public class SoundStopTest extends Sprite {

var loader1:Loader;
var loader2:Loader;

var mc1 : MovieClip;
var mc2 : MovieClip;

var holder:Sprite;

var mySoundTransform:SoundTransform

public function SoundStopTest() {

holder = new Sprite;

var url1:URLRequest=new URLRequest(“scene6_portofino.swf”);
var url2:URLRequest = new URLRequest(“scene6_royalpacific.swf”);

loader1=new Loader();
loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader1.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loader1.load(url1);

loader2 = new Loader();
loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler2);
loader2.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loader2.load(url2);

holder.addChild(loader1);
holder.addChild(loader2);

addChild(holder);

var myTimer = new Timer(2500, 1)
myTimer.addEventListener(“timer”, theEvent)
myTimer.start();

var myTimer2 = new Timer(2500, 1)
myTimer2.addEventListener(“timer”, theEvent2)
myTimer2.start();
}

private function completeHandler (e:Event ) {
mc1 = MovieClip(loader1.content);
mc1.gotoAndPlay(2);
}

private function completeHandler2 (e:Event ) {
mc2 = MovieClip(loader2.content);
mc2.gotoAndPlay(2);
}

private function theEvent(e:TimerEvent) {
mySoundTransform = new SoundTransform();
mute();
}

private function theEvent2(e:TimerEvent) {
// holder.removeChild(loader1); Uncomment if you want control of one item instead of all
// holder.removeChild(loader2); Uncomment if you want control of one item instead of all
removeChild(holder);
}

function mute():void {
mySoundTransform.volume = 0;
// mc1.soundTransform = mySoundTransform; Uncomment if you want control of one item instead of all
// mc2.soundTransform = mySoundTransform; Uncomment if you want control of one item instead of all
holder.soundTransform = mySoundTransform;
}

private function ioErrorHandler(event:IOErrorEvent):void { }

}
}

[/as]

One thing that you will notice is that I muted two movies at once by adding two movies into one item and then controlling the volume of that single item. The reason why am I doing it this way is because I need control of one movie at the time as also control of all movies together.

Another thing you will notice is a Timer Event, that was just added to enhance my testing but doesn’t have to be used in this way.

Continue reading “Stop sound of loaded SWFs in AS3”