Author: Matt Slaybaugh
Date: October 12, 2006
Level: Beginner

E-Card Builder allows users to create electronic greeting cards from a collection of background images, animations, and personal messages. In this tutorial, you will adjust the speeds of the animations.

• Basic familiarity with Flash

• Flash 8

• ecard_peace.fla

This software is licensed to the public under the CC-GNU GPL.

Each of the three themed e-Card applications includes five animations, each of which is a separate movie clip containing bitmap images that display in sequence. By changing the sequence, or changing the length of time between frames, you can change how the animation looks.

Each of the three themed e-Card applications includes five animations, each of which is a separate movie clip containing bitmap images that display in sequence. By changing the sequence, or changing the length of time between frames, you can change how the animation looks.

The animation contains 4 images, which can be found in the 'source images' folder in the library. You can drag images from that folder into the animation, replacing or adding to the images already in the animation.

1. Open ecard_peace.fla in Flash
2. Look in the library on the right side of the screen. Inside the folder named, "movie_clips" is a folder named "peace". This contains all the movie clips used in the application.
3. Double-click the movie clip named, "dove_animation" to open it. You will see it appear in the main window, and the timeline will show how four images in the animation, each one displaying for four frames (equivalent to 1/3rd of a second)
4. The frames with black circles in them are keyframes meaning something important happens in those frames. In this case, it means the image changes. Drag the frames with circles in them left and right, and after each change, press the enter key on your keyboard to see the changes.
5. To make the dove fly more quickly, drag the keyframes to the left so that each image displays for only one frame.
6. To make the dove fly more slowly, drag the keyframes to the right so that each image displays for more frames.

Flash / ActionScript Projects

• Change the preloader
  Select the preloader animation in the first frame on the timeline and edit the code in the Actions panel. Play with the code to change the text that appears in the text boxes, from showing how many kilobytes have loaded to what percentage has loaded.
• Replace the background images with your own
  Create your own backgrounds in Photoshop or another image editor and import them into the library
  – Note: The backgrounds (5 per theme) are all of the dimensions 533x300 pixels
  Open the background_selector movie clip and replace the existing images with your own

PHP / HTML Projects

• Change the colors and layout of the page that contains the SWF file
  In the body tag, change the background color
  – Note: use the attribute bgcolor and set it equal to blue or green, or play around with 6-digit hexadecimal colors such as cc6600
• Edit the HTML form in send.php so that the message window is larger
  Use the attributes rows and cols in the textarea tag to make the message window wider and longer.

Intermediate Projects

Flash / ActionScript Projects

• Add to or change the colors in the color-selection buttons on the edit screen
  – Note: Flash uses the format 0x000000 for colors.

PHP / HTML Projects

• Edit the HTML in email.php so that it includes the variables from the previous screen
  – Note: all PHP code must be surrounded by <? and ?> in order to be understood by the Web server.
• Add PHP code to email.php so that the outgoing message includes information about the time and date that the card was sent.

Advanced Projects

Flash / ActionScript Projects

• The large background images in the application make the SWF larger. Make the application faster by creating a class for the backgrounds and using ActionScript to tile the thumbnail image across the screen
• Combine the three themed applications into a single application, and use LoadVars or LoadXML to import only the bitmap source images you need.

PHP / HTML Projects

• Combine all the PHP files into a single document, using methods for the different functions of printing, sending mail, displaying the SWF to the recipient, and displaying the SWF to the person editing the card.

• http://www.tutorialized.com/tutorial/Simple-forms-and-ecards/2311
• http://www.actionscripts.org/tutorials/intermediate/e-cards/index.shtml
• http://www.flashkit.com/tutorials/Dynamic_Content/Sending_-Jeffrey_-684/index.php
• http://www.thefreecountry.com/php/ecards.shtml
• http://www.kirupa.com/developer/actionscript/flash_php_email.htm
• http://www.actionscripts.org/tutorials/intermediate/passing_variables_around/index.shtml

• In ActionScript and PHP, there is a difference between = and ==.
  • A single equals sign (=) means you are giving a variable a value.
  • A double equals sign (==) means you are checking to see whether a value has a particular value.
• In PHP, variables all start with a dollar sign ($). In ActionScript, variables do not need any special characters.
• In both PHP and ActionScript, lines end with semicolons (;)
• In both PHP and ActionScript, comments are indicated with a double slash (//) at the beginning of the line. Comments are notes to yourself or other programmers that are ignored by Flash when it compiles the SWF.
• In ActionScript, its often handy to see what the value of a variable is when coding and debugging. Use the trace command in the code to show the value of a variable
  • Eg.
  • trace ("the value of which_animation is: "+which_animation);
• Any movie clip that is called by ActionScript to be attached into another clip needs to have its "linkage" set. Right-click on the movie clip, select Linkage... and select Export for ActionScript
• In ActionScript and PHP, arrays start counting at zero (0). Because the Flash timeline starts counting at one (1), its often handy to begin arrays at 1 as well, by placing null values in the initial cell of the array.
  • Eg.
  • My_array = ("null", "first value", "second value", ...);
• ActionScript and HTML use a hexadecimal (base-16) system for indicating colors. The 6 digits are three sets of two digits, ranging from 00 to FF, for the red, green, and blue values. 00 equals no color and FF equals full color.
  • Eg. 000000 is black (no color in any channel)
  • FFFFFF is white (full brightness in all three channels)
  • FF0000 is bright red (full brightness in the red channel only)
  • FFFF00 is yellow (full brightness in red and green, none in blue)