Images Macromedia Flash 8 - PART IV

Macromedia Flash 8
Adobe Flash Professional is used to create content for the Adobe Engagement Platform (such as web applications, games and movies, and content for mobile phones and other embedded devices). Macromedia Flash is an industry leading tool that
supplies its users with animations, presentations, and mind blowing websites, while doing this at a constant low bandwidth. This may get you to asking some questions.Flash is commonly used to create
animation, advertisements, various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications. Macromedia Flash player numbers indicate that it is used by more then 386 million people. This number translates to mean that if you have Flash in your website, over 97.4% of your online audience will be able to see it using the Macromedia Flash player.
Basic effects Photo Animation This tutorial will teach you how to create a modern photo animation in flash with no action script code. 1. First of all, you will require an image which we will be using for this tutorial. 2. Open a new flash document. Select Modify > Document (shortcut key: Ctrl + J). Set the width of your document to 426 pixels and the height to 447 pixels. Select any color as background color and set your Flash movie's frame rate to 28 fps. Then, click ok. 3. Choose File > Import > Import to Stage and Import my photo into a flash. 4. While the photo is still selected, go to the Align Panel (Ctrl + K) and do the following: 1. Make sure that the Align/Distribute to Stage button is turned on, 2. Click on the Align horizontal center button and 3. Click the Align vertical center button. Now you have aligned the photo with the background. 5. While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol. 6. After that, click on frame 20, 25 and press F6 key, and then, click on frame 90 and press F5 key. See the picture below. 7. Go back on frame 20, take the Selection Tool (V) and click once on the picture to select it. After that, go again to the Properties Panel (Ctrl + F3) below the stage. On the right, you will see the Color menu. Select Advanced , click on Settings button and make the adjustments as follows: 8. Right-click anywhere on the gray area between the frame 20 and frame 25 on the timeline and choose Create Motion Tween from the menu that appears. 9. Double click on layer 1 to rename its name in photo. After that, create a new layer above the photo layer and name it animation. 10. Lock photo layer, select the animation layer and take Rectangle Tool (R). Then, block the Stroke Color, for fill color, choose any color and draw a rectangle about 426x447px. While the rectangle is still selected, repeat step 4. 11. After that, while the rectangle that you just created is still selected, go to the Color Mixer Panel (Shortcut key: Shift + F9) and choose the following options: 1. Click on the paint bucket icon to select the Fill color. 2. Choose Linear as Type. 3. Click on the small color rectangle that is on the left side and set its color to #6188CD. Alpha property set to100 % 4. Click on the small color rectangle that is on the right side and set its color to #BFD5EA Alpha property set to100 %. 5. Create a new small color rectangle and place it on the center of color scale. Then, set its color to #FFFFFF. Alpha property set to 100 %. Now, you have this: 12. Click on frame 10 of layer animation and press F6 key. Then, Take the Free Transform Tool (Q) press and hold down Alt + Shift key and do the following: 13. Go back on the first frame of layer animation and go again to the Properties Panel (Ctrl + F3) below the stage. On the left side, you will see Tween drop down menu. Choose shape on it. See the picture below. 14. Click on frame 11 and press F6 key. After that, while the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol. 15. Click on frame 15 and press F6 key. After that, take the Selection Tool (V) and click once on the rectangle to select it. Then, go to the Properties Panel (Ctrl + F3) below the stage. On the right, you will see the Color menu. Select Brightens in it and put it down to 44%.See the picture below. 16. Click on frame 20 and press again F6 key. Then, take again the Selection Tool (V) and click once on the rectangle to select it again. Then, go to the Properties Panel (Ctrl + F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 84%. 17. Click on frame 25 and press F6 key. Then, repeat the previous step, but for this time, put the Alpha down to 62%. 18. Click on frame 35 and press again F6 key. After that, repeat again the previous step, but for this time put the Alpha down to 0%. See the picture below. 19. Choose right-click anywhere on the gray area between the frame 11 and 15 frame 15 and 20, frame 20 and 25 and frame 25 and 35 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below. 20. We're done! Test your Movie (Ctrl + Enter). For Animated Presentation Click here Basic effects Bouncing Ball 1. First you need to make a round ball. Select the oval too, and make a ball of your choice. Remember to hold down the shift key while drawing the "perfect circle". You can use solid colors, or to make the animation fancier, you can use a gradient. 2. Select the ball and go to Insert menu> Convert to Symbol. Name the circle whatever you please and make sure the behavior is Movie Clip. 3. Make three key frames, each 10 instances apart. Each key frame should have the ball in the same position at this point. 4. Select the tenth key frame. Now select the ball. Hold the shift key and drag it down to the desired position 5. Select the ball at the tenth key frame and resize it. Squish it down a little by selecting the scale option in the arrow tool. 6. Now select the 1st keyframe and go to Frame Properties > Tweening. Select the motion tween. Now make the easing in -100. Now select the tenth key frame and make the easing out 100. 7. To see your animation simply press Ctrl + Enter or Control > Test Movie. 8. Note:- You can increase the speed of the movie in the Movie Properties menu by increasing the fps. Advanced Flash Effects Adding Timeline Effects:- 1. Timeline effects are pre-defined effects by Flash with some parameters to make it more precise. 2. There are three types of timeline effects you can choose from – Assistants, Effects, and Transform/Transition. 3. Let us see all the effects one by one. In the Assistants effect you will find two sub effects namely Copy to Grid, Distribute duplicate. 4. Let us see the first effect i.e. the Copy to Grid effect. 5. The copy to grid effect lets you duplicate a selected object by the number of columns and then multiplies the columns by the number of rows to create a grid of the elements. The Copy to Grid lets you copy one element multiple number of times in a vertical columns and horizontal rows type. So when you click on copy to grid effect you will get a big dialog box opened up. • The grid size is where you apply the number of rows and columns you want. • The grid spacing is the space you want to apply between the elements. 6. Thus after applying the same values that I have given in the diagram above, you will get the following image on the stage. 7. If you want to break apart any effect just press Ctrl + B once. 8. Now let us try out the next effect i.e. the Distribute Duplicate effect. 9. The Distribute Duplicate helps you making duplicates of an element and placing them on the stage with different tint or sizes. Duplicates a selected object the number of times entered in the settings. The first element is a copy of the original object. The objects are modified in increments until the final object reflects the parameters entered in the settings. • In this effect you can give the number of copies you want. • The offset distance X/Y pixels are the distance you want for the duplicate elements on the X and Y axis. • Offset rotation is the degree at which you want the duplicates to rotate. • You can also give the offset start frame i.e. the point where you want your frame rate to start from. • Then you can give the exponential scaling percentage. This will scale all the duplicates to the given amount. • The final color is the color of the last duplicate element. To activate it you have check the change color check box. If you select a different color from the original element, then you will have a smooth transition from the original element color to the last duplicate element color. • You can also give the final alpha i.e. the alpha of the last duplicate element. This way you can make an effect of fading off. 10. Thus after applying the same values that I have given in the diagram above, you will get the following image on the stage. 11. Now let us try the second type of timeline effects. 12. In this effect you will have four further effects. Let us look at the first effect i.e. the Blur effect. 13. It creates a motion blur effect by changing the alpha value, position, or scale of an object over time. • In the effect duration you apply the number of frames you want the blur animation to play for. • Resolution is the number of times you want the element to be duplicated. More the resolution value more you will duplicate elements with different tint to have a smooth gradient transition. • In scale you can apply a scaling percentage. This will scale all the duplicates to the given amount. • ‘Allow Horizontal Blur’ and ‘Allow Vertical Blur’ helps you to direction the scaling of your duplicate elements. It allows you to scale your elements horizontally and vertically respectively. If you select both it will scale from both directions i.e. both Horizontally and Vertically. • Then you also have the direction of movement that lets you direct the scaling of your duplicate elements to your desired direction. 14. Thus after applying the same values that I have given in the diagram above, you will get an animation on the stage and the following image will appear on the stage at the starting of the animation. 15. Now let’s try the drop shadow effect. The drop shadow effect simply creates a shadow below the selected element. 16. When you click on drop shadow effect, a dialog box will appear with few parameters for applying drop shadow to your element. • The color selector is the color of the shadow for your element. • Alpha transparency or the sliding bar beneath it does the same work. It lets you set an alpha/transparency percentage to your shadow. • Then finally you have the shadow offset which lets you place your shadow anywhere according to the X and Y axis. 17. Thus after applying the same values that I have given in the diagram above, you will get an animation on the stage and the following image will appear on the stage at the starting of the animation. 18. Lets Try the next effect i.e. the expand effect. It expands, contracts, or expands and contracts elements over time. This effect works only with two or more objects grouped together or combined in a movie clip or graphic symbol or objects containing text or letters work with this effect. 19. When you click on expand effect, a dialog box will appear with few parameters for applying the expand effect to your element. • In the effect duration you apply the number of frames you want the Transition effect to play for. • Then again you are given two sub effects - Squeeze and Expand. Squeeze squeezes your element whereas expand expands your element. You can also have a combination of both. It will first expand then squeeze it. • You can also specify the direction for the expansion/squeezing effect by just selecting the particular direction arrow key. • You can also shift the center of the element by specifying the X/Y values in the ‘Shift Group Center by’ textbox. • Fragment Offset helps you change the offset of your element. • If you want the final size to be changed just specify a height and width amount in the ‘Change Fragment Size by’ text boxes. 20. Lets now try the explode effect. The explode effect gives you an illusion of an object exploding. Now let us try the explode effect to understand it better. 21. When you click on explode effect, a dialog box will appear with a few parameters for applying explode effect to element. • In the effect duration you apply the number of frames you want the exploding effect to play for. • You can also set the direction of the explosion by just selecting that particular direction arrow key. • In the Arc Size you can give the Height and Width for the explosion of your element. • You can also apply a rotation value for the explosion by entering a rotation value in the ‘rotate fragments by’ text box. • If you want to change the final size of the element after the explosion, you just have to give the value in the ‘change fragments size by’ text box. • You may also change the final alpha for the element after the explosion with the help of the sliding bar. 22. Now let’s try the final type of effects i.e. the Transform/Transition effect. Click on Transform effect. It adjusts the position, scale, rotation, alpha, and tint of the selected elements. Use Transform to apply a single effect or a combination of effects to create Fade In/Out, Fly In/Out, Grow/Shrink, and Spin Left/Right effects. 23. When you click on the transform effect, a dialog box will appear with a few parameters for applying the transform effect to the element. • In the effect duration you apply the number of frames you want the transformation effect to play for. • Then you get two options i.e. ‘Change position by’ and ‘Move to position’ with two text boxes for X and Y axis values. ‘Change position by’ helps you to move your element a specific number of pixels on X and Y axis based on the values supplied by you. It will start counting from the end of the object i.e. if you have an square/circle of 50x50 size and you want to move the element 50 pixels in X axis then it will start moving the object from the last edge of the object (that is 50 on the X axis) and after it finishes moving the object position of your object will be 100 pixels (that is 50+50). Same will work for in the Y axis. And if you apply both X and Y axis then it will move according to the corner between the two axis. ‘Move to position’ moves your element to a place according to the X and Y axis values you applied. But unlike ‘Change position by’ method which counts from the edge of the element this method counts pixels from the center of the element. And if you haven’t given any value for any of the axis, it will consider it as Zero (0). • You can also apply a scaling percentage to your element. • The Rotate and Spin work Hand-in-Hand. You change one, the other changes itself automatically. You can specify a rotation degree and also the direction. • The final color is the color of the last duplicate element. To activate it you have check the change color check box. If you select a different color from the original element, then you will have a smooth transition from the original element color to the last duplicate element color. • You can also give the final alpha i.e. the alpha of the last duplicate element. This way you can make an effect of fading off. • Motion ease is the speed of the animation. You can set it by sliding the slider bar to slow at start/fast in the end or slow in the end/fast at start. 24. Now let us look into the other type effect i.e. the transition effect. It Wipes in or wipes out selected objects by fading, wiping, or a combination of both. 25. When you click on the transition effect, a dialog box will appear with a few parameters for applying the transition effect to the element. • In the effect duration you apply the number of frames you want the Transition effect to play for. • It has two options i.e. in and out for the fading transition. They give a wiping in/fading in or wiping out/fading out effect respectively. • You may then select one of the two or maybe both of the transition effect i.e. Fade and Wipe. • You can set the direction of the transition by just selecting that particular direction arrow key. • Motion ease is the speed of the animation. You can set it by sliding the slider bar to slow at start/fast in the end or slow in the end/fast at start. 26. Now that you have gone through all off the effects, you may want to remove or edit the effects. 27. Let’s see how you can edit an effect. Right-click on the element which has the effect applied to it. Then click on edit effect. You will see that the very same effect dialog box will be opened from where you applied the effect. You may do all the changes and then pressOK. All the changes will be applied. 28. If you want to remove an effect from the element just right-click on the element which has the effect applied to it. Then click on Remove effect. The effect will be removed right away. Advanced Flash Effects Drawing a Car:- In this tutorial you will learn how to draw a nice, black car using vector drawing and gradients. We'll start by shaping the outline of our car. Do that by first grabbing the Rectangle Tool, and giving it the right look. Your drawing doesn't have to be exactly the same as the one below, though 2. In step two, insert a new layer and select the Line Tool to draw outlines of the car windows, doors, and others. As you can see, my drawing isn't very detailed, to be honest I don't advise making yours too detailed either. But you can do it if you want your car to look more creative. 3. Now that you've drawn the outlines, you should copy it to the layer our car is on -- only in that way we'll be able to select the windows. That shows one of the rules of how lines and fills behave in Flash. Namely that you can use lines to separate fills. In accordance with this, make sure that there is absolutely no gap! Once you've selected one of the windows, turn on the Color Mixer Panel (SHIFT + F9), and pick a white-to-black gradient. The end result should be: Select the Gradient Transform Tool to scale and place the gradient appropriately. I explain these tools thoroughly in this cheap video tutorial. 4. We'll draw a pair of headlights. Again, take the Rectangle Tool and shape the right and left headlights, then you can apply a gradient. Choose gray and white as the opposite colors. 5. In step 5, we'll add some some more detail to the car. Look at the images below: Draw shapes similar to these and fill them with a dark color. Also, remember to add a light color, so that our drawing looks more realistic. First of all, draw two shapes, situated one on the top of the other. With the Oval Tool, create yet another oval. Make sure, though, it's on a new layer. 8. This step is very important: we'll use a mask now. To create a mask for our tire, first insert a new layer and then copy and paste in place the oval we've drawn a sec ago. In the image below, the light blue color is the outline of the mask, so everything outside the mask, will be invisible to viewers. 9. Now, the most difficult part... 10. Draw this silver and apply a gradient to it. 12. Add lines to the shape with the Line Tool. 13. Go to Modify->Shapes-> Convert Lines to Fills, and use the same gradient to color them. 14. Use the Paint Bucket Tool to change the color of some of the fills. 15. Now we'll create a shadow. So, copy the whole shape to a new layer, change the color to black and lower the alpha to around 30%. Make sure that the layer is beneath, not above. After you're done, it's definitely a good idea to blur the shape using Filters, or - if you're working in Flash 7 and below - to go to Modify->Shape->Soften Fill Edges 16. Adding the tires is the last thing we should do. Before we do that, make two gaps in the places where the tires will be. 17. Finally, insert another layer and place the tires there. Our car is almost finished! Actually, I'd suggest making the lines a bit darker. That's all. Advanced Flash Effects Frame by Frame animation:- 1. Frame by Frame animation can be applied to everything. Here we will show you a tutorial to write your name in a frame by frame animation. 2. Write your name in the first frame. I have imported a pencil image to show an effect of writing by a pencil. But remember to keep the pencil and the text in different layers. Convert the pencil into a symbol by pressing F8 (convert to symbol) and break apart your text (Ctrl + B * 2 i.e. press control and the letter B twice) so that its easy for you to delete it. 3. Now press shift and select the first frame. Now select the 60th frame without leaving the shift button. You will see that the frames get highlighted. Now press F6 (creates keyframes). Now in the first frame drag and position the pencil where you want the first letter to start showing. 4. Now delete all the text in the current frame. 5. Go to the next frame and move your pencil to a further position so that it gives and effect of writing and the letter showing. Now leaving some part of the letter delete the rest part. 6. Then again in then next frame move your pencil further more and again leaving some part of the first letter delete the rest. 7. Now when you have finished with one letter you have to move your pencil from the ending of the first letter to the beginning of the second letter. It will better if you give a little more frames in between them by pressing F5. And then give motion tween to it to make it a smooth movement. 8. In the same way do the above steps again for all the letters. But make sure you do it neatly. Your timeline will something like the timeline of this tutorial. Advanced Flash Effects Attaching Video 1. Flash doesn’t support all type of video files. Supported video formats are AVI, MPEG/MPG, MOV and WMV/ASF. 2. Import a video onto the stage by selecting Import Video in the import command in theFile menu. 3. Then select it and convert it into a movieclip. And give it an instance name movie_mc. 4. Then make a frame and place it under it. 5. Then you need to add 5 playback buttons i.e. previous frame, stop, play, pause and next frame. You can pick them up from the common button library. 6. Give all the playback buttons their instance name. • Previous button = prev_btn • Stop button = stop_btn • Play button = play_btn • Pause button = pause_btn • Next button = next_btn 7. Now double click the video movie clip and on the first frame press F9 i.e. open the actions palette. And write the following script over there. Stop(); 8. Now come back to the stage and make a new layer above all the layers and name it Actions layer and on its frame write the following ActionScript. play_btn.onPress = function() { movie_mc.play() } pause_btn.onPress = function() { movie_mc.stop() } stop_btn.onPress = function() { movie_mc.gotoAndStop(2) } next_btn.onPress = function() { movie_mc.nextFrame() } prev_btn.onPress = function() { movie_mc.prevFrame() } play_btn.onPress = function() { movie_mc.play() } pause_btn.onPress = function() { movie_mc.stop() } stop_btn.onPress = function() { movie_mc.gotoAndStop(2) } next_btn.onPress = function() { movie_mc.nextFrame() } prev_btn.onPress = function() { movie_mc.prevFrame() } Advanced Flash Effects Attaching Audio This tutorial will teach you how to add and play with the volume attached to your flash movie. You will learn how to make a volume bar and a panning bar which will control the volume of the movie and the panning i.e. movement of the volume from one ear to another respectively. We will be making this particular tutorial on the default flash document size i.e. 550 x 400 px. 1. First you will have to make a Volume sliding bar. To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. Give a heading of Volume above it and 100 and 0 just above the rectangle and below it respectively to make it look more realistic. 2. Then you need a bar for the sliding bar to slide on.To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. 3. Then you need to make the slider. To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. Convert the slider into a movie clip. And name the slider as ‘vol_mc’. 4. Now you have to make a Panning slider bar. To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. Give a heading of Panning below it and -100 and 100 at the left and at the right of the rectangle respectively to make it look more realistic. Place a zero (0) at the center also. 5. Then you need a bar for the sliding bar to slide on.To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. 6. Then you need to make the slider. To make that you need a rectangle of the following size. Make sure that the size i.e. the width, height and X and Y axis are the same as the values in the image below. Place the rectangle just the same as I have placed. Convert the slider into a movie clip. And name the slider ‘pan_mc’. 7. The final outcome after making and placing the two bars should be like this. 8. Then make two buttons for playing sound (start streaming) and stopping sound (stop streaming). Then name them ‘stream_btn’ and ‘stop_btn’ respectively. 9. In the same folder where you have saved this file copy a song (mp3 format) and name it REMIX.mp3. 10. Then make a new layer above these layers and name it Actions layer and on its frame write the following ActionScript. var soundHere:Sound = new Sound(); var hearPan:Object = new Object(); var hearVol:Object = new Object(); stream_btn.onPress = function() { soundHere.loadSound("REMIX.mp3", true); }; stop_btn.onPress = function() { soundHere.stop(); }; vol_mc.onPress = function() { this.startDrag(false, 102.1, 142, 102.1, 240); }; vol_mc.onRelease = function() { stopDrag(); }; hearVol.onMouseMove = function() { soundHere.setVolume(240-vol_mc._y); }; Mouse.addListener(hearVol); pan_mc.onPress = function() { this.startDrag(false, 200, 200.7, 392, 200.7); }; pan_mc.onRelease = function() { stopDrag(); }; hearPan.onMouseMove = function() { soundHere.setPan((pan_mc._x-296)*100/96); disp_txt.text=((pan_mc._x-296)*100/96); }; Mouse.addListener(hearPan); Advanced Flash Effects Blur Image Slideshow This tutorial will teach you how to create simple image slideshow using the blur filter. 1. This slideshow can be made with ‘n’ number of images. We will be only using 3 images. So therefore we will need 3 images to create this tutorial. Place all of the images in the same folder and name them img1, img2, img3. Also make sure all the images are of the same size. This size of the images should be set for the stage also. I have used the 3 images which are 200 x 140 size so my stage size also will be 200 x 140px. 2. Create a new flash document. Press Ctrl + J key on the keyboard (Document Properties) and set the width of your document to 200 pixels and the height to 140 pixels. Select white as background color. Set your Flash movie's frame rate to 28 and click ok. 3. Choose File > Import > Import to Library. Now give the show the path for the images. In the file explorer window that appears, find a three images (img1, img2 and img3) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl + L)you will see three images that you just imported. See the picture below. 4. Take the Selection Tool (V), and using the "drag and drop" technique, move the first image from the library on the stage. While the image is still selected, go to the Align Panel(Ctrl + K) and do the following: a) Make sure that the Align/Distribute to Stage button is turned on. b) Click on the Align horizontal center button and c) Click the Align vertical center button. 5. While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol. 6. Press the Ctrl button and then Click on frame 3, 5, 20, 23 and 25 and press F6 key. 7. Go back on frame 1 and place the image on the position like it is shown on the picture below. 8. After that, take the Selection Tool (V) and click once on the image to select it. Then, go to the Properties Panel (Ctrl + F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%. 9. Right-click anywhere on the gray area between the frame 1 and frame 3 on the timeline and choose Create Motion Tween from the menu that appears. 10. Click on frame 3, take the Selection Tool (V) and click again once on the image to select it. After that, go again to the Properties Panel (Ctrl + F3). Click on the Filters tab in the Properties Panel. Click on the plus icon and select the Blur filter. Make the adjustments as follows:- a) Blur X and Y : 8 b) Quality : Low 11. Right-click again anywhere on the gray area between the frame 3 and frame 5 on the timeline and choose Create Motion Tween from the menu that appears. 12. Click on frame 23 and place the image on this position: 13. While you're still on frame 23, repeat step 10. 14. Right-click again anywhere on the gray area between the frame 20 and 23 and frame 23 and 25 on the timeline and choose Create Motion Tween from the menu that appears. 15. Click on frame 25, place the image on the same position like we have placed it on step 12 and repeat step 8. 16. Double click on layer 1 to rename its name in image 1. Then, create a new layer above the image 1 layer and name it image 2. 17. Click on frame 25 and press F6 key. Then, move the second image (img2) from the Library on the stage. 18. While the image is still selected, go to the Align Panel (Ctrl + K) and do the following: a) Make sure that the Align/Distribute to Stage button is turned on. b) Click on the Align horizontal center button and c) Click the Align vertical center button. 19. While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol. 20. Click on frame 28, 30, 45, 48 and 50 and press F6 key. 21. Go back on frame 25 and place the image on this position: 22. While you're still on frame 25, repeat step 8. 23. Click on frame 28 and repeat step 10. 24. Right-click again anywhere on the gray area between the frame 25 and 28 and frame 28 and 30 on the timeline and choose Create Motion Tween from the menu that appears. 25. Click on frame 48 and place the image on the position like it is shown on the picture below. 26. While you're still on frame 28, repeat step 10. 27. Click on frame 50 and place the image on the position like we have placed it in step 25. Then, repeat step 8. 28. Right-click again anywhere on the gray area between the frame 45 and 48 and frame 48 and 50 on the timeline and choose Create Motion Tween from the menu that appears. We're done with two images. Repeat this process for every other image. 29. Then Test your movie by pressing Ctrl + Enter. For Animated Presentation Click here Advanced Flash Effects Simple Header effect:- This tutorial will teach you how to make simple flash header 1. Open a new flash document. Select Modify > Document (Ctrl + J). Set the width of your document to 430 pixels and the height to 148 pixels. Select any color as background color and set your Flash movie's frame rate to 32 fps. Then, click ok. 2. Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a “rectangle” about 140 x 140px. See the picture below. 3. While the rectangle is still selected, go to the Color Mixer Panel (Shift + F9) and choose the following options: 1. Click on the paint bucket icon to select the Fill color. 2. Choose Linear as Type. 3. Click on the small color rectangle that is on the left side and set its color to #157400. Alpha property set to100 % 4. Click on the small color rectangle that is on the right side and set its color to #8ED200. Alpha property set to100 %. Now, you have this: 4. It's time for a little trick. Take the Free Transform Tool (Q) and rotate the rectangle like it is shown on the picture below. 5. Take the Selection Tool (V) and click once on the rectangle to select it. After that, go to the Properties Panel (Ctrl + F3) below the stage. On the left side you will see Width (W) and Height (H) options. Then, for Width type 430px and for Height 148px. See the picture below. 6. While the rectangle, that you just enlarged is still selected, go to the Align Panel (Ctrl + K) and set the following options: 1.Make sure that the Align/Distribute to Stage button is turned on, 2.Click on the Align horizontal center button and 3.Click the Align vertical center button. Now, you have aligned the rectangle at the center with the background. See the picture below. Now, we have a gradient background that we will use for our header. 7. Double click on layer 1 to rename its name to background. 8. Create a new layer above the layer background and name it text. Select the Text Layer and take the Text Tool (T). Choose any font you like, any color and size, and type some text on the center of background. See the picture below. For this example I have used Verdana as font, size 43px. For the first color, I have used #CC3333 and for second color I have used white color. 9. Create a new layer above the text layer and name it animation. 10. Take the Rectangle Tool (R) again. In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color, choose any color and draw a rectangle about 50 x 300px like it is shown on the picture below. 11. After that, take the Subselection Tool (A) and do like it is shown on the picture below. 12. Then take the Selection Tool (V) and click once the shape that you just created to select it. After that, go to the Color Mixer Panel again (Shift + F9) and choose the following options: 1. Click on the paint bucket icon to select the Fill color. 2. Choose Linear as Type. 3. Click on the small color rectangle that is on the left side and set its color to #1E8F01. Alpha property set to100 % 4. Click on the small color rectangle that is on the right side and set its color to #B7FD13. Alpha property set to100 %. Now, you have this: 13. While the shape is still selected, press F8 key (Convert to Symbol) to convert this shape into a Movie Clip Symbol. 14. Take the Free Transform Tool (Q) and select the shape again. After that, move the central point to the bottom of shape. See the picture below. 15. While the shape is still selected, press Ctrl + C key (Copy) and after that Ctrl + Shift + V key (Paste in Place).Then, do like it is shown on the picture below. Repeat this process until you get this: 16. Take the Selection Tool (V) and click once on animation layer to select the all shapes. See the picture below. After that, press F8 key (Convert to Symbol) to convert this all shapes into a Movie Clip Symbol. 17. Take the Selection Tool (V) and click once on the new made Movie Clip to select it. After that, go to the Properties Panel (Ctrl + F3) below the stage again. On the right, you will see the Color menu. Select Alpha in it and put it down to 25%. 18. After that, place the shapes on the position like it is shown on the picture below using the arrows key or by mouse. 19. Click on frame 700 of layer animation and press F6 key. After that, go back on the first frame and go to the Properties Panel (Ctrl + F3) below the stage. On the Left side for Tween drop down menu choose Motion, for Ease set 0 and for Rotate choose CW. See the picture below. 20. Click on frame 700 of layer text and background and press F5 key. 21. We're done! Test your Movie (Ctrl + Enter). Advanced Flash Effects Circular Ripple Effect in Flash This tutorial will explain how to create a circular Ripple effect. 1. Import an image to your work area upon which you would like to create ripple effect. Press F8, to convert this image to a symbol. Name this Symbol "girl_gr" and choose graphic behavior. Press OK. Name this Layer "bg". Select girl_gr and choose Alpha 99% from color list box in your property panel. 2. Create a Movie clip. Press Ctrl + F8, to create Ripple movie clip. Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK. Drag girl_gr to your working area from Library (Ctrl + L). Select girl_gr and choose Alpha 0% from color list box in your property panel. Insert Keyframe (F6) into the 5th frame. Still remaining on the 5th frame, select girl_gr and choose Alpha 99% from color list box in your property window. Now select 1st frame, choose Motion Tween from Tween list box in your property window. Insert Keyframe into 15th frame and later to 20th frame. Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your property window. Select 15th frame, choose Motion Tween from Tween list box in your property window. Now go to frame 5 and reduce the size of girl_gr, maybe by 5 px width and height. Go to frame 20 and increase the size of girl_gr, maybe by 5 px width and height. Insert a new layer above the current layer, call it "Layer 2". 3. Draw a black circle in a layer and delete its border. Insert a layer above the black circle layer. Draw a smaller white circle in this new layer and delete its border. Position the white circle such that it is right at the center of the black circle. Now, cut the white circle and paste it (Ctrl + Shift + V) in the black circle layer. Click somewhere outside (this will deselect either of the circles). Now click on the white circle and delete it. Your circle will look something like the one shown below. 4. Place this circle right at the center of girl_gr but make sure that this circle resides in Layer 2. Insert Keyframe (F6) into the 20th frame of Layer 2. Remaining in 20th frame Increase the size of the circle. Now go back to 1st frame, choose Shape Tween from Tween list box in your property window. Right click on Layer 2 and select Mask. Insert Ripple Movie Clip onto Scene 1. 5. Now go back to scene 1. Insert a new layer above bg layer and call it ripple1. Drag ripple_mc movie clip onto the work area. Place it right at the center, just the way you placed the circle in ripple_mc Movie clip. Insert frame (F5) into the 20th frame of ripple1 layer. This is just to make sure that the ripple_mc runs only for 20 frames. Insert frame (F5) into the 30th frame of bg layer. 6. Inserting one ripple_mc Movie clip is sufficient if your picture is approximately the size of the picture as shown in the demonstration. If your picture is really big, you might have to insert more than 1 layer of ripple_mc movie clip. See to that the difference between the appearances of each movie clip is 5 frames. Actually the difference basically depends on the type of effect you want. So you can adjust it the way you want. 7. Your movie is ready. Press Ctrl + Enter to run your movie. Advanced Flash Effects Sparkling Glass Effect in Flash This tutorial will teach you how to create a sparkling effect or twinkling star effect. 1. Open a new file. Go to Modify > Document to give a file size of 180 px by 400 px. This is the same size as the Bitmap picture we have. Select the Bitmap picture which you want to put as background to show the sparkle effect. Bring it to the Flash Library by clicking on Select File > Import to Library from the Menu Bar. Go to Window > Library. Drag the picture just imported from the Library to the Stage. This will be your first layer, name it background. 2. Create a new layer. Name it sparkle. Go to Insert > New Symbol. The New symbol screen will appear. Name this movie clip 'star_mc'. Click OK. You will be directed inside the movie clip. Now select the PolyStar Tool. Go to the Properties Inspector. Go to Options. A screen called Tool Settings will appear. Enter these values and click OK: Style: Star Number of sides: 4. Star Point Size: 0.10. 3. Now draw the Star (without a stroke color). Make the star into a movie clip entitled star_mc. Now double click on it. On frame 1 you will see your star. Go to Properties Inspector > Tween. Select Motion from the drop down Menu. Name it as star_in_mc. Go to frame 10. Press F6 to insert a new keyframe. Select the star and go to Modify Menu > Transform > Rotate CW. Repeat Modify Menu > Transform > Rotate CW thrice. Your rotating Star movie Clip is ready. You will see it in the Library Window also. This movie clip star_mc will not be there in the sparkle layer but stored in the Library, we will use it later. 4. Create a movie clip with a small opaque circle that increases in size and becomes almost transparent. For that draw a circle with Oval Tool, choose the fill color as white and make it 2 px by 2 px. Go to Modify > Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as shade_mc. Select Movie Clip. Click on OK. Double click on it. You will be inside the Movie clip and in your first frame you will see the dot. Select it. Go to Modify Menu > Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as shade_in_mc. Go to Frame5. Press F6 to insert keyframe. Go to Properties Inspector/Panel > Tween. Select Motion from the drop down Menu. Go to Frame 10. Press F6 to insert keyframe. Now go to Frame 5. Select your movie clip. Increase the size to 14.3px by 14.3px. Go to Frame 1. Select the dot. Go to Properties. Select Color as Alpha in the drop down menu and give 100%. Go to Frame 5. Select the dot. Go to Properties. Select Color as Alpha in the drop down menu and give 10%. Go to Frame 10. Select the dot. Go to Properties. Select Color as Alpha in the drop down menu and give 5%. This movie clip shade_mc will not be there in the sparkle layer but stored in the Library, we will use it later. 5. Create another movie clip with a star which becomes smaller at a slower rate than our 1st star movie clip. Go to the Main Scene. Go to Insert Menu > New Symbol. The Create New symbol screen will appear. We will name your first movie clip as star_mc. You will be directed inside the movie clip. Now select the PolyStar Tool. Go to the Properties Panel. Go to Options. A screen called Tool Settings will appear. Select Style, in the drop down menu as Star. Select Number of sides 4. Select Star Point Size as 0.10. Click on OK. Give color as white. Now draw the Star. Give the size to 23px by 23px. Select the edge and delete them. Choose the star and make it a Movie Clip. Name it star_s_mc. Now double click on it. On frame 1 you will see your star. Go to frame 10. Press F6 to insert a new keyframe. Go to Properties Panel > Tween. Select Motion from the drop down Menu. Go to Frame20. Press F6 to insert keyframe. Go to Properties Panel > Tween. Select Motion from the drop down Menu. Now go to frame 10. Select your movie clip. Go to Properties. Give the size to 9px by 9px. This movie clip star_s_mc will not be there in the sparkle layer but stored in the Library, we will use it later. 6. Create the sparkle movie clip by combining the movie clips created above and place it where required. You have already created 6 movie clips. Now we will create the last main movie clip. Go to Insert Menu > New Symbol. The Create New symbol screen will appear. We will name your main movie clip as sparkle_mc. You will be directed inside the movie clip. Drag in here these 3 movie clips : star_mc, shade_mc , star_s_mc because when they are combined they will give the sparkle effect, and adjust them properly in the middle. Now go to your main scene. Go to the layer sparkle. Drag the Main movie Clip sparkle_mc wherever you want the Sparkling Glass Effect to be seen. You can use it on a diamond ring, a golden jewelry or on sparkling text also. 7. We’re done. Ctrl + Enter to see the Sparkling Glass Effect.