Adding User-Friendly Features


Now that you have a nice little slide show as a base, you can add a few additional features using your code knowledge from previous chapters. Many of these features either inform users of what is happening, allow them control, or simply add some fun visual effects to give the user feedback.

"Data Loading" Message

It can take a few seconds for the images to load and for the slide show to start. You don't have to keep end-users in the dark and risk that they'll give up on your slide show while they wait for the images to download to their systems. You can give users a message saying that data is loading. A simple way to handle this is to place a text field on the stage where the images will be displayed. When loaded in, the images cover it up.

User Controls: Pause, Start, Slow Down

While the slide show is running, users might want to pause the show and later restart it to get a longer look at one of the images. They might also like to speed up or slow down the playback.

Creating the Movie Clip Buttons

First, create the movie clip symbols that become the interactive elements that enable the end-user to control the slide show.

1.

Set up the movie clip buttons. To keep all the control interface elements organized, create one movie clip to hold them all and call it controls_mc. Create the controls_mc clip directly on the stage by drawing with the rectangle tool and then converting the shape to a symbol with upper-left registration and the Movie Clip behavior.

2.

Select the new symbol instance on the stage and give it an instance name of controls_mc in the Property inspector (see Figure 16.7).

Figure 16.7. Give an instance name to the instance of the controls_mc symbol on the stage.


3.

Double click the controls_mc instance to edit it and add a new layer for the stop_mc movie clip. To create this clip, draw a button shape, convert it to a symbol, again as a movie clip type, and name it stop_mc. Give the instance that is on the stage the same name (stop_mc) (see Figure 16.8) and return to the main timeline.

Figure 16.8. Create a stop_mc instance on a new layer inside the controls_mc symbol.


Attaching Button Code

Now you're ready to attach some code to the stop_mc clip.

1.

Open the Actions panel and go to the end of our existing code on the first frame of the main timeline. Create a comment header so that you can easily find this segment of code later on.

//- - - - - - - - - - - - - - - - // user control interface //- - - - - - - - - - - - - - - -


2.

Above the code area of the Actions panel, you can select from a number of buttons. For now, select the Insert Target Path button. A nifty panel comes up with all the named instances that are currently on the stage. You should see controls_mc with a plus sign next to it. If you click on the plus sign, you should see stop_mc listed. Select stop_mc and then click the OK button in the panel. Now take a look at the Actions panel, as shown in Figure 16.9. You now have the path to the stop_mc instance in the code.

Figure 16.9. You can use the Insert Target Path panel to insert the target path of the stop_mc instance into the Actions panel.


Tip

When working with movie clips that are on the stage at author-time, and you want to attach code to them programmatically, the Insert Target Path panel is a very useful tool and can help you avoid typo and path errors.

3.

Now that you have the target path for the stop_mc movie clip, it's time to attach to it a function that will be called when the user clicks in it:

this.controls_mc.stop_mc.onRelease = function(){     trace("stop slideshow"); }


4.

Test this out. You should see stop slideshow in the output panel every time you click on the stop_mc symbol (see Figure 16.10).

Figure 16.10. The output panel displays stop slideshow when the stop_mc instance is clicked.


5.

Create another movie clip in the controls movie clip, this time for the start function. Be sure to give the movie clip an instance name or it won't be available to ActionScript. Add the following code, which is similar that of to the stop_mc clip:

//- - - - - - - - - - - - - - - - - - - - - - // user control //- - - - - - - - - - - - - - - - - - - - - - this.controls_mc.stop_mc.onRelease = function(){     trace("stop slideshow"); } this.controls_mc.start_mc.onRelease = function(){     trace("start slideshow"); }


6.

Test this out. You should now get stop slideshow in the output panel when you click on stop_mc and start slideshow when you click on start_mc.

Defining Actions for the Event Handlers

Now that you know your event handlers are working for the basic user interface you're creating, you can start giving them some work to do.

1.

To stop the cycle of images displayed, you need to clear the setInterval function. Because the function is defined on the main timeline, you need to go up the hierarchy of symbols from the stop_mc clip for the path to myInterval:

this.controls_mc.stop_mc.onRelease = function(){     trace("stop slideshow");     clearInterval(this._parent._parent.myInterval); }


2.

To restart the slide show, use the following code:

this.controls_mc.start_mc.onRelease = function(){     trace("start slideshow");     var myPath = this._parent._parent;     myPath.myInterval = setInterval( myPath.cycleImages, myPath.my_time); }


3.

Now, if you just leave these functions as they are, the user could run into some very buggy behavior. You need to have only one button active at a time. You can accomplish this by adding a little code to each onRelease function.

this.controls_mc.stop_mc.onRelease = function(){     trace("stop button");     clearInterval(this._parent._parent.myInterval);     //disable this     this.enabled = false;     var myPath = this._parent._parent;     //enable the start_mc clip     myPath.controls_mc.start_mc.enabled = true; } this.controls_mc.start_mc.onRelease = function(){     trace("start slideshow");     var myPath = this._parent._parent;     myPath.myInterval = setInterval( myPath.cycleImages, myPath.my_time);     //disable this     this.enabled = false;     //enable the start_mc clip     myPath.controls_mc.stop_mc.enabled = true; }


Adding Visual Indicators to Interactive Elements

4.

This works great, but it can use a little polish. The user would benefit from a visual indication that the interface element is either active or inactive. You can accomplish this by changing the alpha, or transparency, value of the clips. The following bolded code sets the value to 100% alpha when they are active and 40% alpha when they are inactive:

this.controls_mc.stop_mc.onRelease = function(){     trace("stop button");     clearInterval(this._parent._parent.myInterval);     //disable this     this.enabled = false;     this._alpha = 40;     var myPath = this._parent._parent;     //enable the start_mc clip     myPath.controls_mc.start_mc.enabled = true;     myPath.controls_mc.start_mc._alpha = 100; } this.controls_mc.start_mc.onRelease = function(){     trace("start slideshow");     var myPath = this._parent._parent;     myPath.myInterval = setInterval( myPath.cycleImages, myPath.my_time);     //disable this     this.enabled = false;     this._alpha = 40;     //enable the stop_mc clip     myPath.controls_mc.stop_mc.enabled = true;     myPath.controls_mc.stop_mc._alpha = 100; }


5.

Now you need to set the initial state for the start_mc clip as disabled and with alpha set to 40%. Where you place this bit of code is up to you. I personally prefer to put all initialization-related code at the top of the ActionScript.

// initialize start_mc control element as disabled this.controls_mc.start_mc.enabled = false; this.controls_mc.start_mc._alpha = 40;


At this point, you have a slide show with some basic user control elements. Check out the book's web page and compare your source code with slideshow_4.fla. The next thing to examine is how you can apply one of the new filter effects.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net