This tutorial covers Flash history, interface, drawing tools, shape tweening, shape hints, motion tweening, easing, Timelines and the Library.
What is Flash?
Flash is a rich-media authoring suite that is angled at web delivery (but not exclusively). Flash’s capabilities include:
• Vector-based drawing
• Animation - including export to video
• Cross-platform content delivery - via the web, desktop or CD/DVD
• Rich content delivery - such as audio, video, and other interactivity
• Dynamic content delivery – Flash interfaces with most popular server-side languages (some natively), including ASP, PHP, and ColdFusion, as well as featuring extensive XML support
• Powerful programming and development capabilities with ActionScript
In other words, Flash is one of the most powerful multimedia-specific tools available to us today.
Surely there’s a catch…
Flash certainly seems all-doing, all-knowing from its description. But there are a few caveats:
• It requires a browser plugin to be viewed on the web (although 97% of computers worldwide are said to have a version of Flash player installed)
• There have been frequent version updates, which has splintered the large Flash-enabled audience into sectors of “haves”, “have nots” and “have somes”
• It doesn’t have (at this point) access to the client’s file system
• 3D support is largely fudged through third party plugins and other external applications (unlike Director which has a built-in 3D engine)
• Accessibility support is mediocre (that is, support for screen-readers for visually impaired users etc)
That said, it is undoubtedly the most pervasive and widely used proprietary authoring platform on the market .
A little bit of background
Flash started its life as FutureSplash Animator back in the early days of the ‘graphical’ web. It was originally a tool used to deliver vector-based graphics and animation to the web, which offered much smaller file sizes (and often better quality) than bitmaps could. Macromedia acquired FutureSplash and its parent company in 1996, and the name was subsequently changed to Flash 1.0.
We’re now at version 8, and the platform has expanded to such a degree that animation is only a small part of Flash’s overall capabilities.
In 2005, Macromedia - who also produce Director, Freehand, ColdFusion, Breeze and Fireworks, among others - was acquired by Adobe Systems. It remains to be seen what the fate of several Macromedia products will be, as several are in direct competition with Adobe’s, but it is fairly safe to say that its popularity will ensure the continued development of Flash under the new owner.
Flash and the Director metaphor
Flash and Director share similar (but not entirely the same) workflows.
Here’s a quick breakdown of how Director features and panels map to the Flash interface:
Director
⇒
Flash
Movie
⇒
Document
Score
⇒
Timeline
Stage
⇒
Scene
Cast
⇒
Library
Cast member
⇒
Symbol
Script
⇒
Actions
Property Inspector
⇒
Properties panel
Sprites
⇒
Instances
Channels
⇒
Layers
These are some of the more obvious name differences. You’ll notice more as you begin to develop in Flash.
Starting a new Flash project
Open Flash, and either choose Create New - Flash Document from the Start page, or click File / New… and choose Flash Document from the dialogue box:
You should now have a blank document open in front of you, similar to this:
The toolbar, timeline, library, and properties panels should be open. If the workspace looks cluttered, or is missing some panels, you can simply click on Window / Workspace Layout -> Default, which will reset the panels on your screen.
The next thing we’ll do is change the project settings. Click Modify/ Document… to bring up the document settings dialogue.
Change the document width to 800px, the height to 600px, and the frame rate to 25fps. You can choose to set the background colour of your document if you wish.
The frame rate defines the speed at which the playback head moves across the timeline. Lower frame rates (such as the default 12fps) are excellent for stop-frame animation, as it reduces the number of frames that need to be individually produced. However, for a really smooth result, you’ll mostly want to be working at 25fps (standard PAL frame rate).
And there you have it - a fresh new document just hanging for some content.
Basic illustration with Flash
Flash illustration is pure vector-based, just like Adobe Illustrator. It has many typical illustration tools, such as shapes (rectangle and ellipse), pen and pencil tools, paintbrushes, text, eyedroppers, erasers and paint buckets.
Every vector shape has a fill and a line property. However, in Flash, the fill and line for each shape can be selected and separated from each other, like so:
You can select either the line or the fill of an object by simply clicking on the part you want, then to separate, click and drag the selected part wherever you wish.
Another notable difference is that overlapping two vector shapes causes the automatic removal of the intersection of the two shapes (from the bottom shape) like so:
The last big difference is the ability to make partial selections of vector objects. In most vector illustration programs, when you drag a marquee selection partially around an object, the whole object will be selected. Not so in Flash, which has a slightly more bitmap-based approach:
These are just a few things to be aware of. Like with the Director metaphor, you will find that the drawing tools will behave differently to some of the tools you’ve used in Photoshop and Illustrator, so spend some time playing with them to work through the quirks.
Shape tweening
Wikipedia.org says:
“Tweening, short for in-betweening, is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Tweening is a key process in all types of animation, including computer animation. Sophisticated animation software enables one to identify specific objects in an image and define how they should move and change during the tweening process.”
In other words, shape tweening gives you the ability to specify a starting shape, then an ending shape, and let the computer do all the work in between!
Shape tweens are specific to vector objects, as opposed to motion tweens, which we’ll cover a bit later on. Let’s get straight into making our first tween.
Firstly, we’ll draw a simple circle on the left hand side of the first frame of our scene. For this example, either choose to have no line, or delete the line after you’ve drawn the shape.
Now let’s have a look at the timeline. You should have one layer, with only frame 1 showing that it has content in it (empty frames remain white). Right-click on frame 30, and choose “Insert Blank Keyframe”. Your layer should now look something like this:
You’ll notice that the scene is now empty. If you scrub the playback head (little red box/line) to the left and then back again, you should see the circle appearing and then disappearing. Return the playback head to frame 30, and draw a square on the right-hand side of the scene.
What we’ve done so far is define a start point and an end point for the animation, and we now want the computer to transform the circle on the left into the square on the right, over 30 frames.
The next thing we have to do is to select frame 1 of layer 1 in the timeline. Once it is selected, head down to the property panel at the bottom of your screen and select “Shape” from the Tween drop-down list.
Now hit enter, and voila! You’ve just finished your first (albeit very basic) animation. You’ll see that Flash is even calculating the transform of the colours:
You can also demo the playback of your animation by scrubbing the playback head left and right, as we did earlier. Great fun.
We can now add some complexity to the animation by adding in more keyframes to the original. Right-click on frame 15 in layer 1 and choose “Insert Keyframe”. While we’re still on frame 15, select the half-morphed object on the scene, and drag it up towards the top.
Now when we play back the animation, the circle should travel up toward where we put the keyframe on frame 15, then back down to where we placed the square on frame 30. Nifty!
Slightly more complex shape tweens
We can actually influence the way Flash renders the tweens a little more than just specifying keyframes: we can also give it “shape hints”. Shape hints tell Flash that you want a specific point on a shape to end up at another specific point at the end of the tween.
The best way to explain something is through demonstration, so here we go.
Create a new Flash project (File / New) and draw a square on the left hand side of the scene in frame 1, layer 1. Now create a new keyframe at frame 30 (right-click on frame 30 of layer 1, select Insert Keyframe), and move the square across the screen to the right-hand side. Fill it with a different colour (just so we can test the tween), then click on frame 1 of layer 1 and select Shape from the Tween drop-down menu in the Property panel.
You should now have something that looks like this on your screen:
If you test the tween, it looks pretty boring. The box changes colour and moves left to right. Incredible! What we’re going to do now is give Flash a few shape hints to make it look like the box is flipping over.
Make sure the playback head is at frame 1, and click on Modify / Shape / Add shape hint.
Once you’ve done that, you should notice a little red “a” sitting in the middle of your square, like this:
That’s our first shape hint. Click and drag the shape hint to the top left-hand corner of the square – it should “snap” to the corner.
Now move the playback head to frame 30, and drag the shape hint to the bottom left hand corner. The hint should change colour, and look something like this ->
If we test our animation out now, we’ll see the top left-hand corner now twists around to end up at the bottom right.
But it looks a bit strange – we want to give it more of a page-turning effect. We need another shape hint!
Move the playback head to frame 1 again, and add another hint (Modify / Shape / Add shape hint), which will show up as a little red (b). This time, we’ll snap the new shape hint to the bottom right-hand corner.
Next, move the playback head to frame 30, and snap hint (b) to the top left-hand corner.
<- Frame 1 Frame 30 ->
Let’s test our animation again:
Done and done!
Motion tweening, and the Library
So far we’ve looked at tweening basic vector shapes across the screen, using Flash’s in-built rendering. However, the problem with shape tweening on the timeline is in the reuse of shapes – i.e., there is none!
Let’s have a look at the Library. It should be at the right-hand side of your screen – if not, click on Window / Library or Ctrl-L. The Library is Flash’s equivalent of the Cast in Director – a place to store and organise all your objects. You should notice that none of the shapes we’ve drawn so far are in the Library. In Flash, you need to specify that you want to create a new symbol in order for it to be stored in the Library.
There are 3 main types of symbols:
• Movie Clips
• Buttons
• and Graphics
Movie Clips have their own timelines, independent of the main timeline, but we’ll go into that in more detail a bit later. Buttons have definable states (Up, Over, Down and Hit). Graphics are simply that – static graphics that can be reused as instances. In fact, all symbols can be reused as many times as yyou wish.
We can create new symbols by clicking Insert / New Symbol… or c. From the dialogue we can choose between the three options. In most cases, you’ll want to select Movie Clip.
Like with Director, it’s a good idea to get into the habit of using a naming convention for your symbols. Generally speaking, the standard conventions are “mc_” for movie clip, “btn_” for buttons, and “gfx_” for graphics.
In a new Flash document, create a new symbol (Ctrl-F8) called “mc_ball”. A fresh new timeline will open up for you. On frame 1 of layer 1, draw a circle.
Now let’s have a look at the library again. You should see a new symbol in there called mc_ball – and if you select it, you should also see a thumbnail for it in the Library demo window.
Looking back at the top of the Timeline, you should see some breadcrumbs, showing us that we are viewing mc_ball in Scene 1. To get back to the main timeline, click on the Scene 1 button.
Once again, we have an empty timeline. What we can do now is drop instances of the mc_ball movieclip on the main timeline and animate them individually.
Click on mc_ball in the Library and drag it onto the scene.
[Just as a quick aside – try dragging a whole bunch of mc_balls onto the scene, then edit the original mc_ball movieclip (double-click on it in the library) and change its fill colour. When you head back to the main timeline (Scene 1) you should see that all the instances of mc_ball have now changed colour! This demonstrates the power of reusing elements through movieclip instances]
We’re now going to make a quick motion tween. Make sure there is only one incstance of mc_ball on your scene, then right-click on frame 30 of layer 1, and choose Insert Keyframe. With the playback head still at frame 30, move the mc_ball instance to another location on your scene.
We’re now going to add to magic ingredient – specifying the tween type. Select frame 1 of layer 1 again, head down to the property panel at the bottom of your screen and select “Motion” from the Tween drop-down list.
Now if we test our movie playback (hit Enter), you’ll see that the mc_ball movieclip moves across the stage. Not really exciting, considering the other stuff we’ve done so far – but let’s have a closer look at the Property panel.
The Property panel gives you all sorts of extra power, enabling you to automate rotation of objects, easing motion in and out, and allowing sounds to be attached (which we’ll go through in another tutorial).
Have a play around with the Ease slider to see the effects you can make – easing simulates the acceleration/deceleration of an object from one point to another, which is a very effective animation tool.
Movie clips themselves have a whole bunch of properties that can also be animated. We can animate colour change, opacity change and brightness of a movie clip instance with motion tweens, without causing any changes to occur to the master clip.
We can test this out by selecting the mc_ball instance on the scene at frame 30, and choosing an option from the Color dropdown in the Property panel.
For this example, we’ll choose Tint. Tint allows you to choose a blend colour, and the amount of the colour that will be blended on top of the movie clip.
Choose a colour, and select 100% with the Tint Amount slider. Now, if we play back the scene, we can see the ball animating, and changing colour. Still, it’s not very groundbreaking!
Let’s add another ball. Create a new layer on the timeline (click on the Insert Layer button in the bottom-left corner of the Timeline panel), and drop a new instance of mc_ball into frame 1. We can now repeat the earlier steps:
– create a new keyframe on frame 30
– move the instance at frame 30 on layer 2 to another location on the scene
– select frame 1 of layer 2 again
– choose Motion Tween from the Tween dropdown in the Property panel
If we play this back now, we should have two separate animations going on at the same time.
That concludes this tutorial. Next week, we’ll be looking at more advanced motion tweening, putting a simple animation together, and controlling your Flash movies with buttons and basic ActionScript.
Tidak ada komentar:
Posting Komentar