Thursday 28 February 2013

Adobe Flash – Glowing Text


Open your Adobe Flash and select Action Script 2.0
If needed then be familiarize with this workspace:

  • ·         Change the name of your layer 1 to background
  • ·         Next, select your rectangle tool with black fill and black stroke color.
  • ·         Make sure your rectangle is big enough to cover the stage

Example:
  • ·         Create a new layer by clicking on the new layer icon at the bottom left corner of the timeline
  • ·         Change the name of the new layer to Glow text
  • ·         Then select our text tool and change its font size to 50.
  • ·         Change the text color to gray.
  • ·         Change the font family in your favor
  • ·         Move your text in the middle of our black background.

Example:
  • ·         In our Glow Text Layer: right click on the 10th playhead then select insert keyframe
  • ·         Next, we need to select our text with our Selection Tool. (press v for shortcut)

After selecting the text you should be able to see its properties at the right side.
Now, in your text properties we have Position and Size, Character, Paragraph, Options and Filters.


  • ·         Click on our Add filter icon found at the bottom and select Glow, there you can see our Glow Effects.

Remember, we should be in our 10th playhead keyframe.
  • ·         Now, I want you to change your Glow Effects to this just for sample:



Follow the format

Next, still in your Glow Text Layer
  • ·         Right click on the 15th playhead and select insert keyframe (f6)

This is for us to extend the length animation for our glow to be seen.

  • ·         Right click on the 25th playhead and select insert keyframe (f6)
  • ·         Select your text using the selection tool
  • ·         Then go to its properties, under Glow Effects change color red to yellow.
  • ·         Right click on the 30th playhead and select insert keyframe (f6)
  • ·         Right click on the 40th playhead and select insert keyframe (f6)
  • ·         Select your text using the selection tool
  • ·         Then go to its properties, under Glow Effects
  • ·         This time, activate its Inner glow.

Final Step, 1-10, 15-25 and 30-40
  • ·         Right click one by one in between from your 1st keyframe to the 10th keyframe, 15th keyframe to 25th keyframe and 30th keyframe to 40th keyframe.
  • ·         Select create classic tween.

After you should be able to have the same timeline as this:
  • ·         Now, Select your Background Layer
  • ·         Right click on the 40th playhead then select insert keyframe
  • ·         Then Hit Ctrt+Enter to see your progress.










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)












Tuesday 26 February 2013

Adobe Flash - Moving Car


Adobe Flash – How to Make a Moving Car Animation
  
Open your adobe flash and select action script 2.0
Before we start be familiarize with this workspace because we are going to use them in this tutorial.
  • ·         Activate the onion skin by clicking on its icon at the bottom of the workspace.

When you complete this lesson, you will be able to:
Learn how to draw easily with the help of onion skin.
Learn how to rotate wheels or any object with classic tween while moving.
Learn how animate a moving car.

In this tutorial we need to import a side view picture of a car facing right.
If you don’t have one just copy it to Google image and type “facing right car”
I choose this image for in this tutorial:


Now, we have a car that’s facing to the right.
We are going to have a sketch of the car parts
  • ·         Just go to file on your menu bar; import then select import to stage

With the picture in your stage, it should be on your 1st playhead in your timeline.
 We are going to have a sketch on this image with the help of onion skin and line tool.
  • ·         Right click on the 2nd playhead then insert a blank keyframe

There you can see the shadow of your imported car image.
This is how onion skin works; it shows you the outline of your previous and next outline.
Example:

Next, we need to trace the outline of our imported car.
  • ·         Use line tool to trace your car’s outline.

All you need to trace is the cars body, window, side, door and the front light.
Example:
  • Notice how I bend the line tool that I used, you can do that by holding Ctrl+left click while dragging it to align the curve of the car’s outline
  • ·         Next we are going to use paint bucket tool to fill in color to your car.

Since I have an orange colored car, I’ll be filling it with orange.
  • ·         Don’t forget to fill in color to your window and front lights with black.

Example:

Next, we are going to make a wheel with the help of onion skin we can trace the wheels outline.
  • Zoom in the wheels to help you trace the outline a lot easier.
  • ·         Use the oval tool to draw wheel, must have the same wheel size with the original image.
  • ·         We just need one wheel for this part, then after making the wheel we must put a white cross in the middle of our wheel.

The white cross we draw will determine if the wheel is rotating when moving the car. You don’t have to draw the same pattern with image.
Example:
  • ·         Select the whole wheel with selection tool (v) then press right click and select convert to symbol.
  •        Don’t forget to name our symbol to Wheel.


After converting our wheel to symbol, the oval and the white cross that we draw should be intact into one.
  • ·         Double click on your wheel and you’ll be redirected to another timeline. Which will exclusively for the wheels
  • ·         Double click on your layer 1 then change name to “Wheel”.


  • ·         Right click in your 10th playhead then select insert keyframe
  • ·         Right click in between your 1st playhead and 10th playhead, then select create classic tween.



  • ·         While still in your 10th playhead: click on free transform tool in your tool bar
  • ·         Select the wheel and you should be able to see the joints of our wheel.

  • Now we need to rotate our wheel going to the right.

Example:
  • ·         Hit Ctrl+Enter to see if the wheel is rotating.

If it’s not rotating from the right direction, then you probably must have rotated it too much when we used our free transform tool to rotate it.
Never forget to rotate it just a little bit going down. Reread again this part of tutorial if it’s really not working.
 ·         Let’s go back to our main timeline where we created the car body.
To go back in our main timeline just click this icon.

Next, since we have now our rotating wheel we need to have another wheel in the front of the car.
  • ·         Click on the selection tool from the menu baror press (V) for shortcut.
  • ·         Then, just hold CTRL+mouse left click while selecting your wheel
  • ·         Drag it for your front wheel. You can also copy then paste

Example:
We are going to start our moving car animation.
  • ·         Right click on the 1st playhead and select remove frames.

Once we remove the first keyframe, the second keyframe will automatically replace the first one.
  • ·         Select the whole car with selection tool; right click then select convert to symbol and name this car.

All the parts should be in one piece, it’s a lot easier to animate one object.
  • ·         With the zoom tool, zoom out to 50%
  • ·         Place the car in the bottom left of your stage


zoom out to 50%
  • ·         Right click in the 50th playhead; select insert keyframe and then move the car out of the stage


  • Final step, right click in between our 1st playhead and the 50th playhead, and then select create classic tween.

(Hit Ctrl+Enter to see your progress)








Monday 25 February 2013

Adobe Flash - Importing Audio Files


How do we add audio file to your adobe flash action script 2.0
 Open your adobe flash and choose action script 2.0
Then familiarize with this workspace.
Before we start you should be able to have an audio file prepared for this tutorial.

  • Now, in your menu bar, just select File then look for import and click import to library and find the audio file you want to be imported in.

After importing you should be able to see your audio file in your library.
  • ·         In your properties TAB in the left side you should be able to see your library, under library your audio file should be just below item list.

Example:
What we need to do now is we have to transfer our audio file into our timeline
  • ·         Go in your timeline and create a framed under 70th playhead.
  • ·         Under 70th playhead press right click and select insert frame or (F5) for shortcut.

Example:
The reason why were creating a frame under our 70th playhead in your timeline is because that will be the measure length time when playing your audio file. So the moment it reaches 70th playhead, your audio file will automatically stop playing.
To be more accurate, you have to test it for yourself so that you will be able to understand how it works.
  • ·         In your library click and drag your audio file to your stage after look in your timeline you should be able to see that your audio file has been transferred in your layer. You can see a line connecting from the first playhead ending to our 70th playhead. (hit enter to test)

When you hit enter you'll notice that your audio file doesn't finish up playing or it will stop under 70th playhead.
  • ·         If you want to extend the length time when playing your audio file just select and hold the frame under 70th playhead and drag it to the 90th playhead

Example:
If you find it hard in extending your audio file, there's another way to play the whole audio file that you imported
  • ·         Check your audio properties
  • ·         Under the properties tab, you should be able to see the name of your audio file, effect, and sync.
  • ·         There are four sync options and it’s already on stream by default. Change it to start



Notice: You can use your imported audio file in many ways.
Like in your Animation, dubbing, Music background, sound effects and etc.

(Hit enter to see your progress)









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.