Labs

import com.bigspaceship.examples.flexflash.Main;
new Main(this);

package com.bigspaceship.examples.flexflash
{
	import flash.display.MovieClip;
	import flash.events.EventDispatcher;
 
	public class Main extends EventDispatcher{
		private var _mc:MovieClip;
		public function get mc():MovieClip{ return _mc; }
		public function Main($mc:MovieClip){
			_mc = $mc;
			trace("Hello World");
		}
	}
}

_mc.myInstanceOnStage

this.myInstanceOnStage

package com.bigspaceship.examples.flexflash{
	import flash.events.EventDispatcher;
	public class Model extends EventDispatcher{
		public var compiledFromFlex:Boolean;
 
		private static var _instance:Model;
		public function Model($pvt:PrivateClass){
			super();
			if( _instance != null ) throw new Error( "Error:Model already initialised." );
			if( _instance == null ) _instance = this;
		}
		public static function getInstance():Model {
			if (_instance == null){
				_instance = new Model(new PrivateClass());
			}
			return _instance;
		}
	}
}
class PrivateClass{
	public function PrivateClass(){  }
}

import com.bigspaceship.examples.flexflash.Main;
import com.bigspaceship.examples.flexflash.Model;
if(!Model.getInstance().compiledFromFlex){
	new Main(this);
}

package{
	import com.bigspaceship.examples.flexflash.Main;
	import com.bigspaceship.examples.flexflash.Model;
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLRequest;
 
	[SWF(width="518", height="400", frameRate="30", backgroundColor="#ffffff")]
	public class Main_Flex extends MovieClip{
		public function Main_Flex(){
			var l:Loader = new Loader();
			l.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoadComplete);
			l.load(new URLRequest('main.swf'));
			Model.getInstance().compiledFromFlex = true;
		}
		private function _onLoadComplete($evt:Event):void{
			var main:Main = new Main( $evt.target.content );
			addChild(main.mc);
		}
	}
}

Model.getInstance().compiledFromFlex = true;

new MyLibraryItem()

ApplicationDomain.getDefinition(name:String)

package com.bigspaceship.utils {
	import flash.media.Sound;
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.utils.getDefinitionByName;
 
	public class Lib {
		public static function createAsset($mc:MovieClip, $classname:String):DisplayObject {
			var c:Class = Class($mc.loaderInfo.applicationDomain.getDefinition($classname));
			return new c();
		}
		public static function createSound($mc:MovieClip, $classname:String):Sound {
			var c:Class = Class($mc.loaderInfo.applicationDomain.getDefinition($classname));
			return new c();
		}
		public static function createBitmapData($mc:MovieClip, $bitmap:String):BitmapData {
			var c:Class = Class($mc.loaderInfo.applicationDomain.getDefinition($bitmap));
			return new c(0,0);
		}
		public static function createClassObject($classname:String):* {
			var c:Class = Class(getDefinitionByName($classname));
			return new c();
		}
	}
}

new MyLibraryItem();

Lib.createAsset(_mc, “MyLibraryItem”);

                           

Mike Berlin     Nov 28, 2009
Hi Daniel, your workflow helped me... But why shouldn't I use the DocumentClass for the IDE?

Jeff     Oct 13, 2009
Thanks for posting how to do this. I am having a bit of trouble getting classes to work using this method. For instance I am trying to use a class that loads an XML file which takes an xml file name, and boolean variable in its constructor. How would I do this? (I have Flash CS4 and FB3)

//Usual Use:

private var _loadXML:LoadXML;

_loadXML = new LoadXML("locations.xml",true);

_loadXML.addEventListener("loadxmlXMLLoaded", onLoadXML, false, 0, true);



//Using this Flex -> Flash method

?

Steven     Oct 12, 2009
My current work flow is nearly identical to Tom's description. A designer can create all the assets they would like to using the Flash IDE, then I just publish the entire fla into a SWC where I (developer) can directly reference my classes in Flex Builder (I'm also big on PureMVC).

The only hiccups that we've encountered are in the ways we think (designer VS developer mentality), so I often end up having to nest the appropriate Objects in the correct MovieClips and create linkage before publishing the SWC. Until we can read each others minds, I'm stuck using Flash at least a few tasks.

A few questions and suggestions     Sep 25, 2009
First af all I don't think you should put any code on the timeline and I am actually quite surprised you guys do. Do you ever use getters and setters? And what's with the $? It's not PHP.

This workflow might work for you but I don't think a designer should do much with the code. I would also get rid of the FLA in general. FLA's are not good for version control. If you check it into SVN, you cannot tell what changes have been made so you are basically screwed.

I am currently sticking to FLAless development with Flex Builder. For agency environment i would recommend pureMVC for orginizing your code, it requires some setup, but once you get passed that, you can have developers developing without worrying who changed what, where the changes are made (classes, FLA, timeline code) and it's easy to make sure your site is scalable if a client requests a major update.

Dealing with assets.
I tend to be loading most of my assets at runtime, so if a designer needs to work on a specific piece, he only works on this piece. That way it's easier to keep track on general project progress and you can have multiple designers producting assets for developers. SWCs are also cool. You can create a SWC with your timeline animations, export them for Actionscript, import them into a project and simply use them like this.
var myCLip : MovieClip = InstanceNameIGaveInIDE ();
You even get code completion for InstanceNameIGaveInIDE.

If your asset requires some code I would hook it up in the base class for this specific movie clip. All depends on the complexity of a specific asset. I am currenty working on a template for designers where they get basic components that they can skin.
Template has got a button, scrollable text field etc. It is hooked up to a base class so a designer can see the component functioning without worrying anything else, like where this asset is going to be used, etc.
Button: base class controls the functionality, designer can see all the states of the button and interact with it, etc.

More complex stuff like a video player?
It would be flaless project with a swc that only has a controlbar. Designer can then take the fla for the swc and just change the visual bit of the controls, or even I can do it myself. I've got the same videoplayer that I can use across multiple projects and if next project needs a videoplayer I have it already done in more that 50%. Using the same code for each results in having a videoplayer
that has all the functionality it could possibly ever need. Scrollers, scrubbers, time,
events dispatched, simple API for implementation etc.

I only use IDE for asset management nothing else. Designers can produce those assets for me, but I am trying to keep them away from the code and I don't actually see the point for a project to compile from IDE. If a designer needs to see a project as a whole? Look below at Continious Integration.

SWCs or SWFs?
Difference between using swfs from swcs is that Swfs are loaded at runtime. They have to be compiled before or you can actually compile them with an ANT script it FlexBuilder/FDT.
SWC files are actually baked into your main swf (at compile time), so I wouldn't recommend it for everything (adds to main.swf filesize)

Another solution is to use compiler directives like you use to specify your swf size:
[SWF(width="518", height="400", frameRate="30", backgroundColor="#ffffff")]


You can also do [Embed()] so you are not only limited to loading at runtime or using swc's. You can embed almost everything: fonts, images, swfs, sound, binary code, etc)

If you take it further, hook up your project in SVN and hook up Continuous Integration, you will be able to shift the compilation to the server, and you will never have to commit swf's. So simply check in classes, server picks up latest changes and output's swfs. If if fails (you checked in a class that brakes the compilation) CI will send out an email saying the build is broken, please fix asap etc.
You also get instant preview of the progress on your dev server, QA can be involed much earlier, PM can see where the whole thing is going and delivery is much more transparent.

Apart from that I think your work is really cool :)

Cheers,

Tom



Tomo Suzuki     Sep 17, 2009
I like this workflow, but where do you place code that deals with the stage (such as stage resizing, noscale mode, etc)? When I put such code in the Main.as file, the value for _mc.stage comes out null.



John     Sep 09, 2009
Hi all, I really like Alan's approach. Could some please help me with a few questions about it.

After loading in the visual assets, I'm wondering how he would interact with movieclips/classes that live inside a "View".

For example, say you have a Gallery with a button inside it, on the stage (button_mc), and another class you need in the library called GalleryThumbnail.


What would be the correct/best
method to interact with these objects? (I guess keeping dependency injection
in mind).


Old Bad Method:

public class Gallery
{
public var button_mc:MovieClip;
public function Gallery()
{
var galleryThumbnail = new GalleryThumbnail();
}
}


New Method 1:


Load assets.swf into logic.swf

var galleryAssets = Lib.createAsset("Gallery");
galleryLogic = new GalleryLogic(galleryAssets);

public function GalleryLogic(assets)
{
var myButtonAsset = assets.button_mc;

//what is the correct way to access GalleryThumbnail from here?
}

New Method 2:

Load assets.swf into logic.swf

var galleryAssets = Lib.createAsset("Gallery");
var galleryButton = galleryAssets.button_mc;
var galleryThumbnail = Lib.createAsset("GalleryThumbnail");

galleryLogic = new GalleryLogic(galleryAssets, galleryButton, galleryThumbnail);

public function GalleryLogic(assets, button, thumb)
{
var myButtonAsset = button;
var myThumbnail = thumb;
}

I can see how method 2 would work with dependency injection but i dont know if it would work in situations where you have many movieclips on the stage and many classes in the library. Wouldn't the constructor get a bit out of hand?

Thanks!



Paul     Sep 07, 2009
I have been using a similar process my self, so designers, and programmers can both compile a swf. But I have since found a better cleaner way, and that is with the use of swx's ! and use fdt, so much nicer :)

Best,
Paul

chris mitchell     Aug 27, 2009
I hope this doesnt change subject.. What do you guys "anyone" think about the gaia flash framework? Since we are n the subject of work flow..

This is some great reading. Thanks for posting this..

jackscope     Aug 11, 2009
Insightful post. Looking forward to see creating a project process.

Brian     Aug 04, 2009
Really insightful and helpful post... I'm always curious about other design/development workflows, but this sort of information is hard to come by especially from guys like yourselves. Thanks a lot!

Zach Goldstein     Jul 20, 2009
Yeahhh... ioc and dependency injection are total buzz words eh. I should probably stop using em.

So that's totally simple then! My understanding of it was kind of different, I didn't realize you could boil it down that far. That's a really great way to explain the concept.

See with those frameworks I mentioned, they use some tricks to handle interaction between all the mvc bits. Mate does it with an event map, which basically just listens to events (through a global event bus) from the views, reacts, and has the ability to inject data retrieved from a model back into those views. It's nice because it has a series of tags that makes it quite easy to create and use a map. Swiz, on the other hand, makes use of metadata tags and an autowire ability to achieve pretty much the same thing. I'm probably not doing a great job of describing those ideas here, but basically both the frameworks have their own unique way of loosely coupling things together. Dependency injection gets used in these techniques.

When I said ioc container, I meant some way that would do alot of the coupling of the mvc bits for you. I think I got a bit confused by the code you posted involving views, and I didn't really understand the concept.

It makes total sense now though. Thanks for that!

Jason Schertz     Jul 20, 2009
I'm impressed with this approach Daniel. I'm exceedingly impressed with the compilation Boolean. That kicks ass man. I can definitely see this approach raising some eyebrows with any development team. It paves the way for a unified workflow that promotes a comfortable relationship with flash designers. I'm sure it's not all rainbows and unicorns, but heck, this has some moxy.

Alan     Jul 19, 2009
@ Zach
I mention IoC in my post b/c Dan's solution "HOW TO DYNAMICALLY CREATE AN INSTANCE FROM THE LIBRARY" is a great solution for both integrating with Flash Authoring and for decoupling dependencies in general.

What is cool about what Dan did is that he's using creator classes, something I began doing not too long ago and now consider invaluable. It's also a perfect match for IoC.

DI and IoC get thrown around a lot, maybe 'cause it sounds sexy, but it's really a simple concept and most people do it and probably don't know it. It's just giving an object whatever it needs to get the job done, instead of relying on that object to create what it needs to get the job done. It's also goes along with another OOAD paradigm, I can't remember the name, where dependencies shouldn't outlive their creators.

A lightweight example, using Dan's "Lib' class, could be to inject via the constructor:

Bad -

public class BitmapTransformer
{
public function BitmapTransformer()
{
var bitmapToTransform = Lib.createBitmapData(...args)
}
}

Good -

public class BitmapTransformer
{
public function BitmapTransformer(bitmapToTransform)
{
var _bitmapToTransform = bitmapToTransform
}
}

Your implementation goes from:

var myBitmapTransfromer = new BitmapTransformer();
// this is now going to create your bitmap whether you like it or not

To:

var bitmapToTransform = Lib.createBitmapData(...args);
myBitmapTransfromer = new BitmapTransformer(bitmapToTransform);

Zach Goldstein     Jul 18, 2009
@Alan: That's a real good workflow, but I'm curious about how you're implementing dependency injection. I'm working on a project using the flex framework with the mate framework on top that has all those goodies built in. It's pretty sweet in terms of loose-coupling, but what is a lightweight way of doing that without the flex framework?

I'm thinking about using swiz for future projects that don't involve the fat flex stuff, but are there other ways to do ioc and dependency injection without using a framework? I mean I'm just jumping on it because it seems like swiz is pretty well-thought out nice to use. I'm not that confident in any implementation I would come up with.

Do you guys burn your own ioc containers or go for something more community supported?

Cheers eh!

Bart     Jul 18, 2009
Hmm still having issues trying to understand the workflow. Perhaps someone can answer a question or 2?

1) As for my main application code, do I write that in the Main.as? and leave Flex_Main.as alone?
2) It seems that Flex_Main.as when I run it from Flash Builder, doesn't seem to be calling traces from Main.as (where I am thinking you keep the application code in). This something to do with it being loaded in as a SWF and thus traces are not showing up? This is important for debugging if I use this method.
3) Lib.createAsset(_mc, “MyLibraryItem”); is causing syntax errors in Flash Builder. This normal or expected?

Thanks!

Alan     Jul 14, 2009
Thanks for the share.

What I've been doing lately is to completely decouple my application logic for any content. I use a minimum 2 swfs, one swf contains only application logic and it loads other 'skin' swfs that contain content. This makes working with design and changes to content incredibly easy - anyone on your team can make copy changes. In fact a website's content can be completely redesigned without the need of a developer or touching the source code at all.

The problem with Joel's FlashDevelop & SWC solution is that he has tightly coupled his assets with logic - if a change is made in copy or content, you will need a developer with source code to recompile the changes.

Dan, I think your solution is a step in the right direction, by allowing designers compile their changes to content, but it is still held back by requiring designers to have the project's latest source code, or just any source code at all. Also your content swf requires access to your code. If you have to made a content change, your going to have to hunt down your source code.

My workflow is to create my application logic swf and just work with a FPO skin swf. Via flashvars, I pass my application swf a path to my content swf(s). I have a simple 'Skinloader' class that loads the skin swf. Now I don't actually care about the swf itself, instead in my load complete handler I only grab the swf's application domain like so:

swfDomain = ApplicationDomain(swfLoader.contentLoaderInfo.applicationDomain);

I then keep that application domain reference and store it into my data model. I don't use Singletons so I use dependency injection to build my views - passing the views the content classes they need to get the job done. This way I keep my data models completely decoupled from any views. It looks kinda like this:

compositeView = new CompositeView();
with(compositeView)
{
galleryView = InstanceBuilder.createAndReturnView(dataModel.swfDomain, 'NameOfClassSetToExportFromFlashIDE')
navigationView = InstanceBuilder.createAndReturnView(dataModel.swfDomain, 'NameOfClassSetToExportFromFlashIDE')
// Other views....
}

How I have my designers work is: They have a browser open that contains the website we are building. When a designer wants to change the content, they make their changes in Flash Authoring and then publish their swf. The content swf's build path is set to the directory of the web browser that they have open. To see their content changes and interact with it, all they do is refresh the browser. The applcation swf stays the same, but this time it loads the new 'skin' swf.

What isn't great about this scenario is that the designer has to refresh their browser to see changes, and just can't work with the swf directly published from Flash Authoring.

Your solution allows designers to work with whatever swf Flash Authoring publishes directly; however, your designer needs source code in order to work, and any content changes in the future will require someone who has access to the source code. I also believe that content for the web should be tested in a web browser, and not from the SWF player that Flash Authoring opens. This way the designer can see the entire site, and not just the Flash content by it self.

Christian     Jul 13, 2009
thanks for the help, everyone. I was unfamiliar w/ lock classes.

Jamie     Jul 13, 2009
@Christian You can reference the Model by calling Model.getInstance();. This will return the static instance the Model statically created of itself.

Christian     Jul 13, 2009
Thanks for the reply, Daniel. I'm still confused, however. I understand singletons... but, after the constructor is called, how do you ever get access to $pvt? I would think you would assign that somewhere for later retrieval in Model. Right now, it looks like it is disregarded in the Model constructor.... an ignored parameter. Am I missing something?

Elena Amor     Jul 10, 2009
Yeah, thanls for the approach. I am waiting for a project just to use it, i had a lot of problems with the others...i hope this new IDE works perfect!

Alexander Hamburg     Jul 10, 2009
Wow!
That helped us a lot, thank you!
Our start up is a common visitor of this site. Always full of usefull information

Elena Amore     Jul 10, 2009
Very helpful, thanks! Clear passages and high-lighted advantages..But being still on a bad Windows, I´ll probably try Joe´s way first : )

Daniel     Jul 09, 2009
@christian: The Singleton design pattern is used to limit a class to one instance and provide global access to that instance using a public static method (getInstance()). Essentially a Singleton should have a restricted way to instantiate the class. This is usually achieved by making the constructor private. However, ActionScript 3.0 doesn't have private constructors. So using an internal PrivateClass class is an alternative way of restricting instantiation in ActionScript 3.0 because the PrivateClass class is only available within the Model class.

@subhero: The main reason that i don't use the document root class is that i can already create and use multiple Layers and Objects on the Timeline of my main.fla. Whereas the main.fla needs to be empty if you want to use the same class as a document root and as default application in flash/flex builder. Both works great and Josh for example is using the document root class workflow.

@Joel: FlashDevelop is great. It just has one little big problem: it's only for windows (as far as i know) and we are all on Macs here.

As i wrote in the title of the post it's "Just another Flash IDE - Flex/Flash Builder workflow". i'm not saying that this is the ultimate workflow and that you should never use the docuemnt root etc.. I'm just saying that this is a possible workflow and that i'm still using it because it has a lot of advantages.


Joel Finnström     Jul 09, 2009
Hi! Even though I can see the advantages with this approach I must say that I feels a bit overly complicated. We have the same problem at work but have solved it quite different. We use FlashDevelop to code and design in the IDE. But we let the IDE generate a SWC with all the library items. We then use that SWC in Flashdevelop and compiles from FD. This makes it possible to use all the features of FD and use the IDE to create a great library of all the graphical assets. We then use inheritence for the graphics if they need additional logic/code (i.e. public class mySymbol extends mySymbolMC). For us this is the most streamlined solutions because it doesn't really need any specific environment hacks. It also means that the SWC generated from the IDE becomes kind of a graphical guideline for our bigger clients. As soon as we need a button of a certain type it's right there in the SWC and we can be sure that we concistently use the same UI symbols and stuff like that in different projects.

Anyway, that's just our way of solving it... :)



subhero     Jul 08, 2009
Thanks for the insights.
Still, I just can't understand why you shouldn't use the DocumentClass for the IDE. It's a simple template setup designers can work with. And you could simply extend that by another class to be used with the Flex compiler in your Eclipse/Builder project (e.g. your Flex_Main, adding directives as needed within it) without the need of the "quirky" process of loading the IDE compiled SWF into another Flex compiled SWF (that afaiu really isn't needed outside the Dev environment) and that "funky" compiledFromFlex Boolean.
But then again: ncars and I don't know about your workflow's special requirements :)
The assets proxy is a common sense technique that can't be highlighted too much though.

Christian     Jul 08, 2009
This is great! I'm also a believer in maintaining the IDE :-)

Question: in public function Model($pvt:PrivateClass)...

what do you do w/ the $pvt?

(typo alert: "now" -> "know")

nick     Jul 08, 2009
Thanks for the new approach guys, esp with many of us now preferring to use the Flex IDE for our coding - will take a look and see if it's something we could potentially adopt - thanks!

Gobhi     Jul 07, 2009
Great post! Very helpful, looking forward to one on the process of creating a project! ;-)

Pedro Canterini     Jul 07, 2009
Thanks for sharing this, it is much appreciated.