logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Analysis Hotel Transylvania Webpage


In the last tutorial, we took a look at the first page of the Hotel TransylvaniaTM 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. FlashR is still one of the few ways that you can use custom fonts on webpages. Although things are getting better with GoogleR 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.

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

← Back

Join us in the Animation forum. | Join us in the Digital Art forum.

|


Add Analysis+Hotel+Transylvania+Webpage to Twitter Add Analysis+Hotel+Transylvania+Webpage to Facebook Add Analysis+Hotel+Transylvania+Webpage to MySpace Add Analysis+Hotel+Transylvania+Webpage to Del.icio.us Digg Analysis+Hotel+Transylvania+Webpage Add Analysis+Hotel+Transylvania+Webpage to Yahoo My Web Add Analysis+Hotel+Transylvania+Webpage to Google Bookmarks Add Analysis+Hotel+Transylvania+Webpage to Stumbleupon Add Analysis+Hotel+Transylvania+Webpage to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Add Static Text To Craft Product Trailer Template

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor