Create a Flash CS4 Fading Banner Slideshow with linked images Tutorial

This Adobe Flash CS4 tutorial will teach you how to create a fade in and fade out banner slideshow for your websites. You will need to create seven images that will make up the slideshow images and import them into the Flash CS4 Library then add to the Flash animation document stage. You will then convert the images to symbols, add links to the symbols from the ActionScript Panel, create Motion Tweens for your individual image layers and adjust the Color Effect Alfa type at various point in the Timeline to create an image fade in and out effect.

   Open Adobe Flash and a a new file.

Open Flash then click on File > New or (Ctrl+N). In the New Document window, select Flash File (Action Script 3.0) and click on OK or (Enter). Go to Modify> Document (Ctrl+J) and adjust the Dimensions to the size of the Flash slideshow banner to the dimensions you desire. For this tutorial our dimensions are 928px (width) by 300px (height). You should make your images to match the diminutions of the Flash document.

   Importing your slideshow images.

Click File> Import> Import to Library. In the Import To Library file browser window, go to your image folder and double click your first image. Repeat these steps for all the rest of your images.

   Open the Library and add your first image to the Stage then Convert to a Symbol.

Window> Library (Ctrl+L). Drag your first image from the Library in to the Stage and click on the image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3). In the Properties panel, under "Position and Size"set both the "x" and "y" positions to 0.0. Click on the image in the Stage to activate it and then Modify> Convert To Symbol or hit (F8) In the "Convert to Symbol" dialog window, re-name your Symbol and select the Type... Name: slide-1 and Type: Movie Clip then click on OK or (Enter).

 Converting images/symbols into click able links

1. Convert an image to a symbol click F8 if you have not already.
2. Click the image/symbol to activate it.
3. Open the ActionScript Panel (Arrow upper right in Properties Panel) or click F9.
4. Click the actions Global Functions to open menus.
5. Click on Browser/Network.
6. Double click getURL.
7 Fill in the URL field to the right between the parenthesis. e.g.: getURL(http://www.infiniteewebdesign.com);

  Create a new layer in the timeline and drag the next image on to the Stage and set position then Convert to a Symbol.

Open the Timeline, Window> Timeline (Ctrl+Alt+T) In Layer 1, click on the "Diamond" under the "Eye" to hide the layer. then click on the "New Layer" icon in the lower left hand corner.

Then open the Library, Window> Library (Ctrl+L) and drag your next image (image 2) from the Library in to the Stage and click on the image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3). In the Properties panel, under "Position and Size"set both the "x" and "y" positions to 0.0 and hit enter on your keyboard. Click on the image in the Stage to activate it and then Modify> Convert To Symbol or hit (F8) In the "Convert to Symbol" dialog window, re-name your Symbol and select the Type... Name: slide-2 and Type: Movie Clip then click on OK or (Enter). Repeat these steps for all the rest of your images re-naming images slide-3, slide-4, slide-5 and so on.

  Creating Keyframes and adding Tween to the individual layers in the Timeline.

1. Make sure that all the layers are hidden except Layer 1 by clicking on the "Diamond" under the "Eye" column for each of the other Layers so the red "X" is displayed indicating that the layers are hidden and inactive.

2. Click on Layer 1 to activate it. . Click on Frame 140 and then for Windows, right click on Frame 140 and select "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 1 to activate it and then for Windows, right click between Frame 1 and 140 in the Layer 1 row of the Timeline and select, Create Motion Tween. For Mac, Insert> Motion Tween.

   Adding a Fade In and Fade Out effect by adjusting the Color Alpha.

1. Click on Frame 139 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 50% or type in 50 and hit enter on your keyboard. The image will fade to 50% white.

2. Click on Frame 140 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 0% or type in 0 and hit enter on your keyboard. The image will fade to white.

3. Click on Frame 135 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 99% or type in 99 and hit enter on your keyboard. The image will fade to 99% white.

Selecting "Color Effect" Alfa		Adjusting Alfa

   Repeat Adding Keyframe and Color Alpha to the other Layers by adding 140 Keyframes exponentially to each of the proceeding Layers.

1. Make sure that all the layers are hidden except Layer 2 by clicking on the "Diamond" under the "Eye" column for each of the other Layers so the red "X" is displayed indicating that the layers are hidden and inactive.

2. Click on Layer 2 to activate it. . Click on Frame 280 and then for Windows, left click on Frame 280 and click "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 2 to activate it. . Click on Frame 140 and then for Windows, left click on Frame 140 and click "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 2 to activate it and then for Windows, right click between Frame 1 and 280 in the Layer 2 row of the Timeline and select, Create Motion Tween. For Mac, Insert> Motion Tween.

3. In the Layer 2 row of the Timeline click on Frame 140, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 100% or type in 100. The image will be fully visible.

4. In the Layer 2 row of the Timeline click on Frame 280, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 0% or type in 0. The image will fade to white.

5. In the Layer 2 row of the Timeline click on Frame 279, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 50% or type in 50. The image will fade to 50% white.

6. In the Layer 2 row of the Timeline click on Frame 275, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 98 or 99% or type in 98 or 99. The image will fade slightly to 99% white.

   Hit Ctrl+Enter to view your animation.

   Repeat these steps with the remaining images and Layers.

  For Layer 3, "Insert Keyframes" at 210 and 420.

• Set Frame 210's Alfa to 100%
• Set Frame 420's Alfa to 0%
• Set Frame 439's Alfa to 50%
• Set Frame 435's Alfa to 99%

  For Layer 4, "Insert Keyframes" at 280 and 560.

• Set Frame 280's Alfa to 100%
• Set Frame 560's Alfa to 0%
• Set Frame 559's Alfa to 50%
• Set Frame 555's Alfa to 99%

  For Layer 5, "Insert Keyframes" at 350 and 700.

• Set Frame 350's Alfa to 100%
• Set Frame 700's Alfa to 0%
• Set Frame 699's Alfa to 50%
• Set Frame 695's Alfa to 99%

  For Layer 6, "Insert Keyframes" at 420 and 840.

• Set Frame 420's Alfa to 100%
• Set Frame 840's Alfa to 0%
• Set Frame 839's Alfa to 50%
• Set Frame 835's Alfa to 99%

  For Layer 7, "Insert Keyframes" at 490 and 980.

• Set Frame 490's Alfa to 100%
• Set Frame 980s Alfa to 0%
• Set Frame 979's Alfa to 50%
• Set Frame 975's Alfa to 99%

   Hit Ctrl+Enter to view your animation.

  Download complete source files...

Includes seven images and Flash file in .Zip format @ 2.48 MB