- Creating and Sending eGreetings
- Preparing to Work
- Working with the Card Template
- Applying the Scrollbar
- Customizing the Scrollbar
- The eGreeting Interface
- Defining the Structure of the Database
- Using the LoadVars Object to Send Data
- Error Checking
- Setting Up and Testing the Email Program
- Displaying the Card for the Recipient
- Putting It All Together
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the Card Template
Each greeting card is a separate .swf in this system. The cards are individually loaded into a user interface movie when the end user picks one from a selection screen. Because each greeting card movie uses the same format and conforms to the same rules, you use a template movie to build the new cards and then File > Save As for each new greeting card.
Macromedia Flash MX
After you have created a Flash movie that contains the basic structure (graphic content and/or code) you need, you can save it as a template by using File > Save As Template.
-
Open cardtemplate.fla. Select the empty movie clip in the upper-left corner of the stage and open the Actions panel.
-
Select the first frame of the actions layer and look at the ActionScript.
-
With cardtemplate.fla still open, open dropanimation.fla. Select all content by clicking on frame 1 in the top layer and dragging the mouse over all layers and all frames up through frame 52. With all frames highlighted, choose Edit > Copy Frames.
-
Choose Window > cardtemplate.fla. Click on the unique anim layer folder and use the menu option Insert > Layer or the Add Layer icon to add a new layer.
-
Click on frame 2 of the new layer and select Edit > Paste Frames. The four layers from dropanimation.fla will replace the new layer. These are ripple2, ripple1, drip, and background. Select the layers and drag them into the unique anim folder. Finally, click the arrow to the left of the unique anim folder icon to display the layers within it.
-
Click the padlock icon at the top to lock all layers. Click in the lock column of the unique anim folder to unlock all layers in the folder.
-
Click the Edit Multiple Frames button below the layers. Drag the multiple frame markers in the top timeline to cover frames 2 through 53. Click Edit > Select All.
-
Press the right-arrow key 10 times and the down-arrow key 10 times to move all the new content to its correct position within the card template.
-
Turn off Edit Multiple Frames by clicking the button again.
-
Save the new file as card03.fla. Select Control > Test Movie to make sure the content and animation look correct.
The cards made from this template will be accessed through two different environments. When an end user is customizing an eCard, the eCard movies are loaded into the user interface movie, but when a recipient collects the card to view, it's loaded directly into a table cell via HTML tags. As a result, the eCard itself must control the loading of its own contents, delaying visibility until all elements have been loaded.
I have done this by making the first frame of all greeting card movies empty of visible content, containing only a movie clip with ActionScript that checks the progress of the loading process. Only when everything has loaded is the greeting card allowed to play.
onClipEvent(enterFrame) {
if (_parent.getBytesLoaded()>1 && _parent.getBytesLoaded() >=
_parent.getBytesTotal()) {
if (!_root.fromBrowser) {
_parent._x = 14;
_parent._y = 14;
}
_parent.play();
Code Listing 1: Code on a blank movie clip in frame 1 of the card template detects when the card has been loaded, positions the card correctly if it is being previewed, and displays the content with the play() command.
if (fromBrowser == null && _level0.preview != 1) {
message = "Jack, \tThanks so much to you and Jane for looking after
the boys for us last weekend. Hope you have a great time camping! \t- Al";
} else {
// if user is previewing with data, use data from form
if (_level0.preview == 1) {
message = _level0.message;
fromName = _level0.fromName;
}
bottomMsg = "This card was sent to you from " + fromName;
}
stop();
Code Listing 2: Variables used in the card movie are set based on how the movie is called.
Planning the structure of the cards so that they can be used in multiple situations (the initial preview, a preview with data, and the viewing by final recipient) requires thinking ahead. For this example, I decided that previewed cards would be loaded into level1 (so that they would overlay the base movie in level0). I also knew that the recipient of the card will be viewing it from HTML tags in a browser, so I decided to indicate that to the card movie by passing a variable fromBrowser (set to 1) from the HTML tags.
With that information in mind, you put code in frame 1 of the card movie to determine where the card is being called from and to set variables accordingly.
Code in frame 1 checks to see from where the card is being called. If it is called from the browser directly (which means a recipient is viewing the card) or if it is being previewed with data entered by an end user, the message variable will already have a value. If not, the end user is initially viewing the card, and you should supply a "dummy message" to put in the card.
If the user has already entered information about the recipient, sender, and message and is now previewing the card with that information, you will read that information from the form in level0. (The card itself will have been loaded into level1.)
There is one more block of ActionScript in frame 2 of the cardtemplate.fla movie. You will review its purpose in just a bit. First, you will actually use this template to make a new greeting card.
NOTE
Not only can you quickly set the visibility or lock status of multiple layers via their folder, but also saving layers in folders enables you to collapse the folder when not working on its layers, making more stage space available to see the content you are working on.
A new layer appears above the unique anim layer folder.
Figure 10.1. Layer folders enable you to organize layers by content and to use screen space more efficiently.
){kind=link}
The dropanimation.fla file contains a background image and three movie clips that make up a drop of water rolling down a leaf into rippling water below. You copied these frames into cardtemplate.fla as the first step of turning the scenic interlude into a greeting card.
Figure 10.2. The Edit Multiple Frames button, together with the multiple frame markers, enables you to move the contents of multiple frames in multiple layers at once. The move is carried on all selected objects. (They must be in unlocked layers to be selected.)
){kind=link}
There are still some slight modifications you need to finish. The animation did not paste neatly in the square laid out by the border, and you'll want to customize the scrollbar colors to better complement the new animation.
Now you should have the background, the water drop, and two ripple movie clips selected.