In the last tutorial, we took a look at the first page of the Hotel Transylvania^TM movie website. It's a nice example of how to use the Internet for marketing. Let’s now think about the animation techniques used on that page.

1. Keeping download issues in mind, the first page that is loaded is a static image. Although a large image, it’s download time is still less than an animation or video. The only animation on this page is a preview clip of the movie, which plays in the small 226 x 93 pixel area. This is a nice compromise of download issues and multimedia.
   
   
2. Flash^R is still one of the few ways that you can use custom fonts on webpages. Although things are getting better with Google^R fonts and other resources, to use a custom font that matches the movie's brand still requires custom graphics such as used to create the menu.
   
   
3. As we mentioned in the previous tutorial, there is a countdown preloader and mouse trailer combination when the page loads. This is necessary because a short clip from the movie begins automatically, which takes a few seconds to download. There is a Skip button for those not wishing to watch the clip.
   
   
4. The simple pan interactive animation and flickering lights send the message that the entire page is interactive, although in reality there are only a few invisible buttons or clickable areas. But the message is to scan the page with your mouse to find the interaction.
   
   
5. These invisible buttons or clickable areas over the characters are mouse event listeners. Once triggered, the animation reveals the scroll containing the bio. For some characters, the bio text is larger then the scroll and we see an automatic scroll bar. This isn’t a generic scroll bar but customized with graphics that match the brand of the movie. As you move your mouse away from the clickable area, the scroll automatically disappears with a fade out animation.
   
   
6. The map is a nice 3D feature, especially as it reinforces that the movie is 3D in theaters.
   
   
7. The Griffin game is a nice way to keep the audience moving through the pages of the site. It’s an easy game and can be played by the very young.
   
   

https://www.hotelt-movie.net/

← Back