Here’s a list of frameworks that I do rely on heavily and couldn’t live without (This is mostly for Flash website development).

PureMVC Brilliant MVC framework for AS3 (and a plethora of other platforms). This was my first foray into MVC and was hard going to get my head around, but now, I don’t look back!

swfAddress Integral for current Flash website development. Adds deep linking and browser history to your websites. Another good thing about swfAddress is that it forces you to use elements of good practice when developing your navigation code, it’s asymmetrical and requires a central navigation function.

Tweener One of the many Tween engines out there. I like Tweener because it’s simple to use and has shortcuts for really handy things (like colour effects and sound control). Most tween engines these days all do pretty much the same thing - either way they are vital tools for any actionscript animation.

And of course I have my own Tool and UI packages that I leverage on projects, being able to streamline and make more robust with each new job.
 
Frameworks to test run

But now to the point of this post. My new resolution is to tackle the mountain of frameworks out there, one at a time. I’ll do a quick “hello world” demo with each to get some hands on experience and see any potential for practical use. So, I’ll add to this list, but to start off with I’ll be looking at:

Flash Camoflage I don’t know too much about camoflage, but my general understanding is that it’s a Flash chrome and skinning framework

Basically they allow you to specify where the class definitions for an SWF are sourced from. By default if two SWF files use a class with the same name, then only the definition found in the parent SWF will be used. If you want the child SWF to use it’s own version of that class, then you need to give it it’s own application domain.

From the Adobe docs:

1
2
3
4

        request = new URLRequest("http://www.url.com/myflashfile.swf");
        var context:LoaderContext = new LoaderContext();
        context.applicationDomain= new applicationDomain()
        loader.load(request,context);

The current project I’m working on loads in a variety of SWFs that extend a common base class. It ended up that I needed to make a change to the base class, so at first I thought I was going to have to go and recompile all of the external swf files in order to incorporate the changes I’d made. But actually, this wasn’t the case due to the default behaviour of the applicationDomain. It turned out that as long as that base class was used in the parent swf, then all the external swfs that were loaded in would use the defintion found in it and not their own. Way to go! It meant that I could tweak and make changes to those external swfs, without ever open or recompile them. It’s turned out to be really useful, and painless!

It’s exciting times at Code and Visual as we are happy to announce a new upgrade for Rainbow Live Flash CMS that sees the addition of a rich text editor for live text formatting!

“WYSIWYG”- What You See Is What You Get

Using the Rich Text Editor you are now able to add formatting to your XML text directly in Rainbow, with a live preview to show you exactly how Flash will render the text. Change font, style, colour, size and alignment, even add HTML links.
Click on the HTML button to view the raw HTML that Flash generates, or edit it yourself.

Download your free upgrade from: here.

The Rich text editor has been one of the most requested additions for Rainbow, which already includes other features such as image and file upload, password protection, admin and client modes, node repositioning, template creation and many more. This addition will help Rainbow Live become more powerful as a Flash CMS solution for XML driven websites, components and files. As always, we are always aiming to improve Rainbow, so please feel free to let us know your thoughts, comments and requests.

Warnings for working in Rich Text Mode

With great power comes great responsibility. When you are working with the Rich Text Editor, remember that any fonts you wish to display have to be embedded into your Flash file. If you select a font that isn’t embedded you might find that some of your text displays blank. You may choose to set your display TextField to the “use Device Fonts” option, which will display unembedded fonts - but remember the person viewing your Flash file needs to have the same fonts installed. Just like when designing websites, it’s safer in this case to stick to standard fonts such as Arial, Verdana, Courier or Times New Roman. As with any update, please make sure to back up your XML and RBW files before uploading.

Learn more about Rainbow >

Firstly, in the Flash IDE, create your asset and save it as a MovieClip. I’m using a character from an upcoming game called “Tooth’n'Claw” that I’m going to release soon through Actionsprite.

Next you need to open up the properties window for your MovieClip where we will give it a Linkage ID that will allow Flash Builder to identify the Movieclip.

In the properties window, check both “Export for ActionScript” and “Export in frame 1″ - you should see that the Class value is automatically filled out by Flash - it’s the same name as you’ve given the MovieClip. You can change this to whatever you want, but remember it because it will be the name you use to refer to the MovieClip in Flash Builder.

Now that your MovieClip is prepared, go to “File>Publish Settings” and click on the “Flash” Tab. On this screen you want to make sure “Export SWC” is selected.

Now publish your file (I’ve named mine “Assets.Fla”) and you’ll notice that a .SWC file of the same name has been created. This file contains all of the assets that you have selected for export and is the file that you will use in Flash Builder to gain access to them.

Now you can load up Flash Builder and create a new project. You’ll see there are various types of projects you can create, but the one we are going to deal with is an ActionScript project seeming as this is the whole point of the tutorial.

Give your new project a name, and then click the “Next” button.

Now this is where you tell Flash Builder about the .SWC file you created. Choose the “Library Path” tab and click on the “Add SWC” button.

A dialog will appear with a “Browse” button. Click this and point Flash Builder to the Assets.SWC file you made previously.

Now that you’ve located your .SWC file, you should be able to view it’s contents via the Package Explorer window.

 Once opened, you should see the Package Explorer window open to the side of your layout. Open up the “Referenced Libraries” section. Drilling down you should ba able to see the MovieClip you named in the properties window back in Flash. In this Case its called “ninja_cat” and has a little “c” icon next to it (for “class”).

Finally in the code window you can write your ActionScript as you normally would. This is where you’ll start to see some of the benefits of working in Flash Builder. As a coding environment there are a lot of little touches that make your life easier - some of which is incorporated into the Flash IDE, but for some reason, not all. Firstly you’ll notice that when you create a new Actionscript project Flash Builder will automatically create a Document Class for you and prefill some of it out. Create a new instance of your library item as you usually would and attach it to the stage. Flash Builder should be smart enough to realise that it needs to import the MovieClip Class as well, which it will do for you automatically - see, I told you it was good.

Finally “Run” your movie and you’ll see the MovieClip has been successfully imported and added to your stage. From here on in you should be able to import and use items as you need to. If you need to add more assets, or update existing assets, simply republish a new .SWC from Flash.

So that’s all there is to it. I will try and cover some more aspects of Flash Builder in future posts.

Code and Visual has 5 free Rainbow Live licences to give away to the 5 best Rainbow Live tutorial entries.

For a limited time you can trial a fully functional installation of Rainbow Live on any server you choose by using the Domain Key “tutorialcompetition”. This Domain Key will remain valid for the duration of the competition.

Rainbow Live fills the niche between complete Flash CMS solution and XML Editor. Rainbow was built specifically to enable Flash developers to continue building XML based Flash files the way they usually do, while providing important CMS functionality out of the box - with no changes needed.
Learn more about Rainbow Live here.

Competition Details

The competition is open to anybody that wishes to write a tutorial about Rainbow Live, be it a webmaster or blog author, or even someone that submits a word document. The best tutorial bearing the title from each of the following 5 categories will each receive a free Rainbow Live Domain Key for the domain of their choice - worth $99.

• Rainbow Live Flash CMS - Installation Tutorial
• Rainbow Live Flash CMS - Using Templates
• How to Use Rainbow Live as a Flash CMS
• Rainbow Live Flash CMS - Using Custom Server Side Scripts (php)
• Rainbow Live Flash CMS - Using Custom Server Side Scripts (.Net)

The winning entries will be placed on codeandvisual.com with full credit and links back to the original author’s site. All other entries will be linked to from the codeandvisual.com tutorials page.

What Entries Will be Judged On

• Simple and clear communication style
• Explaination of concepts and details
• Well written and entertaining style
• Good layout and presentation
• Use of images

How To Enter

Any tutorial that sends a ping back to “http://www.codeandvisual.com/rainbow” will be automatically entered. If you don’t own a blog, or can’t ping back, simply send you completed entry to competition [at] codeandvisual.com

Competition Deadline

The Competition will close 11:59 July 31st 2009, GMT

Some of the key benefits of Rainbow Live

• Works with your current XML file
• Admin and User log-ins
• customisable node locking/hiding for client
• Easier for clients to use than a raw XML file
• Edit XML files live online
• Upload Images and files
• Automatically create thumbnails
• Define child templates to define your own node type
• No backend scripting necessary
• Customizable scripts
• Doesn’t dictate structure of your data/website
• Easily design the CMS to your own needs

What Are You Waiting For?

To learn more about Rainbow Live and download an installation package, visit: http://www.codeandvisual.com/rainbow-live

The free Rainbow XML API enables visual and interactive presentation of XML data within any HTML or Flash file. Files can be displayed in any rectangular shape with optional values allowing display customisation.

The Rainbow XML API uses the same code base as Rainbow Live XML Editor. Rainbow Live fills the niche between complete Flash CMS solution and XML Editor. Rainbow was built specifically to enable Flash developers to continue building XML based Flash files the way they usually do while providing important CMS functionality out of the box - with no changes needed.

Some of the key benefits of Rainbow Live:

* Works with your current XML file
* Admin and User log-ins
* customisable node locking/hiding for client
* Easier for clients to use than a raw XML file
* Edit XML files live online
* Upload Images and files
* Automatically create thumbnails
* Define child templates to define your own node type
* No backend scripting necessary
* Customizable scripts
* Doesn’t dictate structure of your data/website
* Easily design the CMS to your own needs

Details about Rainbow Live: http://www.codeandvisual.com/rainbow/features/
Learn more about the Rainbow XML API: http://www.codeandvisual.com/rainbow/api

So, for the project:
The basic layout uses an arcordian style approach to display 3 different pieces of content:

The content will load via XML and use a slide transition to switch from tab to tab.

Understanding MVC concepts
Having never worked with an MVC approach I found it a bit daunting diving straight into PureMVC at first as they’ve extended the paradigm to include a Facade as well as Proxies (to work with the Model), Mediators (to work with the View) and Commands (to work with the Controller). there’s a lot of jargon to learn and I admit it took me a couple of days to get my head around it. Luckily I did all the heavy lifting as far as this is concerned a while back, so with a quick refresher on the main actors, their assistants and their tasks I feel like I’ve got a pretty solid understanding of the concepts involved. I’m sure I’ll be eating my words soon enough though.

Getting Started
So I’m now ready to start building my application. I’m actually not exactly sure where to start. I’ll be using Flash CS4, so I’ve set up a document class called Main.as which doesn’t do anything yet besides send through a stage reference to the custom ApplicationFacade class. I’ve also created my generic Tab and Content Movieclips and exported them for use with actionscript in anticipation of adding them to the stage when the time comes.

First Steps
So I guess the first step is to load the XML data sheet that will provide the content data for the application. This will involve an asynchronous process so I’m guessing I’ll need a notification to tell the application when the file is loaded. The XML is part of the Model of the application, so I guess I’ll be creating a Proxie to store the data once it’s loaded. I’m currently looking at the Start Up As Ordered demo on the PureMVC website to work out how to do this. They use an extension call the StartupMonitor to to all the initial loading so I’ll be trying to understand that. It seems like it’s a bit more involved than my needs for this project, but it will be worthwhile understanding it for future porjects.

If anyone is reading this with some PureMVC experience please feel free to make comments and point me in the right direction if I’m going off course, it’s all a learning experience so I’ll be glad for the input.

i.e. If you buy a Domain Key for www.mysite.com then subdomain.mysite.com will also be valid with the same key.

If you’ve previously purchased a Domain Key the changes will take effect immmediately, there’s no need to upgrade your Rainbow Live installation.

Background.as
This is a simple background process manager class that uses up a specific ratio of CPU time to process functions that are registered to it. For instance if you have to generate a whole bunch of sprites, but don’t want the .swf to freeze while the number crunching happens, you can register a sprite creation function that will create one sprite at a time. on Each ENTER_FRAME event the Background class will continue to call its registered functions until all of it’s alloted CPU time has been used.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

//**********************************
//
// © 2009 - James McNess
// <a href="http://www.codeandvisual.com">http://www.codeandvisual.com</a>
//
// **********************************
 
package {
 //
 // *******************************************************************
 //
 //
 // IMPORTS
 //
 //
 // *******************************************************************
 import flash.display.*
 import flash.events.*
 import flash.utils.*
 public class Background{
  //
  // *******************************************************************
  //
  //
  // PROPERTIES
  //
  //
  // *******************************************************************
  private var pFrameMonitor:DisplayObject
  private var pCPURatio:Number
  //
  private var pIdleLength:Number
  private var pFunctions:Array
  //
  //
  // *******************************************************************
  //
  //
  // INITIALISATION
  //
  //
  // *******************************************************************
  public function Background(thisFrameMonitor:DisplayObject, thisCPURatio:Number){
   pFrameMonitor = thisFrameMonitor
   pCPURatio = thisCPURatio
   init()
  }
  private function init(){
   pFunctions = new Array()
   pIdleLength = 1000/pFrameMonitor.stage.frameRate*pCPURatio
   pFrameMonitor.addEventListener(Event.ENTER_FRAME,doIdle)
  }
  private function doIdle(evt:Event){
   var myStartTime:Number = getTimer()
   while(getTimer()-myStartTime&lt;pIdleLength&amp;&amp;pFunctions.length&gt;0){
    for(var i in pFunctions){
     var myFunction:Function = pFunctions[i]
     myFunction()
    }
   }
  }
  //
  //
  // *******************************************************************
  //
  //
  // API
  //
  //
  // *******************************************************************
  public function addFunction(thisFunction:Function){
   if(pFunctions.indexOf(thisFunction)==-1){
    pFunctions.push(thisFunction)
   }
  }
  public function removeFunction(thisFunction:Function){
   var myIndex:int = pFunctions.indexOf(thisFunction)
   pFunctions.splice(myIndex,1)
  }
  public function removeAllFunctions(){
   pFunctions = new Array()
  }
  //
  //
  // *******************************************************************
  //
  //
  // DESTROY
  //
  //
  // *******************************************************************
  public function destroy(){
   removeAllFunctions()
   pFrameMonitor.removeEventListener(Event.ENTER_FRAME, doIdle)
  }
 }
}

Example Usage:

1
2
3
4
5
6
7
8
9
10
11
12
13

package{
  import flash.display.*
  public class Main{
    public var pBackground:Background 
    public function Main extends MovieClip(){
      pBackground = new Background(this, .2);
      myBackground.addFunction(myFunction);
    }
    public function myFunction(){
      // This function will get called until .2 of the ENTER_FRAME interval is used
    }
  }
}

You can add as many functions as you like to the pFunctions array, it will call each of them in the order they were added, and keep cycling until the allotted CPU time is used up.

You can download the class form here:
Background.as

• Robert Thomas j. Sagun
• Pablo Lara
• Christopher Hein
• Dev
• Honeywolf

They each win a free Rainbow Live Domain Key to be used with the Flash CMS.

Details of a new competition coming soon.