Factsheet 25: What is Flash and how can I use it?

Factsheet 25: What is Flash and how can I use it? WWW Information Pack Factsheet 25: What is Flash and how can I use it? Topics covered: Uses of Flash, splash screens, e-learning, advantages of Flash, disadvantages of Flash, accessibility issues and improvements, authoring in Flash MX, the timeline, the stage, symbols, instances, Movie Clips, ActionScript, publishing a Flash movie. 25.1 What is Flash, and what are its uses? Flash is a technology that allows web designers to create animations and interactive "movies", which can then be embedded into their web pages. In the early stages of its development, Flash was particularly suited to the production of vector based animations (in which the images are stored in a mathematical vector format), rather than more conventional bitmaps (in which images are stored as a series of pixel dots). This meant that Flash movies could have very small file sizes, so they could download and play rapidly over the web. However, it also meant that Flash movies usually appeared rather "cartoon-like" (Figure 25.1). http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (1 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Figure 25.1 - Two examples of Flash movies designed to be used as introductory "splash screens" on the front page of web sites. (These examples are freely available from www.freeflashintros.com.) Flash initially became very popular with web developers as a means of producing animated "splash screens", to make the front pages of web sites more eye-catching and cinematic (Figure 25.1). Unfortunately, this technique was over-used, and often contributed little to the overall value of the site. Although such splash screens provide an exciting opportunity for designers to show off their skills, all too often they simply add an unnecessary obstacle to the user's ability to access the core information of the web site. More recently, Flash technology has become much more powerful, and developers have begun to appreciate its potential to create more useful and sophisticated web-based applications. This is particularly true in the area of e-learning, where Flash is often used to create small modular tutorials, complete with interactive animations and self-testing exercises (Figures 25.2 and 25.3). http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (2 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Figure 25.2 - A multiple choice testing exercise implemented in Flash. Note that it can calculate the user's score, and display the correct answers once the test has been completed. In this case the test is being run as a stand-alone Windows application (although it could run equally well as an embedded object within a web page). The questions used in this application are not actually stored within the Flash movie at all, but are read in automatically from an external file. This means that you can easily substitute a different set of questions, without any additional Flash editing work. http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (3 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Figure 25.3 - This interactive "virtual laboratory" implemented in Flash allows students to simulate complex zoological experiments. For more information, see: www.abdn.ac.uk/diss/ltu/pmarston/v-lab/ 25.2 What are the main advantages of Flash? Flash can (if carefully implemented) provide a number of valuable advantages over more traditional XHTML-based web design: q Because Flash movies are displayed by Macromedia's Flash Player plug-in (not by the main web browser itself), Flash-based design work is likely to be rendered identically on all browsers and computer platforms - just as the designer intended. (The same cannot be said for XHTML and CSS!) Flash therefore allows designers to escape from the constraints of more traditional XHTML-based design and navigation interfaces. q Flash has now become a very well-recognised format on the web, and Macromedia estimates that over 90% of web users now have the Flash Player installed on their computers. q In addition to being embedded within web pages, Flash movies can also be exported to create stand-alone executable applications (called projectors), which are ideal for distribution on CD- ROMs (see Figure 25.2 for an example). q Flash movies can be stored in very small file sizes, so they can download and start playing rapidly. q It is now possible to import external information (from a database or an XML file) into a Flash movie. This enables the construction of sophisticated Flash-based applications that can automatically update themselves to reflect changes in information stored elsewhere. For example, the multiple choice quiz shown in Figure 25.2 automatically reads its questions from an external XML file; this means that you can use the same Flash testing interface to deliver http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (4 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? many different sets of questions, simply by editing the external XML file (see Factsheet 27 for an explanation of XML). 25.3 What are the disadvantages of Flash? Despite the above advantages, Flash is a technology that is very frequently misused. Before embarking upon any web development project using Flash, you should give careful consideration to the following issues: 25.3.1 - Accessibility problems The careless use of Flash can create serious accessibility problems for blind, partially sighted or disabled users. (See Factsheet 15 for discussion of the law as it relates to accessibility on the web.) Accessibility issues in Flash are discussed in detail below (Section 25.4). 25.3.2 - Proprietary technology Unlike many other web technologies, Flash is a proprietary commercial product, owned and developed by Macromedia. In order to create any serious Flash-based work, it is therefore necessary to purchase and install Macromedia's Flash development software. Similarly, before a user can view a Flash movie embedded within a web page, it is necessary for them to have downloaded and installed the Flash Player plug-in from www.macromedia.com. Although this is usually not a complex or lengthy task, some users on securely managed corporate computer systems may be prevented from downloading and installing their own software, and so may be unable to view Flash movies. 25.3.3 - Complexity of Flash development, and difficulty of subsequent editing Professional Flash development is a highly complex and specialised activity, calling for both high- level graphic design and programming skills. If you commission Flash-based development work from a commercial designer, this will be produced in Macromedia's proprietary Flash file formats (filename.fla and filename.swf), and may contain a large amount of complex and cryptic code. Therefore, it will probably be difficult for anyone other than the original designer to modify and update this work in the future. Many Flash-based web sites commissioned from external commercial developers become effectively useless when their non-technical owners realise that they cannot afford to pay the designers repeatedly for every trivial update (or when the designers themselves go out of business!) 25.4 What are the main accessibility problems with Flash, and what has been done about them? http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (5 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Initially, the rapid adoption of Flash on the web focused mostly on visual design. Unfortunately, many Flash designers simply ignored the issue of accessibility to blind and disabled users. More recently, web designers have come to appreciate that Flash, if carelessly used, can create major accessibility and usability problems: q text contained within a Flash movie may (in older versions of Flash) be impossible to extract and read by text-to-speech screen reader software (which is commonly used by blind and partially sighted people) q text within a Flash movie is unlikely to respond to the browser's built-in commands to increase its font size q text-to-speech screen readers may not be able to follow navigational links embedded within a Flash movie q navigational keyboard shortcuts (often used by people who cannot manipulate a mouse) may not function within a Flash movie q the browser's Back and Forward buttons will not function as expected, i.e. will not allow you to move backwards and forwards within a Flash movie q images used within Flash movies usually make no provision for alternative descriptive "Alt" text for blind users q search engine spiders are unlikely to be able to extract and index text from within a Flash movie q The browser's own Find (on This Page) function will not locate words within the text of a Flash movie q at its worst, careless use of Flash can lock blind and disabled users out of a site completely These accessibility and usability problems caused the web usability expert Jakob Nielsen in October 2000 to denounce the then-current version of Flash (version 5) as "99% bad" (www.useit.com/ alertbox/20001029.html). Macromedia responded to this criticism by hiring Nielsen to oversee the development of a range of improvements for its new version of Flash (called Flash MX), to improve its accessibility and usability. As a result of his own work, Nielsen subsequently took a more favourable view of the accessibility of Flash MX (www.useit.com/alertbox/20021014.html). Flash MX (and its successor, Flash MX 2004) now contain the following accessibility improvements: q On a Windows platform, the Flash Player now supports Microsoft Active Accessibility (MSAA) technology. MSAA acts as a technical "bridge", allowing the text from Flash movies to be made accessible to screen reader software. q In the Flash authoring tool, a new Accessibility panel allows text descriptions to be given to buttons, form input fields, and various other objects within a Flash movie. These pieces of text can then be made available to screen readers. q Conversely, it is possible to prevent certain objects within a Flash movie from being made available to screen readers (for example, items that are purely decorative and might cause confusion to a blind user). http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (6 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? q Keyboard shortcuts can be built into Flash movies, to allow users to access navigation buttons and form fields without using a mouse. Although these new features have significantly increased the scope for producing accessible work in Flash MX, they do not provide a complete solution to all of the problems listed earlier, and only a minority of designers are currently experts in implementing them. Therefore, in general, you should never implement a web site entirely on Flash, nor rely solely upon Flash for your site's primary navigation system, unless you are confident that you understand these accessibility features fully and have tested your movie with the appropriate screen reader software. 25.5 How do I get started with Flash MX? The creation of a Flash movie for the web typically involves the following steps: 1. create your movie content within Macromedia's Flash authoring software, and save it in Flash format - filename.fla 2. export this content as a playable Flash movie file - filename.swf 3. finally, you embed your .swf movie file into an XHTML web page, and publish both the .swf and XHTML files There are two complementary approaches to creating movies in the Flash MX authoring software: q creating, dragging and dropping objects within the visual Flash interface q more sophisticated control of those objects' behaviours and properties, by programming in Flash's ActionScript language At the heart of the Flash MX development environment are the main timeline and the stage (Figure 25.4). http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (7 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Figure 25.4 - The Flash MX authoring environment, showing the timeline and the stage The stage is the area within which you will create your movie - it corresponds to the area that will be visible when the finished movie is played. The main timeline defines and organises the sequence of events that will happen when your movie is played. Time is represented from left to right along the timeline, and is subdivided into a sequence of frames (rather like a traditional celluloid movie). If you want an object to move about, you can simply position it in a different location on the stage within different frames. Alternatively, you can allow Flash to interpolate the frames to create a smooth pattern of movement for your object - a process refered to as tweening. Your Flash movie is likely to contain a number of different objects (e.g. buttons or animated illustrations). Flash encourages you to create libraries of re-usable objects which are called symbols. This is very convenient when you need to use several copies (or instances) of the same basic object within your movie - you simply drag the appropriate symbol onto the stage to create another instance of that object. You can change the properties of each of these instances (size, colour, location etc.) independently of one another. One powerful type of symbol is called a Movie Clip, which has its own timeline, so that its own properties can change over time, as the movie plays (Figure 25.5). http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (8 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? Figure 25.5 - Three instances of the butterfly Movie Clip symbol have been dragged from the library onto the stage. Note that they can all be given different locations, sizes and other properties such as colour, although they are all based upon the same fundamental object. The movements of these three instances across the stage can be controlled independently of one another from the main timeline. However, each butterfly may need to flap its wings as it moves, and this repeating behaviour would be controlled from the timeline belonging to the butterfly Movie Clip itself (set to play on a continuous loop), and all three instances would follow this behaviour identically. The process of Flash authoring therefore consists of defining and manipulating a number of instances of objects, and applying rules to control how these instances interact with one another. This rapidly becomes very complex, at which point coding in ActionScript becomes useful. 25.6 What is ActionScript? ActionScript is Flash's own built-in scripting language. It is based upon ECMAScript and is therefore http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (9 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? very similar to JavaScript in its syntax and logical construction (see Factsheet 23 for an explanation of these terms). Pieces of ActionScript code can be embedded into a Flash movie at any point in the timeline. Using ActionScript you can: q pause the playback of your movie at any frame within the timeline, jump forwards or backwards in the timeline, or "loop" q perform calculations (e.g. the user's score in a quiz) q manipulate the contents of text strings and arrays q import data from external sources, e.g. databases and XML files q create additional instances of symbols in your movie, and manipulate their properties (such as size and location) Figure 25.6 - Some ActionScript code within the multiple choice Flash application shown previously. This ActionScript is attached to a button object in the movie, and is executed whenever a user clicks and releases their mouse on that button. The ActionScript code shown is responsible for looping through all of the questions, and building up a long text string of the correct answers, ready to be displayed back to the user. http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (10 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? For example, the ActionScript command: gotoAndPlay(50); will cause the movie to jump to the 50th frame in the timeline. The details of ActionScript coding are beyond the scope of this Factsheet. However, some of the resources in the Further Information section below will provide excellent tutorial guides. 25.7 How do I publish my Flash movie on the web? Once you have finished designing your Flash movie, the menu command File - Publish Settings... will allow you to customise many aspects of the finished product, including its dimensions, quality and file format. If you simply accept the default settings, then the command File - Publish will export your movie as a .swf file, and will also automatically generate a simple XHTML file into which this movie has been embedded. You may then wish to edit this XHTML page further, to incorporate it into the rest of your web site. Finally, you simply need to upload and publish both your XHTML and .swf files in your web space, in the same way as any other web publication. Further information Basic tutorials about Flash authoring are available at: education.sdsc.edu/teachertech/TeachTech2003Flash.htm www.wdvl.com/Authoring/Flash/ Phil Marston from the Learning Technology Unit provides an excellent guide Using Flash to illustrate your teaching materials http://www.abdn.ac.uk/diss/ltu/pmarston/flash/ Two good articles about the recent accessibility improvements in Flash MX are available at: www.alistapart.com/articles/flashmxclarifying/ www.alistapart.com/articles/flashmxmoving/ An interesting case study in Flash accesibility is available at: www.nomensa.com/resources/articles/accessible_flash.html You can also discover more about accessibility in Flash from Macromedia's own web site: www.macromedia.com/macromedia/accessibility/ The definitive guide to programming in ActionScript is: ActionScript for Flash MX: The Definitive Guide, 2nd Edition (Dec 2002) By Colin Moock, http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (11 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it? published by O'Reilly, ISBN 0-596-00396-X. Colin Moock's web site at www.moock.org/webdesign/flash/ also contains many excellent resources about ActionScript programming For information about integrating Flash with XML and external databases, see the articles at www.macromedia.com/devnet/topics/databases.html actionscript-toolbox.com/xmlobject.php www.actionscripts.org/tutorials/beginner/XML-Formatted_Content/index.shtml Another useful source of information about advanced Flash development is www.flashkit.com Download Factsheet as PDF Contents page Next Factsheet View this page as text only | Email this page to a friend University Home · Prospective students · Prospectuses · A to Z Index · Search · Email & Telephone · Maps & Travel · Contacts · Clearing University Switchboard: +44 (0)1224 272000 Enquiries about studying at Aberdeen should be directed to sras@abdn.ac.uk Central pages designed and maintained by Web Design Unit Comments about the web site? - Email the Web Design Unit Please read our Privacy Policy and Accessibility Policy All photographs and text copyright © 2004 University of Aberdeen Last Modified: Friday, 10-Dec-2004 14:39:24 GMT http://www.abdn.ac.uk/diss/webpack/factsheet25.shtml (12 of 12)10/12/2004 17:12:48

Factsheet 25: What is Flash and how can I use it?

by JustinTimb

Accessibility

Categories

Upload Details

Usage Rights

Statistics