Showing posts with label Adobe flash basic animation. Show all posts
Showing posts with label Adobe flash basic animation. Show all posts

Saturday, 20 April 2013

Adobe Flash - Spinning Animation


                                    Adobe Flash - Spinning Animation

  • ·        open your adobe flash and select action script 2.0

·        The idea of this spinning animation it's something to animate that relates to spinning like wheels, boomerang, electric fan and etc.
  • ·        We need to draw some spinning object in our workspace. I choose to draw a simple one like boomerang.
  • ·        Use the line tool to draw the boomerang (N) for shortcut.

Simple way to draw the boomerang is like drawing the mouth of pacman when it's open.
  You can add a paint bucket color if you want to fill its color (R) for shortcut.
Like this:
  • Right click on the boomerang and select convert to symbol

Name: boomerang
Type: movie clip
  • Double click the object boomerang and you will see a different workspace for the boomerang
  • Use free transforming tool (q) shortcut. F
  • Insert a keyframe (f6) in your 2nd playhead
  • Rotate the boomerang going right by little.
Like this:
Our goal is to rotate the boomerang until it goes back to the original position.
For the 3rd, 4th, 5th, 6th, 7th, 8th, 9th and 10th playhead insert all with keyframes and rotate the boomerang little by little in each keyframe until the boomerang reach to its original position.
Go back to our main workspace.
Press this arrow:

Insert keyframe in the 30th playhead in our timeline layer 1
Right click on the 30th playhead and select insert keyframe or simply press f6 for shortcut.
Right click on your layer 1 and select add classic motion guide.

Next, with our classic motion guide layer on our timeline…
Create a blank keyframe in the 30th playhead (f5) for shortcut.
Like this:

Let’s go back to our layer 1 where we created our boomerang.
In our 5th, 10th, 15th, 20th and 25th playhead insert each with keyframe.
Like this:


Go back to motion guide layer and select your first playhead and draw a line with line tool.
This line will show as a guide for the boomerang
Like this:

Now, back to layer 1 and select your first playhead
Use your selection tool (v) for shortcut
Move the boomerang to this designated place and so for the 5th, 10th, 15th, 20th, 25th and 30th.
Like this:


Last part,
Between 1st playhead until the 5th, 5th to 10th, 10th to 15th, 15th to 20th, 20th to 25th and 25th to 30th press right click and select create classic teen.
After putting all classic tween in all frames you should be able to have the same thing as this:



Hold Ctrl and press Enter to see your progress











Tuesday, 9 April 2013

Adobe Flash - Free transforming tool


In this lesson we are going to learn how to animate using free transforming tool.

  • ·         open your adobe flash and choose action script 2.0
  • ·         activate onion skin by clicking its icon below the timeline
  • ·         select the text tool
  • ·         Type a letter in our stage. It could be any letter.
  • ·         Use free transforming tool on our text.
  • ·         Right click on the 2nd playhead and insert keyframe or (F6) for shortcuts.

You should be able to have the same letter found in the 1st playhead on your 2nd playhead.
  • ·         Next, with our free transforming tool select the letter in the stage then you should be able to see its joint in every edge.
  • ·         Right bottom of its joint, select and drag to increase the size of the letter
  • ·         Insert another keyframe and do the same for the next playhead this should be at the 3rd playhead.
  • ·         Again increase it size by little. Let’s increase it size until we reach on our 5th playhead.
  • ·         Hold shift and select the keyframes that we created from the 1st to the 5th playhead.
  • ·         Right click and select copy frames
  • ·         Right click on the 6th playhead and paste frames
  • ·         Hold shift and select the keyframes from 6th playhead to 10th playhead
  • ·         Right click and select reverse frames
  • ·         Right click on the 11th playhead and paste frames
  • ·         From the 11th playhead to the 15th playhead, rotate the letter clockwise with each frame
  • ·         Hold shift and  select the keyframes from 11th playhead to 15th playhead
  • ·         Right click and select copy frames
  • ·         Right click on the 16th playhead and select paste frames
  • ·         Hold shift and select the keyframes from 16th playhead to 20th playhead
  • ·         Right click and select reverse frames

you can resize your letter or rotate it in any way you like just don't forget that the animation would only work with accurate setting of each frames that you have work on. Example, the more slowly or more frames you put in your timeline the more smooth the animation goes.


Thursday, 28 February 2013

Adobe Flash- Animated Banner


How to Make a Banner
Open your Adobe Flash and choose Action Script 2.0
Please familiarize this workspace:


First, we need to change our stage size.
In the properties tab beside the stage, you should find properties size;


  • Select edit and copy this width and height size below:

  • In our timeline: change the name of the layer from layer 1 to background.

Now, we need to create a background for our banner.
  • Select your Rectangle tool and trace our stage size when using our rectangle tool like this:



  • ·         As you can see I’ve covered the stage with grey rectangle with black stroke.

You can choose any color for your background as long you won’t be having any trouble filling your text inside your banner.

  • ·         Create another layer
  • ·         Change the name of the new layer into text
  • ·         Select your text tool and in your properties change your text size to 50 pt.

You can change your family character in your favor.
Example:

Now, insert any text as long as it fits in your background and select your text and move it at the left side of the stage.
Example:
Then in our timeline, both our layers should be inserted with a keyframe under the 30th playhead.
Example:
Now, select your text layer and go to your 30th playhead keyframe.
There we should select our text and move it to the right side of our stage.
Example:
Final step:
  • ·         In our text layer, right click in between our 1st keyframe and 30th playhead keyframe then select create classic tween

Also please take notice that our text layer should be above our background layer.
  • ·         Just hold select our text layer and drag it above our background layer.
  • ·         In your menu bar go to file; click export then select export movie and chose your designated location for your banner.

I saved mine in my desktop because it’s a lot easier to find.
Open your exported movie banner to see your banner.
Before ending this tutorial, I want you to remember that this tutorial is just an idea on how to create a banner in adobe flash.
After this tutorial you can evaluate your skill in making a better banner.












Adobe Flash - Frame by Frame Animation


Adobe Flash – How to make a simple animation
Open your Adobe Flash and select Action Script 2.0
Before we start, please familiarize with this workspace.

Activate your onion skin to guide in our frame by frame.
  • When you complete this lesson, you will be able to:

Learn how to animate frame by frame.
Learn how to manipulate playhead.
Learn basic explosion effect.
Learn how to use onion skin.
Learn how to animate using different layers.

In your timeline we have our layer 1.
Double click your layer 1 and change the name to Rocket.
Draw a rocket in our stage.
Example:
Now, we need to place our rocket below our stage.
Example:

  • ·         In your 2nd playhead, insert a keyframe hit F6 for shortcut.

Now, that we have our 2nd keyframe
  • ·         Select your rocket and adjust it by dragging it above by little.

Example:

Our goal is to create 10 keyframes from our 1st playhead to the 10th playhead.
We need to move our rocket little by little or on each keyframe that we created.
Remember, that our onion skin will determine the previous location of your rocket so use it as an advantage to adjust from getting above our goal.
In the 10th playhead your rocket should be in the middle
Example:
Next step, we need to insert blank keyframe in our 11th playhead.
Simply press right click and select insert blank keyframe in our 11th playhead or just hit F7 to insert blank keyframe for shortcut.
Now, in our 11th playhead, I want you to draw a small red circle at the tip of our previous rocket.
Use oval tool to create a circle and change stroke and fill color to red.
Example:

For the 12th playhead, we need to insert another blank keyframe and draw another circle.
This time it should be alittle bit bigger than the previous one and you must put it in the same location of the previous circle.
Add some lines in our circle just like this.
Example:
Now for the 13th playhead, I want you to draw a heart.
You can use Brush tool as long as you fill and stroke color is red.
Don’t forget to put your heart in the same position as the previous one.
 Example:

Now, we need to insert a keyframe in our 20th playhead.
In your timeline you should be able to a similar view as this:
(Hit Ctrl+Enter to see your progress)
This is simply a head start basic animation.
Now, let’s try to have another layer.
Right click on your Rocket layer select insert layer.
There you can see in your new layer that it has been inserted with blank keyframe from 1st playhead to the 20th playhead.
Example:
In our Rocker layer or main layer I want you to copy all the keyframes that we have inserted from the 1st playhead to the 20th playhead.
Hold shift then select the 1st playhead to the 20th playhead and press right click and select copy frames.
Go back to your New layer that we have inserted then press right click on our 21th playhead and select paste frames.
After that you should be able to have two rocket animations and that’s how you manipulate frames.
Example:




(HIT ENTER TO TEST)












Monday, 25 February 2013

Adobe Flash - Classic Motion Guide

How to use classic motion guide in adobe flash


First of all you have to open your adobe flash and select action script 2.0
Then before we begin I want you to familiarize with this work space.




Now let's begin, in our timeline we have our layer 1.
First we need to make a classic motion guide layer.
  • Press right click on our layer 1 and select add classic motion guide.
  • After that you should be able to have a Guide: Layer 1 above your main layer

Classic motion guide determines the direction of the path you’re going to.
But here in this basic tutorial, you’re going to learn a few ideas on how classic motion guide works.
First we need to have a motion guide and to do that we have to create one in our guide: layer 1.
  • ·         Now select our guide: layer 1 and where going to use our oval tool to draw a circle
  • ·         There shouldn’t be a fill color



We only need to have a black stroke color to draw this circle.
  • ·         Create a circle and go to your tool bar and select selection tool or (v) for shortcut.
  • ·         Select the whole circle using selection tool and check its properties on the side.

There you can see position and size; I want you to have the same size and position as I have here.
The circle will serve as the motion guide.
  • ·         Next, create a small circle in your timeline in layer 1 with black stroke and fill color

In our stage we both have our classic motion guide and circle.
Before we can use our classic motion guide,
  • ·         In guide: layer 1: right click in your 50th playhead and select insert keyframe
  • ·         Now for our layer 1, right click on your 10th playhead to 20th, 30th, 40th and 50th then select insert keyframe (F6) on each.

After that your guide: layer 1 and layer 1 should have the same look as this:

  • ·         Select your layer 1 then select your first keyframe in the first playhead.
  • ·         After that use your selection tool (V) then click and drag your small circle below our classic motion guide (circle).

Like this:
  • ·         Next, select your second keyframe in your 10th playhead
    ·         Drag and drop your small circle in the right side of your classic motion guide.
    When you drag your circle to your classic motion guide line it will somehow attract your circle to our motion guide line. With this, alignment won’t be too hard.
    Like this:
    ·         In your 20th playhead do the same drag and drop your small circle but place it above our classic motion guide.
    ·         Then for the 30th place it in the left side of our classic motion guide.

    ·         Again for the 40th playhead select your keyframe and place your small circle below our classic motion guide. Same place where the first circle was placed.
    ·         In our 50th playhead in layer 1, drag and drop your circle in the middle of our classic motion guide.
    ·         Last but not the least, in your layer 1, right click in between all your keyframes and select create classic tween
    After create classic tween in our timeline, you should be able to have the same look as this.





    Hit CTRL+Enter to see your progress.