Change the greetings in e-Card Builder

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

Summary

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 change the greetings used in the application.

Experience Needed
Software
  • Flash 8
Files — Ecard_peace.zip (889KB)
  • ecard_peace.fla
License — "e-Card Builder" (c) 2007, World Wide Workshop Foundation

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

Description

The e-Card application uses an array ('message_array') to store five messages. Each message has an identity, which we can access by number. For example, message '1' can be called by using the syntax:

message_array[1]

The greetings in the e-Card builder are in an array that is declared in the script for the main screen.

  1. Open ecard_peace.fla in Flash.
  2. Look for frame 5 in the timeline, which has been given the name, 'main'.
  3. Scroll to the bottom of the timeline, if necessary, and look for the layer named, 'scripts'. It's the last layer in the timeline.
  4. In frame 5 of the 'scripts' layer you can see a small circle, meaning the frame is a 'keyframe', and a small 'a', meaning there is Actionscript in this frame.
  5. Click the frame and look in the Actions panel, you should see a lot of code with numbers running down the left side. These numbers help you find your place when editing code. Around line #19 you should see a line that looks like this:

  6. message_array = ["null", "This is a wish for love, peace, and freedom for all.", "Sending you thoughts of peace.\nI hope you are well.", "PEACE!\nPass it on!", "Let's fill the world with peace and happiness.", "Peace to you, my friend."];
  7. This is where the greetings are set. To change them, all you have to do is edit this line. The array contains 5 messages. The very first value in the array is set to "null" meaning we won't use this value. The other messages are all separated by commas and surrounded by quotation marks.
    Note: to indicate a line break in the message, use the syntax "\n" (backslash followed by a lower-case n) this is code meaning 'new line'

Once you have made your changes, save the file and view the results. To view a Flash movie, hold down the 'ctrl' key and hit 'enter'. Flash will compile the movie and you should see your changes.

More Project Ideas
Starting Projects

Flash / ActionScript Projects

  • 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

  • Edit the outgoing message in email.php
    The message is stored in a variable named $message
    – Note: in PHP, all variables start with a dollar sign ($)
    – Note: \r and \n are ways of starting new lines
  • 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

Intermediate Projects

Flash / ActionScript Projects

  • Change the parameters of the print function
    The print feature is included in code associated with the print button. Select the button and look in the Actions window to see the code.
    Change the x and y values to change how much of the screen gets printed.

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.
More ECard Resources
Programming Notes and Common Mistakes
  • 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)