|
Tip: Throughout this tutorial, Keyboard shortcuts are displayed in parenthesis ( ). eg: (Ctrl+N) = Open new file.
Open Adobe Flash and 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).
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.
Fig. 1 - Creating a new layer in timeline
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.
Fig. 2 - Viewing layers
2. Click on Layer 1 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 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.
Fig. 3 - Creating 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.
Fig. 4 - Selecting color effect alpha
Fig. 5 - Adjusting alpha value
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:
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.
Tip: To easily create another banner from fla slideshow, duplicate the one you just made and simply replace the images. To do this...
1. Copy your Flash banner and rename it. Open in Flash and Import new images.
2. Click File> Import> Import to Library. Find your new image and double click it. In the Resolve Library Conflict window, select "Replace existing items"
|
