Tutorial Details
- Program: Flash
- Screencast Duration: 80 mins
It’s October the 15th and Activetuts+ is again taking part in Blog Action Day! This year we’re aiming to raise awareness about clean water and water conservation. In today’s screencast, we’ll be building a vertical scrolling game, with a very watery feel..
Blog Action Day
First and last, the purpose of Blog Action Day is to create a discussion. We ask bloggers to take a single day out of their schedule and focus it on an important issue. By doing so on the same day, the blogging community effectively changes the conversation on the web and focuses audiences around the globe on that issue.
Screencast: What’s Covered?
In this screencast you’ll learn how to setup and use PerlinNoise with the DisplacementMap filter to create a water-like effect. You’ll learn how to use the KeyboardEvent to listen for keys being pressed and create smooth motion of the object in response. We’ll cover how to use the hitTestObject to test for collisions and finally we’ll create a particle system class with watery wake-like behavior.
There’s loads to cover, so let’s dive in!
Part 1: Introduction
Part 2: Foam Particles
Part 3: Keyboard Movement
Part 4: Logs
Part 5: Trash
Part 6: Adding Objects to the Stage
Part 7: Scoring
Part 8: Wrapping Up

Don’t forget to check out what the other Tuts+ sites have been up to for Blog Action Day :)
This looks very interesting we need more video tutorial like this that takes you through the whole game design process.
This would have been better if it were in flash cartoon format. Unfortunately, the bitmap rich images while cool, really chug along slowly in most browsers. Looking forward to redoing in vector flash to see how well the effects look in that format.
The performance is due to DisplacementMapFilter with the PerlinNoise being quite big. Since water is the theme I went with it because it really looks nice, you could make it smaller and it would increase the performance considerably, it’s a balancing act. Complex vectors generally perform much worse then bitmaps so that shouldn’t really be an issue.
Gotcha
Love your tutorials, Franci!! Nice game with nice graphics. Works just great!
How do I get rid of the shadow effect put on the boat, trash…?