voicemail 01

7/28/2019 VoiceMail 01

1/7

Business Desk Phone and VoiceMail System

A Flash Learning Module

By Paul Burtness

For CI 5363Fall 2004

Introduction

The purpose of this module is to show you how Flash ActionScript can be used to create or control virtually

every aspect of a complex Flash movie. In terms of the five-level learning schema used in CI 5363, there isvery little Level 1 Level 3 work in this module. Instead, this module poses a series of design problems and

uses ActionScript to solve those problems. Although much of the ActionScript used in this module is at Level 4

and Level 5, the code is relatively brief and very modular so it should be possible to follow it piece by piece andsee how it builds.

The finished Flash movie is a model of a typical business desk telephone and the voicemail system the phone

connects to. The movie is designed to be a reference/training tool that is available on an organizations intranetweb site. The movie has a set of menus that let the learner find and select a specific voicemail feature. The

move then shows how to perform the steps in that feature.

For each step in a voicemail feature:

the menu uses text to concisely describe the step

a narrator describes how to perform the step

the buttons on the phone respond as if they are being pushed in the proper sequence for the step

the automated voice of the voicemail system responds as it would in the real application.

After the steps have been performed, the learner can choose to:

replay the steps

go up a level in the menu system go to the main menu.

Work remaining to be done

The movie should have a practice function that allows the learner to perform the steps of a voicemail feature

and then receive feedback on how well the steps were performed. That practice function could be built on the

movie in this module, but there was not enough time in the semester to get that done. Also, members of the CI5363 class have made excellent suggestions for improvement, such as allowing the learner to pause during the

steps and repeat a single step, but those improvements have not been incorporated yet. Finally, only one feature

of the voicemail system has been programmed for the movie. Programming additional voicemail features

would involved time-consuming audio-visual production work that will be completed later to enable rolling thismovie out as a real training/reference tool.

Settings

This module was authored in Flash MX 2004 with Publish Settings set to Flash Player version 6 and

ActionScript version 1.0. Open a new Flash document. Set the stage dimensions to 750 px wide by 500 pxhigh, the background color to White, and the Frame rate to 30 fps. Save the document to your working

directory with a name like my-voicemail-01.fla. Save your work incrementally as you go (my-voicemail-

02.fla, etc).


2/7


3/7

Problem 1 Add a title to the movie and fade it up when the movie starts.

You can see the finished code for this problem in voicemail-01.fla but try to solve it step-by-step before looking

at the finished code.

The movie needs a title at the top of the stage. We could simply use the Text Tool to add this title, but lets

jump right in and start using ActionScript!

Step 1 Put the movie title in a variable.

Many things we do with ActionScript involve variables, so lets create a variable and use it to store the value ofthe movies title.

On the main timeline, create a layer and name it Variables and make sure it is the top layer. Click on frame 1

in that layer and then press F9 to open the Actions Frame pane. Enter the following:

// this variable holds the text for the movie titlevar movieTitle = "Business Desk Phone and VoiceMail System";

Step 2 Add a Text Field for the movie title.

Now, we want to create a Text Field for displaying the movie title.

On the main timeline, create another layer and name it Initialize because this is where the ActionScript thatinitially sets up the movie will be placed. Move that layer below the Variables layer. Click in frame 1 in that

layer and press F9 to open the Actions pane. Enter the following:

createTextField("movieTitle_txt", 1, 0, 0, 750, 30);movieTitle_txt.text = movieTitle;

Press Ctrl-F9 to view your work. Congratulations! Youve just used ActionScript to create a movie!

Step 3 Format the movie title.

Of course, that text needs some formatting: the font, the size, the alignment, and the color. To do this in

ActionScript, we need to create a TextFormat object. We are going to format a lot of text with TextFormat

objects, so lets put them in their own layer on the main timeline. Just below Variables, create a layer namedTextFormats and put the following into frame 1 of that layer:

// TextFormat objects used to apply formatting to text fieldsmovieTitle_fmt = new TextFormat();movieTitle_fmt.font = "Arial";

movieTitle_fmt.color = 0x000000; //blackmovieTitle_fmt.bold = true;movieTitle_fmt.size = 25;movieTitle_fmt.align = "center";

Then, in the Initialize layer, add a line of ActionScript code to use the TextFormat object:

createTextField("movieTitle_txt", 1, 0, 0, 750, 30);movieTitle_txt.text = movieTitle;movieTitle_txt.setTextFormat(movieTitle_fmt);

Press Ctrl-F9 to view your work.


4/7

Step 4 Put the Text Field code into a function.

Often we need to be able to control when a piece of code executes, or we may want to use that code over and

over. To do that, we place the code into a function. So, lets wrap the code that displays the movie title in afunction as follows:

function addMovieTitle(){

createTextField("movieTitle_txt", 1, 0, 0, 750, 30);movieTitle_txt.text = movieTitle;movieTitle_txt.setTextFormat(movieTitle_fmt);

}

To make the function run, we have to call it from a line of ActionScript. Create another layer on the main

timeline and name it Startup. Make this layer the bottom layer in the timeline. Add the following code:

// call functions that initialize the movieaddMovieTitle();

Press Ctrl-F9 to view your work. Now you have a formatted title for the movie, created in ActionScript.

Step 5 Add a fade up effect to the movie title.

We could stop here, but lets add an effect to the title. Lets fade it up so that it appears smoothly at the

beginning of the movie.

Flash Annoyances It seems that if you use ActionScript to add a Text Field as described above, you cannot

use ActionScript to change the _alpha of that Text Field. So, to fade the title up from transparent, we need to

use the following technique of putting a default Text Field in the Library. However, if you do that, you

cannot change the font in the Text Field or change the bold or italic. Arghhh!!!

Press Crtl-F8 to insert a new symbol. Name the new symbol textField_mc and make it a movie clip. Clickon Export for ActionScript and leave the Linkage Identifier as textField_mc. The dialog box should look as

follows:


5/7

Click OK to finish creating the new symbol.

Click on the Text Tool and draw a small Text Box near the 0,0 point of the new movie clip. Enter the words

default text in the box. Then set the properties of this Text Box to:

Make sure you set the instance name to textField_txt. Also, when you select a font for this Text Field, you

must use the same font in the movieTitle_fmt TextFormat object. Click on the Character button and set as

follows:


6/7

Click on the OK button. Then click on the main timeline to finish editing textField_mc.

Now, change your addMovieTitle() function code to the following:

function addMovieTitle() {//get the movie clip with a text field from the library//set the depth at a high number so that the title stays above other elementsattachMovie("textField_mc","movieTitle_mc",100000);

//set the position and size of the text fieldmovieTitle_mc._x = 0;movieTitle_mc._y = 0;movieTitle_mc.textField_txt._width = 750;movieTitle_mc.textField_txt._height = 30;//change the text in the text field to the titlemovieTitle_mc.textField_txt.text = movieTitle;//set the format of the textmovieTitle_mc.textField_txt.setTextFormat(movieTitle_fmt);//fade the text field up from totally transparentcreateEmptyMovieClip("processChanges_mc",0);processChanges_mc.onEnterFrame = function(){

if (alphaCount == undefined) {

alphaCount = 0;} else {

alphaCount += 10;}movieTitle_mc._alpha = alphaCount;if (movieTitle_mc._alpha>=100) {

removeMovieClip("processChanges_mc");}

}}

Lets look at the ActionScript that fades textField_mc up from totally transparent. For background on how todo this, seeActionScript Cookbookby Joey Lott, p. 175.


7/7

//fade the text field up from totally transparentcreateEmptyMovieClip("processChanges_mc",0);processChanges_mc.onEnterFrame = function(){

if (alphaCount == undefined) {alphaCount = 0;

} else {alphaCount += 10;

}movieTitle_mc._alpha = alphaCount;if (movieTitle_mc._alpha>=100) {

removeMovieClip("processChanges_mc");}

}

You might think that you could just create a loop that would increment the _alpha of movieTitle_mc from 0 to100 and that would fade the clip up. But that doesnt work. The appearance of the movie updates only as it

progresses from frame to frame at the fps rate. An ordinary loop simply increments the value up to 100 and

when the next frame displays, movieTitle_mc._alpha is already at 100.

The way to solve this problem is to add an empty movie clip to the main timeline and then add anonEnterFrame event handler to that empty movie clip. As the empty movie clip plays on the main timeline, at

the fps rate of the main movie, the code inside the event handler is executed. This code increments the _alphavalue of movieTitle_mc. When movieTitle_mc._alpha reaches 100, the empty movie clip is removed, along

with its event handler.

Press Ctrl-F9 to view your work.

Summary

This may seem like a lot of work to simply add a title to a movie, but you have already learned several

ActionScript techniques that will be used many times to complete this project.

Extensions

Think of other effects to use to bring the movie title onto the stage at the beginning of the movie

voicemail 01

Documents