Friday, 16 December 2016

Spot Effect
1. You need to set the stage of the image size. We have taken the following image for the spot masking effect.
flash masking tutorial
2. Open flash and create a new file. If you know the image size you can create the file of the same size. Hence we have created the file of 400 x 257 pixels.
Modify > Document (change the size to image size)
3. Import image to stage.
File > Import > Import to Stage
4. Fit the image on the stage using Selection tool. You can also use Align command if you want to do this with precision. Insert frame on 60.
5. Rename the image layer to Image. Lock the image layer.
6. Add one layer. Name it as Mask. Select it and draw the circle using Oval Tool at the left bottom corner of the image with no stroke. You can use any color for fill.
flash masking tutorial
7. Select circle and convert to symbol using F8. Select Graphics for option type and name it as Circle.
8. Select Mask layer. Insert Keyframe on 20th frame. Keep the slider on 20th frame. Drag the circle at the position shown below.
flash masking tutorial
9. Keep the mask layer selected. Insert Keyframe on 40th frame. Keep the slider on 40th frame. Drag the circle at the position shown below.
flash masking tutorial
10. Keep the mask layer selected. Insert Keyframe on 60th frame. Keep the slider on 60th frame. Drag the circle at the position shown below.
flash masking tutorial
11. Select the first frame on the mask layer and change the Tween property to Motion. Repeat the same for 20th and 40 frame.
12. Right click on the mask layer and Select Mask. The timeline will look like following image.
flash masking tutorial
13. Export movie using File > Export > Export Movie




Onion Skin
1. Onion Skin gives you more control over the animation.
2. Create a new file. Create two layers. Draw the fixed objects on the bottom layer. And hammer which is movable on the top layer.
Base Drawing
3. Insert 9 frames on the bottom layer. Convert hammer into symbol using F8. Edit the center of the hammer and bring it at the bottom using
Modify > Transform > Edit Center
4. Select top layer. Insert keyframe at 5. Bring the hammer down. Insert keyframe at 9 and drag the hammer back to original position.
Create motion Tween.
Original  Timeline
5. You will get the following output.
6. Select all the frames on the top layer and convert it into keyframes using
Modify > frames > Convert to keyframes
Timeline with Onion Skin
7. If you click on the Onion Skin (Red marked) You will get the positions of the frames filled with color
Drawing with Onion Skin
8. If you click on the Onion Skin Outlines(Red marked) You will get the positions of the frames with outlines without color.
Drawing with Onion Skin Outline
9. Select each frame and edit using other frames as reference. In this project we have used Rotate command and changed the position of the frames using Onion Skin property.
10. Using Onion Skin, drag the first 3 frames very near to each other with rotate command. Compare the final output of the animation.
You will find the first animation is smooth one and the second begin slowly and increases the speed.



Clock (Rotate)
1. You need to draw a ring for clock. Checkout Rings Project of Corel DRAW to get the idea of drawing rings.
2. Create a new file of 160 X 160 Pixels
View > Rulers
View > Grid > Show Grid
View > Grid > Edit Grid (10 X 10 px)
3. Drag the horizontal & vertical guide lines to get the center.
View > Guides > Lock Guides
4. Draw the circle. Select Paint Bucket Tool. Create the gradient in the fill palette as shown below.
Fill Palette
Fill the circle with the gradient.
Draw another circle inside the ring and fill it with white color. Select the white colored circle with the Arrow Tool and delete to get the transparent ring.
Draw another small circle as a center of the watch.
5. Create a 2nd layer and draw short hand on the layer.
Insert > Convert to Symbol
6. Create a 3rd layer and draw long hand on the layer.
Insert > Convert to Symbol
We need to rotate the long hand twice the speed of the short hand.
Select 3 rd layer. Select long hand
Modify > Transform > Edit center
Drag the center at the bottom of the hand.
Repeat the procedure for short hand too.
Basic Artwork
7. Select 3 rd layer. Rightclick on the 40 th frame. Select insert keyframe. Click anywhere between 1 to 40.
In the frame palette, select motion tween. Rotate CW for 2 times.
Frame Palette
8. Select 2 nd layer. Rightclick on the 40 th frame. Select insert keyframe. Click anywhere between 1 to 40.
In the frame palette, select motion tween. Rotate CW for 1 times.
Timeline
9. Save the file

Sparkling Glass Effect in Flash

Sparkling Glass Effect in Flash
Share


This tutorial will teach you how to create a sparkling effect or twinkling star effect in Flash MX. This tutorial is for people who are comfortable with movie clips using Flash MX. You can try the Sparkling Effect on a diamond ring or on text also. 
Please note: 
1. You need to have Flash Player 7.0 installed to view the Flash animation. 
2. Flash MX 2004 or higher must be installed on your system to open the .fla file.
STEPS TO FOLLOW
  1. Import the Background Image 
    Open a new file. Go to File >New. Select Flash Document. Click OK. 
    Go to Modify > Document to give a file size of 180px by 400px. This is the same size as the Bitmap picture we have. Select the Bitmap pictures which you want to put as background and bring it to the Flash Library by clicking on Select File > Import to Library from the Menu Bar. Go toWindow > Library, You can see the picture in the Library panel. Drag the picture named Bitmap to the Stage. Select the picture by clicking on it. This will be your first layer, name it background.

    Now you have to create 7 movie clips. You have to have basic knowledge in FLASH MX to do this. As you know movie clips work independently, and you can use them whenever required.
  2. Create a Rotating Star Movie Clip 
    Create a new layer. Name it sparkle. 

    Go to Insert > New Symbol. The 'Create 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. To select the Polystar tool , first go to the Rectangle tool and select it in the drop down menu as seen below. 
    polystar
    Go to the Properties window. Go to Options. A screen called Tool Settings will appear.
    tool settings
Enter these values and click OK:
Style: Star
Number of sides: 4
Star Point Size: 0.10

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>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 > Transform > Rotate CW. Repeat Modify>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.

Create a movie clip with a small opaque circle that increases in size and becomes almost transparent. 
Draw a circle with Oval Tool, choose the fill color as white and make it 2px by 2px. Select it. 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>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>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.
  1. Create another movie clip with a star which becomes smaller at a slower rate than our 1st star movie clip. 
    Go to Main Scene. Go to Insert > 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 go to PolyStar Tool. To go to polystar tool , first go to rectangle tool and select it in the drop down menu. Go to Properties window. 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>Tween. Select Motion from the drop down Menu. Go to Frame20. Press F6 to insert keyframe. Go to Properties>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.
  2. 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>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 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.
  3. Save your file as sparkle.fla. Press on Ctrl+Enter to see the Sparkling Glass Effect. This will create automatically sparkle.swf file.
Congratulations! Your Sparkling Glass Effect is ready.

 Flash Ripple Effect
Share1




This tutorial will teach you how to create a simple Ripple effect in Flash MX 2004. The .fla file also included at the end of the tutorial.
Please note: 
1. You need to have Flash Player 7.0 installed to view the Flash animation. 
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.
STEPS TO FOLLOW
Create a Graphic Symbol.
  • 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 window.
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 window.
  • Insert Keyframe (F6) into the 5th frame.
  • Remaining on the 5th frame, Selectgirl_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.
  • Insert a new layer above this layer, call it "Layer 2".
  • Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of ripple effect you want. 
    In the above demonstration, I have used rectangle with 15 pix as its height.
  • Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to layer 2.
  • Insert Keyframe into the 20th frame of Layer 2.
  • Place the vector wherever you want the ripple to end or ebb.
    In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix.
  • Select 1st frame, choose Shape Tween from Tween list box in your property window.
  • Right click on Layer 2 and select Mask.
  • Save (ctrl+S). Make it a habit to save your work after each step you do.
Insert Ripple Movie Clip onto Scene 1
  1. Now go back to Scene 1.
  2. Insert a new layer above bg layer and call it ripple1.
  3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
  4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed your square or rectangular vector in ripple_mc Movie clip.
  5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
  6. Insert another new layer above ripple1 layer and call it ripple2
  7. Insert Keyframe into the 20th frame of ripple2 layer.
  8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr just the way you did in step 4.
  9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
  10. Insert frame (F5) into the 40th frame of bg layer.
Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.