Themeforest Review
Site Templates Under Construction 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 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/
