Creating the video e-cards

For this project, the e-cards consist of FLV clips that are 120 pixels wide and 90 pixels high. To convert digital videos to the FLV file format, you can use the Adobe Flash CS3 Video Encoder.

Step 1: Create the FLV files

Note: You can skip this step for this exercise. I've included some pre-made e-card FLV files in the sample files folder—you can use them for non-commercial demo purposes.

To create the FLV files, follow these steps:

1. Launch the Adobe Flash CS3 Video Encoder.

2. Click the Add button and select a standard digital video file from your local drive (see Figure 1).

   

   Figure 1. Use the Flash Video Encoder to select the video file you want to use as the mobile e-card.

3. Click the Settings button to update the settings used to process the video, such as cropping, resizing, frame rate, and code.
4. On the Crop and Resize tab, select the Resize check box and enter 120 in the Width and 90 in the Height text boxes. On the video tab, select Low from the Quality pop-up menu and 12 from the Frame rate pop-up menu. This frame rate matches the frames per second of the e-card client you are going to build in the next section.
5. Click OK and then click the Start Queue button to generate the FLV file that you'll use as an e-card in your application.
6. Repeat the FLV encoding process as many times as desired, so that you can offer your application users a wide selection of video e-cards to choose from.

Step 2: Create thumbnails of the video e-cards

Note: If you want, you can skip this step and use the provided FLV e-cards and their respective thumbnail JPG images in the thumbnails folder of the sample files that accompany this article.

Thumbnails make it easier for users to select the cards they want. To create thumbnails of your video e-cards, follow these steps:

1. Open the folder containing the e-cards (FLV files) that you've created. Alternately, you can locate the FLV files that are provided in the sample files folder.
2. Launch Flash CS3 Professional and create a new ActionScript 3.0 file.
3. Choose File > Import > Import Video.

4. In the Import Video dialog box, browse to select one of the FLV files. When the file path field contains the path to your FLV file, click the Continue button three times (leaving the default settings on each screen untouched) and then click Finish.

   The FLV file is now displayed on the Stage.

5. Choose Control > Test Movie to see the FLV video play back in the standalone Flash Player.
6. Use the video controls to pause the playback at the desired location, then press the Print Screen key or use a third-party utility to capture a screenshot of the video.
7. Repeat this process for each FLV e-card you want to include in the application.
8. Use an image editing program, such as Fireworks, to crop the screenshots to only show the video content.
9. Resize each of the resulting images to 20 pixels wide by 20 pixels high, and export the files in the JPG format. Be sure to name each file with the same name as its corresponding FLV video file.
10. Create a new folder named thumbnails on your hard drive and copy all of the 20x20 pixel thumbnail JPG files into the thumbnails folder. These thumbnails will be used by the e-card client to allow users to browse through the gallery to review the available e-cards to send.

Next you need to list all the FLV files (or the e-cards) in an XML file. This file will be loaded into the gallery section of the e-card client where users can select any card of their choice by viewing the thumbnail images of the cards you just created.

Step 3: Update the XML file with the e-card information

To update the XML file with the e-card information, follow these steps:

1. In the sample files, locate the file named gallerylist.xml and open it with a text editor. You'll use this XML file to add your new e-cards as new nodes (see Figure 2).

   

   Figure 2. Locate the gallerylist.xml file and open it in a text editor to begin adding new nodes.

2. Add the following attributes to each node:

   • labelname: Represents the name of the e-card as it will appear to the user in the card list displayed within the e-card client.
   • itemvalue: Corresponds to the file name of the FLV file, excluding the .flv file extension.
   • type: Displays any additional information you might want to present to the user. For this example, I've indicated "No Audio" for FLV files without audio, and "With Audio" for FLV with audio. This is optional. You can also add more attributes with other descriptive types.
   • size: Indicates the file size of the FLV file so that the application displays this information to the user selecting an e-card. Using FLV video clips with the smallest file size possible is ideal, because they take less time to download to a handset.

Now that the video e-card files, thumbnails, and XML file are prepared, you can move on to the more complex part of this tutorial. In the next section, you'll build the e-card client that will manage the user data and the e-card data with the help of a server-side script.

Page 3 of 5

Previous Page

Next Page