Adding a gradient bevel produces a raised look that makes an object appear to be raised above the background, with a gradient color across the surface of the bevel. The gradient bevel filter requires one color in the middle of the gradient with an alpha value of 0.
Select an object to apply a gradient bevel to.
In the Filters section of the Property inspector, click the Add Filter button , and select Gradient Bevel.
Edit the filter settings on the Filter tab:
Select the type of bevel to apply to the object from the Type pop‑up menu.
To set the width and height of the bevel, set the Blur X and Y values.
To affect the smoothness of the bevel without affecting its width, enter a value for Strength.
To set the angle of the light source, enter a value for Angle.
To knock out (or visually hide) the source object and display only the gradient bevel on the knockout image, select Knockout.
Specify a gradient color for the bevel. A gradient contains two or more colors that fade or blend into one another. The middle pointer controls the alpha color of the gradient. You can change the color of the alpha pointer, but you cannot reposition this color in the gradient.To change a color in the gradient, select one of the color pointers below the gradient definition bar, and click the color space that appears directly below the gradient bar to display the Color Picker. To adjust the level and position of that color in the gradient, slide these pointers.To add a pointer to the gradient, click on or below the gradient definition bar. To create a gradient with up to 15 color transitions, add up to 15 color pointers. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. To remove a pointer, drag it down and off the gradient definition bar.
Applying a gradient glow produces a glow look with a gradient color across the surface of the glow. The gradient glow requires one color at the beginning of the gradient with an Alpha value of 0. You cannot move the position of this color, but you can change the color.
Text with a gradient glow applied
Select an object to apply a gradient glow to.
In the Filters section of the Property inspector, click the Add Filter button , and select Gradient Glow.
Edit the filter settings on the Filter tab:
Select the type of glow to apply to the object from the Type pop‑up menu.
To set the width and height of the glow, set the Blur X and Y values.
To set the opacity of the glow without affecting its width, set the Strength value.
To change the angle of the shadow that the glow casts, set the Angle value.
To set the distance of the shadow from the object, set the Distance value.
To knock out (or visually hide) the source object and display only the gradient glow on the knockout image, select Knockout.
Specify a gradient color for the glow. A gradient contains two or more colors that fade or blend into one another. The color you select for the beginning of the gradient is referred to as the alpha color.To change a color in the gradient, select one of the color pointers below the gradient definition bar and click the color space that appears directly below the gradient bar to display the Color Picker. Sliding these pointers adjusts the level and position of that color in the gradient.To add a pointer to the gradient, click on or below the gradient definition bar. To create a gradient with up to 15 color transitions, add up to 15 color pointers. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. To remove a pointer, drag it down and off the gradient definition bar.
Select the quality level for the gradient glow. High is approximate to that of a Gaussian blur. Low maximizes playback performance.
You can change properties for an instance of an embedded video clip on the Stage, assign the instance an instance name, and change its width, height, and position on the Stage using the Property inspector. You can also swap an instance of a video clip—assign a different symbol to an instance of a video clip. Assigning a different symbol to an instance displays a different instance on the Stage but leaves all the other instance properties (such as dimensions and registration point) intact.
In the Video Properties dialog box, you can do the following:
View information about an imported video clip, including its name, path, creation date, pixel dimensions, length, and file size
Change the video clip name
Update the video clip if you modify it in an external editor
Import an FLV or F4V file to replace the selected clip
Export a video clip as an FLV or F4V file
How to Change video instance properties in the Property inspector
Select an instance of an embedded or linked video clip on the Stage.
Select Window > Properties, and do any of the following:
Enter an instance name in the Name text field on the left side of the Property inspector.
Enter values for W and H to change the dimensions of the video instance.
Enter values for X and Y to change the position of the upper-left corner of the instance on the Stage.
Click Swap. Select a video clip to replace the clip currently assigned to the instance.
Note: You can swap an embedded video clip only with another embedded video clip, and you can swap a linked video clip only with another linked video clip.
How to View video clip properties in the Video Properties dialog box
Select a video clip in the Library Panel.
Select Properties from the Library Panel menu, or click the Properties button located at the bottom of the Library Panel. The Video Properties dialog box is displayed.
How to Assign a new name to, update, or replace a video with an FLV or F4V file
Select the video clip in the Library Panel and select Properties from the Library Panel menu.
Do one of the following:
To assign a new name, enter the name in the Name text field.
To update a video, navigate to the updated video file and click Open.
To replace a video with an FLV or F4V file, click Import, navigate to the FLV or F4V file to replace the current clip, and click Open.
Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of picture i will use 400x300px.
Chose any color as background color.
Now set Flash movie’s frame rate to 33 and click ok.
Step 3
Chose the layer name ,i will call the current layer Top Model.
Double-click on its default name (Layer 1) to change it.
Now press Enter once you have typed in the new name.
Step 4
Choose now File > Import > Import to stage (Ctrl+R) and import a picture that you just saved in step 1 into a flash stage. While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:
Make sure that the Align/Distribute to Stage button is turned on (if not we need to turn them on)
Click on the Align horizontal center button
Click the Align vertical center button. (see the picture below)
Now select the first frame and hit F6 key fifteen times (see the picture below)
Step 5
Now go back on frame 2 and using the arrows key on the keyboard move the picture a little up like it is shown on figure Fig 4
Fig 4.
Select the frame 4 and move the picture a little down.
Now, select frame 6 and 8 and move the picture a little left and right.
Set the background colour ( i used for this tutorial white)
Set Flash movie`s frame rate to 25
Step 2
Take the Rectangle Tool (R) , and draw a “rectangle” about 20×10 px.
Step 3
Go to Frame 15 and press F6 key.
Take the Free Transform Tool (Q) , press and hold down Shift key and incrase the “Rectangle” see Fig 2.
Fig 2.
Step 4
Go to Frame 20 , take the Selection Tool (V) and do like it shown on Fig 3.
Fig 3.
Step 5
Go to Frame 25, take again the Selection Tool (V) and do like it shown on Fig 4.
Fig 4
Step 6
Now go back on Frame 15 and press Ctrl + C key (copy).
After that go on Frame 30 and press F6 key and then delete the key, after that press Ctrl+Shift+V key (paste in place)
Step 7
Click on Frame 40 , take the Selection Tool (V) and do like it shown on Fig 5.
Fig 5
Step 8
Now , click on Frame 50 and repeat Step 7, but for this time, do that for the left side of “rectangle” see Fig 6.
Fig 6
Step 9
Click on Frame 55 , take the Selection Tool (V) and do like it shown on Fig 7.
Fig 7
Step 10
Now, go back on frame 15, press Ctrl + C key (copy) , click on frame 70 and press F6 key,then press the delete key and after that Ctrl + Shift + V key, (paste in place)
Step 11
Click on frame 85 and press F6, after that press delete key on the keyboard
Go back on the first frame , press Ctrl + C key (Copy) , click on frame 85 and press Ctrl + Shift + Vkey ( paste in place) .
Step 12
Final step , select the layer 1 , go to the Properties Panel (Ctrl + F3) below the stage and for Tween chose Shape, see Fig 8.
Movie clip is a basic element in flash.However,some begnnier don’t know how to use it,such as how to fade in or fade out flash movie clip and add motion between movie clips.Now you’ll learn to how to finish these work
Solution
1. To take a rectangle for example,we should convert it to a movie clip at first.Select the rectangle and click “Modify->Convert to Symbol”,and it will pop up a window which has three opitions.Select “Movie clip” and name it as you like.The hot key “F8″ can also work.
Flash Button Tutorial – Animated button
Making an animated button is similar to making a simple button but instead of using graphic symbols instances we use Movie Clip symbols.
Making a movie symbol
A Movie Clip symbol is a self contain movie whose time line moves independently of the main movies’ time line. Movie Clip symbols can contain animations and here we look at creating two simple movie symbols. The first symbol which we shall call fade-in consists of an animated rectangular graphic which is semi transparent at the start and then becomes clear. The second called fade-out, contains the same rectangular graphic which fades out.
The first step in to make the rectangular Graphic symbol. This should not be difficult for you, now that you have gone through so many sessions.
Open a new file and in the first frame draw a rectangle with some text. Align both the rectangle and the text to the center fo the page. Convert this into a Graphic symbol and name it rectbutton.
The rectangular graphic should look something like:
Delete the instance from the stage. Open the symbols library (Windows – Library).
Click on Insert – New Symbol and in the Symbol Properties window set the Behavior to Movie Clip and name it fade-in.
You will not be in symbol editing mode. That’s fine ’cause this is what we wanted. Drag an instance of rectbuttongraphic sym bol you created before onto the first frame. Align the symbol to the center of the page. Insert a keyframe at frame 18 and create a motion tween between the first and the eighteenth frames. Hightlight the first frame by clicking on it and then click Modify – Instance. Change the Alpha (found under Color Effect tab) value to 30%. Click OK to continue and test your movie Control – Play.
Fade-in movie symbol
(Move your move cursor over it to play the movie.)
This movie will be used for mouse-over effect. Since we don’t want it to play continuously, we would have to add a Stop Action to the last frame. Add another layer to fade-in movie, call it actions and insert a keyframe at frame 18 (the last frame). Right-click on this frame and select Properties from the menu. In the Actions tab click on the Plus (+) sign and select Stop from the menu.
(Note: This is the first time an action has been included in a movie. Thus, I have introduced you to the simplest of them all. The Stop action tells the movie to stop playing at the specified frame.)
Click Edit – Edit Movie to go back to editing the main movie.
We now create the other Movie Clip symbol.
Click Insert – New Symbol. Name this symbol fade-out and set the Behavior to Movie Clip. You shall now be in symbol editing mode. Place an instance of rectbutton graphic symbol on the first frame and align the instance to the center of the page. Insert a keyframe at frame 18. Create a motion tween between the start and end key frames. Click on the last frame and then change the Alpha value of the instance to 30%. Click OK.
fade-out movie symbol
Add another layer and insert a kerframe at frame 18. Add a Stop action to this keyframe just as you did before. The fade-out movie is used for mouse-out effect.
Making the animated button
You would now have three symbols in the Library, one graphic and two movie clips. It is time to create an animated button. Enter the Movie editing mode and click on Insert – New Symbol. Name this symbol mybutton and set its Behavior to Button.
Place an instance of fade-out movie clip symbol into the Up frame and align in to the center of the page. Insert a Blank Keyframe in Over frame, drag an instance of fade-in movie clip symbol onto the frame and align in centrally. In the Hit frame, insert a blank keyframe, add an instance of rectbutton graphic symbol and align it to the center of the page. (Notice that we do not use the Down button frame). The button frames should look like:
Enter the movie editing mode (Edit – Edit Movie) and drag an instance of the animated button onto the movie. Align in to the center and click Control – Test Movie to see how it works.
Flash interactive button with fade-in and fade-out effects
The importance of the Stop action
We introduced a Stop action at the last frame of both our movies. This tells the movie to stop playing once it reaches the end frame. If we skip this step, our movie plays continuously messing up our animated button.
How to fade Text in and out
Open Flash MX and make a new movie.
1. Insert your text.
2. Right click on your text and select ‘Convert to Symbol’.
A little box should pop-up:
Select ‘Movie Clip’ and give it a name of your choice, eg. Fade In.
3. Now goto a frame of your choice along the timeline – this will be the duration of the effects, so the further along the timeline you go; the longer the effect will last.
We will use 50 as the example.
4. Right click over your desired frame, in our case 50, and select ‘Insert Keyframe’.
- Your timeline should now look something like this:
5. Now go back to frame 1 on the timeline and click on the text you created.
You should get the following options in the ‘properties’ toolbox:
- Notice the red circle I made, the name you gave your symbol should appear there; in my case ‘fadein’.
But we are now looking at the place where I put the red cross…..the dropdown menu called ‘color’.
6. Make sure your still at frame 1, and have the text selected.
Click on the dropdown menu called ‘color’ and select ‘Alpha’ (Alpha is another word for transparancey).
A little slider will now appear, allowing you to toggle the Alpha Value of your text:
Slide it to 0%, so that your text is no longer visible.
7. Click anywhere on your timeline and you will see that the text is completley transparents, apart from frame 50, where we added the keyframe – that is still 100%.
Now we need to get these to ‘merge’ together.
8. Now goto roughly the middle of your timeline, in my case frame 25 would suffice.
You should see this in your properties toolbox:
All you need to do is change the ‘Tween’ (The area surrounded by a red circle), to ‘Motion’ Using the drop down menu.
Now, as you are half way along your timeline, you text should appear semi-transparent, and the timeline should appear a blue kind of color:
All you need to do now is move the mouse along the timeline and see your text fade in!
9. To make the text fade out, instead of in, simply:
Set the Alpha value of the text on the keyframe (frame 50) to 0% and the Alpha on frame 1 to 100%.
, and select Adjust Color.
