 |  |
| |
On this page, we'll create a photo slideshow movieclip to put into the site structure we set up on the previous page, and then modify it to be controllable by a button, as shown in the photos section of our sample website.
Open sitesample1.fla (made on the previous page, or available via link at right under Files) and save it as sitesample2.fla. Now (also) open flowershow.fla (that you made on the motion tweens page, or get it via the link at right under Files). We'll convert the content of that movie to a movieclip to use in our sample website. Select all frames and all layers of flowershow.fla (by click-dragging through all), right-click and choose Copy Frames. Go back to sitesample2.fla and choose Insert, New Symbol -- choose Movieclip and name it slideshow. Flash will then display the timeline of the newly created slideshow movieclip and you can paste content into it by right-clicking frame 1 and choosing Paste Frames, as shown below:
Click Scene1 at the upper left of the stage to return to sitesample2.fla's main timeline. Add a slideshow layer above the intro text layer, make a keyframe in frame 53, and drag a copy of the slideshow movieclip out of the library onto the stage in that frame of the slideshow layer. It will be wider than the 360-pixel green area, so we'll add a mask layer above it. In the mask layer, make a keyframe in frame 53 and draw a rounded rectangle (rectangle tool, then click the round-corner option at the bottom of the tool bar and choose 5 pixels) within the green area space, above the slideshow movieclip. Right-click the layer and choose Mask to make the mask active. The final step in creating the photo section is to turn the photo content off once we leave the photo section, so right-click frame 63 of the mask layer and choose Insert Blank Keyframe. Do the same in the slideshow layer.
Choose Control, Test Movie and check to see if clicking the photos button makes the slideshow appear. It should look like a masked version of flowershow.fla, with each picture displayed for a short time and then transitioning to the next photo. You can close flowershow.fla now -- we only needed it to get our movieclip content from.
The photo slideshow is now displayed as a continuously loop of photo transitions. In this step, we'll edit the movieclip content to make it stop after each photo transition and wait for the user to click a button (which we'll add in the next step) to continue to the next photo. Unlock the mask and slideshow layers and hide the mask layer so you can edit the slideshow. Double-click the slideshow movieclip to edit it. Notice that the upper-left corner changed to show that you're now inside the slideshow movieclip, looking at its timeline, and that content in the main timeline is still visible but grayed out. This method of editing a movieclip, double-clicking it on stage, allows us to edit a movieclip within the context of the movie it is in.
We'll now delete all extra frames in the slideshow where a picture is just sitting on stage, and we'll add some stop actions, so that when the playhead is told to play (by a button we'll add), it will immediately go to the next photo transition, play it, and stop again. To start, click-drag to select all frames between 2 and 29, as shown in the picture below. Right-click and choose Remove Frames.
Repeat this step for frames 17-45, and so forth, til the timeline looks like this:
Then add an actions layer, put keyframes on frame 1 and at the end of each transition (except the last, because the movie will automatically loop around to frame 1 and stop there), and put a stop action in each keyframe:
Now we're done editing the movieclip. Click Scene1 to go back to the main movie. We have to give the slideshow movieclip an instance name to be able to talk to it with actionscript though. Click the slideshow movieclip on stage. In the Properties panel, enter slideshow_mc into the Instance Name box.
Now let's put in the button to control this movieclip. Add a new layer above the slideshow mask layer and call it slideshow button. Unhide the mask layer and lock the mask and slideshow layers. In the slideshow button layer, make a keyframe in frame 53, and drag a copy of the Next button from the library onto the stage, positioning it below the slideshow movieclip. Select the button and put this code on it:
on (release) {
slideshow_mc.play();
}
which will cause the playhead of the slideshow movieclip to advance through the next transition (and then stop) every time the button is clicked. Control, Test Movie to make sure it works. Finally, put a blank keyframe in frame 63 of the slideshow button layer so the Next button only shows while the user is in the photo section.
On the next page, we'll look at using static, input, and dynamic textfields to create the contact page.
Discussed on this page:
website structure with section content in keyframes, intro animation, navigation buttons
Files:
sitesample1.fla
In sitesample.zip, password required
flowershow.fla
In tweenandmask.zip, password required
Subscription:
A password may be obtained by subscription
An access password will be emailed to the address you specify within 24 hours of receipt of payment, and will remain active for 30 days thereafter. A list of all files currently available at the site may be viewed here.
