Right - Matt here with something [allegedly] fun to start you off in Flash....
Step 1: Create the images for your gallery slideshow in Photoshop
Create four images in Photoshop – make sure the image size is 640 x 480 pixels. Remember – extra marks for images of dogs in hats.
Use the Save for web function in the File menu and make sure the names of the images are in a sequence. For example, for three files, the names could be pic1.jpg, pic2.jpg, and pic3.jpg. If you don’t do this, you’ll have to import the images one by one, which is a pain if you have twenty.
Step 2: Import the images into the Flash Photo Slideshow template
* Open Flash and click on File/New. Select the Templates tab and then select Photo Slideshows. Click OK. You will see a ready-made Flash photo slideshow. To view, go to the Control menu and select Test Movie. Remember the shortcut!
* We don’t want these images so select the bottom layer in the timeline [this should be familiar from After Effects]. The layer we don’t want is called picture layer - click on the trash can icon below the timeline to delete it.
* Create a new layer by clicking the Insert Layer button [a few buttons to the left of the trashcan], and name this new layer My Pics. Important! Make sure that this new layer is the bottom layer.
* Select the first blank frame [it’s actually a keyframe but we’ll worry about that later] in the My Photos layer, select File > Import > Import to Stage, and locate your photo sequence. Select the first image in the series, click Add, and click Import. Flash recognizes your image is part of a sequence and asks if you want to import all files in the series. Click Yes to complete the import process. Flash places each image on separate keyframes. You could move the images at this point but Flash will place them accurately for you.
Once the images are in, test the movie again. Note that your captions will need changing.
At this point, it will probably be necessary to wake Parmajit up.
Now, change the captions for the images by replacing the text in each frame of the Captions layer. You do not have to worry about the photo number field as the template automatically determines how many images are in your document and indicates which photo you are currently using.
Change the title in the Title, Date layer.
If you have more than four images, make sure that all the other layers have a matching number of frames. You can do this by dragging the last frame of each layer to the same place as the last image or you can select the frame and click on F5 to add a new blank frame. Important – when you have more than four images, you will need to add keyframes to the captions layer rather than blank frames, otherwise you will lose the text field where you can insert your own caption.
Test the movie. If you’re happy with it, go to the File menu and select Save As. Save it somewhere safe. Then, go back to File > Export > Export Movie. Give it a name and save it as a Flash Movie [an .swf] Note the other formats available in the drop down menu – only the Flash Movie is interactive.
Saturday, 14 March 2009
Monday, 23 February 2009
After effects!
Welcome back one and all.
Today's session will provide you with a very basic introduction to After effects.
After effects is a state-of-the-art piece of animation software.
Most cartoons, title sequences and adverts are put together in After effects.
This will hopefully give you a basic introduction to some techniques which can later be transfered to "Flash", which is similar, yet interactive and therefore great for web design.
Task for the day
Today, you will be producing a title sequence for your class.
This will be made of moving text and images, and hopefully set to music (time permitting).
How it's done
Open up After effects from applications.
*Select new composition
*Ensure that pixels are set to square
*Select import> files, and choose any pictures that you might need off your computer
-(Remember to keep all images in the same folder, otherwise chaos breaks loose!)
*The box in the top left is where the cast of your production live.
*Drag an image down to the long box at the bottom of the screen, this is your "time-line".
A Jpeg will be a solid block. This is OK for a background.
For a "floatng" image, make sure you use a PSD with the background layer cut out so that it has checkerboard surrounding it.
*The time-line is, like the rest of the Adobe software (Photoshop, Illustrator...) based around layers and the same rules apply, the layer at the top is closest to you.
THE ALL IMPORTANT ARROW!
*Under the name of the cast member you have imported in the time line, there is a tiny drop down menu.
-This reveals a series of options: anchor point, position, scale, opacity.
*click all these on.
*Move the timeline on a few seconds, then alter the settings, or drag your image across the screen, expand it, shrink it, fade it out.
*Move the time line back to the start, and press "spacebar". You image should move- it won't be at full speed until you export it.
*Add text to the composition. This can be changed in exactly the same way.
*Repeat, experiment, learn!
Try using multiple layers. If you are feeling brave, have a play with the effects / filters menu.
*When you are happy with your animation, export it as a "quicktime" file.
*Don't forget to save your composition!
Today's session will provide you with a very basic introduction to After effects.
After effects is a state-of-the-art piece of animation software.
Most cartoons, title sequences and adverts are put together in After effects.
This will hopefully give you a basic introduction to some techniques which can later be transfered to "Flash", which is similar, yet interactive and therefore great for web design.
Task for the day
Today, you will be producing a title sequence for your class.
This will be made of moving text and images, and hopefully set to music (time permitting).
How it's done
Open up After effects from applications.
*Select new composition
*Ensure that pixels are set to square
*Select import> files, and choose any pictures that you might need off your computer
-(Remember to keep all images in the same folder, otherwise chaos breaks loose!)
*The box in the top left is where the cast of your production live.
*Drag an image down to the long box at the bottom of the screen, this is your "time-line".
A Jpeg will be a solid block. This is OK for a background.
For a "floatng" image, make sure you use a PSD with the background layer cut out so that it has checkerboard surrounding it.
*The time-line is, like the rest of the Adobe software (Photoshop, Illustrator...) based around layers and the same rules apply, the layer at the top is closest to you.
THE ALL IMPORTANT ARROW!
*Under the name of the cast member you have imported in the time line, there is a tiny drop down menu.
-This reveals a series of options: anchor point, position, scale, opacity.
*click all these on.
*Move the timeline on a few seconds, then alter the settings, or drag your image across the screen, expand it, shrink it, fade it out.
*Move the time line back to the start, and press "spacebar". You image should move- it won't be at full speed until you export it.
*Add text to the composition. This can be changed in exactly the same way.
*Repeat, experiment, learn!
Try using multiple layers. If you are feeling brave, have a play with the effects / filters menu.
*When you are happy with your animation, export it as a "quicktime" file.
*Don't forget to save your composition!
Monday, 19 January 2009
The Illustrator!
Today, you are going to get a very basic introduction to Illustrator.
Illustrator is the industry standard software for clean graphic design.
Where as Photoshop allows you to create images out of 'pixels', Illustrator allows you to create images out of mathematically recorded directions.
The proportions of these never change, no matter how big or small the image is printed-
The image will remain clean and un-pixelated or stretched whether it appears on a stamp or the side of a building.
Last lesson we looked at branding.
One of the simplest and best advertising campaigns / brands of the last few years has been the Apple Ipod commercials.
These are very simple black silhouettes of dancing people on coloured backgrounds with the Ipod and headphones highlighted in white.
It's fairly obvious where this is going....
You will need a clear photograph of yourself.
Drag it into a new Illustrator document.
Illustrator uses layers, just like Photoshop.
Create a new layer and select the pen (p)
pick a bright colour line and NO FILL
draw around your outline. Point to point (like the lasso tool)
To bend a line, click the next point and hold down the mouse, you will the be able to bend to line to follow the exact shape of your body.
This is very clumsy and awkward!
It soon becomes very easy and you'll wonder how you ever drew without it!
after each curved line, press enter / return- this stops the line continuing is the same bend.
When you have completed your shape, go to the colour selection (under the tools) and select the same colour (black) for both line and fill.
Create a new layer using the shape tool of whatever colour you want.
Put this layer behind the one of your outline.
Illustrator is essentially Photoshop with shapes.
Now in a new layer, draw your Ipod in white
Add some text. “i” .....
Done!
Simple idea, worth millions!
Next, try using the same techniques to create clean vector versions of your logos-
you might need scanners to get the originals onto the computer.
Repeat the process!
Illustrator is the industry standard software for clean graphic design.
Where as Photoshop allows you to create images out of 'pixels', Illustrator allows you to create images out of mathematically recorded directions.
The proportions of these never change, no matter how big or small the image is printed-
The image will remain clean and un-pixelated or stretched whether it appears on a stamp or the side of a building.
Last lesson we looked at branding.
One of the simplest and best advertising campaigns / brands of the last few years has been the Apple Ipod commercials.
These are very simple black silhouettes of dancing people on coloured backgrounds with the Ipod and headphones highlighted in white.
It's fairly obvious where this is going....
You will need a clear photograph of yourself.
Drag it into a new Illustrator document.
Illustrator uses layers, just like Photoshop.
Create a new layer and select the pen (p)
pick a bright colour line and NO FILL
draw around your outline. Point to point (like the lasso tool)
To bend a line, click the next point and hold down the mouse, you will the be able to bend to line to follow the exact shape of your body.
This is very clumsy and awkward!
It soon becomes very easy and you'll wonder how you ever drew without it!
after each curved line, press enter / return- this stops the line continuing is the same bend.
When you have completed your shape, go to the colour selection (under the tools) and select the same colour (black) for both line and fill.
Create a new layer using the shape tool of whatever colour you want.
Put this layer behind the one of your outline.
Illustrator is essentially Photoshop with shapes.
Now in a new layer, draw your Ipod in white
Add some text. “i” .....
Done!
Simple idea, worth millions!
Next, try using the same techniques to create clean vector versions of your logos-
you might need scanners to get the originals onto the computer.
Repeat the process!
Subscribe to:
Posts (Atom)
