Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
30th June 2010

Animated eCards with HTML5

Create seasonal animated eCards using the all new <canvas> element

Animated eCards with HTML5

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”;

Pages: 1 2 3 4 5 6

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Alex

      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.

    • Ashley

      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

    • http://www.lemon-fresh.co.uk lemonfresh:design

      @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

    • Andi

      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…

    • http://otherofficeaz.com Steph

      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

    • Anon

      I seem to have the same problem as Ashley.
      Anyone know how to fix this?
      Thanks in advance

    • Anon

      My bad… forgot to download the jquery :]

    • Anon

      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

    • Ashley

      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.

    • John

      Another web designer tutorial that does not work properly!

    • Star

      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

    • http://www.alherabd.com Mizan

      I’m getting help from this one.

    • Pingback: 60 Excellent Web Development Tutorials | stylishwebdesigner

    • http://www.softtechbd.com monjurul

      Project Management , CRM & Help Desk , Time Tracking , Issue & Bug Tracking , Document Management , Finance & Accounting , HR Management , Supper mall etc.

    • http://pressreleases.cambridgewhoswho.com Nazir

      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.

    • http://www.hugclub.net izlude

      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.

    • Outi K.

      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!

    • Paul

      Does anyone know of a site that has e cards made from html5 that will play on iPad and can ba sent via email?