Making Sounds for FLASH with Garageband

garageband

garageband


Launch Garageband
File New – Voice
Name it ‘sound1’ – save to your Home drive
Plus in the logitech headphones (with microphone)
Say YES you would like to use them
Go to Preferences
Set the sound INPUT to logitech headphones
Set the sound OUTPUT to logitech headphones
Record your voice saying ONE TWO THREE
When it has recorded – SAVE it
Now SHARE – export song to disk
IMPORTANT – Choose MP3 encoder
SAVE as ‘SOUND1’ in your Home drive

Delete the recording in garageband
Record yourself saying ‘TEN NINE EIGHT’
Export this as ‘SOUND2’
IMPORTANT – Choose MP3 encoder

Now open FLASH (IMPORTANT Actionscript 2)
import SOUND 1 and SOUND2
Put in a keyframe in frame 60
Drag SOUND1 into layer1
Insert a keyframe after ‘TWO’
Rightclick on the keyframe – ACTIONS
Global Functions – Timeline Control – ‘Stopallsounds’
Insert a new keyframe
Drag in SOUND2
Insert a keyframe after NINE
Right click on the keyframe
Global Functions – Timeline Control – ‘Stopallsounds’
Control – TEST MOVIE (not control play)
You should now hear ONE TWO TEN NINE

Frog and Fly

frogfly1
This ACTIONSCRIPT 2 animation is in THREE parts:
Click here to see the complete Frog Fly animation.

Part 1 The fly layer – make the fly buzz across the screen to the right and back – then get smaller as it seems to get further away.
Click here for the fly layer

Part 2 The Frog Layer – make the frog from the parts you will find in the FLA file
Click here for the frog layer

Part 3 The sound layer – Make your own fly and frog sounds using garageband
Don’t forget you need to SHARE (Export) them as MP3s (They should be short)
Make a sound layer – drag a sound onto it – when you want it to stop insert a keyframe – Then right click ‘actions’ ‘stopallsounds’
To add another sound – You MUST insert another keyframe

Design Sheets

perseus

perseus

Starter
http://www.wingedsandals.com/ – greek gods done with flash – Try Perseus 3 episodes

Main
Get the design sheet from T4S
Open your Word document (for this project) – explain the design sheet in detail (sequences of frames – how many? What does each character do? What sound /music is there? How many scenes. Where have you got your pictures from? Etc)

Extension
Download this image of a fly

Now try to copy this Fly Animation
(more tomorrow)

Homework
Look at the winged sandals Perseus to get ideas for your educational animation

Animation design

storyboard

storyboard

http://pingmag.jp/2006/10/27/storyboard-design/

Starter – Shape tween revision
a) Make this Square turning into a circle then back again Shape Tween – Square_circle.swf
b) Now make your own.
c) Add a scene to the moon landing with a shape tween

Main
1) You need to have finished and submitted your Decision Sheet – if you have lost it get it from April 17th below (Don’t do the 2 questions about an existing animation).
Submit to Student4teacher/Mr Platt/Tech92/zzz_decision_sheet.
2) Now download the Storyboard Sheet You need to fill in the description of each sequence (group of frames) – then print it out and roughly draw in the images for each sequence (in pencil).

Homework
Find 3 more images for your animation – bring in along with URLs to acknowledge them at the end of your animation.

Flash – Shape Tween

techvideos shape tween

techvideos shape tween

Make a new folder inside your Flash folder called ‘gd3_animation’
Put the 3 images you got for homework inside this folder

We have been working on moving images across the screen.
Now we’ll do some SHAPE TWEENING – where we change an object’s shape.

1) CIRCLE TO SQUARE – simple shape tween
Open Flash
With the Oval tool – make a red Oval (without stroke color)
Click on Frame 30
Insert a keyframe
Delete the circle
With the Rectangle tool – make a blue Rectangle (without stroke color)
Click on any frame between the keyframes
Insert – Timeline – Create SHAPE tween

2) Try this Shape Tween tutorial from Techvideos (Note the keyboard shortcuts won’t work on Mac)
You MUST change the height of the stage to 200 – (Modify – document)
http://www.techvideos.com/flash/cs3/videos-flv/shape-tweening/shape-tweening.html

3) Now make a Shape Tween of your own –
try different shapes
use text (This MUST be broken apart TWICE – Modify – break apart)
use a clipart image from the internet (This MUST be broken apart – Modify – break apart)

4) Next move an image of you own (from the internet) using a MOTION TWEEN – then change it into something else using a SHAPE Tween.
(HINT – You must insert a new keyframe after the end of the Motion Tween and ‘break it apart’ – do this twice to be sure)

Extension

Now go back to your Moon landing animation and add a scene with a shape tween

Flash animation for younger students

solar system

solar system

STARTER
1) Have a look at the first animation ‘GLOBAL WARMING’ on this climate change website
2) Take the quiz and see how you do.
3) Make a new document in Word – call it Research
Put in a screenshot of this site and acknowledge it (URL plus date).
4) Now say what you like about this website.
Is there anything you don’t like in it.
How old are the students it is aimed at?
Do you think it teaches Global Warming well?
What could be changed/improved in it?
5) Now find an educational animation of your own – put the URL and a screenshot into your RESEARCH document.

MAIN
You need to decide on what animation you will make for younger students (Grade 3 – aged 8).
Download this sheet to help you – animation decision sheet – and fill it in (don’t forget to put your name and class on the top)

Homework
Find and bring in 3 images you will use for your animation – don’t forget to copy down the URLs so you can acknowledge them at the end of your animation.

Moon Landing

Starter – In WORD make notes on animation from this website http://encyclopedia.kids.net.au/page/an/Animation

Now combine what you have been learning about Motion Tweens and Single Keyframe animation.
You have to COPY this animation – Moon Landing

There are THREE scenes:
1) 75 frames – 2 layers Rocket/Background
2) 25 frames – 2 layers Rocket/Moon
3) 75 frames – 3 layers Alien/Spaceman/Moon

Use single keyframe animation where there is slow angular movement such as where the spacecraft changes direction.
Don’t forget you can flip an image such as the spacemen by selecting MODIFY – TRANSFORM – FLIP

Here are the files:
Skyline
Rocket
Moon
Spaceman
Alien

Extension
Make a fourth scene – use some of you own pictures

Homework
Write down a couple of ideas for what you might animate for younger students (e.g. Planets or Road safety)

Flash – single keyframes

Starter –
Look at this great Flash site FLASHEARTH
Click to look at the Webby awards
Find one you really like – try TED.COM or ‘evian at wimbledon’ or Sputnik

Carry on with your aeroplane and bicycle animation
Add a new Scene with the car picture.

FOOTBALLER

DEMO – single frame animation – kicking a ball
Draw a stick man WITHOUT a LEFT LEG
Name the layer BODY
In a NEW layer draw the LEFT LEG
Name the layer LEFT LEG
In a NEW layer draw a RED BALL
Name the layer BALL

Insert single keyframes to see the body
Insert single BLANK keyframes to draw a new position for the Left leg
Insert single keyframes and move the ball

Now you try
Footballer SWF File

Here are some more great Flash sites for you to look at

Start thinking about what you could animate to teach to younger students – The planets – or saying Hello around the world or road safety

Flash – preparing images

aeroplane with white background

aeroplane with white background

Jpeg images have a white backgound.
We need to get rid of this so we can use them in Flash
Gif is the file format which allows TRANSPARENT BACKGROUNDS

Download the aeroplane jpeg here
Put it in your Flash folder
Now open the image in FIREWORKS
Click the drop down and save it as a GIF file called ‘aeroplane.gif’
Use the eraser tool to take away the background (HINT – make the eraser smaller when you get to the black lines of the drawing)
When you are finished click on FILE – IMAGE PREVIEW
Make sure the FORMAT (on left) is GIF
Select ALPHA TRANSPARENCY (on left)
Click EXPORT and SAVE as a gif image (Your rubbing out should now be transparent on the actual image)

Now import into Flash and make a simple flying animation.

IN PAIRS – download this picture of a person on a bike
Make the background transparent
Design on paper a NEW animation using the Car, the aeroplane and the bicycle.
Make it in Flash
Don’t forget to put each image on a different layer (including the background)

Flash – motion tween

red_car2

car1 – double click to see animation

We will be making a Flash Animation as an aid to teaching elementary students.
As a preparation for this we will go over some Flash Basics.
Today we’ll do MOTION TWEEN – using this you can move pictures or drawings (SYMBOLS) across the screen.

First we’ll make a racing car go across the finish line in a race.
Download the car image
Save this car image to a folder on your Home drive

Now open FLASH
Choose new Flash File – actionscript2
File – import – to library (choose the car image)
Change the name of ‘layer1’ to ‘Race Finish’
Use the Pencil tool to draw 2 lines (like you see in the animation)
Draw the two Finish lines and fill with yellow
Now click on FRAME 100
Insert – timeline – keyframe
(Frames 1-100 should now all be gray)
Insert – timeline – layer
Rename this layer ‘Car1’
Drag the Car from the library to the space to the right of the white box (stage)
It is a bit big so use the TRANSFORM tool to resize it (3rd tool down on left of screen)
Click on the menu MODIFY – Convert to symbol (Movie Symbol)
Name it Car1
Now click on frame 100
Insert – timeline – keyrame
Drag the car all the way across the screen – off to the stage on the left
Click on any gray frame on the car layer
Insert timeline – Create motion tween
Now try it by clicking Control Play (or Control Test movie)
If you want to make the Car go faster click on the Frames per second (12 fps) and change it to 48

NOW – in PAIRS design your own simple animation on PAPER using the Car image
Split the paper into 6 boxes – each box represents 20 frames
REMEMBER
You can draw a background
You can draw things which you can then move (after converting to symbol)
You could have 2 instances of the car on the screen at the same time and make them race – or crash!

Homework
Go to the Flash Animation 09 Winners Gallery
Choose ONE animation and be prepared to explain it to everyone next time – why you like it – what’s good about it.