This is one of my Christmas flash animations re-designed to responsive HTML5 template with Adobe Animate CC and CreateJS. Made with stop-motion animation technic, this template offer customizable logo integrated on screen, external music file included in download archive, adjustable textblock for your greetings message, interactive cartoon gift box – you can open and close box to see different animation cycles.
Animation centered in browser window. Your logo is clickable with custom URL-linking. Theme is fully responsive and design looks correct at any devices. Easy to customize.
- You can open and close xmas box to start/stop animations.
- Many settings in script.js (see code example below), easy to use, you can change logo, music file, text, sizes, colors without recompile original .FLA file.
- Original music loop and sound effects included in archive.
- Ready to upload index.html page with animation centered in browser.
- Well commented code.
Free font used in template: Paper Cuts 2 by Empire of Dust
Library used for main animation: CreateJS http://www.createjs.com/
FLA, HTML, JS, CSS, MP3, PSD, PNG, Documentation
Example of script.js with settings:
// Initial setup - change parameters here: var logo_enable = true; // Show or hide logo on page (true, false) var path_to_logo = "images/logo.png"; // Specify here path to your logo var logo_align = "left"; // Logo align in browser (can be "left" or "right") var logo_x = 130; // Logo correction factor for X-position (in pixels), inverse when logo_align="right"; var logo_y = 55; // Logo correction factor for Y-position (in pixels); var logo_scale = 80; // Logo sale factor (in percents) var logo_url_enable = true; // Make logo clickable (true, false) var logo_url = "http://kontramax.com"; // Specify URL when clicking on logo var logo_url_target = "_blank"; // Targeting logo URL (_blank, _self, _parent, _top) var main_animation_x = 0; // Animation correction factor for X-position (in pixels); var main_animation_y = 35; // Animation correction factor for Y-position (in pixels); var main_animation_scale = 100; // Animation sale factor (in percents) var textbox_x = -327; // Greeting textbox position by X in pixels var textbox_y = -50; // Greeting textbox position by Y in pixels var textbox_scale = 100; // Textbox sale factor (in percents) var path_to_music_file = "sounds/music.mp3"; // Specify here path to your music var path_to_sound_in = "sounds/sounds-in.mp3"; // Path to your sound-in FX var path_to_sound_out = "sounds/sounds-out.mp3"; // Path to your sound-out FX var loop_music = true; // Loop your music (true, false) var mute_all = false; // Mute music and sounds (true, false) var hint_arrow_color = "#94E2EB"; // Color of animated hint arrow var center_page_mark_enable = false; // Show mark on center of page for testing
If you like this template, please rate/share it after purchase.
Thanks and Merry Christmas!