(36)

Live preview

This is one of my flash animations re-designed to HTML5 with help of CreateJS. Hand-drawn animated fantastic mechanism from letters “under construction” with customizable logo integrated on screen, jQuery countdown timer, 2 skins (light and blueprint). Cartoon retro-styled mechanism animation centered in browser window. Your logo is clickable with custom URL.

Features:

Classic cartoon frame-by-frame animation with countdown timer.
Customizable liquid color, logo.
Ready to upload index.html page with animation centered in browser.
2 Skins (light and blueprint).
Archive include original flash animation .FLA and photoshop .PSD sources.
Fallback dummy page with static picture for IE8 and earlier versions.
Detailed help file and commented code.

Notes:

Due to CreateJS requires the HTML5 Canvas, which is not available for IE8 and earlier browsers, in this theme I add dummy fallback page with non-animated .jpg machine picture and alert message.

Due to original animation was ported from flash, if you want to change color of animated letters (outlines and fills) you need to edit source .fla file in Flash CS6 as described in help. Note that liquid color and other colors you can change without editing in flash, just with changing variables in css or javascript.

In Opera browser this animation have some strange tiny glitches (thin horizontal lines occuring above animation), I still could not figure out why. The rest browsers is ok.

Hope you enjoy this file, and take a few seconds to rate and share it.
Thanks!

Example of script.js:

//Initial setup
var preloader_width = 150; // Preloader width
var preloader_height = 4; // Preloader height
var preloader_color_fill = "#656A77"; // Preloader fill color
var preloader_color_outline = "#656A77"; // Preloader outline color
var preloader_color_text = "#656A77"; // Preloader text color
var liquid_color = "#ffcf3e"; // Color of animated liquid
var background_path = "images/background.png"; // Path to your main background
var background_type = "stretched"; // Background type (can be "stretched", "fixed")
var background_pattern_usage = true; // Use pattern above main background (true, false)
var background_pattern_path = "images/pattern.png"; // Path to your pattern
var background_pattern_alpha = 0.13; // Alpha of your pattern (from 0 to 1)
var background_pattern_scale = 50; // Scale factor of your pattern (in percents)
var background_pattern_rotation = 0; // Rotation factor of your pattern
var logo_path = "images/logo.png"; // Specify here path to your logo
var logo_scale = 100; // Logo sale factor (in percents)
var logo_x = 0; // Logo correction factor for X-position (in pixels);
var logo_y = 0; // Logo correction factor for Y-position (in pixels);
var logo_url_enable = true; // Make logo clickable (true, false)
var logo_url = "http://themeforest.net/user/Kontramax"; // URL when click on logo
var logo_url_target = "_self"; // Targeting (_blank, _self, _parent, _top)
var flickering = true; // Flickering (true, false)
var animated_scratches = true; // Animated scratches dust (true, false)

Credits:

Fonts Roboto and Sniglet from Google Fonts http://www.google.com/fonts/
CreateJS http://www.createjs.com/
jQuery Countdown Plugin by Keith Wood http://keith-wood.name/countdown.html
http://yepnopejs.com/