“Look dad, I’m a Scratch pro”

 

Here’s a fun and creative project for Father’s Day. Build your own e-card to give to your Dad. This is a great idea if you and your dad are into coding and technology. Show off your coding creativity and digital skills by sending Dad a personalised, animated e-card with audio. This is also a great idea if you may not be able to see Dad for Father’s Day and you would like to email him a surprise e-card. You can also use for other occasions like birthdays, anniversaries, and holidays.

Here is the finished product, so that you can see what it will look like. 

 

Your e-card does not have to look exactly the same. You can customise your e-card to match your style, interests and personality. 

Sign up to Scratch

Before starting this e-card project you will need to sign up to Scratch to get your own username and password. This way you can save your Scratch projects online in your user profile. If you need extra help, download this pdf guide on how to sign up to Scratch.

Here’s a sample of the e-card. Play it first, and later we will break down its different components and how they work together.

What happens when you play the animation?

  1. Click on green flag to start.

  2. The first backdrop* is “Backdrop 1” which is the front of the card. 

  3. Click on the arrow to turn the page.
  4. Background changes to “Backdrop 2” which is the partly opened card.
  5. Background changes to “Backdrop 3” which is the inside of the card.
  6. Music plays.
  7. Words and picture glide into position.

* The ‘backdrop’ refers to the background image of the animation. In this father’s day e-card animation, the backdrop images are images of the card in various states: closed i.e. the image of the front of the card, partly opened, and open i.e. the image of the inside of the card. 

The use of backdrops is key to this Scratch project. The e-card uses 3 backdrops. Click the above image to see the three backdrop images. 

E-card animation design flowchart: from Background 1 to Background 3. 
E-card animation design flowchart: from Background 1 to Background 3. 

Steps to build the e-card

  1. Remix the empty card. You can find the empty card to remix here.  (originally by ‘Scratchteam’)

  2. Draw the arrow as a new sprite. Sprites are characters or objects in your program. If you want to animate your arrow you will need to create two costumes for the arrow sprite. Costumes are the appearance of the sprite. (A sprite is an object and a costume is how that object looks temporarily.) You can also change the colour effect when animating the arrow by using the ‘change colour effect by __’ block. 

  3. Program the arrow to change the backgrounds when clicked.  
  4. Create an animation for the front of the card. Our card has an image of a penguin with a party hat surrounded by animated party streamers. You can animate the streamers by creating two costumes. 
  5. Create an animation for the inside of the card i.e. “Backdrop 3”. Words and pictures glide onto the inside page of the card. You can create an animated heart that pulses (using a ‘change costume’ block inside a ‘forever’ block) or animate any other image (using the ‘go to x: _ y: _’ block and ‘glide _ secs to x: _ y: _’ block). The text “Happy Father’s Day” glides onto the card coming from different directions. 
  6. Ensure that all sprites hide and show as required using the ‘hide’ block, ‘show’ block and ‘when backdrop switches to ____’ block. Some sprites hide at the start of the animation whilst other sprites show. Some sprites hide at when the backdrop switches to “Backdrop 3” whilst other sprites show. 

Note which sprites hide and which sprites show at each backdrop change.

In the animation of the e-card, sprites are designed to hide and show depending on the background.
In the animation of the e-card, sprites are designed to hide and show depending on the background.

For a more detailed instructions on how to use Scratch, visit our blog or the Scratch Wiki.   

We’d love to see your work! Tweet us the link to your design @coding_kids, post on our Coding Kids Facebook wall at or send them by email