Tutorial Overview

In this tutorial I’ll take you through the basic premise behind the StatefulToolkit and demonstrate how it can be used in a project. If you haven’t heard of StatefulToolkit before then be sure to read up on it. This example will also demonstrate use of the FileUtil, which is a utility class included in the toolkit that allows the user to load and save states. The application is very basic and will allow the user to position four circles and to save and load the state of the circles (i.e. where the circles are positioned). The example can be seen here and source files are available.

Preparation

Before you being implementing this tutorial make sure you have the latest version of the StatefulToolkit SWC, and that you’re project is set to target Flash Player 10 (if you want to target FP9, simple replace the Vector with an array in the circle container) . This tutorial also uses Keith Peter’s Minimal Comps component set to create the buttons in the application so you may want to grab the SWC for that too, but you can use your own buttons if you prefer.
Read the rest of this entry »

Update: Don’t forget to take a look at the Introduction to using StatefulToolkit.

What is it?

The StatefulToolkit was developed to enable the simple management of states in AS3. At the heart of the toolkit is one interface called IStatable. Any object that requires the retrieval or setting of its state must implement this interface. The toolkit comes with utility classes to help carry out some of the basic tasks associated with state management.

What’s included in the beta?

The initial 0.1 beta release includes the interfaces to implement and two utility classes, one to aid in saving and loading states and another to enable clipboard management, so you can copy and paste objects.

The utility classes are both currently optimized for the Flash Player – that’s not to say they can’t be used in the AIR runtime (they’d work perfectly fine) but they take into account the security sandbox restrictions that are found in the Flash Player. For example, the FileUtil allows you to save and load states, but does this using the FileReference class whereas in an AIR application you may want this to be done silently (without the browse box appearing), which would use the File class.

Read the rest of this entry »

OK, so it ’s a couple of days late but I’m now back at work and in the swing of things so I thought I’d write a new post.

2009 was a good year for me, I started my full-time job at MMT Digital after finishing university and have really started to delve a lot deeper into programming. The last year has seen me really improve my understanding of OOP as well as use design patterns and frameworks in my daily work.

This year, my new years (programming) resolutions are to:

• Finish the Flash game I started programming in Autumn 2009
• Pull together and publically release my stateful toolkit (AS3)
• Learn more about TDD (test driven development) and optimisation
• Blog more
• and finally, play!

I’m hoping that by posting my resolutions I’ll actually stick to them, especially the top two – I’d really like to seem them out in the wild. I’d also like to blog more, even if it’s just some of the random things I come up with when playing with code!

I hope you all have a successful and enjoyable 2010!

Whilst working on a site that used SWFObject to add Flash to a page, I came across a situation where my Flash movie wouldn’t embed in Firefox, but it would in all the other browsers. Here’s an code excerpt from the page.

<script type="text/javascript">
   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

<div id="myContent">
   <p>Alternative content</p>
</div>

After spending around an hour on extensive research (Google!) and checking the case of my code, I still couldn’t find a solution to the problem.

Eventually I discovered that Firefox executes JavaScript at a different time to other browsers. Other browsers appear to load the page and then execute the JavaScript on the page, whereas Firefox appears to execute the JavaScript when it gets to it.  So by moving the script to below the div it miraculously worked in Firefox. It would probably be better if the embedSWF function was called on document ready. You can see the corrected code below. It’s so simple when you know how!

<div id="myContent">
   <p>Alternative content</p>
</div>

<script type="text/javascript">
   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

Branden Hall and Joshua Davis have collaborated on a new framework called HYPE. Their aim with HYPE is to help bring back the playfulness that once defined the Flash community.

Getting Started

The HYPE framework lowers the barrier for people to begin playing with Flash by offering a lot of functionalityout-of-the-box. It’s really easy to get started with HYPE, just download the framework from the homepage. They’ve even put together a nice set of installation and setup instructions, which shows you everything from how to install the files to adding basic functionality. Branden has also posted a Halloween themed tutorial screencast that shows how to use some of the core functionality of HYPE.

There’s a plethora of examples, with code, on the site too. The examples vary from demonstrating sound analysis, object pooling and swarm behaviours amongst others.

Extending HYPE

Branden has posted a video that shows the developer through the various packages within the framework. It’s really easy to create your own extensions to the framework, and I’m sure that in a few months we’ll see a lot of developers posting their own rhythms and layouts.

My Experiment

I’ve been looking forward to playing with the HYPE framework since Joshua and Branden started tweeting about it. I love the idea of them doing the leg work for us, allowing us to just play with code. One of the areas I’ve always been interested in is audio visualizers, and what’s really cool is that HYPE contains sound analyzers out-of-the-box. So rather than me spending days getting bogged down in code, I was able to put together the following simple visualiser in a couple of hours.

Click on the image above to see it in action, as soon as I can find a decent code plugin for wordpress I’ll post the source code.

I hope HYPE will gain a lot of ground amongst the community, it’s a brilliant framework with a great aim and something I’ll be playing with more in the future.

OK, so it’s a little late but I thought it was worth sharing my experience of Flash on the Beach this year.

We all know about Flash CS5, codenamed ‘Viper’, and it’s many new features so I won’t bang on about that. Although I am looking forward to having custom code hinting, and the ability to publish to multiple devices (inc. the iPhone). Instead, I thought I’d list the sessions I attended and my thoughts on them.

iPhone Application Development for Flash Developers

On the Sunday I was able to attend the iPhone workshop with Julian Dolce, which was really good! Julian covered the basics of Objective-C, including displaying external images, playing sounds and using the UI Kit. It hasn’t made me want to shell out for a Mac and begin a career as an iPhone developer, but it was a brilliant insight into how it all works, and I left feeling confident that I could build iPhone applications (if I wanted to).

Adobe Keynote

Although Adobe had MAX coming up, it was nice that they gave FOTB attendees some sneak peaks at CS5. In the keynote Richard Galvan talked about Flash Player penetration figures, the future of Flash on Mobiles, upcoming features in Adobe AIR and showed sneak peaks of CS5. The announcement that interested me the most was the ability to deploy Actionscript 3 Flash applications to Mobiles using Flash Player 10.1; I think it’ll be awesome to use the same codebase to deploy to multiple devices (and it’ll be great to completely eradicate the need for AS2!).
Read the rest of this entry »

Recently I’ve been introduced to a code formatter for Flex Builder 3 and thought it was worth sharing. The plug-in formats, indents and rearranges both MXML and ActionScript code.

Downloading the plug-in

There is a version of the plug-in available here, but I haven’t installed it from there. Below I’ve included instructions on how to install the plug-in using the software updates feature in Flex Builder.

Installing the plug-in via Software Updates

1. Launch Flex Builder 3 and go to Help>Software Updates>Find and install…
2. Check the Search for new features to install option and click Next
3. Now create a New Remote Site…
4. Enter the following URL for the remote site and give it a name, such as Flex Code Formatter and click Finish:
   http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite
5. Browse the tree to find the code formatter plugin ( FlexPrettyPrintCommandFeature Feature 0.6.27 ) and click Next.
6. Accept the license agreement and click Next then Finish.
7. Click Install All and restart Flex Builder 3. The plug-in is now installed and ready to use.

Using the plug-in

Once Flex Builder has restarted you should notice a new toolbar with some black and white icons. This toolbar gives you access to the following features:

• Generating ASDoc comments for the file
• Generating ASDoc comment for the current element
• Format code
• Indent code
• Rearrage the code of the file

There will also be a shortcut key set up for formatting code; the default is CTRL+SHIFT+F.

Editing the Preferences

To edit the preferences of the plugin go to Window>Preferences. Then browse to Flex Formatting using the tree navigation on the left. There are a vast array of formatting and restructuring options available, so you should be able to find something to suit the way you code. It is also worth browsing the navigation tree to show the options for Auto Format; this will give you the option to format or indent code when you save.

So you’ve been told you should be using Subversion, and have probably been teased because you’re not using it, but where do you start? This post aims to get you up and running with Subversion using the Subclipse plug-in for Flex Builder 3.

Installing the plug-in

1. Launch Flex Builder 3 and go to Help>Software Updates>Find and install…
2. Check the Search for new features to install option and click Next
3. Now create a New Remote Site…
4. Visit the Subclipse website’s install page and note the latest release’s update URL; it should look something like this: http://subclipse.tigris.org/update_1.6.x.
5. Enter the URL found at the site above and give the update site a name; such as Subclipse 1.6.x and click OK. Then ensure the new remote site is checked and click Finish.
6. Browse the Subclipse tree to find the Subclipse plug-in items; i.e. Subclipse 1.6>Subclipse
7. Select the following items and click Next:
   • Subclipse (Required) 1.6.x
   • Subversion Client Adapter (Required) 1.6.x.x
   • Subversion JavaHL Native Library Adapter (Required) 1.6.x
8. Accept the license agreement and click Next then Finish.
9. Click Install All and restart Flex Builder 3. The plug-in is now installed and ready to use.

Creating an SVN repository

I’m currently using Unfuddle to host all of my repositories but there are numerous other Subversion services out there. Unfuddle offer a free plan allowing you to create unlimited Subversion and Git repositories under one project. Once you’ve signed up for a repository somewhere and have the repository URL at hand you are ready to start using the Subclipse plug-in.

Sharing a Flex Builder project with your SVN repository

1. Right-click on your chosen project and go to Team>Share Project…
2. Select SVN as your repository type and click Next.
3. Choose Create a new repository location and click Next. Note that next time your repository will appear in the list of existing repository locations.
4. Now enter the URL of your repository and click Next.
5. You can now specify whether you want to use the project name or choose a different name as the folder for your project on your repository. Decide on a name for your project and click Next then Finish.
6. Flex Builder will then create the folder on your repository and ask you if you wish to open the Team Synchronizing perspective. Choose Yes.
7. In this perspective you are able to see all incoming, outgoing and conflicting items.
8. To commit your project to your repository choose the Commit All Outgoing Changes… button. Flex Builder will then upload your project to your repository.

Importing a project from your SVN repository

1. Right-click in the Flex Navigator and choose Import…
2. Select SVN>Checkout Projects from SVN and click Next
3. Choose Create a new repository location and click Next. Note that next time your repository will appear in the list of existing repository locations.
4. Now enter the URL of your repository and click Next.
5. Flex will then show you the list of folders in the repository, select the folder you wish to import and click Next.
6. Give your project a name and click Finish or click next to specify the workspace location for the project.
7. Flex will then download the project and it’ll be ready to use.

This is by no means a comprehensive guide to using the Subclipse plug-in for SVN repositories, and I may have missed a few things, but it should be enough to get you started.

I was working on a Flex project last week that dynamically used assets from a Flash library SWC and came across something I thought was worth sharing.

The application compiled correctly when using the assets within the code i.e. var object:Asset = new Asset(). However, when choosing to use the asset dynamically (with the use of getClassByAlias()) the application threw a runtime error. So, unless the asset was used within the application it was not compiled into the published application.

I found that by changing the link type of the SWC from ‘Merged into code’ to ‘Runtime shared library (RSL)’ I was able to use the asset dynamically within the application without the asset being used within the code.

Therefore, if you want to use Flash library assets from a SWC dynamically ensure that the link type of the SWC is set to ‘Runtime shared library’.

Does anyone have any comments or different solutions?

I’ve been meaning to set up a blog for a while. I’ve not found the time whilst being at university, so instead I’ve made some contributions to the blog at psyked.co.uk. Now that I’ve recently graduated, I thought it was the perfect opportunity for me to finally buy a domain and get blogging!

The primary focus of the blog will be the Flash Platform, however other web and desktop technologies may crop up from time to time. I’m also hoping to share some of the small projects and experiments I do in my spare time.

Well, that’s the first post out of the way! Hopefully future posts will be more exciting!