Creating a Product Demo: What is a Demo?

One of the hottest areas of Flash work is creating product demos, or "demonstration pieces." In general, a demo is an interactive movie meant to show off the attributes or qualities of some product, often a computer program or game. (Game demos tend to be actual levels of a game, probably written in C or C++.) Increasingly, businesses of all types have turned to Web-based demos to show off their products.

The structure of a product demo movie is similar to that of a Web site, in that there are buttons that allow a user to play various other movies inside it.

Using ActionScript's loadMovie() Method

We'll be using ActionScript's loadMovie() method. It does pretty much what it says: it loads one movie inside another.

IN-CLASS EXERCISE:

You are given an FLA file that has 3 buttons in it, pre-positioned and ready to go. In the same folder, you will find 3 SWFs.

The assignment is to create an empty target movie clip, then program the 3 buttons to load the 3 SWFs one-at-a-time into the empty clip. The result is that your movie will play the 3 SWFs from outside itself. You will also make a frame on which the buttons will sit with a window that shows the SWFs behind it.

1) Download the folder Netshare > Interactive > bocek_MM210 > inclass_LoadMovie to your local machine, into your own folder (NOT INTO YOUR FOLDER ON NETSHARE). Inside, find the FLA file "LoadMovie.fla". Call this the "Master SWF". It looks like what's below; buttons, but nothing is hooked up. It's stage dimensions are the default 550 x 400 pixels.

NOTE: Creating four SWFs that fit together means that they must be able to "find" one another. Having the Master SWF and Slave SWFs in one folder is essential (unless you create a careful path). Most errors that have to be fixed in this assignment come directly out of creating files that can't find one another.

2) You'll also find three SWFs, which you won't have to do a thing with. They're there just to act as examples of external SWFs that you can load. They're nothing fancy, just simple little movies that show that they are playing a timeline. FYI, they look like this, and their dimensions are 350 x 255 pixels, like all the movies you've made in class so far (you may susbstitute your pieces).

Call these three smaller SWFs, which will load into the Master SWF, "Slave SWFs".

3) In the loadMovie.fla, note that the main timeline only plays on one frame; this is all you'll need.

Making an Empty Clip to Holding Loaded Movies

4) Go Insert > New Symbol > Movie Clip ; name your new clip "targetclip_mc. On hitting "OK", you'll immediately be taken inside the new clip. Note that there's nothing in it: this is just what you want. Go back to Scene One .

5) Create a new layer, call it "target mc", and select its keyframe. Open the Library (command+L or F11), locate "targetclip_mc, and drag it to the stage. Since it's empty, all you'll see is a little bubble-like thing that marks its "registration point" (a registration point is the point that is used by Flash to describe where the thing is).

6) Very important! Select the empty clip, then go to the Properties Window and name the instance! Any ActionScript we write depends on the instance being named; otherwise, it's just another nameless copy of the clip from the Library. Name the instance just "target_clip" so it has a slightly different name than its parent object.

7) Move the "target mc" layer to the bottom of the stack; this will make the buttons and the frame we're going to make play on top of any clip we load. Makes easy sense.

Coding the Buttons to Load External SWFs

8) Select the first button marked "clip 1", and open the Actions Panel (Windows > Development Panels > Actions); at the top of the panel it MUST read "Actions - Button"; if it doesn't you won't be putting script on your button but on the frame the button is in.

9) OK, down to business: write this code in the Panel:

on (release) {
_root.target_clip.loadMovie("clip_1.swf");
}

It's like your other button scripts: "on" tells the button to wait for an event and what's in the parenthes is what the event will be, in this case "release", when the user's finger lifts off the mouse button. All the stuff in between the curly braces "{ }" is what is supposed to happen once the event is triggered; in this case, Flash is told to find the "_root", which is the main timeline, then find the object "target_clip" and tell it to load a move called "clip_1.swf". The instructions to Flash are separated with "dots", so we say that it's written with "dot syntax."

10) Repeat the procedure with the other two buttons, so that they load clips 2 and 3.

Positioning the Empty Clip on the Stage

11) Test the movie. When you push "clip 1" button, the first clip should load. Probably it's not playing in a good position.

12) In your movie "loadMovie.fla", drag the registration point of your "target_clip" instance to a place that looks good with the buttons -- the registration point is always at the upper left-hand corner of where the SWFs will play when they load. Test the movie again, moving the registration point till it looks good with the buttons.

Making a Frame to Show Off Your SWFs

13) OK, you've positioned your target clip so that the movie looks pretty good with the buttons when it plays. Now we'll mark the upper left-hand corner with guides, so we can begin the process of making a frame for our demo. First, if your rulers are not showing, go View > Rulers ; this should make calibrations appear at the top and left of your stage.

14) Click and drag guides from the top and left that cross on the target clip's registration point.

15) Now we'll make two layers that will build our frame; the first will cover the "hole" area we'll see through, and the second will cover the whole stage. So, first, make two layers beneath the buttons layers, otherwise, it will cover them up. No need to name the layers yet.

16) If you were making your own SWFs to load, you'd know their stage size. I'll just tell you how big the ones in this excercise are: they're 350 x 255 pixels. Obviously, if you're framing SWFs in your demo, the demo must be bigger than the loaded SWFs. The movie size of this example, as above, is 550 x 400 pixels.

17) Select the uppermost of your new layers. Fire up your rectangle tool in the tool palette, and turn off the stroke so it will just fill. Place the cursor right where the two guides come together, click and drag your rectangle to about the right size.

18) Select the new rectangle shape, and look in the Properties Panel for it's size. Type in the values "355" for width and "255" for height, and hit "return." Note that the shape resizes perfectly to make the SWF proportions from the registration point (yes!). This is your window shape.

19) Select the lower of your two new layers, and use the rectangle tool with a different fill color to draw a shape that covers the whole stage. This is your frame shape.

20) Go back to the uppermost new layer, and select the window shape, and delete (command+x).

21) Return to your lower layer, and "paste in place" (command+shift+v or Edit > Timeline > Paste in Place); the window shape is now on the same layer as the larger frame shape. Click back and forth between the two shape: this makes them one object!

22) The one layer is now empty; delete it by hitting the garbage can icon. Name the remaining layer "frame".

23) Click on the window shape section and delete: this should make a "hole" in the frame shape through which you will view the SWFs when they play.

24) Test the movie: you're done.

BELOW IS MY FINISHED SWF MADE AS ABOVE: