Animated eCards with HTML5
Create seasonal animated eCards using the all new <canvas> element
Create seasonal animated eCards using the all new <canvas> element
Hail HTML5! With the advent of the <canvas> tag, we can use simple JavaScript to achieve Flash-like animated eCards quickly and easily
Animated eCards have traditionally been created with Flash. This is because there hasn’t really been any alternative that can offer the same degree of control, ease-of-use and browser compatibility. Happily there is now a usable alternative with a smaller code footprint, and the chances are you’re using a compatible browser already (only IE doesn’t yet support the tag). Part of the new HTML5 specification, the <canvas> tag allows us to create text and graphics directly onto a canvas space inside the browser window. Using the power of JavaScript with libraries such as jQuery, we can create interactive animations and advanced functionality such as real-time stock charts. You don’t need to learn a new language or skill to do this; if you’ve got a basic understanding of HTML and JavaScript, you can create animations today!
In this tutorial we’re going to create a very basic animated eCard that can be sent to a friend with a custom message. To avoid complicating the issue we’re going to do this without any databases or special server requirements.
Project files for this tutorial can be downloaded here.
This article was originally authored by Sam Hampton-Smith and featured within Web Designer issue 165
01 Create your canvas
Create a new web document and enter the code below. This code creates a basic HTML page with a simple <canvas> tag. You’ll need to download the jQuery framework from www.jquery.com and save it into a sub folder called “Scripts”, or change the link in the code to the location you’ve saved the jQuery file to:
<html>
<head>
<title>Seasonal Greetings</title>
<script type=”text/javascript” src=”scripts/jquery-
1.3.2.min.js”></script>
<script type=”text/javascript”>
function init() {
var canvas = document.getElementById(“greetings”);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
draw(ctx);
} else {
// canvas-unsupported code here
alert(“sorry, can’t display the card”);
}
}
function draw(ctx) {
}
$(document).ready(function(){
init();
});
</script>
</head>
<body>
<canvas id=”greetings” width=”600”
height=”400”>I’m sorry, your browser can’t display
this eCard</canvas>
</body>
</html>
02 Basic shapes
The code we have got as a starting point includes a couple of functions in JavaScript that we’ll need throughout the tutorial. We’ll start off with something simple – we’re going to create a large rectangle of colour to fill our canvas area. Add the following code inside the draw() function:
var lingrad = ctx.createLinearGradient(0,0,0,400);
lingrad.addColorStop(0, ‘#4280c3’);
lingrad.addColorStop(1,
‘#45bbed’);
ctx.fillStyle = lingrad;
ctx.fillRect (0, 0, 600, 400);
03 Loading images
The object named ctx represents our canvas, and to interact with the canvas we need to call methods associated with that object. The code you just added calls the fillRect method which created a filled rectangle with the gradient we created in the lines above as the fill. Let’s do something a little more ambitious. Add the code below to load in a snowflake image (you’ll find these images ):
var img = new Image();
img.onload = function(){ ctx.
drawImage(img, 100, 100); }
img.src = “WFlakeBig.png”;
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
HTML5 is great if you have a knowledge of javascript but there are alot of designers who use flash, as it is quicker for them to draw out the animation in Flash. I certainly find flash easier to use and correct errors than javascript.
I followed this tutorial step by step and got nothing. :( && It’s not my browser, because I just updated all my browsers, and it doesn’t work in any of them. It doesn’t even display the “I’m sorry, your browser can’t display this eCard”. What could I be doing wrong? o.O
@Alex HTML5 is definetly the way to go. Flash is so time consuming and for clients, sometimes it is not the way to go financially.
Keep up the good work
Flash is less time consuming than javascript. you can create animations far easier and faster. but you need the plugin for it, and if you want to do something out of the flash player sandbox, you have to use javascript or a server language like php anyway…
I found that if I went to Chrome’s debugger for javascript there were issues with the way the code was displaying. I had to make sure ALL double quotes were single quotes, this included the ones that were in html tags and not in the script tags. Try that and see if that works.
Ashley said:
I followed this tutorial step by step and got nothing. && It’s not my browser, because I just updated all my browsers, and it doesn’t work in any of them. It doesn’t even display the “I’m sorry, your browser can’t display this eCard”. What could I be doing wrong? o.O
I seem to have the same problem as Ashley.
Anyone know how to fix this?
Thanks in advance
My bad… forgot to download the jquery :]
Solved the problem by installing Jquery and retyping all ” and ‘ marks.
There is also a slight error in the code:
if (y3>400) y3=-200;
y4-y4+1;
It should read y4=y4+1 otherwise you get a static snowflake
Thanks! That did work! =)
Steph said:
I found that if I went to Chrome’s debugger for javascript there were issues with the way the code was displaying. I had to make sure ALL double quotes were single quotes, this included the ones that were in html tags and not in the script tags. Try that and see if that works.
Another web designer tutorial that does not work properly!
Does anyone have this code working and completed if so can you post it so that I may compare what I have done wrong.
Thank you in advance
I’m getting help from this one.
Project Management , CRM & Help Desk , Time Tracking , Issue & Bug Tracking , Document Management , Finance & Accounting , HR Management , Supper mall etc.
Google is currently the world’s most popular search engine; used by several hundred million people everyday. Among the masses searching Google are your clients, potential clients and even your competition. If you are currently seeking a new career opportunity, you can bet that your future employer is also researching you online.
Adobe announced it would discontinue flash player on androids and blackberry. Adobe is considering the same for PC in the next 2 to 3 years. This is bad news for e-cards.
As you all know, swf ecards are very “tiny” in size while retaining high quality presentation. Observe this Easter e-card http://www.hugclub.net/personalcards/happyeasterooh.html
The solution is easy, but has some drawbacks… Simply make your e-cards in flash, as normal… but this time “do not loop your music” and remove the “replay button”! do not exceed 24fps.
Use Moyea swf to video converter pro to change your flash e-card to a video format. These will be playable in an HTML5 web player. Phones can view it too, so you get a bigger audience.
The drawback…. large file size. The swf I used was only 370 KB. Converting it to mp4 pushed it to 2 MB, or flv to 1.2 MB. The bandwidth can add up for your web hosting exponentially. Be very cautious! If you’re gonna do this, get ad support on your website, you’ll need the extra revenue.
Hi!
I got the example functioning with these checks:
1. It should read y4=y4+1 otherwise you get a static snowflake (as Anon said there earlier)
2. Check the jQuery link and file name. Latest js. file is not named as “jquery-
1.3.2.min.js”, I downloaded a file called “jquery-1.7.1.min.js”. Also if you did not place it on a folder named “scripts” the link is not functional as the link is broken.
3. Make sure you have saved the images in the correct place = same folder as your page.
http://www.webdesignermag.co.uk/wp-content/uploads/2009/12/eCard.zip
Thanks for this tutorial, it was illuminating for a non-coder like me! Happy Holidays!
Does anyone know of a site that has e cards made from html5 that will play on iPad and can ba sent via email?