Archive for the ‘Flash animation tutorials’ Category

Here We Are going to start to making Flash e Card

1. Create a video animation.

2. Under Select Effect menu, You can select the effect. For this tutorial, we use “Aurora” effect.

You can choose the select mode. There are four select mode, Intro, Ending, Intro & Ending, Looping.

3. Go to tab 2, Effect Source. Select a bitmap file to be used as the effect source. The maximum bitmap size supported are 256×256. Any bitmap bigger than this dimension will be resize to fit 256×256. In this tab, you can select a color & the sections. You can select more than one section at once. (Eg: left and right, top and bottom, etc).

4.we use red color((255, 0, 0), when you hit play button, you will see, there are aurora effect.

We set the tolerance into 60.

5. Next, click on tab 3, Workspace. Here you can set the project background, dimension, frame rate and duration. You can use a single/flat color background or a background image. For this tutorial, we use a background image.

6. Click on tab 4, Fine Tune. Here you will customize the behavior of your particle effect to suit your need. On Tab General, we change the density, speed, etc. For tab Color, we change the alpha into 0.

7. Last, click on tab 5, Publish. You can select how you want to publish your project. We want to publish as avi.

Part I Create animation e-card.

1. Run Flash Demo Builder

2. From startup menu, choose “Blank Project” & click on “OK” button.

Flash Demo Builder will show windows to choose the dimension. For this tutorial, we use 400×300.

3. For this tutorial, we want to insert the video file that have made with Flash Particle Video. click Insert => video.

click browse to open your video file.

You can change the properties of video, like chroma key, compression, etc.

For this tutorial, we leave it as default.

4. We want to insert text. You can find tools on the left side. Click on insert a text.

You can type it what do you want to write.

5. Last, We want to Publish e-card by email. So your friend will be easily to find out.

6. Congratulation! Your animation e-card is done.

Here is the result:

Today we our going to make a peeling sticker effect in flash. Here we are taking the stage dimensions as 300×400 and the FPS is 24, as shown in the Figure below. To start with the tutorials

1. First import the downloaded used images from the source. To do that, Go to the File menu >Select Import > Select Import to Library. See the reference image below.

2. Before starting we already have layer 1, now name the layer as sticker front. Drag the front_Sticker_img from the library on to the stage and align it to the center of the stage. Then Convert the image to movie clip. To do that, Select the image > Right click > Select the Convert to Symbol > Select Movie Clip and Name the symbol as sticker front. See the reference image below.

3. Insert a new layer and name it as sticker back. Drag the back_Sticker_img from the library on to the stage and align it to the center of the stage. Then Convert the image to movie clip. To do that, Select the image > Right click > Select the Convert to Symbol > Select Movie Clip and Name the symbol as sticker back. See the reference image below.

4. Now select the sticker back, and then flip it vertical. To do that, Go the Modify menu > Select Transform > Select Flip Vertical. See the reference image below.

Now apply skew on it. To do that, Open the Transform panel from the window menu. Select Skew and set value to 162 degree and -18 degree. See the reference image below.

Select the sticker back symbol, and position it to the top outside of the stage. Place the image according to the given reference image below.

5. Now insert a new layer with name as shadow. Create a shape same as green outline given in the reference image in below.

6. Now insert a new layer with name as mask. Create a box shape on the top of the sticker front image as given in the reference image in below.

7. Now select frame 35 of all layers and Press F5 to insert new frame. See the reference image below.

Now select the sticker back on frame 35 and Press F6 to insert a key frame. Then change the position of the image to the bottom as given in the reference image below.

Now select any frame between frame 1 and frame 35, then Right click > Select Create Motion Tween.

8. Now go to the shadow layer. Open the color panel from the window menu. Now select the shape and select the liner gradient from the color panel as shown in the reference image below.

Now select the white color bucket labeled as 1 in the reference image. Then choose black color, refer label 2 in the given reference image below, and set alpha to 0%. See the reference image below.

9. Take the Gradient Transform Tool from the tool bar. See the reference image below.

10. Select the shape using Gradient Transform Tool, then hold down the small circle and rotate it to 90 degree angle. See the reference image on the left.

11. Hold down the Small Square and drag to up. Do not cross the center point. See the reference image on the Center.

12. And hold down the center of the gradient and drag to the bottom exactly as given in the reference image on the Right.

13. Select frame 35 of shadow layer and Press F6 to insert a key frame. Select the shape using arrow tool from the toolbar and move the shape to the bottom exactly as given in the reference image below.

Take the Gradient Transform Tool from the tool bar. See the reference image below.

Hold down the center of the gradient and drag to the top of the shape exactly as given in the reference image on the Right.

14. Now select any frame between frame 1 and frame 35, then Right click > Select Create Shape Tween. See the reference image below.

15. Go to the mask layer and Select frame 35 on the same layer and Press F6 to insert a key frame. Move the mask shape to the bottom to cover the sticker front image complete. Do it exactly as given in the reference image below.

Select any frame between frame 1 and frame 35, then Right click > Select Create Shape Tween.

16. Now we will apply mask. To do that, Right Click on the mask layer > Select Mask. See the reference image below.

Now select the sticker front and sticker back layer by pressing shift key. Then Drag them little up and left side over the shadow layer. It will mask you other layers also. See the reference image below.

17. Select frame 35 on the all layers and Press F6 to insert a key frame. Again Select frame 85 on the all layers and Press F6 to insert a keyGo to the frame 1, and Select the key frame of three layers except of sticker front layer, then Right click > Select Copy Frames. See the reference image below.

Go to the frame 50, and Press F6 key to insert key frame on all layers.

Go to the frame 85, Press F6 key to insert key frame on all layers. Then Select the key frame of three layers except of sticker front layer, then Right click > Select Paste Frames. See the reference image below.

18. At last apply shape tween and motion tween on the layers as given in the reference image below.

Publish the file and see the effect as shown in the Figure below.

We all know how to make a frame in flash,in this tutorial you see how to edit a multiple frames of animation.
Have you ever finished animating something only to decide that you need to change it’s placement on the stage or size on the screen? You may have tried selecting all of the frames on that layer and moved the first frame, hoping that the remaining frames in the layer would also move with it, only to find out that you have only moved the first key frame and nothing else.

The good news is that yes, you can move all of the frames at the same time, you just need to use the “Edit Multiple Frames” feature so that Flash will understand that you want to alter more than just one frame.

Let’s take a look at a sample project where we want to scale up the animation on the character layer:

Look at the onion skinning features and you’ll see on the far right of them two boxes that are both colored in. This is the “Edit Multiple Frames” feature and is what you want click on to activate.

This feature operates just like the “Onion Skinning” feature. Place your timeline marker in the middle of your animated frames and pull the handles out so that they encompass all of the animation that you wish to alter.

Once the handles are pulled out in the timeline, you should be able to see all of your key frames at once on the stage.

It is important to lock any layers that you do not want to alter or change. In this case, we will lock the ‘background’ layer so that it doesn’t accidentally get selected.

Next you have to select all of the art on the stage. You can do this by either ‘selecting all’ (hotkey “Control”+”A”) or by dragging over all of the art with the Arrow (V) tool. DON’T FORGET THIS STEP!

With all of the art selected, we’ll use the “Free Transform” tool by pressing the “Q” keyboard shortcut, and pull on the corner handles to scale all of the art up at the same time.

You can do more than just scale or move the art, you can also apply filters to all of the symbols at the same time.

In this example we will also select “Tint” from the “Properties Bar” and choose a color to tint all of the symbols at the same time.

When you are finished, simply turn off the “Edit Multiple Frames” feature by clicking on it. You have now successfully edited multiple frames of animation!

In this Tutorial you learn how to animate a paper roll using masking in Adobe Flash.

Let’s get started!

Open a  new flash document with action script 2.0.

Step 1: Setting Up Document Properties

Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Now change the stage dimensions as 700×438, FPS = 30, and Background Color = Black as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Step 2: Importing necessary images

First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library.

Step 3: Positioning images on to the stage

Before starting we already have layer 1, now name the layer as 1. Drag the img1 image from the library on to the stage.

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, check on the “Align to stage” check box.

Step 4: Creating Transition1

Press Ctrl + F8 to create a new symbol. Type the name Transition1 and select type to Movie Clip.

You will enter the Transition1 movie clip and rename the layer as img1. Then select the image and Press F8.

Drag image img2 from library and Press F8 to create a new symbol. Name this symbol as img2. But do not retain this symbol on the stage as of now. Keep this in library.

Step 5: Creating Transition1 – Arranging elements

Insert a new layer and name it as img1_mask.

Now create a rectangle with the dimension are as follow.

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties.
W = 40
H = 450
X = -390
Y = -225

Now insert a new layer again and name it as img1_flip.

Now copy img1 image by pressing ctrl + C and Paste on img1_flip layer using ctrl + shift + V. Then go to the modify menu > Transform > Flip horizontal.

Now move the flipped image to left till it comes out from the stage. Do not leave single pixel space between both the images as given in the reference image below.

Now insert a new layer and name it as img1_flip_mask.

Now create a rectangle with the dimension are as follow.

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties.
W = 61
H = 438
X = -411
Y = -219

Now copy this rectangle by pressing ctrl + C and insert a new layer and name it as gradient_effect. Then paste the copied image by pressing ctrl + shift + V.

Now apply gradient color to the rectangle. To do that, go to the window menu > color or press alt + shift + F9 to open the color panel.

After applying gradient, select the left color bucket and type 7E7E7E in the color code box highlighted in the color panel as given below.

Now press between the both buckets and type #FFFFFF in the color code box highlighted in the color panel. Then set alpha to 0%.

Step 6: Creating Transition1 – Applying Shape and Classic Tween

Now select frame 99 of all the layers except of img1 layer as given in the reference below. Then press f6 to insert key frame. After that select frame 100 of img1 layer only and press f5 to insert frame.

Now apply animation. To do that, select any frame between frames 1 to 99 and do right click and select Create Shape Tween.Apply shape tween on; gradient_effect layer, img1_flip_mask layer, and img1_mask layer.

Now select any frame between the frame 1 and 99 of img1_flip layer and create Classic Tween. To do that, right click > select Create Classic Tween.

Step 7: Creating Transition1 – Creating animation

Now Select the gradient_effect layer, img1_flip_mask layer, and img1_flip layer elements and left alight each of them by pressing the highlighted button given in the reference image below.

Then move them to the right till it comes out from the stage as given in the reference image below.

Select the rectangle placed on img1_mask layer and then increase the width of the rectangle using free transform tool to cover the image.

Step 8: Creating Transition1 – Applying Mask

Now Select the img1_mask layer and do Right click, then select mask. Do the same with img1_flip_mask layer.

Step 9: Preparing transition on main timeline

Click on the Scene to come out from the transition1 movie clip.

Now go to the properties panel and select the Graphic as given in the reference image below.

Then come down in the properties panel and select the Play Once from the LOOPING as given in the reference image below.

Now insert a new layer and name it as 2. Then select the frame 225 of both layers and press F5 to insert frame.

Now copy the transition1 from layer1 by pressing ctrl + C. Insert a new keyframe by pressing F6 and then paste the copied transition1 by pressing ctrl + shift + V. Select the clip and do right click and then select Duplicate Symbol…

Type name Transition2.

Now double click on the transition2 to enter into the clip.

Now go to the properties panel and select the image on the first frame and then press swap.

A swap symbol box will appear then select img2 and press ok. It will replace the img1 symbol to img2 symbol.

Do this Method on each img1 symbol to replace that with img2.

Press ctrl + enter. You will see the effect something like this.

Flash Preloader

Create a Simple Flash Preloader using basic actionscript

A Flash preloader is useful in preventing partial loading of a movie while it plays. The preloader is usually made attractive to the viewer to keep him/her occupied while the full flash movie or some external data is loaded in the background. We are going to learn how to create a very simple preloader while concentrating on the actionscript that makes it work.

Create the Simple Flash Preloader

Once you understand the basics behind the Flash preloader you will be able to create more advanced preloaders with moviclips and additional actionscripting. Follow the steps given below:

2. Preloader Loop: Now we need to make a loop that executes till the last frame is loaded. To make use of a very basic animation we will display three dots after the loading text to show that loading is taking place. To do this insert three key frames after the first frame in the actions layer. Now place one dot, two dots and three dots in the three frames respectively (as shown below).
frame 2 (actions layer)

frame 3 (actions layer)

frame 4 (actions layer)

• Now we need a frame to return to the first frame as the condition is being checked there. For this double click the fifth frame in the actions layer and give the following action script.

  gotoAndPlay (1);

  Logic: We just return the control to the first frame to complete a loop.

  

• Now click on the sixth frame in the Preloader layer and give it the label start. That’s it your simple preloader is ready. Just make sure that all the stuff that you want to be displayed in your movie starts from the 6th frame and that you label the last frame of your completed movie as “end”. Alternatively for Flash 5 and above you can use the following code instead of the code given in the first frame:

  ifFrameLoaded (_totalframes) {
  gotoAndPlay (“start”);
  }

  Here, we have just replace the “end” frame with the inbuilt variable _totalframes which contains the total number of frames in the main movie timeline.

• We recommend you create an attractive movie clip and place it in frame 1 to make your preloader look more interesting then the plain loading text used here

Finished Flash Preloader Interface

Check if your preloader timeline matches our figure above.

Test your movie for a 64KB modem by pressing Ctrl+Enter twice. You will be able to see how the preloader progresses and then starts playing at frame “start”.

That’s it, your simple Flash preloader is ready! Now continue with the rest of your animation.

TIP: Keep a new document with your favorite preloader (with nothing else in it) so you can start on your next project with a copy of it (preloader ready).

Valentines photo animation!

Flash animation tutorial using this thoroughly explained, detailed flash lesson, I will explain to you how to create very attractive valentines photo animation using some special flash tricks. You don’t have to use action script code to make this lesson. Using this lesson, you will also learn how to import any photo into a flash stage, how to apply blur filter on it, how to create mask layer and much more. You can use this animation for Valentine’s day web banner… Let’s start!

Step 1

First, save the valentine’s  photo below that we will use for this lesson as background.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 350 pixels and the height to 361 pixels. Select any color as background color. Set your Flash movie’s frame rate to 33 and click ok.

Step 3

Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import a photo that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 5

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 6

Click now on frame 50 and hit F6 key.

Step 7

Go back on the first frame select the Selection Tool (V) and click once on the photo 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 8

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

Step 9

Create a new layer above the layer background and name it mask heart.

Step 10

Select mask heart layer and draw a heart shape like it is shown on the picture below!

Step 11

While the heart shape is still selected, repeat step 4.

Step 12

Click now on frame 50 of layer mask heart and hit F6 key.

Step 13

While you’re still on frame 50, select the Free Transform Tool (Q) and enlarge heart shape like it is shown on the picture below!

Step 14

Right-click anywhere on the gray area between frame 1 and 50 on the timeline and choose Create Shape Tween from the menu that appears.

Step 15

Select mask heart layer and convert it to a mask by right-clicking on the mask window layer and selecting Mask. See the picture below.

Step 16

Go back on the first frame of layer background, select the Free Transform Tool (Q) and enlarge a photo like it is shown on the picture below!

Flash animation tutorial  will explain to you how to create very attractive valentines photo animation using some special flash tricks.

Flash animation tutorials although usability evangelists often consider Flash to be a usability nightmare, used properly, Flash can provide users with a rich and interactive interface which would be impossible otherwise. Today Flash is the de-facto standard for interactive elements on the Web as most users install Flash plug-in by default. And in fact, there are many paths creative designers can take to create a more interactive and user-friendly interface.

Flash animation tutorial will explain to you how to use toolsand make atutorial easy wayto learn and create.In this tutorial  we use Adobe Flash to make interesting animation effect without using ActionScript. Some Flash animation may use only a few lines of simple

Hypnotic gear rotation tutorial

I’m not sure what inspired me to do this crazy gear rotating animation, but for some reason I just started making a simple gear in flash, then what does a gear do? well it rotates!.

So enough for the introduction, here you can see how to make a gear in flash, then animate it so it rotates, make a couple of copies and the result might seem a bit hypnotic as I think it did.

Start by making an oval on the stage as shown below, then make 4 more ovals, smaller and place them as shown below.

Select all the four small ovals, make a copy and rotate it so we now a 8 following around the big oval shape.

Now if you delete all the small ovals, your shape should look like below.

One last thing to do with the shape is to make on big hole in the middle using the same method as before.

Right click your new gear shape and convert it to a movie clip.

In the timeline make a new keyframe at frame 10, right click between frame 1 and 10, choose motion tween.

Go to the properties panel and change the rotation from auto (default) to CW (clock wise).

Once again right click your shape and convert it to a movie clip, (so we have an movie clip animation in a movie clip).

Make a copy of your gear, double click it and go to the properties, change the rotation from CW to CCW.

Flash animation tutorials  last thing I did was make a lot of copies, placing them next to each other, testing and testing, so they rotate in oppisit direction to make it look right.

A brief tutorial about making an animated sprite character in Macromedia Flash.Sprites are basically small bitmaps or image files that are made up of pixels. Mario, for example, is a sprite.

Flash animation tutorial will explain to you how to use toolsand make a tutorial easy way to learn and create.In this tutorial  we use Adobe Flash to make interesting animation effect without using ActionScript. Some Flash animation may use only a few lines of simple