1. Code
  2. Games

Send Season's Greetings With a Flash Piano Christmas Card

Read Time:16 minsLanguages:

Tired of those old-fashioned animated Christmas cards with Santa Claus laughing, a sleigh flying in the sky with a bunch of trees and sparkling lights?

This year you have no excuse. I'm going to show you how to build a virtual keyboard that plays Jingle Bells. You'll even be able to extend the concept and add more songs and notes to the piano.

For this tut I'll be using a combination of Tweenlite, the Flex SDK, the Flash IDE and Flash Develop.

Step 1: New File

Start Adobe Flash and create an ActionScript 3 Flash file.

Step 2: Properties

Open the properties and set the FPS to 30 and the stage size to 600 x 380px.

Step 3: Layer 1

Rename layer 1 as "background" and create a white rectangle of 580x360. Convert it to a movieclip symbol named "frame_mc" and set its position to x:10 y:10.

Step 4: Drop Shadow

Add a drop shadow filter with the following parameters:

Step 5: Keyboard Layer

Add a new layer called "keyboard", create a primitive rectangle 60x190 with a 5 pixel corner radius and with no stroke. Make it a movieclip symbol and call it "keybase_mc".

Step 6: Reflection and Glow Layers

Hit F8 and create a new movieclip called "key_mc". Create two more layers inside key_mc (besides the one already present with keybase_mc). Name them: "reflection" and "glow". Copy the frame to the newly created layers.

Step 7: glow_mc

NOTE: I've changed the frame_mc colors for a while to allow me to see the modifications on the keys. Select the movieclip in the glow layer, name it "glow_mc", open the filters and edit them according to the image below:

Step 8: reflection_mc

Select the movieclip in the reflection layer, name it "reflection_mc", open the filters and edit them to match the image below:

Step 9: base_mc

now select the movieclip in the base layer, name it "base_mc", open the filters and edit them to match the image below:

Step 10: Key

Copy and paste the key until you end up with 7 instances. Arrange them evenly across the stage.

Step 11: Align

Open the align tool and click the "horizontal spacing" icon.

Step 12: Notes

Create a new layer, call it "notes". Then write down C D E F G A B on the keys add the text to a new movieclip. Open the movieclip filters and edit them such as the image below:

Step 13: Numbers

Create a new layer, call it "numbers". Write the numbers from 1 to 7, this will represent the numbers that you will press on your keyboard to make the ecard key highlight.

Step 14: Flex SDK Path

Go to edit > preferences > ActionScript > ActionScript 3.0 settings and locate your Flex SDK path (you will need this to embed files directly through code).

Step 15: Flash Develop

Open Flash Develop (I'm just using this cause I like it so much more than the usual ActionScript editor from the flash IDE when writing packages) and create 2 blank as3 files. Name them "" and "", save them in the same folder as your .fla.

Step 16: Document Class

Inside Flash IDE set as your Document class.

Step 17: Autoplay Button

Create an autoplay movieClip and name it "autoplay_mc". This will be an autoplay button.

Step 18: Snowflakes

To create some snow flakes falling create a new movieclip, draw a smalll white circle inside and add a linkage identifier of "SnowFlake".

Step 19:

In Flash Develop open, define your Main class extending a movieclip and create a function called Main.

Start by importing these Classes inside your package:

Step 20: Variables

Inside your class define these variables:

Step 21: Main()

The Main function

Step 22: Initialize

After being added to stage we'll initialize the background and the virtual keyboard:

Step 23: Background Effects

Let's sort out the moving background and the Snow:

Step 24: Virtual Keyboard

The initialization of the virtual keyboard

Step 25: Highlight

We need to create a function to remove the highlight from the keys:

Step 26: Key Events

Let's now handle the Key up and Key down events:

Step 27: Autoplay Functions

How to start and stop the autoplay

Step 28: Update

Updating the virtual keyboard along with the music

Step 29: The Complete Code

Here's the full code

Step 30: Background Class

Now on to the background class. We'll begin by importing these classes..

Step 31: Variables

..then defining the variables:

Step 32: Initial Function

Here's the initial function:

Step 33: initColorMatrix()

This function will control the bightness contrast and saturation of the noise, it's a very powerfull filter.

Step 34: Solid Background Color

This one is just to give a solid background to the whole stage.

Step 35: Noises

The noises:

Step 36: Mask

Here's the gradient mask:

Step 37: Render

It's render time!

Step 38: Complete Background Class

Here's the whole background Class:

Step 39: Snow

The snow class is not mine, it was written by Troy Gardner, I just adapted it from the timeline to a package this is why I'm not commenting on the code. Create a "" and copy this code inside.


My music skills aren't the greatest, the music may sound a bit strange. Oh well, with this tutorial you should now be able to create your own songs with more notes and different tones :). I hope you liked this tutorial, you'll find the commented code and both cs4 and cs3 versions up on the zip file. Thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.