Under Construction Machine Animated HTML5 Template

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.

Also here is Flash + XML old version on Activeden:

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 setupvar preloader_width = 150; // Preloader widthvar preloader_height = 4; // Preloader heightvar preloader_color_fill = "#656A77"; // Preloader fill colorvar preloader_color_outline = "#656A77"; // Preloader outline colorvar preloader_color_text = "#656A77"; // Preloader text colorvar liquid_color = "#ffcf3e"; // Color of animated liquidvar background_path = "images/background.png"; // Path to your main backgroundvar 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 patternvar 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 patternvar logo_path = "images/logo.png"; // Specify here path to your logovar 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 logovar logo_url_target = "_self"; // Targeting (_blank, _self, _parent, _top)var flickering = true; // Flickering (true, false)var animated_scratches = true; // Animated scratches dust (true, false)