Working with Full-Screen Flash Pages

[ LiB ]

In a full-screen Flash page, the Flash movie is the only content on the page, and for all viewing and interactivity purposes, it becomes the page. Full-screen Flash can be used for an entire splash screen or opening animation; for individual pages, such as the home page or main section pages; or even for an entire website.

Dreamweaver's Job: Create the HTML Framework

If the HTML document exists only as a framework to hold the Flash movie, there isn't much work to be done in Dreamweaver. Typically, your job in Dreamweaver is to do the following:

  • Set movie parameters The <object> and <embed> tags and their parameters govern how the browser and Flash Player will present the movie. quality, scale , loop , and autoplay must be set for the movie to play as desired. The movie can be left to its original dimensions (best if it contains photographic elements) or set to be truly full-screen by assigning width and height to 100% x 100%.

  • Set page margins The HTML code determines where on the page the movie sits, including how closely it's allowed to snuggle up against the top and left edges of the browser window. To make the movie completely cover the browser window space, set its dimensions to 100% x 100% and set the page margins to 0. (Do this in Modify > Page Properties, or by using CSS to redefine the body tag.)

  • Set page background color It's always a good idea to match the page and movie background colors so that no slivers of a different color appear at the edges of the browser window.

  • Perform plug-in and browser checks If the user 's computer doesn't have the correct plug-in, the entire full-screen movie won't play. You can use JavaScript behaviors, which execute upon onLoad , to make sure the movie will play and to reroute visitors who can't see the movie. (See Chapter 13, "Interactivity with Behaviors," for a discussion of plug-in detection in Dreamweaver.)

Flash's Job: Create Interactivity and Links

After the page has been loaded, the Flash movie is the entire interface, so all interactivityincluding linksmust be built into the SWF. A Flash movie might just call another Flash movie to replace itself on the page, in which case the document's URL doesn't change and the visitor probably won't even be aware that there has been a change. (The browser's Back button also won't work because the URL hasn't changed.) This is done internally with Flash's loadMovieNum() ActionScript command.

The Flash movie also might link to another HTML document that contains other Flash movies. In this case, the user will see the URL change, and the browser's Back and Forward buttons can be used to navigate between movies. This is done internally with Flash's getURL() ActionScript command.

Exercise 16.3. Creating a Flash Splash Page

In this exercise, you add an opening splash page to the Art Gecko home page created in the preceding exercise. The splash page will consist only of a full-screen Flash animation with a built-in link to the home page. All exercise are in the chapter_16 folder on the book's website.

  1. If this were a real project and you were responsible for it, you would start by creating the Flash movie and assigning a getURL() command within the movie to make it automatically load the home page. Because this isn't a real project, gecko_splash.swf has already been created for you, with the link in place. Figure 16.16 shows how the link has been added. (You can test-play gecko_splash.swf by opening it directly from your Desktopdouble-clicking it should automatically launch the Flash Player.)

    Figure 16.16. The gecko_splash.swf file being created in Flash. The getURL() action has been assigned to the final frame of the timeline, so it executes automatically as soon as the animation finishes playing.


  2. To house this movie, create a new Dreamweaver document. Save it in the ArtGecko folder. (It must be in the same folder as the home page because of how the relative URL has been written into the Flash movie). Call it gecko_splash.html .

  3. Use the Flash object to insert gecko_splash.swf . To make the movie automatically resize with the browser window, set Width and Height to 100% x 100%. In the Property Inspector, make sure Autoplay is selected. Because you want the movie to play only once, you can deselect Looping; because of the movie's internal scripting, though, it won't loop, regardless of what setting you choose here in your HTML parameters.

  4. To make the movie completely take over the page, you need to set the page's background color and margins. First, so that you can sample the color, use the Property Inspector's Play button to start the movie playing. Then go to Modify > Page Properties. Remove the page margins by setting Left Margin, Top Margin, Margin Width, and Margin Height all to 0. Using sampling, set the page background color to match the Flash movie (like you did in the preceding exercise) and click OK.

    To understand how Dreamweaver codes page margins and what possible browser issues are involved, see Chapter 11, "Using Cascading Style Sheets.


  5. Save your file and try it. When the page loads, the Flash animation should take over the screen. It should play once through and then load your layered home page. (If the home page doesn't load properly, make sure the filename is still gecko_layers.html , and that it and the splash page are in the same folder.)

The relative pathname used in the Flash movie's internal link requires that the two HTML documents be in the same folder. The gecko_splash.swf file does not need to be stored in that same folder. Try it and seeyou can move the SWF file to a subfolder (making sure to change the reference to it in gecko_splash.html). When you browse the document, it will still call gecko_layers.html.


Exercise 16.4. Creating a Full-Screen Flash Page

In this exercise, you create an alternate home page for the Art Gecko website, doing away with the multilayered setup from the preceding exercise by using a Flash-built version of the entire opening presentation. You'll also see how Flash's internal loadMovie() command can be used to navigate between SWF movies without creating new HTML documents or changing the URL in the browser window. All exercise files can be found in the chapter_16 folder of the book's website.

  1. For this exercise, you need two Flash movies: a revised splash movie and a movie containing the full-screen home page presentation. Again, in the real world, you would start this project by building both the gecko_splash2.swf and gecko_home.swf files in Flash. You would assign a loadMovie() action to the final frame of the splash movie, to automatically load the home page movie. You can launch both files from your desktop to see what each one contains. Figure 16.17 shows the loadMovieNum() command being added to gecko_splash2.swf .

    Figure 16.17. The gecko_splash2.swf file being created in Flash, with loadMovieNum() action being added.


  2. You now need an HTML document to hold the Flash movies. Instead of creating a new page from scratch, open gecko_splash.html and save it as gecko_fullscreen.html .

  3. This page currently contains gecko_splash.swf . If you delete this movie and insert the new movie, you'll have to set its parameters all over again. So, instead, use the existing movie code, but just change the src parameter to point to the new movie. Select the Flash movie, and, in the Property Inspector, find the File input field and click the Browse button next to it. In the dialog box that appears, find and choose gecko_splash2.swf .

  4. That's it! Try the movie in a browser to see it work. Can you tell at which point the new movie is being loaded? Note that the URL shown in the browser's location bar doesn't change when the new movie loads. (Unfortunately, this makes it impossible for users to bookmark the home page; they can bookmark only the splash page.)

[ LiB ]


Macromedia Dreamweaver MX 2004 Demystified
Macromedia Dreamweaver MX 2004 Demystified
ISBN: 0735713847
EAN: 2147483647
Year: 2002
Pages: 188
Authors: Laura Gutman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net