[3D Rendering Tutorial]
Sometimes when surfing the Net you come across a site that makes your jaw-drop. While most sites are static, page-based and more or less identical to each other these sites are dynamic, immersive and completely different. Suddenly your surfing experience is less like reading a book and more like interacting with an all-singing-all-dancing movie. If so, the chances are that you've just come across a Flash-enabled site.
So what exactly is Flash? As we'll soon see Flash is an authoring application but, more than this, Flash is a technology. In the same way that each page-based site is built on HTML, each Flash-based site is built on SWF (the Shockwave for Flash file format). And what makes SWF so different is that it is a Web-optimised vector-based format. While bitmap images must describe the colour of every pixel, vector formats can describe shapes and formatting far more efficiently. In addition SWF economically describes the difference between image frames to enable smooth animations that can be streamed over ordinary modem connections. Throw in interactivity and you understand the secret of Flash's magic.
Once you've experienced the difference that Flash makes on someone else's site, it's natural to want to provide it on your own and that's what we're going to look at in this masterclass using Macromedia's own authoring application, Flash 5. Specifically we're going to learn the skills involved in creating the framework for a typical Flash site. In the process we're going to get to grips with Flash's idiosyncratic approach to drawing, learn about the three fundamental symbol types, try our hand at manual and automated animation, understand how to organize a project through layers and scenes and take some first steps in Flash's programming language, ActionScript.
Orientation, setup and drawing
But before we do anything we have to orientate ourselves to the Flash
interface. This saw a major overhaul in the last release which resulted
in a proliferation of floating panels - there are now no less than 24
available from the Window menu and Window>Panels sub-menu. To bring
this under some sort of control, Flash 5 lets you save common arrangements
with its Window>Save Panel Layout command, but we'll work on a clean
screen basis calling up each panel as needed. Thankfully the most common
panels can be toggled on and off with keyboard shortcuts or via the Launcher
bar at the right of the each
In the middle of the Flash screen is the main
Movie setup involves choosing a frame rate, size and background colour.
We're now ready to explore Flash's range of tools. There's a Line tool (N) for adding straight lines, a Pencil tool (Y) for drawing freehand and now a Pen tool (P) for adding Bezier curves. The most creative drawing tool is the pressure-sensitive Brush tool (B) which feels like a paintbrush in use and which actually creates a filled shape as you draw. Otherwise Flash 5's support for shapes is minimal and limited to the Oval tool (O) and the Rectangle tool (R). With all tools you can set a colour for fill and outline at the bottom of the Toolbox while for more options, such as line width, line style and gradient fills, you can call up the Stroke and Fill panels.
Once you've drawn your lines and shapes you need to be able to control them. Having selected an object with the Arrow tool (V), interactive Rotate and Scale options become available from the bottom of the Toolbox. Alternatively you can stretch, rotate and skew objects numerically with the Transform panel as well as applying the transformation to a copy of the object. If you select more than one object you can call up the Align panel (Ctrl+K) to align, distribute or make each object the same size.
This is all fairly standard fare from a vector drawing program, but don't be lulled into a false sense of security - Flash 5 isn't an ordinary drawing program. Click and drag on an object to move it, and you'll find that you've moved the fill but left the outline! Instead you need to remember to double-click to select both fill and outline. Even more bizarre, if you position two objects of the same colour so that they overlap, you'll find that they automatically join into a single object! Overlap two objects of different colours and you'll find that the top object knocks out the object below!
Flash's approach to drawing is very different to any other drawing package.
This is only the beginning of Flash's idiosyncracies with other notable examples being the use of the Ink Bottle tool to interactively add strokes to objects and the way that dragging with the Arrow tool doesn't select entire objects within the marquee but rather creates a new rectangular selection built of all underlying object sections! Occasionally this can be used to good creative effect, but more often it's completely infuriating. Many users are driven to create their basic objects in third-party drawing program, but if you do decide to create your objects in Flash it's important to realize that it's not you that's mad. You can also take action to protect work that you've created from possible damage by immediately grouping it with the Edit>Group command (Ctrl+G).
Symbols and Instances
An even better option is to turn your object or group into a symbol with the Insert>Convert to Symbol command (F8). That's what we'll do with a simple solid blue circle with no outline, being sure to choose the bottom Graphic option in the Symbol Properties dialog and setting its name to "circle". As soon as the symbol is created it is automatically added to the Library panel (Ctrl+L). The big advantage of symbols, apart from protection, is that Flash only needs to store the definition information once, so that the same symbol can be used repeatedly with only a minimal increase in ultimate file size and download time.
For our project this means that we can drag multiple copies of our circle symbol from the Library onto the stage. Each "instance" of the symbol can be independently scaled, rotated and skewed. Even better, using the Effect panel, we can select the Advanced option from the drop-down list and change the Red, Green and Blue setting to change colour and, if we wanted, the Alpha setting to change transparency. The effect we are trying to achieve is of a large central circle surrounded by variously sized multi-coloured circles and with four reasonably large uniform circles that will eventually act as our button links.
Each instance can be transformed independently but they also remain connected to the master symbol in the Library and this is editable. There are various ways of doing this including the Edit>Edit Symbols command (Ctrl+E) or double-clicking on the symbol in the Library which both open the symbol into its own editing window. We can put this to good use by editing our "circle" symbol to make it a little more interesting. Using the Transform palette we can add five new smaller circles increasing in size and surrounding a quadrant of the main circle. Now when we return to editing the main move, Edit>Edit Movie (Ctrl+E again), all the instances that we added earlier will be updated with our new symbol. With a bit of repositioning, resizing and rotating we can create a much more interesting background.
Movie clips / Frame by Frame Animation
It's still static, however, so our next step is to bring our home page
to life. The symbol that we've created will be a good start as we can
create a cumulative effect simply by adding each of the surrounding circles
over time. To do this we'll first use the
We can now double-click on the "circle movie" symbol in the Library palette to edit it (Ctrl+E). All animation in Flash is handled with the Timeline, so if this isn't already visible we'll have to make it with the View>Timeline command (Ctrl+Alt+T). The Timeline shows all the current scene's layers vertically and all the scene's frames horizontally, which at the moment is very simple as we only have one of each. Animations are created by adding new "keyframes" with new content and when these are played back sequentially, just as with the pages of a child's flipbook, the eye is fooled into seeing animation.
The first thing we need to do then is to create some new keyframes. Flash conveniently highlights every fifth frame so we'll add our keyframes on these. We've got five circles to add and so, with beginning and end states taken into consideration, we need to click in frame 5, 10, 15, 20, 25 and 30 and use the Insert>Keyframe command (F6). By default the previous keyframe's contents are automatically copied which suits us fine though if we had wanted to draw a completely new frame each time we could have used the Insert Blank Keyframe command (F7). We can now work our way back clicking on each keyframe and deleting more of the surrounding circles each time until we get back to frame 1 where we delete them all. To see our animation in action we can now use the Control>Play command (Enter) which previews the build-up effect in the current symbol editing window.
flamcclip.png: Frame-by-frame animations are created by adding keyframes with different content.
Our movie clip symbol is now up and running so we're ready to take advantage of it for our home page. The first step is to close the Symbol Edit window (Ctrl+E) and return to editing the main scene. We can then use the incredibly useful Swap Symbol command on the Instance palette (Ctrl+I) to change each of our existing "circle" symbols into our newly created "circle movie" symbol. One of the major strengths of the command is that properties are inherited so that the resizing, rotation and recolouring we applied earlier remain. To see the overall effect we now need to use the Control>Test Movie command (Ctrl+Enter) which creates an output SWF file and plays it in its own window. The timelines in movie clip symbols are independent of the main timeline so that even though this is only one frame long, suddenly our whole page has come alive with an attractive pulsing animation.
Layers / Tweened Animation
We've got an interesting look and feel to our site now, but of course we also need some meaningful content in the form of text. The best way to manage this is to create a series of new layers for each item of text with the Insert>Layer command. Each layer appears as a new row in the Timeline and by double-clicking we can rename it - "Home", "Products", "Services", "Contact" and so on - so that we can tell which layer is which. Also useful for this is the ability to toggle the visibility of each layer and to toggle between outline and preview display by clicking in the columns next to the layer name. Layers are essential for organizing your Flash project, but be warned - clicking on an object automatically selects its layer so, unless you're careful, you can easily find that you've made changes to the wrong layer. It's just another Flash idiosyncracy you have to get used to.
All elements that are animated independently must be kept on their own layer.
Layers are useful for organizing your drawing but their real importance is for organizing your animation - each independent animated element must be kept on its own layer. We're going to add a little bit more interest to our site by animating each of our text layers. This time though, rather than the frame-by-frame approach, we're going to use Flash's automatic system of "tweening". Tweening is a traditional animation term and comes from the days where your best artist would draw the main frames leaving the "in-between" frames to be filled in by others.
The idea is the same in Flash, with the application automatically interpolating all the frames between two keyframes. For each of our layers then we need to add a second keyframe. One full cycle of our animated movie clip is 30 frames long so we'll add a keyframe (F6) in frame 30 of each of our layers. Now we can click on any of the intermediate frames in each text layer and select the Insert>Create Motion Tween command to set up the link between start and end keyframes. To indicate the tween Flash adds an arrow and changes the frame colour to blue in the Timeline, while the contents of the keyframes are automatically converted to graphic symbols and listed in the Library as "Tween1", "Tween2" etc.
The tweens are now set up so now we just have to decide what effects we want to apply. To produce motion effects we simply need to drag the text in frame 1 off the screen and onto the Work Area (hold down Shift to constrain the movement to the vertical or horizontal). Press Enter to preview and our text will slide smoothly onscreen and into position. In fact "motion tween" is a bit of an understatement because any transformation can be tweened. Taking our title text, for example, we can scale this to 50% in frame 1 to make it appear to double in size over the animation. In fact motion tweens don't have to involve motion at all so that for our static descriptive text we can use the Effect panel to set the opacity to 0 in frame 1 and over the animation the text will fade in.
Automatic motion tweening is set up between two keyframes.
Flash's combination of frame-by-frame manual animation and automatic tweened animation enables a huge range of effects - and the program has plenty more up its sleeve. For example we could set up motion guides so that our text doesn't just move in a linear fashion, or shape tweening so that our circles change into squares. Through the use of movie clips we can also nest animations so that our frame-by-frame circle animations could also be tweened to grow in size or change transparency. However it's important not to throw in effects just because it's possible, so we'll stick with our strong pulsating circles and simple eye-catching text effects.
Basic Interaction - Button Symbol
We've produced a strong introductory animation, but now we have to move
on to enable it do something - in other words to make our movie interactive.
To do this we need to explore the third of Flash's symbol types - the
Button. We could create one from scratch with the Insert>New Symbol
(Ctrl+F8) command, but again we can re-use work we've done already. In
particular using the Library panel's
When we edit this new "Button" symbol (Ctrl+E),
the difference is immediately apparent. Our circle with its five surrounding
circles has been added to a frame labeled "Up" with blank frames next
to it labeled "Over", "
Each Button symbol has separate Up, Over,
At the moment each of the frames apart from Up is blank so we need to
fill them. The easiest way to do this is to use the Insert>Keyframe (F6) command to automatically copy the contents of
the Up frame to each of the other frames. Next we can reformat the Over
Instead we'll add a different sort of impact - sound. Using the File>Import
command we can bring in a short WAV file and then drag it from the Library
onto the Button symbol's
Great, we can now can see our masterpiece in action with the Test Movie command (Ctrl+Enter). But we've got a problem. The introductory animation works beautifully but because the whole animation loops we're back to frame 1 before we can test our buttons. We could botch a solution by adding new frames for each of our layers say in frame 720 to pad the animation out to a minute before it looped again, but clearly that's not ideal. The real solution is to learn how to control our movie through Flash's in-built programming language, ActionScript.
Advanced interaction - ActionScript Programming
What we're wanting to do is to add an action
that pauses our animation on frame 30 while we wait for user input. To
do this we first need to add a new layer for holding scripts and then
add a blank keyframe in its 30th
frame and call up the Actions panel (Alt+Ctrl+A).
Macromedia has pulled together the most common commands in the Basics
category of actions available from the left side of the panel, and we'll
find what we're looking for in the Stop command.
Applying the Stop action prevents looping.
More importantly when we now test the movie it now longer loops. Even better it doesn't stop dead either as our "Movie Clip" symbols continue to loop on their independent timelines while our "Button" symbols react to mouseovers and clicks. This is a big step forward, but of course what we really want is for our buttons to do something. Again this is achieved through ActionScript as each Instance of a Button symbol can be given its own action. Again using the Action panel's Basic commands, for example, we could use the Get URL command to load a new page into the browser for each of our four buttons.
That's certainly useful, but loading a new HTML page immediately brings our Flash movie to an end. Instead we can use ActionScript to create a branching logic for our movie. First of all though we need to set up the movie's internal structure by creating and naming four new scenes for each of our site sections - Home, Products, Services and Contact - with the Insert>Scene command or via the Add Scene command on the Scene panel. We can then copy material from our introductory scene that we want to reuse with the Edit>Copy Frames and Edit>Paste Frames commands or we can redesign each scene from scratch. Now, with the movie structure in place we can apply the Go To command to each of our buttons and choose the appropriate target scene from the dropdown list in the Parameters section.
Once your movie structure is in place you can set up a branching logic.
Unfortunately it's not quite as simple as this as, when we test the movie and click on the first button, Flash automatically runs through all the scenes and then goes back to frame 1 and begins the animation again! Thankfully we already know how to prevent this so that in the last frame of each scene we can add a Stop command so that the movie waits for the user to click on a new button (an alternative is to use the gotoAndStop () command variation). It's not exactly elegant but in fact this stop-start use of Go To to jump to a named scene or labeled frame and Stop to wait for the user's next choice is the only way of building a page-based interface so it's essential to get to grips with.
ActionScript might not be elegant but, over the years, it's developed to become surprisingly powerful. Using the Tell Target command, for example, you can control named instances anywhere in the movie. In our case this means that we can create a remote rollover by turning our large central circle into a Movie Clip with different text on different frames describing each of our site sections. After a little Tell Target scripting, we can set up the text on the central circle to change as the end-user's mouse moves over each
In fact this is only the beginning of what ActionScript has to offer. With commands such as Get Property and Set Property able to control object formatting on the fly, the ability to handle variables and conditional processing, even XML-based data interchange, there's little that the ActionScript expert can't achieve from an interactive puzzle to a full ecommerce site. That's a little more than we can achieve in this introductory tutorial, however, so let's quit while we're ahead.
Optimizing and Publishing
We're just about ready to show the world our creation but, before we
do, we need to check that it will work smoothly. To do this we'll again
use the Control>Test Movie command (Ctrl+Enter),
but this time with the View>Bandwidth Profiler option (Ctrl+B)
set to mimic a slightly underpowered 28.8 modem with the
We're now ready to output our movie and the HTML which will load it into
the end user's browser. First though we need to set the File>Publish
Settings. We're happy with the default SWF parameters controlling factors
such as quality and sound compression, but we can make a couple of changes
to the default HTML settings. In particular by changing the
The Publish Settings dialog controls the output of SWF, HTML and other export formats.
However the fact that everything's working on your own system isn't quite the end of the matter. Macromedia makes huge play of the Flash player's universality claiming market penetration of over 96% (far higher than technologies such as Java or any individual browser can claim). This is undoubtedly the format's biggest strength but even so it's always a good idea to cater to as many users as possible. In particular as our movie is so simple we can go back to the Publish Settings' SWF tab and choose to save to Flash 4 format so that users who don't have the latest Flash 5 plug-in won't have to upgrade before viewing.
We can even cater to that small percentage of users without any Flash player installed at all. By adding the label "#Static" to our main frame 30 and selecting the GIF option in Publish Settings we can output an alternative bitmap ready to be linked to alternative HTML content via an image map. This way we can be sure that everyone will see something when they visit our site - something many Flash designers fail to take into account.
More to the point it highlights just what we've achieved. While the uninspiring, single static GIF image comes in at over 10K, our dynamic, scalable and interactive Flash movie comes in at under 8K! OK it might not fall into the jaw-dropping category quite yet but, using the same core skills and techniques, there's nothing to stop dedicated users from realizing their own vision and setting the Web alight.
One of the reasons that Flash dominates the world of Web vectors and
animations is that back in April 1998 Macromedia made the SWF format open
and provided a S
The first area of competition comes from the existing high-end drawing
applications such as Adobe Illustrator and Corel
If you're looking for a dedicated and total replacement then Adobe LiveMotion is a better bet. LiveMotion offers both bitmap and SWF-based output and so claims to provide the best of both Flash and Fireworks. Even better it offers an AfterEffects-inspired object-based animation system that is easier and more powerful than Flash's and it's well-placed to take advantage of the W3C's SVG format (see boxout). There's a lot of potential here, but for the moment it tends to fall between its bitmap and vector stools.
Generally then, while the competition is healthy, Flash 5's dominance is well-deserved. There is one application though that merits an unreserved recommendation - Swish 1.5 from www.swishzone.com. This program takes a completely different approach to SWF creation built upon applying pre-supplied animation effects primarily to text. The bottom line is that you can produce stunning results in minutes that would take weeks in Flash. Best of all it only costs $30. If you're wanting to experiment with Flash without spending a fortune - and without tearing your hair out - Swish represents the ideal toe in the water.
SVG - "Something Very Good"?
With its 96% browser penetration and support from other developers, the Flash SWF format is the de facto standard for Web based vectors in the same way that GIF and JPEG are for Web-based bitmaps. However the fact that SWF is dominant doesn't necessarily mean that it's ideal.
In fact in many ways it's just a historical accident that a format designed for producing streaming cartoons has become the carrier for the majority of high-end Web interfaces. In other words, if you were starting from scratch, you wouldn't necessarily want to start from here. Just as importantly you wouldn't want such a crucial Web format to end up in the hands of a single company and, while Macromedia has made the SWF format open, it still controls its future development.
These were the two strands of thinking behind the development of the SVG (scalable vector graphic) format by the Web-based open standards body the World Wide Web Consortium (www.w3c.org). Like SWF, SVG is based on the efficiency of vectors compared to pixels, but here the similarity stops. SWF is a self-contained, binary, streaming frame-based format while SVG is an integrated, XML (ie text-based), object-based format. SVG will never compete with the dedicated efficiency of SWF for flip-book style animations, but it has its own strengths to compensate.
To begin with SVG's XML nature will enable
it to fit in with the XML-based future of the Web enabling features such
as searchable text, repurposing and automatic generation. By moving processing
demands to the player and the client, SVG can also support advanced formatting
features such as 3
The technological superiority of SVG over SWF is compelling but that
doesn't mean the battle's over. In fact it's hardly begun.
The battle should be fascinating and at least one winner is guaranteed - the Web user.
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]