Hello, everyone, and welcome back to our Ohio media's video tutorial. This is another video tutorial in which we are going to play with image animations to create transition effects between the images. In short, we can say it is going to be an image slideshow with different styles of transition effects in Adobe Flash. Let us start with a new Flash file. Now, the first things we would need are the images for the transition effects. So go to File Menu, import to stage.

This gives you a choice to the folder path to open up the images whenever we have saved them. You can see that we have a total of 19 images here with the same naming style. So we don't have to select all of them together to open Just select the first image underscore 001 file and click to open or double click on that file. This pops up a question panel asking this file appears to be part of a sequence of images. Do you want to import all of the images in the sequence? Now, we want all the 19 images to be imported in sequence.

So we select Yes. So we can view here, all the 19 images imported and placed key by key on the timeline in the sequence. Let's synchronize the library before moving ahead with animation. Press Ctrl plus L to get the current Documents Library. We can see all the 19 images here as well. Create a folder here, naming it image and drag drop all 19 images into this folder.

Create another new folder as symbol. Now, we have to convert all these 19 images into symbols. So, select the first key image and press f8 out of the three types with the movie clip symbol and name it image underscore 001. Similarly, press f8 for arrest all the images and get them converted into the movie clip symbol with the same process. At the end we should be ready with total 19 symbols on the stage as well as in the library. When they are done, press Ctrl plus S to save your file Name transition and save it at your selected folder path.

Now, again, press Ctrl plus L to open the library, grab all the image symbols there and drop them into the symbol folder we have created earlier. Now we have a well synchronized library with two folders, one of all the 19 images, and another of 19 image symbols. Coming back to the timeline, select all 19 image keys all together and press Shift plus f6. To remove them all. The reason is, we will drag and place each image symbol on an individual layer from the library. This is the same process we did earlier for the image animation tutorial.

Open up the symbol folder in the library and drag drop the first image underscore z Do one symbol onstage press Control plus K to get the Align panel and center align the image to the stage. Also name this first layer the same as the image name, that is, image underscore 001. At every stage, we are keeping the image identity the same. Now, we will start with the actual animation part with the first image symbol. Extend the frames till 50. Press f6 and insert a new keyframe at frame number 10.

At the same time, right click and assign motion tween between first and second keyframes. Select the image on the first key and open the Properties panel. From the colors drop down menu, select the alpha option and set its value to zero in the timeline, add another layer as Image underscore 002 from the library, drag and drop the image underscore 00 to symbol on the 40th frame of the second layer. also align it center of the stage and extend it with a few frames. insert a new keyframe at the 58 frame and apply motion to in between these two keyframes. Here to set zero alpha to the image on the first key, extend the frame some more and press f7 to create a blank frame at frame number 50 of the first layer.

At this frame, the second image appears completely on the stage, which means the role of the first image ends up there. From the start, we can see that the first image appears on the stage from zero and then after some time duration, the second image appears at the same time. Location merging of the images takes place with the alpha value. Now, on the second layer, create new keyframes at frame number 90 and hundred also apply motion tween between these keyframes. Hold the image on the hundred frame and shifted to the left off screen as seen in the video. even apply the zero alpha value to the image.

Add another layer three and name it image underscore 003 on its 98 frame drag and drop the image underscore 003 symbol on the stage get it center aligned to the stage. By default, it will be placed on the earlier image. For this new image create keyframe at the hundred frame and assign motion tween between Becky's on this First frame shift the third image upwards off screen also said the zero alpha value to it. The earlier image exits towards the left and at the same time the next image enters from about the screen. Let's add the image transition timing. Duplicate the second key and place it on frame number 96. added another key at 98.

On this third key, we shift the image slightly upwards. Add some of the frames between the keys. Now the third image appears and gives a slight bounce effect before settling down. Press Control plus Enter to preview the transition effect until now. Coming back to the timeline. add another layer as image underscore 004 Extend the frames till we need them and add a new blank keyframe at the one 30th frame.

At this frame, get the image underscore 00 for symbol from the library center align it to the stage using the Align panel. As all the images are of same sizes, they get placed on each other properly. Extend some more frames for a new image action. We added a new key at the hundred and 48 frame and created motion to in between both the keys. On the first key shift the image to the right off screen and also give it the alpha value zero. Now create keyframes at same hundred and 38 and 148 frame numbers on the third layer.

Right click and create motion to in shift this image on the 148 frame of the third layer to at right Off screen. also set the zero alpha value to it, you can observe how the image transition is exactly taking place. You can even play with ease in or ease out values to vary the motion speed. insert a blank keyframe next to the last keyframe of layer number three. As that image won't be needed further, let's add a new layer for image 005. We need to drag the next image symbol on the 178 frame.

So insert a new blank keyframe there, and also a new keyframe on the previous layer at the same location. add one more keyframe on the hundred and 80 at frame number and a blank keyframe at the hundred and 81st frame. Instead of alpha choose the option of advanced in color For this 188 frame, click on the Settings button besides it. In advanced effects, we get more color control options, including alpha. Here completely reduced down the value for green and alpha. Exit and right click to the apply motion tween between these keys, you can view the action happening differently.

Now, move to the new layer and drag image underscore 005 symbol from the library. Open the Align panel and center align it to the stage area. Press f6 on the 188 frame number to create a new key frame. Pick the first key of this layer and choose advanced options from the colors drop down menu. Click and open the settings panel for it for this one to completely reduce down the green and alpha values. to minus 255.

That means the same color effect is used for the previous layers last key and the current layers first key, create motion tween here and view the actual transition with advanced effects. Time to add one more layer, name it image underscore 006. Extend the frames and add new keyframes on previous layer at the 200 and 10th and 216 position. For every image, there is animation on both ends of its layer. The first keys animation is to appear the image on stage and the last keys animation is to disappear the image. For this one, we will use a different effect.

Go to Window properties, filters keep selected the 200 and 16th frame and click on the plus Sign here in the Filters panel. Out of this entire drop down options, choose edges colors, we see some more options available to play with. Set the values as per your choice. Create motion tween between the keyframes here. See how the image is converting its color properties as per our selected filter options. In the same layer, add one more keyframe at 225 and set zero alpha value for it to disappear totally create motion tween here as well.

Using the right click. Now, on a new layer, get a blank keyframe at the 200 and 10th frame and drag the image underscore 006 symbol from the library. Get center aligned to this stage, add a new keyframe at frame 220. And on this key, open the same adjust color option from the Filters panel. Set the values for this too, as we did earlier. Apply zero alpha to the image on the first key of this layer.

Right click and apply the motion tween between the keys. Add a third keyframe on the 220 fifth frame and here to assign motion twin. For this third key, we want our original image to be displayed. So open the filters option again and reset the Adjust color values. Now, take a look at the new transition effect done using this filter. Extend the frames and add a blank keyframe next To the last keyframe of the previous layer.

So for this different transition, we have used filters along with the alpha values. Let's get another new layer image underscore 007. Press Ctrl plus L to open the library and on this 260 frame, drag the image underscore 007 symbol. also align it center of the stage using the Align panel. Now, on the previous image underscore 006 layer, create two more keyframes at 260 and 250. Just after that, add one blank keyframe next to the 260 at frame number, right click and create motion tween between these last keyframes of this layer.

Hide the topmost layer to choose the image on the 268 frame number of previous layer Here, go to the colors drop down menu in the Properties panel and choose the brightness option. We reduce the brightness value to the lowest and picture turn to black. Now, on the top layer, add a new keyframe at 270 and create motion tween between these two keys. add one more layer of image underscore 008 in the timeline and on the 298 frame number, add a blank keyframe. On this frame, drag the image underscore 008 symbol from the library on the stage. Also get it centered aligned to the stage on the previous that is image underscore 007. layer, press f7 to add a blank keyframe at 301 on the same 300 and first frame number, add a new keyframe on the image underscore 008 layer for the first keyframe of this layer, get the Filters panel from Windows properties, and click on the plus sign to pick blur option from its drop down menu.

Set the quality to high and blur x y values to 80. You can see the changes in the image above. Now, on the previous layer, add new keyframes at 290 and 300. Hide the top layer to pick the image on the last key of this second last layer. For this, apply the same blur filter. set its quality to high end blur x y values to a tee apply motion to in between The keys have both the layers, we applied the same blur filter with the same values to both the images.

Only. The difference is, this blur effect is on the last key of the image underscore 007 layer and for the image underscore 008 layer, it's on the first game, apply zero alpha to the first key of the top layer and to the last key of the previous layer. We can see how the different filters and properties work out with the different effects output. Moving ahead, add two new layers here named the first as image underscore 009. And second as image underscore 009 underscore mask. You must have understood that now we are going to view an effect other than filter and alpha properties of the image transition which is called All as the mask effect for both new layers, add a blank