Flash 5 Tutorial

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]

[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]

you can help support the site with a direct donation or by shopping via the following links:


Thank you!



Trial downloads/special offers from Macromedia

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 Drawing Window's status bar.

In the middle of the Flash screen is the main Drawing Window. At the top of this is the Timeline which is used for controlling animation and which we'll return to later. Below this is the main Stage, where you manage your objects, surrounded by a gray Work Area which can be used for organisation but which won't be visible in the final SWF. The first step, after creating a blank movie with the File>New command (Ctrl+N), is to set up the Stage with the Modify>Movie command (Ctrl+M). We'll accept the default frame size of 550 x 440 pixels - our final SWF will be scalable in any case - and the suggested frame rate for Web delivery of 12 frames per second - for higher quality work delivered on CD it's a good idea to raise this to 25fps. We can also set the movie's background colour to a nice cream.

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.

Different instances of the same symbol can be transformed and reformatted.

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 Duplicate command in the Library panel's fly-out menu to create a copy and in the process change the new symbol's property type to Movie Clip and rename it as "circle movie". What we're doing is producing a nested animation - one of Flash's greatest strengths. 

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 Duplicate command we can again create a copy of our existing "circle" graphic symbol, this time changing its symbol type and name to "Button".

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", "Down" and "Hit". The first three of these frames equate to the image states necessary to create a rollover effect where the normal button (Up) changes as the user moves the mouse over (Over) and clicks on it (Down). The fourth frame (Hit) is used to define the area that responds to the mouse. To understand its purpose imagine our button was text - as the mouse moved over each letter the rollover would keep flickering on and off, but this can be avoided by setting up a solid rectangle on the Hit frame.

Each Button symbol has separate Up, Over, Down and Hit frames.

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 and Down keyframes by changing the colour of the circles to green and red respectively (these will still be affected by the Effect-based recolouring we applied earlier so each button will still be unique). As each state can only have one keyframe we can't create an animated effect here in situ, but we could add our dynamic "Movie Clip" symbol to the Over keyframe to make the button come to life when the browser moves their cursor over it.

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 Down frame. Now our button will change colour invitingly as the mouse moves over it and when the button is pressed it will change colour again and a reassuring click will sound. Excellent - we can now return to editing the main movie (Ctrl+E) to apply our buttons. To do this we'll go to the keyframe if frame 30 of our Background layer and use the Instance panel's Swap Symbol command to exchange the current "Movie Clip" symbol for the new "Button" symbol for each of our four button instances (again all size and effect settings are inherited).

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. Double-clicking on this adds the ActionScript command "stop ()" to the list on the right and, if we click on the Stage, we'll see our new action marked as an "a" symbol in the timeline.

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 Debug>28.8 command. This shows the byte count of each frame in the movie as a differently-sized block and any potential streaming problems for the chosen bandwidth are indicated when the block rises above the red horizontal line. Thanks to our efficient use of symbols and our simple tweened animations we don't have any problems.

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 Dimensions from 550 x 400 Pixels to 100 x 100 Percent our movie will now scale to the browser window - a capability that leaves HTML page-based sites in the shade. Using the File>Publish Preview>Default command (F12) we can now test our site in our default browser or with the File>Publish (Shift+F12) command we can output the final SWF and HTML ready for loading to our Web server.

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.

Tom Arah

June 2001

Flash Rivals

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 SDK for third-party developers. This has helped establish SWF as the industry standard but in the process it has opened Flash up to competition.

The first area of competition comes from the existing high-end drawing applications such as Adobe Illustrator and Corel Draw which have both added SWF export capabilities. In Illustrator's case this is pretty basic, but in the recent Draw 10 suite Corel added the RAVE (real animated vector effects) module which is essentially the core Draw program with an added timeline and automatic blend-based tweening. RAVE certainly makes it easy to produce simple animations, but the end results aren't particularly efficient and there's little programming control.

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 3D and bitmap-based filters that will leave SWF looking flat. SVG's real strength though is its integration. The SVG code is truly integrated into the Web page enabling CSS-based formatting and Javascript-based control across the page as a whole. Working with the XML-based SMIL (synchronized multimedia integration language), SVG will become part of a complete XML-based solution capable of providing the richest Web experience imaginable.

The technological superiority of SVG over SWF is compelling but that doesn't mean the battle's over. In fact it's hardly begun. Despite the enthusiastic support of Adobe, Macromedia's biggest rival, SVG is taking an age to appear and early implementations are disappointingly slow. Ultimately "on paper" and "in the future" is all very well, but for most users what really matters is what's available here and now - and currently Flash is the only technology delivering the goods. More to the point, as Macromedia has shown in the past, SWF isn't a fixed target and by the time SVG delivers, Flash will have moved on again.

The battle should be fascinating and at least one winner is guaranteed - the Web user.

Tom Arah

June 2001

Software / Upgrade
Save $$!   Save ££!
Books / Reference
Save $$!   Save ££!

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:

Web designer-info.com

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]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.