Probably one of the best Flash websites ever created is the website for the biggest cruise ship ever built: Freedom of the Seas. The website was very popular back then, because of the seamless integration of Flash interactivity and video.

The website uses an innovative navigation system. Switching between various sections of the ship is done using a very cool zoom in transition effect. This effect has become more and more popular, so I’m sure you’ve seen it on many other websites.

What we’ll be creating

In this tutorial I’ll teach you how to recreate that same effect. It’s quite easy to implement, but the results will have a huge impact on your users. Check out the example below:

Preparing the images

You need two images, one for the initial view, one for the final view. In this example I chose two images of the same object, but they don’t have to be identical. Check the end of this article for some creative ideas about how you could use this technique. You will also need two copies of these images, with a Zoom Blur effect applied to them.

You can apply a filter in Photoshop, by going to Filter > Blue > Radial Blur. Be sure to choose Blur Method: Zoom and also to center the blur on your object (you may have to Undo and repeat to get his just right). In this case I placed the Zoom Center exactly on the statue’s head.

Photo credit goes to Shelley Panzarella and Monika Szyma. Thanks for these great images!

Setting up the layers in Flash

The easier way to explain this is using this screen capture, along with some comments:

Here is what you need to do:

• The bottom 5 layers are the ones that are important: one for each of the 4 images, plus the one for the image mask.
• The order of the layers is important: blurred images need to be placed above the original images.
• Each frame on the view1_blur layer contains a resized version of the view1_blur movie clip: 120% on the second frame, 140% on the third, etc. You may have to reposition the movie clips in each frame, in order to obtain a linear movement.
• Each frame on the view2_blur layer contains a more transparent version of the view2_blur movie clip: 80% alpha on the second frame, 60% alpha on the third, etc.
• Frame 12 is where the movie stops and starting from Frame 13 is the zoom out effect. The rest of the frames are mirrored version of the first 11 frames.

Other creative ideas

Like I promised, here are some ideas about how you could put this effect to great use:

• The most obvious is to use this effect in real estate projects, like a residential building. Just take a few quality pictures, implement this effect for all the main rooms and you got yourself a high impact mini site.
• One other cool trick would be to use this for a personal website. If you are a web designer, you could take a picture of your desk, with your LCD display, web design books, your folders, iPod and your cup of coffee. Then take some close-up pictures of each of these items. I’m sure you can see where I’m going with this.
• This effect can also be used to highlight the members of a team (sports team, board members, etc.) or to present a new store. The possibilities are endless.

Hope this tutorial helps you build better, more creative Flash websites.