Creating a Welcome Screen Using Tweening

I’m sure that many of us remember a show that was filmed back in the 1970’s called “The Brady Bunch.” With this show, one of the many visuals that come to mind when people think of “The Brady Bunch” is the opening credits where the family is divided into squares. This can easily be created and performed in a Flash document that you can publish on your website.

Step 1: Creating the Document:

When you have created a new Flash document, we will need to prepare the stage. For this tutorial, we will be using the default stage size; however, for effect, we will be changing the color of the stage to black. To do this, click on the Background button in the Properties Inspector that is located at the bottom of your Flash window. When the Background button has been clicked, select the color black from the color palette that will appear. The stage of your Flash document will now turn black.

Step 2: Importing The Images into The Library:

The images that we will be using in our Brady Bunch-like Flash document will need to be imported into Flash’s object inventory called the Library. To do this, select the Import to Library option from the File menu, and then choose the first file that you would like to import into your Flash document. Perform this step repeatedly for all of the images that you would like to use in this tutorial.

To open the Library (if it is not open already), select the Library option from the Window menu. The Library will now appear as shown below.

Step 3: Preparing The Stage & Layering:

In this step, we will be labeling the stage for the subject that our Brady-like presentation will be on. In this tutorial, the subject I will be using is “Modes of Transportation”; however, you may name your tutorial whatever you desire.

To label our presentation, select the Text Tool from the Toolbox on the left-hand side of the Flash window. After you have the Text Tool selected, create a text area in the middle of the stage and label it the name of your presentation (in this case, Modes of Transportation).

After you have labeled the stage, you are now ready to work with the images; however, we will need to create a new layer on the stage first. To do this, click on the Insert Layer button in the Timeline section of your Flash window. This will automatically create a new layer on top of the existing layer (Layer 1 and Layer 2).

Step 4: Handling the Images:

With Layer 2 from the Timeline selected, you are now ready to work with the images that we imported into the Library in Step 2. To give it the full Brady Bunch-like affect, the images will need to be placed off of the stage. To do this, drag the name of the item within the Library that you would like to use first and drag it to a place on the gray area off the stage. In this tutorial, I will be placing it on the left-hand side of the stage (as shown below).

After you have placed the object off the stage, we will need to convert it to a graphic for the tweening process that will happen later. To do this, with image that you placed off the stage selected, press your F8 key, and a Convert to Symbol window will appear. Within the Convert to Symbol window, please assign the following:

  • Name: Boat First
  • Behavior: Graphic

Depending the image that you use, the size may be too big for the area that you are working with. We will also need to resize the image for it to be small when it appears on the stage. To do resize the image, select the Free Transform Tool from the Toolbox.

After the Free Transform Tool has been selected, drag the corner cross hairs until the image is a small rectangle (as shown below).

Step 5: Tweening the Images

The image we are currently working with is now ready to be set in motion. To do this, we will be using a method called Tweening. To do this, with Layer 2 selected, select the 20th keyframe within the Timeline, and then press F6. This will copy the first keyframe and paste it through all of the keyframes between 2 and 20. Repeat this same step for Layer 1, so that it is also current with frame 20 as well. Your Timeline should look like the image shown below:

Select Layer 2 at keyframe 20 in the Timeline again, and then drag the image to the center of the stage. After the image has been dragged to the center of the stage, select one of the keyframes between 2 and 19 of Layer 2, and in the Properties Inspector, select “Motion” from the Tween drop-down list. After the motion tween has been applied to the layer, the keyframes between 1 and 20 will be a purple color with a line through them (as shown below).

Step 6: Resizing The Images with Tweening

We are now ready to resize the image and place it in its final location. To do this, select keyframe 30 in Layer 2 from the Timeline and then press the F6 key, which will create new key frames between 20 and 30. You will also need to do this for Layer 1 to make sure that it is current with Layer 2.

With keyframe 30 of Layer 2 selected in the Timeline, using the Free Transform Tool mentioned in Step 4, resize and place the image in the top-left corner (as shown below).

As mentioned in Step 5, we will need to apply tweening to our new section. To do this, select one of the keyframes between 20 and 30 on Layer 2, and then select “Motion” from the Tween option of the Properties Inspector.

Step 7: Introducing the Second Image

After you have completed the steps listed above, you are now ready to work with the second image you will be bringing onto the stage of your Brady Bunch-like Flash presentation. To do this, we will basically be repeating the steps described in Step 4; however, we will need to let the Timeline know when to arrange the image.

Within the Timeline, select the last keyframe of Layer 2 (in this tutorial, it will be keyframe 30), and then press the New Layer button (as described in Step 3). This will create Layer 3 in the Timeline and will start at keyframe 30. At keyframe 30, press your F6 key to assign a frame to the specific keyframe. Your timeline will now have three layers and look like the image below.

With keyframe 30 of Layer 3 select, drag the second image that you would like to introduce in your Flash production onto the stage. In this tutorial, I will be using an image of a car, and placing it on the right-hand side off of the stage.

After the image has been placed off of the stage, we will need to convert the image to a Graphic (as instructed in Step 4). To do this, with the second image you have placed off stage selected, press the F8 key to open the Convert to Symbol window, and assign the image the following parameters:

  • Name: Car Second
  • Behavior: Graphic

After you have assigned the above parameters in the Convert to Symbol window, press the “OK” button, and your image will now be ready for tweening.

Step 8: Handling & Tweening the Second Image

To get the image as small as the first image to introduce on the stage, we will need to use the Free Transform Tool again. Select the Free Transform Tool from the Toolbox, and resize the image to as small as the first image that you used. After you have made the image small, place the image off of the stage on the right-hand side.

We are now ready to tween the image. To do this, select keyframe 50 of Layer 3 within the Timeline and then press F6. You will also need to select keyframe 50 of all of the other layers as well and press F6 to make them all current in the Timeline.

With keyframe 30 of Layer 3 selected, move the second image you are using onto the middle of the stage (just like in Step 5).

To apply tweening, select one of the keyframes between frames 30 and 50 of Layer 3 in the Timeline, and then select “Motion” from the Tween list in the Properties Inspector. The new tweening will now be applied to this section of the timeline.

Step 9: Resizing and Placement of The Second Image

To finish the resizing and placement of the second image on the stage, select frame 60 of Layer 3 and then press F6. Repeat this action for the other two layers to make the Timeline current.

With frame 60 of Layer 3 selected, use the Free Transform Tool from the Toolbox to resize the second image as proportional with the first image (as shown below).

With the second image in the place that you would like it, select one of the keyframes between 50 and 60 on Layer 3, and then select “Motion” from the Tween menu on the Properties Inspector. Tweening will now be applied to the end of Layer 30, and your image will automatically resize.

Step 10: Testing your Tweening

With all of the tweening you have performed by following all of the steps listed above, you are now ready to test the first half of your Flash presentation. To do this, press your keyboard’s Enter key, and a preview of the tweening performed this far will be displayed for you.

If you are comfortable with the steps performed in this tutorial, you are now ready to finish the second half by intregrating the other two images into this Flash presentation. When doing this, please remember the following steps:

  • Always create a new layer when starting to use a new image and tweening section.
  • Always use “Motion” from the Tween menu selection in the Properties Inspector. The other option of “Shape” does not apply in this tutorial.
  • Always press F6 on other layers after performing it on the layer you are currently working on.

If you keep the above steps in mind, you will be able to create a successful Brady Bunch-like Flash presentation, and will look like the example that I have provided below:

Please be sure to leave any questions or comments about this tutuorial in the comments section below.

Published
Categorized as Tutorials

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment