Greeting Card Ideas

Your next assignment is to make an online animated greeting card.
This will be a web-page created by using Javascript.

Each day the teacher will present a new technique,
chosen from the ideas that students identified as interesting.

Here are some of the ideas that students pointed out last class.

Your finished greeting card page is DUE  Tuesday 12 Dec at 18:00

Project Goals
- There should be pictures and text that fit with a common theme.
 For example, if your greeting card is about New Years,
 then you would have text and pictures about New Years.
- The should be a variety of ANIMATED text and/or pictures.
- You should use a variety of Javascript techniqes, like:
   make
   function
   button
   img
   Slide
   setTimeout
   Slideshow
   Audio (music)
   .style.visibility, .style.left, .style.width, etc
- at least 10 programming techniques    
- at least some objects (Buttons or IMGs) should be clickable
- some animation should happen in place
- some animation should involve changing locations
- the greeting card page should be INTERESTING and ENTERTAINING and ATTRACTIVE

============================================

Day 1 - Moving Body Parts

Example Page:   http://www.123greetings.com/birthday/birthday_wishes/birthday_kitties.html

The cats mouths are moving thanks to a very simple animation technique.
1 - Using a graphics program, cut out the bottom of the mouth (chin and jaw).
2 - Save the chin/jaw picture as a separate picture.
3 - Place the original picture in the web page.
4 - Place the chin/jaw picture on top of the big picture.
5 - Using setTimeout, move the chin/jaw down about 20 pixels,
     then set another timeout that moves it back up.

You already know how to use Slide and setTimeout to move things around.
You can start planning your Greeting Card, using the ideas you already know
and maybe some of the new ideas listed above.

=============================================

Day 2 - Flashy Picture Switches
Here is today's example, with a flashing star:
graphics/GreetingCardsFlashy.zip
Today's example is in card2.html.
It has a picture of a tree,
with a small picture of a star on top.
The star was cut out and repainted with:
http://www.lunapic.com
You might like this better than ipiccy,
or whatever graphics editor you have been using.

=============================================

Day 3 - Play Music

Here is the lastest version of the sample greeting card (card3.html):
graphics/GreetingCardsFlashyMusic.zip

Add the following code to add music to your greeting card.
The music file "merryxmas.mp3" (or another name)
must be saved inside the folder with your page and pictures.

   make("button;id=playmusic;left:200px;top:20px;innerHTML=Play Music");
   make("button;id=stopmusic;left:280px;top:20px;innerHTML=Stop Music")
   var myAudio = new Audio("merryxmas.mp3");

    playmusic.onclick = function()
    {
       myAudio = new Audio('merryxmas.mp3');
       myAudio.loop = true;    
       myAudio.play();
    }
   
    stopmusic.onclick = function()
    {
       myAudio.src = "";
    }
 
================================
Day 4 - Fireworks .GIF

Here is one more demo - including fireworks:
Graphics/GreetingCardsDemo/card3.html

You may wish to add one or more Animated .GIF images.
These must be saved in your project folder,
then loaded with make("img..."), like this:
 make("button;id=startfireworks;left:380px;top:20px;innerHTML=Start Fireworks");
  make("button;id=stopfireworks;left:480px;top:20px;innerHTML=Stop Fireworks");
  make("img;id=fireworks;left:550px;top:20px;");
 
  startfireworks.onclick = function()
  {
     fireworks.src = "fireworks.gif";
  }
 
  stopfireworks.onclick = function()
  {
     fireworks.src = "";
  }

You can see the sample page by downloading this and then open card3.html:
graphics/GreetingCardsFlashyMusic6.zip