Whith a very unique style and heaps of options you are sure to create some very cooky characters.

This first release consists mostly of the Jayvatar builder, which is where you can create your custom jayvatar by combining any of the various pieces of clothing and accessories. You can also choose between male and female body types, as well as different attributes, such as height, weight and arm length.

There is even a ‘random’ button for the less visually creative that generates a random jayvatar automatically.

Once you have completed creating you Jayvatar, you can save it and share it via facebook, twitter and email. You can also save a version onto your computer for whatever reason you have in mind.

You can also play around with your Jayvatar in the Javatar Playground.
Here you can make your Jayvatarcan fly around the screen, bump items, crash down, etc.

At the moment the playground is just a Beta version so there is only a limited amount of interactivity happening. There full release will allow you to do a lot more.

As a bonus, those people from Australia and New Zealand that sign up soon will be given a free $10 voucher to spend in store… BONUS!

So what are you waiting for? Head over to the Jay Jays site and create your own..

To help make the learning for fun and keep the kids interested, a major section of the site was a series of mini games with a planet saving theme. It was my job to build those games… I love my job

Read on to hear about the games, and then check them out at VISY Enviromaniacs.

Each of the games had a different theme, focussing on different ways to save the environment. To keep things interesting, we made sure that the games were also different in the way that they played. We didn’t one to have 5 of the same game with just a graphics changed.

As always, deadlines were tight, but the managers and designers that I worked with were right on top of things, so it all ended up falling into place.

Here is a quick run through of what we made:

Recycle Frenzy

Recycle Frenzy was the first game we made. It was a bit of across between Bejeweled, Tetris and a sorting game. Pieces of litter would be added to the bottom of the screen, one row at a time. The player would have to drag the pieces of litter the appropriate bin – general waste, recycling, paper or green waste.

If the rubbish made it all the way to the top of the screen, the game was over.

To add a bit of spice to the game, the player could swap the positions of litter by dragging them around the grid. Arranging litter into larger groups before dragging it to the bin would result in bonus points being added to the score.

Also, by filling up the bins the user unlocked ‘power ups’ that allowed them to do things like remove an entire row or column with a single click.

Keeping with the tradition with these types of games, the speed would gradually increase as the game went on, causing for some very frantic game play – hence the ‘frenzy’ part

Energise the Earth

Energise the Earth is a bit of a strange game. It is a very simple concept, but proved to be a bit harder to build then initially thought.

The basic idea of the game is to collect the energy that is escaping from appliances around the house. As you look around the room, ‘energy tokens’ will jump out from different appliances and you have to roll your mouse over them to collect them.

Each room you enter has a specified number of energy tokens you have to collect to successfully pass the room. If you reach that amount, you move onto the next room. If you don’t, it is game over.

There are 5 rooms in total, including the living room, study, kitchen, laundry and bedroom. If you pass all of the rooms, you start again, but with higher umber of tokens required in each of the rooms.

It is surprising frantic and keeping up with the pace can be quite stressful. Good luck!

Wild About Water

Wild About Water was the second game I had to build. This one was a bit more complex and confusing, but one you get the hang of it, it is quite addictive and satisfying.

The idea behind it is that you have to keep on top of all the possible water wasting events that occur around a house. Everything from fixing dripping taps to covering swimming pools to prevent evaporation. When something goes wrong, you are alerted and given an amount of time to fix the problem. The longer you take to fix the problem, the more water you will lose. If you run out of water, the game is over.

It’s not all bad though. When you fix a problem, you are given the chance to collect that water with your bucket, adding to your overall water total.

If that wasn’t enough though, there are a couple of side tasks you have to keep in mind. Firstly, you have to keep the plants alive by giving them some of your water at regular intervals. Secondly, you have to drag dishes to the dish washer and clothes to the washing machine, making sure that the machines are full before they start so that you don’t waste water.

As I write this, it does sound overly complex, but like I said at the start, once you get used to it, it does prove to be a challenge.

Bitter About Litter

Bitter about Litter is all about collecting and sorting litter. Sounds like fun, I know, but the game does go a long way to making it so.

You control a guy, in a park full of litterers. As they drop throw their litter on the ground, you run over and pick it up. You then bring it back to your bins where you quickly sort it into either waste or recycling.

When there is litter on the ground, your health begins to drop. The more litter that is there, the faster your health will drop. When you put rubbish int the bins, you get a bit of your health back – as long as it is going into the right bin. When your health runs out, the game is over.

To add some more interest to the game, the player is awarded bonus points for sorting items of rubbish into the the bins without making mistakes. There are also bonus points for returning with as much rubbish as you can carry.

Another nice feature we slotted into the game is that the character in the game actually takes on the look of the player’s ‘enviromaniac’ avatar. A small thing I know, but still pretty cool.

Pick Your Packets

Pick Your Packets is all about learning and identifying the different packaging types you may encounter in the super market.

The player is given the task of sorting the various products into either good or bad packaging types. Good items get scanned and added to the shopping basket, bad items get returned to the store. To help them out, when ever they pick up a product a small description is displayed on the check-out display.

As the game goes on, the items on the conveyor begin to come out more rapidly. If the player is not fast enough, the products will begin to back up, causing the players health to drop. If the health reaches 0, the game is over.

Thats pretty much it so far. If you are interested in checking them out just head over to the VISY Enviromaniac site. Also, big Kudos to the team at Visual Jazz who I work with. They did an awesome job on building the site. You can read a bit about it on the VJ site here.

Visual Jazz was rebuilding the entire Baker’s Delight website, and as a bit of a side project we were given the task of building a virtual bakery in Flash. The bakery was to be a high gloss virtual representation of one of their stores, allowing visitors to browse through a sample selection of their products.

It was a simple project with a pretty cool looking result. Read on to find out some of the features, and then check it out at http://www.bakersdelight.com.au/virtual.html.

Going through in a chronological order, the site starts off with a steaming loaf of bread. The loading progress of the site is spelled out in the steam coming off of the bread. This neat little trick was created using DisplacementMap filters in Flash. It was a pretty simple trick, once I learned out displacement maps actually worked.

After that, the user is presented with the store front. All of the different categories are laid out on display in the store. The store was set up such a way that it panned and distorted based on mouse movement, giving the slight feeling that you were looking around a store. It is a very subtle effect, but took some careful cutting out of graphics to make it work without looking like a room made of rubber.

A staff member is situated in the store holding up different promotional signs. These signs can be easily swapped out for different promotions, and linked to any external pages required.

As an extra subtle little thing – if you look closely at the counter you will see that it reflects the mouse along its curved surface. This again was created via the use of displacement maps.

When the user clicks on a category, the camera zooms in on the staff member, who holds up a board displaying all of the products. The products are displayed in a traditional paged grid system. Nothing too fancy going on here – but it does look pretty clean.

When a product is selected, the grid collapses down to a single line so that the details of the product can be displayed. This looks like a simple enough effect, but getting this grid to figure out how it should collapse and expand proved to be one of the most difficult tasks on this site.

The detail view of the product displayed the usual information you would expect. The cool, and possibly over the top, part of this page was that some of the products were shot in a 360 degree fashion, allowing the user to spin/rotate the product around so it could be seen from any side.

That about sums it up. I love it when I get to work on projects like this

You can check out the entire new Baker’s Delight website at http://www.bakersdelight.com.au/. You can also read about the project over at the Visual Jazz site.

Some interesting 3D modelling and animation coupled with my first attempt augmented reality in flash made for some puzzling times. Drench all that in a healthy dose of girly-ness and you get www.livinmyworld.com.au.

Read on to find out more some of the more nerdy details

The idea behind the Liv doll site was to invite visitors to try out some of the different clothing accessories on a 3D version of a doll. Once they have found a look that they are happy with they can use a webcam and augmented reality to take a photo of themselves posing with the doll. This photo can then be saved, printed or sent on to their friends.

My job as the ActionScripter was to take all the designs, models and animations and make it all work. Easy peasy… sort of.

The base of the site was pretty simple. It followed a basic page structure using on lots of flat colours, shading and bouncy transitions to help bring the site to life. Overall it was a very ‘happy’ site and I had a lot of fun putting it together.

The tricky stuff started with the 3D. Papervison was my weapon of choice. Mostly because I had used it before, but also because we hit some early snags with Away3D and I didn’t have time to try and resolve them.

Because we were allowing the user to change the hair, top and pants on the 3D model, each part had to be imported separately. The 3D guy had loads of fun generating the different clothes, animating them, and then splitting them up for me.

These split up files meant that I needed to create a way to manage the loading of models and the related textures. That was easy enough, but part way through the process we noticed that some of the model combinations resulted in clipping. This didn’t look very good and actually had an impact on the performance.

I discovered that if I applied an alpha channel to the offending model’s texture, the clipping went away and the performance improved (Sounds strange right? Adding transparency made it run better? Go figure). With this in mind I created a data management object which would load the required models and textures, then figure out what masking was required to make it all look good.

Sounds easy when I write it like that, but it actually got quite complex. I basically had to write a matrix that would look at what clothes you were matching up, load the required textures, then merge the alpha channel with the textures before finally applying it to the model.

Next big thing was the animation of the models. Not that playing the animation was hard, but keeping all the models in sync as they were swapped around was. The animation controls in PaperVision weren’t the greatest for what I needed to do so I ended up using the DAE MC2 classes. They allowed me to treat the animations a bit more like a MovieClip, so it was a lot easier to keep everything in sync.

The final big hurdle was the Augmented Reality (AR). For this I used the awesome FLAR ToolKit for this. Unfortunately, a lot of the docs were in Japanese, so I ended up hunting down a tutorial/example over at Mikko Haapoja’s Blog. This got me up and running in no time.

Out of the box it didn’t perform as well as I would have liked, so I spent a bit of time tweaking the code to make it run better. Nothing too spectacular, just simple things like shrinking the size of the webcam image to reduce the number of calculations required and only calculating ‘every other’ frame.

Another little tweak I did was to apply a basic ‘ease’ to the model position. This helped smooth out the little motions that the camera picked up and helped make AR feel much more responsive.

That’s about it.

Overall I am extremely happy with the site. The designers and 3D modellers I work with at Visual Jazz did an awesome job of building the assets and despite the technical difficulties I mentioned above, it all came together well in the end.

If you haven’t checked it out already, go have a look at it here. You can also read a bit about it on the VJ Site.

It was my job to do all the flash programming to make this site come to life.

Read on to hear me ramble on a bit more about some of the details.

The main base for the site was split into two different sides. One side was the rough and tough ‘work’ side, full of rough, dark, industrial areas. The other side was the brighter ‘play’ side with a much more fun feel.

Different sections of the site were related to either work or play. When a section was navigated to the entire background would pan left or right using a pretty cool parallax effect, with all the elements moving at slightly different speeds. To help give a bit of atmosphere, I did some quick little animation effects. These included some random floating clouds the work their way across the screen, as well as a random flock of birds that can occasionally be seen flying in the background.

Page elements animated into place using quick, almost ‘bouncy’ motions, tweaked slightly to make the elements feel as though they had some weight to them. The panel that is used to display second level information is a very good example of this, as is falls into place like a heavy bit of steel.

I set up the base code for the buttons in such a way that the designers could easily create custom animation effects. Examples of these can be seen throughout the site, as every major button tends to have a unique animation applied.

One particular page of note was the accessories page which used a series of photographs to generate a 360 degree view of the vehicle. As the user drags the vehicle around, different features come into view, allowing more information to be displayed. I wish I could say that this was done using some fancy coding, but it is actually a carefully laid out timeline animation controlled via some code.

Full credit has to go to the designer for this site. The rough ‘manly’ feel of the site really worked well, and the elements he gave me to work with made my job a pleasure.

Although it was created a while ago, it is still a pretty cool site and can be checked out at http://www.holdencampaign.com.au/colorado/. You can also read about the project over at the Visual Jazz site.

They do take a little bit of getting used to, so to help with the experimentation I created this little app that makes it easy to test out different image and maps combinations.

The app lets you load in your own images (or use some of my defaults), adjust all the displacement settings and see the final result. It also generates ActionScript 3 code you will need to re-create the effect in your own project.

Check out DisplacementMap Tester

Now, I was going to attempt and explain what a Displacement Map is and how it all works, but I realised that there are already a bunch of resources out that that can do a better job than me. One in particular that I found quite helpful was this article written by Emanuele Feronato. Most of it is written in AS2, but the concepts are still the same.

Update

I recently created a quick AIR version of this tester so that you don’t need a net connection to test custom images. Its not anything fancy. Just a direct port of this web version, but with local file read access.

You can download the AIR version here: Displacement Map Tester (Air Verion).

To help myself out, I wrote a quick little Flex app that lets you test how a regular expression will work with a particular string. It lets you try out all the Flash Regular Expression methods and see each of the results.

To top it all off, I put together a quick overview of the different Flash Regular Expression methods that are available, as well as a short overview of the Regular Expression syntax.

You can check it all out right here…

Hope that helps you out!

Regular Expression Methods

Here is are the Regular Expression methods that are used in AS3

RegExp.test(string:String):Boolean

Simply tests to see if the pattern is matched anywhere in the string

• if ‘g’ flag is set it searches from the .lastIndex, and also sets it after each .test()
• if ‘g’ is not set, then the search is always done from the start

Click here for the official documentation

RegExp.exec(string:String):Object

Returns an object with with various properties relating to the pattern. The properties are

• [0],[1] etc – Array like access – [pattern, group1, group2]
• index – position of the match
• input – the string that was tested

If there is no match then this will return null.

• if the ‘g’ flag is set, it can be called multiple times
• if the ‘g’ flag is not set, it will only return the first match

Click here for the official documentation

String.replace(pattern:RegExp, replacement:String):Boolean

Replaces the pattern in the string with the replacement string.

• if ‘g’ flag is set it replaces all matches in the string
• if ‘g’ is not set,only the first match is replaced
• you can use group references like $1, $2, $`, $&, $’

Click here for the official documentation

String.search(pattern:RegExp):int

Returns the index of where the pattern is found in the string.

• returns -1 if there is no match
• ignores the ‘g’ flag and ‘.lastIndex’ property

Click here for the official documentation

String.match(pattern:RegExp):Array

Returns an Array populated with values relating to the pattern.

• if the ‘g’ flag is not set, the array will be in the form of [fullpattern, group 1, group2]
• if the ‘g’ flag is set, the array will contain all the possible full pattern matches – [fullpattern1, fullpattern2]

Click here for the official documentation

Regular Expression Syntax

Here is a quick run-through of the regular expression syntax as a bit of reference.

Constructors

There are two ways to set up a regular expression.

Flags

Flags change the way the regular expression works. They also can effect the results of the regular expression methods in different ways.

Meta Characters

Meta Characters are characters that have a special meaning when used inside a Regular Expression pattern.

Meta Sequences

Meta Sequences are special string that can be used to represent specific characters in a pattern.

Greedy Vs Non-Greedy

Normally quantifiers like * and + are greedy, as in, they will try and match as much as they can. They can be made lazy by adding a ? afterward.

Capturing sub-strings

Sometimes when you are looking for a pattern in a string you need to work with a sub-string. Maybe it is to replace it, or reference it is a new string. Maybe you don’t know what exactly it is you have to match. That’s where this stuff comes in.

Links

Here are some links to some sites that help with regular expressions.

• http://www.regular-expressions.info/
• http://regexlib.com/
• Flash LiveDocs Reference on Regular Expression Syntax

After learning the basics of papervision – which has plenty of tutorials on the interwebs – I started brainstorming an approach for faking depth of field. Here is what I came up with.

Simplifying the concept, I basically just needed to ‘blur’ the objects as they moved close to or far away from the camera. I couldn’t blur the object itself, but I could change the textures on the fly, so that became the basis of my approach.

I couldn’t just blur the textures on the objects because the edges would not look right. The blur needed to extend past the edge of the objects. My solution for this was to set up extra 3d planes for each of the objects that needed blur. As the objects moved, their distance from the camera was tested. If they were outside the threshold area, the blurred plane object was substituted in, and the blurry textures were swapped around based on the particular distance.

It seemed to work pretty well. Here is a slightly simplified version of the concept, using just the planes. As you move the mouse around, you will see the planes appear to blur – this is the textures swapping

Now for the funky bit. Because there were a bunch of different textures I needed to work with, I didn’t want to have to created every level of blur for every image. It would be burden on my time and increase download times.

What I ended up doing was created a method that took in one texture and generated all of the blurs for me. Each of the different blurs was then stored in an array so that I could easily switch between them.

This is the code that I used, but looking at it now I could have done it a bit better dropping out the ‘draw()’ method and applying the blur to the BitmapData directly.


/**
* Generates an array of bitmap data objects ranging from no blur to the blur amount
* @param origBitmapData - the original bitmap to blur
* @param blurAmount - the maximum amount of blur to create
* @param steps - the number of various blur amounts to generate
* @return An array of BitmapData objects
*/
public function generateBlurredBitmapArray(origBitmapData:BitmapData, blurAmount:Number = 40, steps:Number=8):Array {
// set up a return array to hold the data
var returnArray:Array = [];
// create the blur filter
var blur:BlurFilter = new BlurFilter(0,0,2);
// generate a sprite to apply the blur to
var s:Sprite = new Sprite();
// create a bitmap to hold the original bitmap data - add it to the sprite
var b:Bitmap = new Bitmap(origBitmapData, "auto", true);
s.addChild(b);
// position it in the centre
b.x = b.y = blurAmount;
// loop through and generate the required number of blurs
for (var i:uint = 0; i < steps; i++) {
// adjust the blur and apply it to the sprite
blur.blurX = blur.blurY = blurAmount * (i / (steps - 1))
s.filters = [blur];
// generate the new bitmap data
var newBmpData:BitmapData = new BitmapData(origBitmapData.width + (blurAmount * 2), origBitmapData.height + (blurAmount * 2), true, 0x00ffffff);
// draw the sprite to it
newBmpData.draw(s, null, null, null, null, true);
// add this to the return array
returnArray.push(newBmpData);
}
// return the array
return returnArray;
}


That's about it. Hope that helps you out - let me know what you think!

I’m by no means an expert on it, but after the need arose for me to do some collision detection I did a pile of reading and finally got it working in ActionScript 3.

I thought I would share what I learned in the hope others wouldn’t suffer so much

When I found myself in a need to calculate collisions between polygons in flash, I came across a method known as Separating Axis Theorem (SAT). The only problem I had was that I really struggled to get a grasp on it.

After a lot of reading about collision detection, and looking at code samples, it all finally clicked.

To help out the other non-maths minded people I thought I would write this quick explanation to run through the basic principles of how it works. I’ve also included a demo using SAT collision detection, as well as some ActionScript 3 classes you can download and use.

Note: SAT does require a bit of work with vector math, so it may be a good idea to brush up on your vectors before getting too far into SAT.

Interactive Demo:

Use your mouse to drag the shapes around. Whilst dragging, use the arrow keys to change the scale and rotation of the shapes. When the two shapes collide they will change colour (red) and show a possible reaction (grey).

The quick rundown

Basically, the goal of SAT (and every other collision detection) is to test and see if is a gap between two shapes. The method that SAT uses is what makes it unique.

The best analogy I have heard for SAT technique is like this:

Imagine taking a torch and shining it on the two shapes you are testing from different angles. What sort of shadows would it cast on the wall behind it?

If you work your way around the shapes and never find a gap in the shadows then the objects must be touching. If you find a gap, then they are clearly not touching.

From a programming point of view it would be to intensive to check every possible angle. Luckily, due to the nature of the polygons, there is only a few key angles you need to check.

The angles you need to check are the same as the sides of the polygons. This means that the maximum number of angles to check is the sum of the number of sides the two shapes you are testing have. Eg. Two pentagons would require ten angles to be checked.

So how do you make it work in code?

It’s a simple but repetitive method, so here is a basic step by step:

Step 1. Take one side from one of the polygons you are testing and find the normal (perpendicular) vector from it. This will be the ‘axis’.

Step 2. Loop through every point on the first polygon and project it onto the axis. (Keep track of the highest and lowest values found for this polygon)

Step 3. Do the same for the second polygon.

Step 4. Check the values you found and see if they overlap.

If you find a gap between the two ‘shadows’ you have projected onto the axis then the shapes must not intersect. However, if there is no gap, then they might be touching and you have to keep checking until you have gone through every side of both polygons. If you get through them all without finding a gap then they collide.

That’s basically it.

As an added bonus, if you keep track of which axis has the smallest shadow overlap (and how much of an overlap that was) then you can apply that value to the shapes to separate them.

What about circles?

Testing a circle against a polygon in SAT is a little bit strange but it can be done.

The main thing to note is that a circle does not have any sides so there is no obvious axis that you can test against. There is one ‘not so obvious’ axis you do need to test however. This is the axis that runs from the centre of the circle to the closest vertex on the polygon.

After that it is just a matter of going through the usual routine of looping through every axis on the other polygon and checking for overlaps.

Oh, and in case you are wondering how to project a circle onto the axis, you simply project the centre point of the circle and then add and subtract the radius.

Pro’s and Con’s

Like all collision detection techniques, SAT has it’s pro’s and cons. Here is a quick rundown of some of them:

Pros

• It is fast – It uses pretty basic vector math and you can bail out of a test as soon as a gap is detected, eliminating unnecessary calculations.
• It is accurate – at least as far as I can tell.

Cons

• It only works with Convex polygons – complex shapes are out unless you build them out of smaller convex shapes, and then test each individual shape.
• It doesn’t tell you which sides are touching – only how far they are overlapping and the shortest distance to separate them.

There is probably a bunch more but these were the main ones I could think of.

Conclusion

I hope that this has helped to shed some light on the separating axis theorem. I’ve tried to keep it as simple as possible without shedding too much information. (I’m by no means an expert in maths so I apologise if I left anything out)

Here are a few links to other pages that helped me understand SAT collision detection.

• harverycartel.org – more detailed descriptions and some cool interactive examples. I learnt a lot from this page.
• GPWiki.org- good SAT explanation and sample code – I used this as a basis for creating my own code.
• Tony Pa – Vector tutorials – Good resource for learning about Vectors
• GameDev.net forum – a SAT collision system a member created – gave me some ideas on how to calculate reactions, etc.

Download:

If you want to see my AS3 SAT classes you can download them here: SAT AS3 Classes (They are a bit of a mess, but they work)

Basically, you create two shapes and then test them with the ‘Collision.test()’ method. If they touch then a ‘CollisionInfo’ object will be returned. If they don’t touch then it will return ‘null’. The CollisionInfo object has a bunch of information about the collision that can be used to separate the two objects, etc.

In an attempt to make things better, and make my life easier in the process, I sat down and created my own Reflection class.

Here is what I came up with.

Below is a sample of the result. The moving text shows how elements fade away from the reflection point. Also, if you click and drag in the top half of the image you will see how the reflection can update dynamically.

The idea behind the class is pretty simple. Basically, you create a new Reflection object and then pass it any display object that you want to reflect. Then, whenever you tell it to ‘refresh’, it will look at the target object, copy the bottom area, flip and fade it.

It uses the bounding rectangle of the target object to figure out what to reflect, but you can also override this by specifying a rectangle area to reflect.

You can also specify a number of different things, such as how tall you want the reflection be, how often it should refresh, and how transparent it should start and finish.

Download:

If you would like to check out the code for this reflection class you can do by downloading it here: Reflection Class AS3