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.

When I first saw the designs for it I remember saying to myself ‘Gosh darn! How is one supposed to go about doing that??’ (I may have used some more colourful language but you get the jist) I had never done 3D before, and that was just the beginning. There was depth of field, keyed out video, and a pile of information to be displayed.

Luckily, it all came together in the end – you can read about how in this post.

The main idea behind the site was for a big 3D column with 3 spiralling streams of video screens wrapped around it. The user could spin and pan the column around to see the different screens. When they click on one, it would come to the foreground where a video would then play.

The first place I started was to learn about PaperVision 3D. Luckily for me, there is a huge number of posts and tutorials to get me started. Yay for the internet!

Once I had the customary 3D primitives floating around on screen, I started looking into the problem of faking depth of field. The idea I had was to create a series of blurred textures for each object, then swap them out based on their distance from the camera. If you want a bit more detail on this, check out an post I wrote on it here.

There were of course some other tricky items involved – because the screens have some depth to them, simply blurring the textures did not look right. I had to make it so that when the screens got about halfway back, they were swapped over with a basic plane.

The next 3D problem was the curved lines. We could have just had some curved lines modelled up in max, but because we wanted the lines to blur, they had to be done in a similar way to the other blurry objects. I ended up coming up with a bit of code that would generate the curved lines from a series of small straight lines, basically aligning them from end to end. This allowed me to blur individual segments, which wasn’t a perfect result, but worked pretty damn well.

I can’t even remember the exact method – I just know that it included a fair bit of trigonometry and experimentation.

The last 3D part was getting the videos to line up with the 3D screens when they were selected. It took a bit of playing around, but after a bit of googling and tweaking some figures I finally got it all lining up nicely. There is bit of a formula to getting 3D graphics to line up, but once you know it, it just works.

Oh, as for the big green curved shapes, they were pretty simple. They were simplymodelled up by the 3D guys and loaded into the scene via a Collada (DAE) file. Apart from some minor texture path issues, they were probably the easiest parts of the site.

The videos themselves were pretty cool. Each of the students represented on a screen was filmed on a keyed background, walking out from behind the panel. They would then introduce themselves before returning back to behind the panel. It was a pretty simple trick, but proved to be quite effective. There was a little bit of trickery involved getting the walking in and out to look right, but we got there in the end.

After all of that, the only remaining content was a series of different informational pages. These were pretty straightforward and were achieved by using a template system that was run off of XML based content. This allowed us to easily add and edit content to the site without the need for an entire rebuild.

Overall it was a pretty cool project, so check it out if you get the chance – Sciences at Melbourne. You can also read about it on the Visual Jazz site.

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.

Overall the site was a big success and ended up getting over 35,000 entries.

The entire site was built in Flash and working at Visual Jazz, I was on the team that helped put it all together.

You can check out the site at http://www.jetstarphotocomp.com/ then read on here for a brief run through of what I did on it.

Overall the site wasn’t overly huge. There was only about 6 different sections to the site, but some of them were a little bit tricky due to the integration with the backend database.

The major part I worked on was the photo gallery, which ended up being one of the more complex parts of the site.

The main code for the gallery was based on TiltViewer. It did everything it was supposed to very well, but it had to be altered a fair bit to achieve the desired effect. It had to be set up to work with the custom CMS that had been developed in house, as well as display a custom ‘detail’ screen of the image.

It also needed to be able to support deep linking to particular photos via the use of SWFAddress, as well as the general filtering you would expect on a gallery of this type, including category and keyword.

On an nerdy note, I had to do some alterations in order to improve the performance, due to the fact that the images we were showing were a fair bit bigger then would normally be used. This included, strangely enough, limiting the amount of tilt that was used on the grid – I’m guessing that had something to do with the 3D engine?. The other thing, which made a bit more sense, was to reduce the complexity of the transitions used.

The other section that I worked on was the home page – it basically just showed the photos of the week, which were pulled from the database via the CMS. In relation to the gallery, it was not very hard at all

You can check out the site at http://www.jetstarphotocomp.com/. You can also read a bit about it over a the Visual Jazz Site.

One of those sites was for the Holden Epica.

Built entirely in flash, I was responsible for coding most of this site. In comparison to some of the other websites I’ve worked on it wasn’t very big, but it did come up looking pretty cool with a very cool / clean look that I really liked.

Read on to get a bit of a spiel and then check it out at here.

Using the angle of ticking all the boxes, the designer created a very clean approach for the Epica site. Nice clean images with a lot of white space and green highlighting created a look that could best be described as ‘fresh’.

The home page uses a pretty cool ‘parallax’ effect, with the main features floating around a central image of the car. When one of these features are clicked, it expands to show an image of the related feature page, as well as a small sub-menu allowing direct access to specific parts of that section.

One of my favourite parts of the site is the ‘Clever Design’ section. It uses a floating ‘tick’ technique that glides around the image of the car before expanding to display an exploded view of the details. It was a pretty simple technique to create, using different tween equations for the x and y axis to create the overshooting effect.

The transition / wipe effect on the main images was created using a simple gradient mask which was tweened across the width of the screen.

The ‘Key Features’ section of the site uses a similar but different approach. It has an accordian-style list of the different features, using the ‘tick’ as a highlight to show where that particular feature is in the car.

Other sections of the site include a model comparison page, a photo gallery, and the almost mandatory ‘colour picker’, where you can check out all the available colours.

Go and check it out at the Holden Epica Site if you haven’t already.

The first step was to create the logo. It was to be mostly typographical and had to work in both colour and monochrome.

After exploring many different font shapes and styles this final font was settled chosen because of the way the ‘s’ shape lent itself to the shape of a fish.

Many different colour combinations were also explored for the logo before the simple black, white and red approach was selected.

The next step was to apply this design to a range of stationery. This included business cards, letter head and a mock-up of a menu.

The first part of the brief was to come up with a logo represented the company’s profile of being fresh, new and reliable. Because the logo could potentially appear on any number of products, it had to be clean and easily adaptable.

After experimenting with a variety of ideas the final ‘linked initials’ logo was born.

The bold letters and clean lines meant that this logo could be printed in any colour and still be easily recognisable. It also lent itself to both horizontal and vertical alignments.

From this logo a style guide was developed. It clearly showed how the logo could be used with a variety of different colours fonts and other graphical devices.

Once the style for the company was completed a range of corporate stationary was created. This range included business cards, letter heads and various company templates and forms.

Finally, a small brochure that could be used to introduce the company to potential clients was created. With minimal space and budget the brochure was designed to be as informative as possible without being overwhelming.

It was rebuilt entirely around the new graphic style that the company was taking.

The bright pinks and flash based animations of the previous sites has been abandoned in favour of a more traditional HTML approach, using more earthy greys and browns of the company’s new style.

Where ever possible, text was minimised in favour of large product images in an effort to showcase the colours and quality of the JuicyBear range

Built using a combination of HTML, CSS and JavaScript the site was set up to be as compatible with as many browsers as possible.

It was also laid out in such a way that it would still work even if the user did not have JavaScript enabled.

The final working site can be seen at www.juicybear.com.au