Code and Visual

Creative Design and Development

Code and Visual specialise in developing Flash games, HTML and Flash websites and also Flash applications for a variety of clients both large and small.

We also develop Rainbow - a free online XML editor that can be used as a very simple Flash CMS for small to medium based websites. Try rainbow now >

Latest Blog Entries:



Jul 12

Posted by admin in Uncategorized

Google App Inventor - Director revisited?

Having just seen the story about Google’s new App Inventor, something immediately felt very familiar. For anyone who remembers the good ol’ days of Macromedia Director and it’s ‘Behaviors’ the drag and drop coding paradigm might ring a bell. What follows is a bit of a whine, I never knew it was in me, but I’m exorcising it.

I’ve always thought there must be a good visual approach to programming - something that will take care of the repetitive, verbose and manual tasks in an easy and intuitive way, but I was thinking of it as a good tool for developers, not the lay man…

As a multimedia developer (I may as well just say AS3 developer these days) stories about apps that make programming so easy that even a cat can do it always send shivers down my spine. You can just imagine the ideas that those sorts of headlines generate in the wider public’s mindset.

I find the idea behind Adobe’s Flash Catalyst to be similarly worrisome, suddenly there are going to be even more cooks spoiling the broth as designers hand you their output - formatted and structured in whatever paradigm Adobe has generated for the software. It sounds great if you are happy to stick to an offical coding/naming method, but if you already have your libraries and frameworks infused into your workflow, will this mean you now have to repurpose them all?

I can see Catalyst working great for Flex as it is a widely used and defined framework, but would it be possible or even make sense to make it work with a PureMCV framework for instance? Of course importing, assembling and wiring up interface elements is painstakingly laborious and unchallenging so Catalyst could also be the greatest thing ever invented, freeing up developers to actually do the fun stuff. In that light I’ll wait to see how that one pans out.

At the end of the day, these drag and drop solutions tend to be similar to those template based website systems - very limited and glaringly un-customisable in a meaningful way. So while the headline sounds great, it goes without saying that the professional (and more lucrative) projects won’t be effected by them too much. Still it’s a shame to lose some of those small to medium sized jobs too thanks to the DIY ethic, and I think we all suffer the conequences - does anyone remember myspace?? Or what is more likely is the discussion about why building an app/website costs so much when there are tools out there that allow you to make it yourself with just the click of a few buttons.

Despite my personal reactions the App Inventor does sound like a pretty nifty creation, and I should probably have a play with it before I pan it. I still have to say that the demonstration video, and that cat application, really sends me visions of a colour-by-numbers world that I don’t want to exist.

Sorry to all of those Lingo coders out there who are still using Director. You might be offended by my past tense reference - I was one of you for a large part of my working life but after I made the switch to Actionscript 4 or 5 years ago I haven’t looked back. To me it’s in the past, long ago irrelevant to the online world.

Apologies to myspace users too, the site has been dead to me for many years - Murdoch knows what I’m talking about.

No Comments

Apr 29

Posted by admin in Rainbow

Rainbow Live 1.5 Released!

I’m happy to announce that Rainbow Live 1.5 has now been released.

This version has many new improvements to the version 1 and has few new handy functions as well - for a complete list of added features check out the feature list: http://www.codeandvisual.com/rainbow/features/

You can also test drive Rainbow on your own server with full functionality using the Free Trial Key.

Give Rainbow a go now!

http://www.codeandvisual.com/rainbow/

Tags:

No Comments

Apr 20

Posted by admin in Uncategorized

Rainbow live Free 30 Day Trial - Find out what’s so great about Rainbow.

Been hearing a lot about Rainbow Live? Want to understand what all the fuss is about?
You can now download and install the brand new Rainbow 1.5 on your server and see just how easily it will turn your XML based Flash site into a content managed powerhouse, all in just a few minutes!

Rainbow Live 1.5

Rainbow Live 1.5

For more information about Rainbow and to get your free 30 day trial Domain Key, visit: http://www.codeandvisual.com/rainbow

No Comments

Apr 15

Posted by admin in Rainbow, Tutorials

New tutorials on using XML with Flash, and using Rainbow Live CMS for Flash

Over in the new forums at codeandvisual I’ve been posting a series of video tutorials covering the basics of usig XML and how you can create a simple Flash CMS using Rainbow Live.

Rainbow live is the easiest and most flexible way to create a CMS for your Flash websites and files and with the release of version 1.5 it’s become even easier and more flexible. Try it now!

Tags: , ,

No Comments

Apr 9

Posted by admin in Rainbow

Rainbow 1.5 beta

For a limited time, try the Rainbow 1.5 beta before the official release. You can download Rainbow from: http://www.codeandvisual.com/downloads/Rainbow_1.5_beta.zip

For an Installation/upgrade guide please see the following: http://www.codeandvisual.com/forums/topic.php?id=7

For those that don’t know, Rainbow is a simple CMS for Flash that exports XML files for use in your websites and animations. It makes it easy for you to provide your clients with effective CMS functionality straight out of the box.

Try it today!

Tags: , , ,

No Comments

Apr 3

Posted by admin in Rainbow, Uncategorized

New version of Rainbow on the way.

Well I’m excited to announce that a new version of Rainbow is on the way. Since the first release I’ve had a lot of great feedback and suggestions on how to improve Rainbow from real world experience. I’ve tried to address most of the suggestions and added a couple more features that I think are really cool. Here’s a quick list:

  • Easy install wizard
  • Automated remote install (install straight onto your server without having to download a thing!)
  • Custom user notes (on a per node basis)
  • Apply template option (update a node to comply with a selected template)
  • XML Preview button
  • Rich text locking (the Rich Text mode has caused a bit of confusion)
  • Relative/absolute path output

There’s also been a few usablility improvements and little fix ups here and there and importantly some optimisation of the code to allow Rainbow to cope with slightly larger data sheets.

These updrages all make Rainbow even better and I’m really excited to be releasing them. As for a release date - “soon” is as good as I can give right now, but I’m thinking weeks as opposed to months (or days). If you would like to give the new version a trial send me an email and I’ll be happy to organise a beta.

More info soon!

EDIT: Download the Beta now - http://www.codeandvisual.com/downloads/Rainbow_1.5_beta.zip

Tags:

4 Comments

Sep 28

Posted by admin in APIs, Frameworks, Tutorials, actionscript

Open source AS3 frameworks to test run

With so many handy AS3 frameworks out there I often get excited about each new offering, but in the end I’m overwhelmed with the options and so rarely give any a test run.
 
Frameworks I use

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

Tags: , , , , , ,

No Comments

Aug 29

Posted by admin in Classes, Uncategorized, actionscript

Changing the behaviour of a class without recompiling.

This is a feature in AS3 that I hadn’t come accross before. If you ever load swf files into one another you might not know it, but you’ll be dealing with application domains. I’ve loaded in SWF’s before, but never had to pay any specific attention to the applicationDomain.

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!

Tags: , , , ,

No Comments

Aug 2

Posted by admin in Rainbow

Rainbow Update 1.0.4 - New Rich Text Editor

rich_text_editor

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 >

Tags: , , , , ,

3 Comments

Jul 28

Posted by admin in Tutorials

How to Import MovieClips into a Flash Builder ActionScript Project

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: , ,

No Comments