Images Macromedia Flash 8 - PART III

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.
Tweening Mask Text Effect In this tutorial you will learn how to create a cool mask text effect. 1. Create a new flash document. Select Modify > Document (shortcut key: Ctrl + J). Set the dimensions of your document as whatever you like. Select any color as background color and set your Flash movie's frame rate to 12 fps. Then, click ok. 2. Take the Text Tool (T) and type any text on the stage. For this example, I have used Base 02 font, size 55px. 3. Create a new layer above the layer text and name it mask object. 4. Select the mask object layer and take the Oval Tool (O). 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 little “circle” over the text. See the picture below. 5. While the circle 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 Radial as Type. 3. Click on the small color rectangle that is on the left side and set its color to #7EF361. Alpha property set to32 % 4. Click on the small color rectangle that is on the right side and set its color tob. Alpha property set to100 %. Now, you have this: 6. While the circle is still selected, press F8 key (Convert to Symbol) to convert this circle into a Movie Clip Symbol. 7. While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, you will find the Instance name input field there. Call this Movie Clip "object". 8. Using the mouse, move the mask object layer below the text layer. See the picture below. 9. Select mask object layer and convert it to a mask by right-clicking on the mask object layer and selecting Mask. See the picture below. 10. Now Double click on layer 1 to rename its name in text. After that, click on the first frame of layer text and go to the action script panel (Ctrl + F3) below the stage. Then, enter this code inside the actions panel: startDrag ("/object", true); _root.drag = object; 11. We're done! Test Your Movie (Ctrl + Enter). For Animated Presentation Click here Tweening Two Image masking This tutorial will teach you how to mask two images as well as dragging the mask. 1. This tutorial will teach you how to mask two images without using ActionScript. So before you start this tutorial make four different layers namely masked, maskee, mask and actions as I have done in the following image. 2. Just make any custom shape that you will drag. Masking effect will be seen on this shape. Now convert into a movie clip. And give it an instance name as box_mc just as I have given. 3. Then on the two layers i.e. the maskee and the masked layer place two images. The maskee will have that image which will be invisible and will only be seen from the mask. The masked layer will have that image that will be visible but will get masked by the mask and will show the other maskee image on this place. Name the masked layer image as bg1_mc and the maskee layer image as bg2_mc as I have done in the following images. 4. Now select the first frame of the actions layer, open the Actions Panel by pressing F9and write the following script in the actions panel. bg1_mc.setMask(bg2_mc) bg2_mc.setMask(move_mc) move_mc.onPress = function() { this.startDrag(); }; move_mc.onRelease = function() { stopDrag(); }; 5. When you test your movie you will see that the shape you created. You can drag it anywhere and on those places the background image becomes invisible and the maskee image will be visible as under. Tweening Adding a Drag Mask 1. We will require two symbols for the masking effect. The first movie clip will be an image that you will mask. 2. The second movie clip will be any shape converted into a symbol (preferably movie clip). This movie clip will be used to mask the image. 3. Now before writing any script you have to give instance name to these movie clips. Instance name can be given in the instance name text box in the property panel. Give instance name as bg_mc for the image and mclip_mc for the shape that has been converted into a symbol. 4. Open the Actions Panel (F9). All the actions are written in the actions panel 5. Now select the first frame of the layer and write the following script in the actions panel. bg_mc.setMask(mclip_mc); mclip_mc.onPress = function() { startDrag(this) } mclip_mc.onRelease = function() { stopDrag() } Tweening Animated Masking 1. Create a new movie and place an image on Layer 1. This will be the background layer. Name that layer "Background". 2. Create a New Layer above Layer 1 3. Create a Mask on Layer 2 by Right clicking on the top layer and choose: Mask 4. This makes the top layer the mask layer and the bottom layer (Background) the masked layer. Flash locks both layers by default once the mask is created. 5. Unlock the Top Layer (Layer 2) and create a rectangle shape on that layer. (Any shape will do, of course, I'm just using this shape for this example.) 6. Create a shape or motion Tween with the new shape you created. When adding more frames to your movie, make sure you add the same number of frames to each layer. 7. Test your movie. To scrub through your movie to preview the mask, lock both layers (you need to lock both the mask and the masked layer to view the mask effect) and drag the red playhead back and forth. You will see only the parts of your background that are covered with the mask. The movie will look somewhat like this. Tweening Making a mask A mask can be used when you want to show only part of the content in a layer, or group of layers. To make a mask, do these things: 1. Add a layer above the content you want to mask. If there are multiple layers with content to be masked, add the new layer above the top one. 2. Convert the new layer to a mask layer by right-clicking on the layer name and choosing Mask. This will cause both the mask layer and the layer under it to be locked. Unlock the mask layer to put content in it. If there are muliple layers to be masked, drag each one up under the mask. 3. Using a fill color that stands out over your content (it won't show in the final movie), draw the shape in the mask layer that you want to act as a window for the layer or layers below the mask. The shape of the mask determines what will show through from underlying layers. 4. To see how the final masked content will appear, lock both the mask layer and its underlying content layer(s). Here's are two views of what the stage looks like with a jpg imported into the pink flower layer and mask in the layer above that consists of a solid rectangle plus some text. One view (with layers unlocked) shows the photo and the mask above it; the other (with both layers locked) shows what the published swf will look like. These are the steps to create that: • Import a photo to a layer called photo (or as I have named pink flower). • Add a layer above the layer with the photo and call it mask. Right-click that layer and check Mask. • Unlock both layers. Choose a bright green (or other color -- it won't show in the published movie) fill. In the mask layer, choose the text tool and type "flowers". Use the properties panel to make sure it's static text and set it to a big font. • Select the text with the select tool and choose Modify, Break Apart twice -- once to break the text into individual letters and again to turn those letters into native Flash shapes. • Under the text, draw a rectangle. • Lock both layers to see the final masked result. Unlock if further edits are needed. Mask over motion-tweened content The example above is of a static mask over a static shape, but both the mask and the content in the layer below it can also contain moving parts (tweens, keyframe animation). Here is an example of the photo transitions shown on the more motion tweens page with the same mask as above in a layer above them (all layers of the photo transition movie were dragged under the mask): Shape-tweened mask over motion-tweened content And here is a rather garish example in which the photos are motion-tweened as before, and the mask layer has also been tweened (in this case, shape-tweened). Open maskflowers3.fla to see how the shape-tweening is implemented. Keyframe mask for handwriting Masks can also be used for handwriting or drawing effects, where an outline or shape on stage is to be progressively revealed. To make the handwriting sample below, I followed the following steps: • Opened a new movie, 300 x 150, 20 fps, white background • Used a handwriting font with the text tool to create the hello! in a layer • Added a layer above it, right-clicked and checked Mask. Unlocked both layers. • Extended the timeline to about 100 frames. • Chose the paintbrush tool, round, big enough brush to easily cover the stroke • In the mask layer, in frame 1, drew over a bit of the start of the handwriting (see below) • Hit f6 (to add a keyframe in the mask layer) • Drew over a bit more of the handwriting • Repeated the last two steps --f6, draw, f6, draw-- til the whole piece of handwriting was covered (changing the paintbrush width whenever necessary Below is what the timeline looks like after 4 steps of "F6, draw". Bigger strokes can be used in each keyframe if detail is not important. But check along the way to make sure the uncovering looks right; any mistakes made along the way will be carried through in every keyframe to the end of the animation and are hard to fix after the fact: Text & its Styles Text color changing effect:- In this tutorial, you will learn how to create color text effect in flash 8, using the mask. 1. Create a new flash document and set Width to 400 and Height to 150px. Frame rate set to 24 fps (Frames per Second), and under Background color set #999999. 2. Take the Rectangle Tool (R), Stroke color must be switched off, under Fill color set #000000, and draw a "rectangle" 400x150px, like the background. After that, using theAlign Panel (Ctrl + K), center it with background. 3. Using the flash tools for drawing, draw a "shape" within the "rectangle" that we have drawn in previous step. That shape will represent a place where the text will change a color. See the picture below. 4. Insert a new layer and name it text. After that, take the Text Tool (T), under Fill color set #006600, type any text, and set it on the left side of background. See the picture below. 5. Click on frame 60 of layer1 (background layer), and press F5. After that, click on frame 60 of layer text and press F6 (Keyframe). Then, set the text on the right side of background. 6. Now select the other layer and make a copy of it and change its color and place it besides the original image without letting any space in between. You can easily do this by pressing Alt and Shift key and then select the image and drag it to the left and right. The Alt key and the Shift key Duplicates and Aligns duplicates respectively. 7. Go back to the other layer and select any frame, open the Properties Panel (Ctrl + F3), and under Tween choose Motion. 8. Select text layer and convert it to a mask by right-clicking on the text layer and selecting Mask. 9. Test your Movie (Ctrl + Enter). We're done! For Animated Presentation Click here Text & its Styles Harmony effect This tutorial will teach you how to create a Harmony effect on your text. 1. Create a new flash document, Frame rate set to 28 fps (Frames per Second), take the Text Tool (T) and type any text. Look at the picture below! 2. Press Ctrl + B on the keyboard (Break Apart) or choose right click and Break Apart. 3. Choose Modify > Timeline > Distribute to Layers (Ctrl + Shift + D). Now you get this: 4. Click on layer 1 to select it, and after that delete it. 5. Select every letter and convert it into a Graphic Symbol. Look at the picture below! Your library panel will look somewhat like this. 6. Now, I will start off with the first letter in text (in my example letter "e"), so click on frame 5 of layer e (first layer) and press F6. After that click on frame 10 and press again F6. 7. Go back on frame 5, take the Free Transform Tool (Q), and increase the first letter a little. See the picture below, and everything will be clear. 8. Select layer e (for my example), first layer, open the Properties Panel (Ctrl + F3), and under Tween choose Motion. 9. Repeat steps 6, 7 and 8 for every other letter. Note! Every other letter must start five frames later by comparison with previous letter. See the picture below! 10. Click on the last frame of the last letter, in my example that's letter "m". Select vertically all frames of other letters in the level with letter "m" and press F5 on the keyboard (Frame). See the picture below! 11. We're done! Now test your movie. Text & its Styles Stretch, Zoom and Slide effect:- In this tutorial you will learn how to create a Stretch, zoom and slide text effect 1. First of all, create a new Flash document (Ctrl + N). 2. Select Modify menu > Document (shortcut key: Ctrl + J). Set the width of your document to 250 pixels and the height to 200 pixels. Select white color as background color. Set your Flash movie's frame rate to 28 and click ok. 3. Select the Text tool (T). Then in the Property inspector, select the following options: 1. Select a Static Text field. 2. Select any good font as we have selected Gill Sans. 3. Choose 35 as font size. 4. Select #000066 as color. 5. As the rendering option, select Anti-alias for readability. 4. While the text is still selected, go to the Align Panel (Ctrl + K).Then, do the following in the Align panel: 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 5. While the text is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol. 6. Click on frame 30 and press F6 key. 7. While you're still on frame 30, take the Free Transform Tool (Q), select the text, press and hold down Shift key, and stretch it. See the picture below. 8. After that, while you're still on frame 30 take the Selection Tool (V), click once on the text to select it and 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 two keyframes on the timeline and choose Create Motion Tween from the menu that appears or from the property inspector. 10. Now, we have created a stretch text effect, and it's time for zoom text effect. 11. Double click on layer 1 to rename its name in stretch. After that, create a new layer above the stretch layer and name it zoom. 12. Click on frame 30 of layer zoom and press F6 key. After that, take the Text Tool and type zoom on the stage. 13. While the text is still selected, go to the Align Panel (Ctrl + K).Then, do the following in the Align panel: 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 14. Keep the text still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol. 15. Click on frame 60 and press F6 key. 16. Go back on frame 30, take the Free Transform Tool (Q), and click once on text to select it. Then, press and hold down Shift key and enlarge the text a lot. See the picture below. 17. While you're still on frame 30, take the Selection Tool (V), click once on the text to select it and go again to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%. 18. Take again the Selection Tool (V), click on frame 30 and press Ctrl + C key on the keyboard (Copy). Then, click on frame 90 and press F6 key. After that, while you're still on frame 90, press Ctrl + Shift + V key (Paste in Place). 19. Right-click anywhere on the gray area between the frame 30 and 60 and frame 60 and 90 on the timeline and choose Create Motion Tween from the menu that appears. 20. Create a new layer above the zoom layer and name it slide. 21. Click on frame 90, press F6 key, take the Text Tool (T) again and type a slide on the stage. 22. While the text is still selected, go to the Align Panel (Ctrl + K).Then, do the following in the Align panel: 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 23. While the text is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol. 24. Click on frame 105, 120 and 135 and press F6 key. 25. Go back on frame 90 and place the text on this position: 26. Click on frame 135 and place the text on this position: 27. Right-click anywhere on the gray area between the frame 90 and 105 and frame 120 and 135 and choose Create Motion Tween from the menu that appears. 28. We're done! Test your movie (Ctrl + Enter). For Animated Presentation Click here Text & its Styles Text Appearence Effect 1. Start with an empty stage with a black background color. In the time line layers panel make 3 layers name them text1, text2 and text3. 2. Now in the layer text1 type in the letter H, in text2 type e and in text3 type y. For each layer make a new keyframe at frame 65 (the end of our animation) 3. In the layers panel, create a new layer under each text layer, and name them effect1, effect2, effect3. Insert a new keyframe at frame 5 for the effect 1. 4. Draw a white rectangle with the rectangle tool. (it should fit almost the edges of the height of the stage. Right click the rectangle shape, and convert it to a movie clip. Go to your new movie clips filters properties, give it a blur effect as shown in the image below. 5. Now make a new keyframe for effect1 at frame 20. With the free transform tool scale the rectangle down as shown in the image below. Right click between frame 5 and 20, and make a motion tween. 6. For the text1 layer drag the keyframe to frame 21, so the letter first appears when the effect is done, as shown below. 7. Insert a new keyframe at frame 22 for the effect2 layer. Draw a white rectangle with the rectangle tool. (it should fit almost the edges of the height of the stage). Right click the rectangle shape, and convert it to a movie clip. Give it a blur filter as in step 4. 8. Make a new keyframe at frame 36. With the free transform tool scale the rectangle down as shown in the image below. Right click between frame 22 and 36, and make a motion tween. 9. For the text1 layer drag the keyframe to frame 37, so the letter first appears when the effect is done, as shown below. Repeat these steps for the last text and effect layer and you will end up with the result I have. For reference I have made an image of my final time line. For Animated Presentation Click here Text & its Styles Flash Text Basics In Flash there are 3 types of Textboxes - Static, Input & Dynamic. Static text is used for titles, labels, or other text content that appears in a flash document by default. Input text options are used for user interactivity like obtaining username or other information in a Flash form. The third type of text is a Dynamic text, which is used to display text that changes dynamically at runtime. Static Text: Static text is created through the Flash authoring tool only. You cannot create a static text instance using ActionScript 3.0. However, you can use ActionScript classes like Static Text and Text Snapshot to manipulate an existing static text instance. Static text fields are used primarily as text labels in the main Timeline or in movie clips. This type of text cannot be animated and changed dynamically, but only along certain dimensions. 1. Drag a Textbox of Fixed-width on the stage using the Text tool and select Static Text Type from the Properties window. 2. The Static textbox has a rectangular handle in the upper right corner, which can be used to adjust the size of the Textbox. 3. The various Text properties such as the Font, Font-size, Font-style, Font-color, Align etc. can be set using the Properties inspector. Input Text: Input text is any text entered by a user or dynamic text that a user can edit. You can set up a style sheet to format input text, or use the flash TextFormat class to assign properties to the text field for the input content. User-entered text is placed into input text fields. As part of rich Internet applications, the input text field is the most interactive element in Flash because it allows the developer and designer to create environments that change with the needs of the users who visit the site. Everything from users name and passwords to large descriptive blocks of text can be entered here. 1. Drag a Textbox on the stage using the Text tool and select Input Text Type from the Properties window. 2. The Input textbox has a rectangular handle in the lower right corner, which can be used to adjust the size of the Textbox. 3. Apart from the normal Font properties of a Static textbox, the Input textbox has more options like, Single Line to display the text as one line, Show Border around Text to indicate the boundaries of the text field with a visible border. 4. A variable name can also be given which can be used to store user input. Dynamic Text Dynamic text includes content that is loaded from an external source, such as a text file, an XML file, or even a remote web service. Dynamic text fields are the “data output” fields of Flash. Everything from database to simple calculation output can be placed in dynamic text fields. Used with Flash Communication Server, as an output field for chat rooms. 1. Drag a Textbox on the stage using the Text tool and select Dynamic Text Type from the Properties window. 2. The normal Font properties of a textbox can be set for a Dynamic textbox and it also has more options like, variable names can be given, line options can be given say, Single Line to display the text as one line, Selectable and Render text as HTML. 3. Variable names are used to assign dynamic values at runtime or obtain values from External Sources. Text & its Styles Text Blink effect This tutorial will teach how to create a text effect which is blinking, using the flash filters. 1. Open a new flash document. Press Ctrl + J key on the keyboard (Document Properties) and set the width of your document to 318 pixels and the height to 206 pixels (because we have downloaded an image earlier and will be using the very same for this tutorial. So whichever image you import. Make sure the stage size and the image size are the same.). Select any color as background color. Set your Flash movie's frame rate to 26 and click ok. 2. Import any image that will be used as a background image. Choose File > Import > Import to Stage (Ctrl + R) and import the picture into the flash file. 3. While the picture 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. 4. Double click on layer 1 to rename its name in picture. Then, click on frame 20 and press F5 key. 5. Create a new layer above the picture layer and name it text. 6. Lock picture layer, select the text layer and take the Text Tool (T). Then, go to theProperties Panel (Ctrl + F3) below the stage. After that choose the following options: 1. Select a Static Text field, 2. Select a good groovy font as we have selected a custom font. 3. Choose 32 as font size, 4. Select white as color, 5. As the rendering option, select Use Anti-alias for readability. Then, type on the picture "EBIZ EDUCATION". See the picture below. 7. While the text is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol. See the picture below. 8. Click on frame 5, 10, 15 and 20 and press F6 key. 9. Go back on frame 5, take the Selection Tool (V) and click once on the text to select it. Then, go to the Properties Panel (Ctrl + F3) and click on the Filters tab. After that, click on the plus icon and select the Glow filter. Make the adjustments as follows: 1.Blur X and Y: 19. 2. Strength: 320% 3.Quality: High. 4. Color: #CCCCCC. Now, you have this: Repeat this process also for frame 15. 10. Take the Selection Tool (V) and select layer text. Then, go to the Properties Panel (Ctrl + F3) below the stage. On the left side you will see Tween drop down menu. Select Motion on it. See the picture below. 11. We're done! Test your Movie (Ctrl + Enter). For Animated Presentation Click here Text & its Styles Typing effect This tutorial will teach you how to create a typing effect. 1. Create a new flash document, choose Modify > Document and set Width to 300, and Height to 200px. Frame rate set to 20fps, and for background color set black. 2. Double click on layer1 to rename its name in background. Then, insert a new layer, and name it text. 3. Click on frame 40, press F6 (Keyframe), take the Text Tool (A), under Fill color set white color, in Properties Panel (Ctrl + F3), under Font set Verdana, size 21px, bold style. After that type any text. See the picture below. 4. Click on frame 70 and press F5. 5. Insert a new layer and name it effect. Select it, click on frame 25, press F6, take the Rectangle Tool (R), under Fill color set black and draw a "rectangle" 192 x 30px. 6. Take again the Rectangle Tool (R), under Fill Color set white, and within the previous "rectangle" draw another "white rectangle" 18 x 21px. Look at the picture below. 7. Select the both "rectangle" and press F8 key (Convert to Symbol) to Convert it into a Movie Clip. 8. Double click on a new made Movie Clip ("rectangle") to go in its inside. Then, click on frame 5, and press F6 key. After that, select only the "white rectangle", and delete it. 9. Click on frame 10, and press again F6. After that, open the Action Script Panel (F9), and paste this script: gotoAndPlay(1); 10. Go back on the main scene (Scene1), click on frame 40 of layer effect and press F6. 11. Go back on text layer, click on frame 70, and press F5. 12. After that, click on frame 60 of layer effect, and press F6. Then, set your "rectangle" on the position like it is shown on the picture below. 13. Click again on frame 60 of layer effect, open the Action Script Panel (F9), and paste this script: stop(); 14. Click on frame 40 of layer effect, open the Properties Panel (Ctrl + F3), and under Tween choose Motion. 15. We're done! Test your Movie (Ctrl + Enter). Text & its Styles Text effect In this easy tutorial you will see how to create an appearing/disappearing text effect. 1. Open a new Flash document. Select Modify > Document (shortcut key: Ctrl + J). Set the width of your document to 200 pixels and the height to 100 pixels. Select white asbackground color, for Frame Rate set 28 fps (Frames per Second) and click ok. 2. Take the Text Tool (T), in the Property inspector below the scene, choose Static Text (see left part of the image below).Choose any font you like, and bold it. For size set any size and for color set black. Then, type any text. For this example I'm writing "eBIZ Education". 3. While the text is still selected, press F8 key (or select Modify > Convert to Symbol) to convert it into a Movie Clip Symbol. 4. Click on frame 60, and press F6 key (Keyframe). 5. Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. 6. Click on frame 15, and after that on frame 30, and press F6 key. While you're still on frame 30, take the Selection Tool (V), select the text ("eBIZ Education"), go to the Properties Inspector (also called the Properties Panel, below the scene), click on Filters, plus icon, and choose Blur. Then, set the options from the picture below. 7. Click on frame 40 and press F6 key (Keyframe). Then, take the Free Transform Tool (Q) and do like it is shown on the picture below. 8. Click on frame 45, and press F6 key again. After that, using the arrows key on the keyboard, move the "blur effect" a little up. Then, select it, go to the Property inspector once again and click on the Properties tab. On the right, you will see the 9. Color menu. Select Alpha in it and put it down to 0%. 10. Test your Movie (Ctrl + Enter). We're done For Animated Presentation Click here Text & its Styles Titration Effect This tutorial will teach you how to create a Titration effect on an image. 1. Open a new flash document. Press Ctrl + J key on the keyboard (Document Properties) and set the dimension at whatever you want. Set the background color as whatever you like, I used picture as background for this example. Set your Flash movie's frame rate to 35 and click ok. 2. Double click on layer 1 to rename its name in background. After that, create a new layer above the background layer and name it text. 3. Select the text layer, take the Text Tool (A) and go to the Properties Panel (Ctrl+F3)below the stage. Then, choose the following options: 1. Select a Static Text field, 2. Select any font. 3. Choose 35 as font size, 4. Select white as color, 5. As the rendering option, select Use Anti-alias for readability. 4. Then, type on the stage "TITRATION". See the picture below. 5. While the text 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 text with the background. 6. Press F6 key 55 times or just select the first frame press shift key and select the 55th frame. Automatically all the frames in between will get selected. See the picture below. 7. Then, click on every second frame and press delete key on the keyboard to delete it. See the picture below. 8. Go back on the first frame of layer text and press Ctrl + C key (Copy), to copy this text. Then, create a new layer above the text layer and name it text 1. 9. Click on frame 15 of layer text 1 and press F6 key. Then, press Ctrl + Shift + V key (Paste in Place). 10. While the text that you just copied is still selected, press F8 key (Convert to Symbol), to convert this text into a Movie Clip Symbol. 11. Click on frame 20 of layer text 1 and press F6 key. Then, take the Free Transform Tool (Q) and enlarge the text like it is shown on the picture below. 12. After you have enlarged the text and while you're still on frame 20, take the Selection Tool (V) and click once on the text to select it. After that, 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%. 13. Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. 14. Take the Selection Tool (V) and select the all frames from frame 20 to frame 55, choose right click and Remove Frames. See the picture below. 15. Go back on frame 15 and press Ctrl + C key (Copy). 16. After that, create a new layer above the layer text 1 and name it text 2.Then, click on frame 30 and press F6 key. After that, while you're still on frame 30, press Ctrl + Shift + Vkey (Paste in Place). 17. Click on frame 33 and press F6 key. Then, take the Free Transform Tool (Q) and do like it is shown on the picture below. 18. After you have enlarged the text and while you're still on frame 33, take again the Selection Tool (V) and click once on the text to select it. After that, 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%. 19. Right-click anywhere on the gray area between the frame 30 and frame 33 on the timeline and choose Create Motion Tween from the menu that appears. 20. Repeat step 10, but for this time, do that from frame 33 to frame 55. See the picture below. 21. We're done! Test your Movie (Ctrl + Enter). For Animated Presentation Click here Basic Effects Roatating & Zooming 1. You can move rotate an element and at the same time you can zoom in or zoom out. This you can do with both an image and text. Both use the same process. So the example explained below can be applied to text also. 2. Import an image on the stage (Ctrl + R) or by selecting import in file menu. 3. Select your image and press F8 (convert to symbol) and place your image to the center of the stage 4. Now click on frame number 20 and press F6 (this will create a keyframe). 5. Now select any frame between 1 and 20. Then go to the properties panel and select motion in the tween pop down menu. You will see the frames become light purple with a long arrow. 6. Now in the first frame select your image and decrease its size proportionately i.e. by pressing Q (Free Transform Tool). Make it very small so that you can see the rotation and zooming level together easily. 7. Select the first frame. Now in the property inspector select ‘CW’ in the rotate pop-down menu i.e. the direction of the rotation. 8. As soon as you select ‘CW’ (Clock Wise Direction) or ‘CCW’ (Counter Clock Wise i.e. Anti-Clock Wise) in the times text box give ‘1’ (this is the value for the number of time you want the element to rotate i.e. The Rotation Count). 9. Thus if you have correctly followed the above given steps your property inspector will be seen with the following values. 10. Now test your movie by pressing Ctrl + Enter. Basic Effects Creating a Zoom-in Zoom-out effect 1. You can create a zoom-in zoom-out effect with both an image and text. Both use the same process. So the example explained below can be applied to text also. 2. Import an image on the stage (Ctrl + R) or by selecting import in file menu. 3. Choose the image you want and then place it to the left center of the stage. 4. Select your image and press F8 (convert to symbol). 5. Now click on frame number 30 and press F6 (this will create a keyframe). Select your image and Drag it to right center of the stage. 6. Then click on frame number 15 and press F6 again. 7. Select your image and select free transform tool (Q). Now enlarge your image more than the previous size. 8. Now select any frame between 15 and 30. Then go to the properties panel and select motion in the tween pop down menu. You will see the frames become light purple with a long arrow. Do the same for any frame between 1 and 15. 9. Now test your movie by pressing Ctrl + Enter. Basic Effects Fade-in Fade-out effect:- 1. You can create a fade-in fade-out effect with both an image and text. Both use the same process. So the example explained below can be applied to text also. 2. Import an image on the stage (Ctrl + R) or by selecting import in file menu. 3. Choose the image you want and then place it to the left center of the stage 4. Select your image and press F8 (convert to symbol). 5. Now click on frame number 30 and press F6 (this will create a keyframe). Select your image and Drag it to right center of the stage. 6. Then click on frame number 15 and press F6 again. Then drag your image to the center of the stage. 7. Select your image and in the properties panel under color pop down menu select alpha and set it to 0. 8. After you set the alphs to 0(zero) you will notice that a blue bounding box appears around your image and your image goes blank. 9. Now select any frame between 1 and 15. Then go to the properties panel and select motion in the tween pop down menu. You will see the frames become light purple with a long arrow. Do the same for any frame between 15 and 30. 10. Now test your movie by pressing Ctrl + Enter. Basic effects Applying gradient to an element 1. Select the element in which you want to apply the gradient. 2. Open Color palette (shift + F9) by opening it from the Windows menu. 3. Click the pop down menu for type to select the type of gradient you want. 4. Select the gradient type you wish to apply to the element. 5. After selecting the type of gradient, you will get a gradient bar at the bottom with two default color points. 6. Select the points by clicking on them and then select the color you want in the gradient or you may double click on the color points and get a color palette appearing for you to choose the color from. 7. You can apply more colors by clicking jus below the gradient bar and creating more color points. At this point, there will appear a plus sign along the cursor. And soon as you click on the bar a color point will appear and you can apply color to it. 8. You can apply as many color points as you wish. For Animated Presentation Click here Basic effects Transforming a gradient 1. Select the element in which you want to apply the gradient. 2. Open Color Mixer palette by opening it from the Windows menu or pressing Shift + F9. 3. Click the pop down menu for type to select the type of gradient you want. 4. Select the gradient type you wish to apply to the element. 5. After selecting the type of gradient, you will get a gradient bar at the bottom with two default color points. 6. Select the points by clicking on them and then select the color you want in the gradient. This way you can make the gradient of your desire. When you have the desired gradient in your element click on Gradient transform tool (F). You will see a circle outline made outside your gradient filled element. With it you will see 3 buttons on the edge and a center button-each has a different role to play. 8. Going in clock-wise direction the first button at the edge is the width resizing button. 9. You will have an output like this. 10. The second button at the edge resizes the element proportionately. 11. You will have an output like this. 12. The third button at the edge is the rotating button. 13. You will have an output like this. But you will not find any difference because of the type of gradient applied (Radial). 14. You can also change the center point proxy. Just click on the center button and without releasing the mouse, leave it anywhere else. You will see the whole gradient design is moved. 15. You will have an output like this (if in your gradient palette the last color is grey). For Animated Presentation Click here Basic effects Playing with the border 1. Borders are applied to all shapes. So create any shape of your choice. 2. Now double click on your element and go to properties panel. 3. Now change the stroke styles, stroke width, stroke hinting, stroke color, stroke cap, stroke joint, etc. Let’s try some of these out. But remember always double click your element because on single click the body of the element is selected and on double click both the stroke and the body are selected together. So the stroke of the element should be selected. You can also select the border by double clicking on the border of the element. If you single click on the stroke, only the stroke the side you clicked will be selected. 4. You can increase and decrease the Stroke height/Stroke weight/Stroke Size by just sliding the bar for the stroke height in the properties inspector up and down to increase and decrease the stroke height respectively. 5. Now let’s change the Stroke type/Stroke Style. You may select the type of stroke you want i.e. the style of the stroke. 6. You can also change the color of the strokes. Just click on the stroke color pop-down menu. 7. Flash also provides you with a custom stroke style button. Here you have all options from stroke thickness to stroke style. You can change all at once from here. But the advantage of this is that you can also preview the changes as soon as you change the values. Also you get more parameters here to manipulate and get the best desired stroke for your element. Just select your element and its border (by double-clicking on it) and select the custom button in the properties inspector. 8. A dialog box will appear with a small display screen with the zoom level and stroke thickness and stroke style. 9. You will notice when you select different stroke styles different parameters appear to make your stroke more precise. 10. You can also set the style for a path end i.e. round, square or none. 11. By setting round path end the elements line ends becomes round, in the same way square path ends will make the line ends become square. 12. You can also define how two path segments meet by setting the type of joint in the properties inspector. Under the Miter type you will get an input text box for entering the number of miters i.e. the sides or more technically its sharpness. It goes maximum till 60. Complete description of Miter is beyond the scope of this tutorial, so we’ll just cover some basics of it. 13. By putting different values you can play with the borders until you get the appropriate border. Basic effects Vanishing effect:- This tutorial will teach you how to apply vanishing effect on any picture. 1. You will require an image for this tutorial. Save it in a separate folder named images. 2. Open a new flash document. 3. Press Ctrl + J key (Document Properties) and set your dimensions at whatever you want, set the background color as whatever you like. For flash movie's frame rate set 32 and click ok. 4. Choose File > Import > Import to Stage (Shortcut key: Ctrl + R) and Import the image which you have saved in the separate folder named images. 5. While the picture is still selected, press F8 key (Convert to Symbol) to convert that picture into a Movie Clip Symbol. See the picture below. 6. Click on frame 20, 30, 40, 45 and 50 and press F6 key. 7. Go back on frame 30, take the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel (Ctrl + F3) below the stage and click on Filters tab. After that, click on the plus icon and select Adjust Color filter. Then, make the adjustments as follows: 1. Brightness: 100 2. Contrast: 59 3.Saturation: 0 4.Hue: 0 8. Click on frame 40 and take again the Selection Tool (V). Then, repeat the previous step, but for this time, make these adjustments: 1. Brightness: 100 2. Contrast: 89 3.Saturation: -43 4.Hue: -123 Repeat this step also for frame 45. 9. Right-click anywhere on the gray area between the frame 20 and frame 30, frame 30 and 40 frame 40 and 45 and frame 45 and 55 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below. 10. That’s it. Were done. Test Your Movie (Ctrl + Enter). For Animated Presentation Click here Basic effects Transformation effect In this easy tutorial made for Flash 8, you will see how to apply transformation effect on any object with no Action Script. For this example, I will apply this effect on some picture. 1. Start Flash. Set the frame rate at 28 fps (Frames per Second). Choose File > Import > Import to Stage (Ctrl+R), and Import any picture. While the picture is still selected, press Ctrl+B key (Breake apart), to break apart it. 3. Click on frame 20 and press F6 key. Then, go back on frame 1, take the Free Transform Tool (Q), and decrease the picture a lot. See the picture below. 4. Click on frame 25, press F6 key, take the Selection Tool (V), and do like it is shown on the picture below. 5. Click on frame 28, press F6 key, take again the Selection Tool (V), and do like it is shown on the picture below. 6. Click on frame 32, press F6 key, and after that delete key on the keyboard. Go back on frame 15, press Ctrl+C key (Copy), click on frame 32 and press Ctrl+Shift+V key (Paste in Place). 7. Click on frame 40, press F6 key, decrease the picture a little and place it on the position like it is shown on the picture below. 8. Click on frame 45, decrease the picture again a little, and place it on the position like the picture below shows you. 9. Click on frame 50, press F6 key and after that delete key. Then, go back on frame 1, press Ctrl+C key (Copy), click on frame 50 and press Ctrl+Shift+V key (Paste in Place). 10. Select layer 1, open the Properties Panel (Ctrl+F3) and for Tween choose Shape. See the picture below. 11. We're done! Play your movie by pressing Ctrl + Enter For Animated Presentation Click here Basic effects Simple Image animation This tutorial will teach you how to create a simple image animation in flash. You don't have to use any action script code to create it. 1. First of all, you’ll require an image for this tutorial. 2. Create a new flash document. Press Ctrl + J key on the keyboard (Document Properties) and set the width of your document to 210 pixels and the height to 150 pixels. Select any color as background color. Set your Flash movie's frame rate to 26 and click ok. 3. Choose File > Import > Import to Stage (Shortcut key: Ctrl + R) and import an image. 4. While the picture is still selected, go to the Info Panel (Ctrl + I). For Width set 210 and for Height set 150px. See the picture below. 5. While the picture 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 picture with the background. 6. While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol. See the picture below. 7. Double click on layer 1 to rename its name in picture. After that, click on frame 15 and after that on frame 25 and press F6 key. 8. While you're still on frame 25, take the Free Transform Tool (Q), press and hold down Shift key and enlarge the picture a little, like it is shown on the picture below. 9. After you have enlarged the picture, take the Selection Tool (V) and click once on it to select it. Then, go to the Properties Panel (Ctrl + F3) below the stage. Click on the Filters tab. Click on the plus icon and select the Adjust Color. Make the adjustments as follows: 1. Brightness: 38 2. Contrast : 24 Now, you have this: 10. Right-click anywhere on the gray area between the frame 15 and frame 25 on the timeline and choose Create Motion Tween from the menu that appears. 11. Click on frame 30 and press F6 key. Then, take again the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel below the stage. Click on the Filters tab and make the adjustments as follows: Saturation: 70 12. Right-click anywhere on the gray area between the frame 25 and frame 30 on the timeline and choose Create Motion Tween from the menu that appears. 13. Click on frame 40 and press F6 key. Then, take again the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel below the stage. Click on the Filters tab and make the adjustments as follows: Hue:136 14. Go back on frame 30 and go to the Properties Panel (Ctrl + F3) below the stage. Then, for Tween choose Motion and for Rotate set CW. See the picture below. We're done! Test your Movie (Ctrl + Enter).