Step 1

• Take an image to use
• Create a new flash document.
• Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 264 pixels.
• Select white color as background color.
• Set the Flash movie’s frame rate to 54 and click ok.

Step 2

• Call the current layer any name , i named this one motorcycle, (double-click on its default name (Layer 1) to change it.)
• Now go to , file > Import > Import to stage (Shortcut key: Ctrl+R) and import the image that you just saved in step 1 into a flash stage.

Step 3

• While the photo is image 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.

Step 4

• While the image is still selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.

• Click now on frame 10 and hit F6 key.
• While you’re still on frame 10, hit F6 key ten times.
• Go back on frame 11 and hit delete key on the keyboard. Do this also for frame 13,15,17 and 19.

Step 5

• Click on frame 70 and 75 and hit F6 key.
• Go to  frame 75, place the image on the position like it is shown on the picture below.

• Go  on frame 55, select the Selection Tool (V) and click once on the image to select it.
• Then, go to the Properties Panel (Ctrl+F3) below the stage.
• After that, select Filters tab from the left side.
• Click on the plus icon and select the Blur filter.
• Make the adjustments as follows:

Step 6

• Click on properties button.
• On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follows:

• Go back on the first frame and place image on the position like it is shown on the picture below.

• Go to  frame 1, repeat steps 5  and 6.

Step 7

• Right-click anywhere on the gray area between frame 1 and 10 and frame 70 and 75 on the timeline and choose Create Motion Tween from the menu that appears.

Download source: banner.zip

After you have completed  flash easing ball animation, you should have it all on one layer.

Step 1

• Create a new layer for the shadow.
• Ensure that the shadow layer is underneath the ball layer.
• If it is not, simply click and drag the layer until it moves beneath the first layer.
• On frame 1 of your shadow layer, draw a new circle, the same size as your ball.
• Alternatively, double click your ball and then copy it, then return to Scene 1, and paste it on the shadow layer.
• Change the color of the new ball to a light grey.
• The Position will be  underneath the ball, see Img 1.

Img 1

Step 2

• Reshape the shadow, because it doesn’t look too realistic.
• Select the shadow, the select the Free Transform Tool from the Tools menu.
• You should see various boxes around your shadow.
• Now  flatten the shape, so select the middle box along the top of the shadow, and drag it down, see Img 2.

Img 2

• Release the mouse button and it should now look something like this, once you have shaped it correctly see Img 3.

Img 3

• Position the shadow so when the ball bounces, it is underneath it.
• So make sure it is in the right place, go to frame 15 on your shadow layer. You should see the ball at the bottom of the stage. Position the shadow so it is in the following position, see Img 4

Img 4

Step 3

• Insert a keyframe on frames 15 and 30 on your shadow layer, by right clicking the frame and selecting “Insert Keyframe”. Once you have done this, create two motion tweens.
• Between frames 1 and 15, and the other between 15 and 30.
• Do this by right clicking and selecting “Create Motion Tween”.
• This timeline should look like Img 5

Img 5

Step 4

• Last step, to get the shadow smaller as the ball moves away from the ground, go to keyframe 1 on your shadow layer. Select the Free Transform Tool again.
• Reduce the size of the shadow by pulling either the left or right hand side handles inwards.
• You should reduce the shadow to around the following size, see img 6

Img 6

• Do the same for keyframe 30, reduce the size of the shadow to the same size as the shadow in keyframe 1.
• Test the movie Control + Enter.

Step 1

• Go to the Properties menu and change the Frame Rate number from the default 12 to 25.
• Select the Oval Tool, draw a circle on the stage, near the top, in the middle.
• keep the circle perfectly round by holding shift while you drag the mouse, see Img 1.

Img 1

Step 2

• Rename the layer from Layer 1, to “Ball”.
• Now go back to your ball, and select it with the selection tool. Make sure you select the stroke around the edge of it, if you have one. Once you have it selected, right click and select “Convert to Symbol…” or press the hotkey F8. Make sure you have movie clip selected, and name the movie clip “ball_mc” (mc meaning movie clip), see Img 2.

Img 2

Step 3

• The next thing to do is plan where we want the keyframes. We already have one on frame 1, but we need a keyframe where the ball will be at the bottom, and another for when it bounces back up to the top.
• Add two new keyframes, to frames 15 and 30, see img 3.

Img 3.

Step 4

• Click on keyframe 15. The ball should be selected, but if not, use the selection tool to select it.
• Press the down key on your keyboard.
• If you hold shift while pressing an arrow key, it will move the object faster.
• At frame 15, your stage should look like this (see img 4 )

Img 4

Step 5

• If you go to keyframe 30, you will notice that the ball is still at the top, which is what we want.
• Right click on a frame between 1 and 15 (the first and second keyframes), and select “Create Motion Tween” , see img 5.

Img 5

• Once you do this you will see the frames turn blue, and an arrow passes through them. This indicated a motion tween. Do the same between the second and third keyframe.
• If you test your movie at this stage, the ball will move up and down.
• It doesn’t look very realistic, so we will add easing.

We need to add the easing twice, one for the first tween, and one for the second. Click on your first motion tween (where the frames are blue between keyframes 1 and 15). Your Properties menu should change. You should see an Ease box. The value will be set to 0 as default. The blue arrow to the right opens a sliding bar. If you slide it down, the frames will ease in (which means they will begin slow, and finish faster). If you slide it up, the frames will ease out, which does the opposite. We need to ease it in, so slide it downwards all the way to -100, see img 6.

Img 6

• Do the same for the motion tween in between keyframes 15 and 30, except this time, make the tween ease out.
• Do this by sliding it upwards all the way to 100.
• Test your movie Control + Enter

• Create a new document of size 400×400
• Import an image to the stage. Make sure the image is size 400×300
• Position the image on the top left corner
• Convert the image into a movie clip. Name it “imageMC” and set the registation point to the center
• Give the image an instance name of “drawingArea”
• Open your Components library (Ctrl + F7). Drag one Slider to the stage. Position it however you want
• Give the slider an instance name of “sizeSlider”
• Apply the following settings ( see Fig 1)

Fig 1

• Drag another slider to the stage.
• Give it an instance name of “densitySlider”.  Apply the following settings ( see Fig2)

Fig 2

Step 2

• Open the actions script panel and type the following:

/*
We need to create a BitmapData object in order to
work with pixels of a Bitmap object.
We want the wallCanvas to be transparent
at the beginning, that's why we use the 0x00ffffff
value as a parameter.
*/
var wallCanvas:BitmapData  = new BitmapData(stage.stageWidth,
stage.stageHeight - 100,
true, 0x00ffffff);

//Create a Bitmap object to refer to the  BitmapData object
var bitmap:Bitmap = new Bitmap(wallCanvas);

//Add the bitmap to the stage
addChild (bitmap);

//We listen for the mouse down event on the wall
drawingArea.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);

//We listen for the mouse up event for the whole stage
stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);

//This is the color of the spray
var color:uint;

//This is the maximum radius of the spray
var maxRadius:Number;

//This is the density of the spray
var density:Number;

//This is called when the mouse is down on the wall
function mouseDownHandler (event:MouseEvent):void {
	//Add the EVENT_FRAME so we can draw in each frame
	addEventListener (Event.ENTER_FRAME, onEnterFrame);
}
 
//This is called when the mouse is released
function mouseUpHandler (event:MouseEvent):void {
	//We don't need the EVENT_FRAME, if the mouse is released (nothing to draw)
	removeEventListener (Event.ENTER_FRAME, onEnterFrame);
}

//This function is responsible for the whole drawing
function onEnterFrame (event:Event):void {

	//Get the size from the sizeSlider
	maxRadius = sizeSlider.value;

	/*
	Get the color from the myColorPicker.
	We add 0xff000000 to the color to make the pixel
	visible when we draw it (we draw the pixel in the for loop).
	*/
	color = myColorPicker.selectedColor + 0xff000000;

	//Get the density from the densitySlider
	density = densitySlider.value;

	/*
	The density defines how many loops we have.
	In other words, how many pixels are drawn in each frame.
	*/
	for (var i:int = 0; i < density; i++) {

		//Calculate a random angle
		var angle:Number = Math.random() * Math.PI * 2;

		// Calculate a random radius for the pixel to be drawn
		var radius:Number = Math.random() * maxRadius;

		//Calculate the x and y positions
		var xPos:Number = mouseX + Math.cos(angle) * radius;
		var yPos:Number = mouseY + Math.sin(angle) * radius;

		//Draw the pixel.
		wallCanvas.setPixel32 (xPos, yPos, color);
	}
}

Step 1

• Import an image you want to use.
• Convert the image into a movie clip (name it whatever you want).
• Give it an instance name of “imageMC”.

Step 2

(ActionScript code)

• Create an new actions layer and type the following:

//(This container contains all the mask graphics)
var container:Sprite = new Sprite();

addChild (container);

//(Set the container to be the images mask)
imageMC.mask = container;

//(Set the starting point)
container.graphics.moveTo (mouseX, mouseY);

addEventListener (Event.ENTER_FRAME, enterFrameHandler);

/*Draw a new rectangle in each frame and add it onto the container
(NOTE: you can use all kinds of shapes, not just rectangles) */
function enterFrameHandler (e:Event):void {
	container.graphics.beginFill(0xff00ff);
	container.graphics.drawRect(mouseX-50, mouseY-50, 100, 100);
	container.graphics.endFill();
}

Mouse.hide();

In this tutorial  you will learn :

• how to import any transparent image into a flash stage
• how to convert a image into a Movie Clip Symbol
• how to apply Tint effect

Step 1

• Download transparent png image i use this one ( see fig 1 )

Fig 1

Step 2

• Create a new flash document.
• Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 250 pixels and the height to 500 pixels.
• Select black as background color.
• Set your Flash movie’s frame rate to 30 and click ok , See fig 2.

Fig 2

Step 3

• Change the name of  current layer to fancy gril.
• Double-click on its default name (Layer 1) to change it.
• Press Enter once you have typed in the new name.
• Choose now File > Import > Import to Stage (Ctrl+R) and import the image that you downloaded in step 1 into a flash stage.

Step 4

• We still have the image selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol, see Fig 3.

Fig 3.

Step 5

While the new made Movie Clip 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,
• Click on the Align horizontal center button and
• Click the Align vertical center button.

Fig 4

• now click on frame 20 and 45 and press F6 key.

Step 6

• Now go back on the first frame, select the Selection Tool (V) and click once on the image to select it.
• Go to the Properties Panel (Ctrl+F3) below the stage.
• On the right, you will see the Color menu.
• Select Tint in it and make the adjustments as follow( see fig 5)

Fig 5

Step 7

• Select the  Selection Tool (V) and click again once on the image to select it.
• After that, go again to the Properties Panel (Ctrl+F3) below the stage.
• Select FIlters tab on the left side, click on plus icon and choose Glow.
• Now, choose the following options ( see fig 6)

Fig 6

• Repeat this process also for frame 20.

Step 8

• Right-click anywhere on the gray area between frame 20 and 45 on the timeline and choose Create Motion Tween from the menu that appears see fig 7.

Step 1

• Create a new Flash document, ( CTRL + N)
• Set the dimension whatever you want
• 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.

Fig 8

Test your movie

Step  1

• Open Adobe Flash and go to File> Import> Import to stage. Locate the saved car photo and click OK.

Step 2

• You need to make the photo look transparent for easier tracing later on. To do this, click on the photo and press F8. Choose the graphic option and click OK.

Step 3

• Select the photo and on the properties bar (Ctrl-F3), change the Color bar to Alpha. Set the opacity to 38% – 50%.

Step 4

• You can now use the pencil or pen tool to start draw the outline of the car. You might want to set the “Smoothing” to 60 and the option part (below the tools) to “Smooth” for better tracing

Step 5

• Once you’ve done with the outline, it’s time to color the car. Use the paint bucket tool to fill in the color you prefer. You can even use the gradient colors!

Step 6

• Remove the photo layer and you’re done! Try export the image to JPG or any other format for various usage.

Download the project source car-vector.zip

Download the project source shapetween.zip

In this toturial We will learn how to create a tweened animation with  Shape Tweening.

What we will do:

We will create 2 different objects:

• 1- Circle.
• 2- Square.

Because there’s Shape Tween, flash gradually changes the shape of the circle to square when it gets to the 15th frame.

Note: You can place Text instead of the square, make sure you break it apart.

Step 1

Start by clicking on the first frame of “Layer 1“, just to be sure the object we are going to draw will be placed there.

• Now draw a circle on the stage using the “Oval Tool“, as shown in Fig 1.

Next, we are going to apply “Shape Tween” to the KeyFrame.

First you need to make sure the object is broken apart, you can not apply “shape tween” to a grouped object.

Fig 4

Download the project source motion-guide.zip

We will learn how  to use motion Guide to guide our tweened animation.
Note: Please make sure you have already read and understood the tutorial on “Motion Tweening” .

Step 1

• Start by clicking on the first frame of “Layer 1“, just to be sure the object we are going to draw will be placed there. You will see the example on Fig 1.

Fig 1

Step 2

• ok, now click on the first frame of the new layer and use the “Pencil Tool” on your left to draw any form of lines, straight or a curved.

I used the “Line Tool“.  This will be the guide that our object (yellow circle) will follow when it’s on motion. Look at Fig 2 please.

Fig 2

Easy no?

Step 3

• Good, now right click on the 15th frame of the “Guide” Layer and select “Insert Keyframe“.

This is the result:

Step 4

• Click on the first frame (A) of the motion-tweened object and drag the object to the starting point of the guide line you created.

Fig 3