12.16 Publishing Flash Movies

Size: px

Start display at page:

Download "12.16 Publishing Flash Movies"

Georgiana Mason
6 years ago
Views:

12.16. PUBLISHING FLASH MOVIES 621 Figure 12.27: Flash: ActionScript Dialogue Window 12.

1 PUBLISHING FLASH MOVIES 621 Figure 12.27: Flash: ActionScript Dialogue Window Publishing Flash Movies When you have completed your movie, you re ready to publish Macromedia Flash MX document (FLA file) on the Web. By default, the Publish command creates the Flash SWF file and an HTML document that inserts your Flash movie in a browser window. You can also save your movies as GIF, JPEG, PNG, and QuickTime formats, if you do not want to view the movie in the Flash Player. This allows you to edit your movies in other applications and export a movie directly into a single format. You can export an entire movie as a Flash movie; as a series of bitmap images; as a single frame or image file; and as moving and still images in various formats, including GIF, JPEG, PNG, BMP, PICT, QuickTime, or AVI. You can also create your own HTML documents with required tags to display Flash movies instead of using the Publish command. Before publishing any movie, be sure to test

2 622 CHAPTER 12. AUDIO AND VIDEO it in all major browsers to check its performance. If you re working in Macromedia Dreamweaver, you can easily add Flash movies to your Web site. Dreamweaver generates all the needed HTML code and you can launch and edit Flash from within Dreamweaver to update the Flash movie. You can also create your own HTML documents with required tags to display Flash movies instead of using the Publish. command. To do that simply include the following object code in your HTML/XHTML file (Ex: FlashObjTag). <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" cabs/flash/swflash.cab#version=6,0,40,0" (1) width="550" height="400" id="mymoviename"> <param name="movie" value="myflashmovie.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#fff" /> <embed src="myflashmovie.swf" quality="high" (2) bgcolor="#fff" width="550" height="400" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage=" </embed> </object> Of course you need to edit the code to reflect your parameter settings such as.swf file name, width, height, and id. Note the codebase value must be on one line. It is displayed on two lines to fit the width of the page here. The embed tag is included for the benefit of older browsers. Often a website will use a Flash entry page. The visitor is directed to the Flash or non- Flash entry page depending on the browser being used. The following Javascript code can check browser support for Flash and load the appropriate entry page automatically. function My_checkPlugin(flash, theurl, alturl) { if ((navigator.plugins && navigator.plugins[flash]) // (A) // or if IE later than Mozilla/3.1 ( navigator.appname.indexof( Microsoft )!= -1 && // (B) parsefloat(navigator.appversion) > 3.1 ))

3 INTRODUCTION TO FLASH 623 } { if (theurl.length>2) window.location = theurl; // flash entry } else { if (alturl.length>2) window.location = alturl; // non-flash entry } document.my_returnvalue = false; If the browser has the desired plugin (line A) or is an IE version after Mozilla/3.1 (line B) then we go the Flash entry. Otherwise we go to the non-flash entry page. The function My_checkPlugin is called onload: <body onload= "My_checkPlugin( Shockwave Flash, entry.html, index1.html ); return document.my_returnvalue"> Note that the same checking scheme can be used for other types of media plugins Introduction to Flash Flash, originally conceived as the Future Splash Animator for creating and animating vector graphics, was purchased in 1997 by Macromedia which changed its name to Flash. Macromedia began marketing this new product as a tool for creating graphics for the Web. Since then, websites have not been the same. Flash opened up a whole new world to designers as well as programmers, while it evolved with each new version as a highly sophisticated tool. Although it is just one program, it contains tools for many different functions. Flash s primary focus is on website creation, but its wide range of other capabilities make it a powerful tool box for multiple functions. It can deliver vector images over the Web.

624 CHAPTER 12. AUDIO AND VIDEO Figure 12.28: Storyboard Sketch on Paper Uses vector images which are small and scalable. Has streaming capability.

4 624 CHAPTER 12. AUDIO AND VIDEO Figure 12.28: Storyboard Sketch on Paper Uses vector images which are small and scalable. Has streaming capability. It can create graphics using Bezier curves, but it also provides natural drawing tools without manipulating curve handles, or special points on a line which appeals to artists and non-artists alike. It can animate graphics such as icons, navigation buttons and menus. It is not limited to the Web. You can distribute content on CD-ROM or create standalone projects to distribute over or on disk. You can export to other formats such as QuickTime, RealSystem, or Windows AVI. It uses ActionScript, an easy scripting language even beginners can use. More advanced script writers appreciate its sophisticated capabilities. It provides HTML generation tools to place Flash in Web pages.

5 INTRODUCTION TO FLASH 625 Flash s other advantage as a superior tool is its single platform target, which is the Macromedia Flash Player. Most browsers come with Flash Player already installed, but you can always download the player from macromedia.com. Unlike DHTML, which requires testing of runtime and rendering inconsistencies on different browsers, Flash MX lets you focus on design because the interface will look and perform exactly as the designer intended it to. Flash from Designer s Perspective We ve already reviewed Flash s advantages and know it is a robust, popular program on the Web. Many designers have become enameled with Flash for the bells and whistles it can produce, and many have gone on to produce all Flash websites. Enticing as that may be to some, keep in mind several key points. An all-flash site breaks the model of the Web which relies on XHTML to make pages widely accessible. You can send HTML pages in s for example. You can transmit them to cell phones, to browsers for the hearing or vision impaired and for printing. Tools convert HTML pages to.txt, MS/Word, or other formats. A Flash-only site has all.swf files which are not HTML and not processed by anything other than the Flash plugin for browsers. Flash sites are not searchable. Flash typography has received much criticism for being too small and unreadable something readers, at least for now, can t control. So with all that said, why would you use Flash? Flash, like any other design element such as color, line, image and typography is just one options to consider when designing websites. Using Flash just to make things move on the screen seems rather pointless, unless that is service a function for your site. There are times when you may want to use Flash. Sound and animation can capture the viewer s attention quickly. Unlike HTML, Flash-based animation is smooth and responsive. Flash offers faster interaction with the user by executing on the local host avoiding networking delays. Flash can dazzle the viewer, but before you launch the program, be sure to ask yourself these questions:

6 626 CHAPTER 12. AUDIO AND VIDEO Why am I using Flash? Can I solve the problem without Flash? Am I using Flash for me or for my audience? Is Flash in the best interest of my client? Will Flash enable or confuse the user? Is Flash the most effective solution? Many usability experts that would argue that any professional site wishing to reach a wide, target audience should not use Flash, period. On the other hand, proponents such as Chris MacGregor, a UI Interaction Designer with Intuitive Homes in Houston, Texas argue that Flash creates faster, easier interfaces than HTML. According to MacGregor, knowing when and how to use Flash effectively leads to intuitive and better designed sites ( shtml). Our advice on Flash is use discretion. If you want to capture viewers attention, or illustrate a process in motion, or present information that can t be done in HTML, go ahead and make part of your site with Flash. If it is an entry page, be sure to include a skip option for repeat visitors. Keep in mind its limitations, capitalize on its strength, keep the file sizes small, and don t alienate your target audience. Remember that usability means easy to use for your audience Flash Movie Example To really understand how Flash works, you need to see at least several movie example files. You can view these actual files on the book site, but for now, it may be helpful to see one simple movie development. This movie (Ex: GreenBlackBars) began as a simple idea conveying the beginning, middle and ending in visual communication. A storyboard was sketched out on paper first.

12.18. FLASH MOVIE EXAMPLE 627 Figure 12.29: Flash Example: Photoshop Storyboard A more advanced storyboard was created in Photoshop, where most of the graphics were created.

7 FLASH MOVIE EXAMPLE 627 Figure 12.29: Flash Example: Photoshop Storyboard A more advanced storyboard was created in Photoshop, where most of the graphics were created. A film loop of colored lines moving from top to bottom of screen was created in Flash to create rhythm and pace. Sound was added to further enrich this rhythm and dramatize the message. Development of this movie was done on a PowerMac. The overview of the process looks like this: Concept Demonstrate the beginning, middle and end of idea in visual communication. The idea is to: enter, communicate, focus, gracefully and then exit. Storyboard sketch Hand-drawn in marker on layout paper (Figure 12.28). Storyboard for client Created in Photoshop to actual size of movie (Figure 12.29) which is 300 pixels wide x 200 pixels high. Photos Background photos were taken from single frames originally created in a QuickTime movie. Initial movie was taken with a digital camera and imported into imovie where it was edited and saved in QuickTime format.

628 CHAPTER 12. AUDIO AND VIDEO Figure 12.

Moving bar graphics - This was a movie clip created in Flash.

saved as a Audio IFF (44.1kHz, 16-bit stereo) file. Creating Movie Clips Figure 12.

8 628 CHAPTER 12. AUDIO AND VIDEO Figure 12.30: Movie Clip Timeline and Tween Type All typography for the movie was created in Flash. Moving bar graphics - This was a movie clip created in Flash. Sound Sound was digitized from a CD and imported into Macromedia Peak, where it was edited and saved as a Audio IFF (44.1kHz, 16-bit stereo) file. Creating Movie Clips Figure 12.31: Motion Tween, Fade, and Move Back As stated in the overview (Section 12.15), movie clips have their own timelines which allow you to create little movies inside movies. In the case of our sample movie, we created

12.18. FLASH MOVIE EXAMPLE 629 four different movie clips all based on the same movement. The graphics are similar but different in each clip.

9 FLASH MOVIE EXAMPLE 629 four different movie clips all based on the same movement. The graphics are similar but different in each clip. Clips were placed into a timeline and tweened, so they move from top to bottom. As they move, they fade in and fade out. The movement is created by inserting keyframes on changing frames. The black and green lines are shown in Figure and Same graphics were used in the blue and yellow clip. The clip was simply duplicated, and colors changed for varied effect. Figure 12.32: Second Movie Clip with Yellow and Blue Lines Inserting Photos and Type All Photos were placed in one layer, all text in another, to keep the two organized. Keyframes were inserted at each point where the words and images changed. All photos were sized to 300x200 in Photoshop, saved as JPGs and imported into Flash. All the words on the screen were created in Flash and converted to a symbol, so they could be used repeatedly without enlarging movie file. Red guides were inserted in the layer to help align text on the screen (Figure 12.33). As stated in the overview, sound for our sample movie was digitized from a CD, and imported into Macromedia Peak, where it was edited and saved as a Audio IFF (44.1kHz, 16-bit stereo) file. The sound could have been compressed further in SoundEdit to 22.1kHz,

This publishing stage is where you can further decide compression, bit rate and quality options. 12.

10 630 CHAPTER 12. AUDIO AND VIDEO Figure 12.33: Creating Type and Using Guides 8-bit mono for the Web. The other option is to have Flash compress the sound with the rest of the movie at the final publishing stage. This publishing stage is where you can further decide compression, bit rate and quality options Summary Audio, video, and animation can bring additional dimensions to a website and, when used appropriately, can be very effective in communicating the intended messages. Multimedia content also adds liveliness and variety to a site. Multiple compression and decompression algorithms compete to make digital files small and to preserve the quality of the audio and video delivered. On the Web, MP3 is a widely used format for sound, music, and songs. QuickTime and Real Audio/Video are widely used formats for both audio and video. Direct links to audio/video files cause the files to download completely before being played. The object tag is the W3C and XHTML standard for embedding sound, video and other media files in Web pages. The older embed tag is non-standard and not to be used if you wish to conform to XHTML. When audio/video clips are embedded or when meta files containing play lists are used, HTTP based streaming can take place and significantly reduce the delay in media deliv-

11 EXERCISES 631 ery. Specialized streaming protocols provide different data rates to suit various connection bandwidths and allow client-side players to control the streaming server for data delivery. Flash synchronizes vector graphics and textual content, with sound to produce good quality animation in relatively small file sizes. Hyperlinks are also supported within a Flash file. Appropriate use of Flash animation can increase the effectiveness of a site. Exercises Review Questions 1. How is analogue audio digitized? What is sampling? What is bit depth? 2. What are the principles for reducing audio file size? 3. What are the common Audio file formats on the Web? Explain. 4. How do you get sound into your computer? 5. What are some sound editing programs? 6. How do you get video into your computer on Windows? On the Mac? 7. What are transitions in video editing? 8. Where would you apply special effects to video? 9. What is a Chromakey? Why would you use a Chromakey? 10. What is a.swf file? How do you make one? 11. What are typical video framerates and resolutions for the Web? 12. Describe the design process in Flash? 13. Why would you use Flash movies in your website?

12 632 AUDIO AND VIDEO 14. What is a storyboard? 15. Why do you need a storyboard? 16. In Flash, what is a stage? a timeline? 17. What does framerate mean in Flash? 18. What are keyframes in Flash? 19. How are keyframes different from regular frames? 20. What is tweening? and why is it important? 21. In Flash, What are movie clips? and what is unique about them? 22. Describe three different ways of working with text in Flash? 23. How are Photoshop layers different from Flash layers? 24. How would you use Scenes in Flash? 25. What are Symbols in Flash? 26. How are Symbols different from graphics in Flash? 27. What are instances in Flash? 28. What is ActionScript? 29. What are some options for saving your files in Flash? 30. What are the common video formats on the Web? Explain. 31. What is MP3, MPEG? Why is MP3 so popular? 32. What are the ways to include sound in Web pages? 33. What are the ways to include video in Web pages?

13 EXERCISES What is the difference between the embed tag and the object tag. Is embed allowed in XHTML? 35. What causes the entire audio/video file to download completely before play begins? 36. What is HTTP-based streaming? What is special-protocol based streaming? What is the difference? Assignments 1. Look on the Web for audio clips (search for Audio WAV for example). Click on links to audio files and see how your browser plays the audio files. 2. Digitize your own voice on the computer. Save the file and open it in an sound editing software. Apply a special effect such as an echo or a fadeout to the file. 3. Take the sound file and try sampling it at different rates. Convert a file from 44.1kHz, 16-bit stereo to lower rate. Listen to the difference. 4. Capture short video footage with a digital camera. Your college AV services my be able to lend you one. Import the video into your computer. Edit a few seconds of the video and save the results. Save in different formats for the Web. 5. Try embedding personal video footage into your HTML code. 6. Create a few simple geometric shapes in Flash. Try to make each shape move across the stage with motion tweening. 7. Try to create a shape tween in Flash. 8. Create a basic button in Flash and program it to go to the last frame. 9. Scan an image in Photoshop. Import it into Flash and animate the image.

14 634 AUDIO AND VIDEO 10. Draw a short storyboard illustrating a simple concept like motion. See if you can work with type, symbols, photos and sound to illustrate this in Flash. 11. Make a Web page with an embedded audio clip in three ways: with the embed tag, with the object tag, and with object combined with embed. 12. Do the previous assignment for a video clip. 13. Deliver an audio file by using a Javascript function that detects the browser version and generates either an object or an embed tag. 14. Deliver a video clip by using a Javascript function that detects the browser and its available plug-ins and generates the correct embedding code. 15. Make a My Favorite Songs page and a song list using MP3 meta files (.m3u). 16. Make a My Favorite Movies page and a list of video clips.

Inserting multimedia objects in Dreamweaver

Inserting multimedia objects in Dreamweaver To insert a multimedia object in a page, do one of the following: Place the insertion point in the Document window where you want to insert the object, then