Code

Paper Christmas Card - Animated Creative HTML5 Template

Paper Christmas Card - Animated Creative HTML5 Template

Paper Christmas Card - Animated Creative HTML5 Template - 1
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.


                        Paper Christmas Card - Animated Creative HTML5 Template - 2

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.


Paper Christmas Card - Animated Creative HTML5 Template - 3

Features:

- 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.

- Documentation.

Credits:

Free font used in template: Paper Cuts 2 by Empire of Dust

Library used for main animation: CreateJS http://www.createjs.com/

Libraries used for detect browser and IE fallback: Jquery https://jquery.com/ Yepnope http://yepnopejs.com/

Files included:

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

Also here is Flash + XML old version on my site (free download!):

Paper Christmas Card - Animated Creative HTML5 Template - 4

If you like this template, please rate/share it after purchase.
Thanks and Merry Christmas!


Paper Christmas Card - Animated Creative HTML5 Template - 5
Paper Christmas Card - Animated Creative HTML5 Template - 6

by
by
by
by
by
by