Code and Visual

Creative Design and Development

Code and Visual specialise in developing websites, Flash and mobile games, applications and digital film & TV props for a variety of clients both large and small.

We also develop Rainbow - an extremely simple and flexible Flash CMS for small to medium based Flash websites.

Try rainbow now >

Archive for category Tutorials

How to Import MovieClips into a Flash Builder ActionScript Project

Jul 28

Posted by admin in Tutorials

With the release of the new Flash Builder Beta from Adobe labs, more Actionscript developers will be tempted to leave the Flash IDE and head to what is now the rebranded Flex Builder. Previously there has been a bit of confusion over what Flex and Flex Builder were for, not everybody realised that you could write non-Flex applications (i.e. plain actionscript ones) in Flex Builder. And then even without this confusion those of us used to the Flash IDE still had to get to grips with not having any sort of timeline or way to edit library assets. Long story short, you still need to use the flash IDE to create and edit your library assets, though once this is done you can export them to a .SWC file in order to use them in Flash Builder. Here’s a quick tutorial to show you how.

Using Movieclips in Flash Builder - Step 1

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.

 

 

Using Movieclips in Flash Builder - Step 1_b

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.

 

 

Using Movieclips in Flash Builder - Step 2

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.

 

 

Using Movieclips in Flash Builder - Step 3

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.

 

 

Using Movieclips in Flash Builder - Step 4

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.

 

 

Using Movieclips in Flash Builder - Step 5

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.

 

 

Using Movieclips in Flash Builder - Step 6

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

 

 

Using Movieclips in Flash Builder - Step 7

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.

 

 

Using Movieclips in Flash Builder - Step 8

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

 

 

Using Movieclips in Flash Builder - Step 9

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

 

 

step_10

 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”).

 

 

Using Movieclips in Flash Builder - Step 11

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.

 

 

Using Movieclips in Flash Builder - Step 12

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.

Tags: , ,

2 Comments

Announcing the Great Rainbow Live - Flash CMS Tutorial Competition!

Jul 10

Posted by admin in Rainbow, Tutorials

Competition Extended! Now running till the end of August!

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_sheild1Rainbow 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

Tags: , ,

2 Comments

Getting started with PureMVC - Part 1

Jun 26

Posted by admin in Tutorials

I’ve been meaning to get stuck in to MVC patterns with AS3 for a while now and had been hearing lots of good things about PureMVC. Got a little project the other day that I think is perfect to use as an introduction. I’ll be writing about the process as I go, which will definately be a journey of discovery. I’m sure I’ll take some wrong turns along the way, but I ‘m hoping at the end of it I’ll have left an informative trail for anyone else wanting to try PureMVC.

So, for the project:
The basic layout uses an arcordian style approach to display 3 different pieces of content:
panel_layout
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.

Tags: , , ,

No Comments

Background Processing Class in AS3

Jun 7

Posted by admin in Tutorials

I’ll be trying to release some useful classes over the next couple of months, many of which I used to build Rainbow. So starting off here’s a class that became pretty handy when running a function that chewed up lots of CPU time.

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

Tags: , , , , , ,

No Comments