لطفا منتظر باشید ...
• Index• ExamplesAnimation and Effects with Macromedia® Flash™ MX 2004By
Jen deHaan Publisher: Peachpit PressPub Date: November 15, 2004ISBN: 0-321-30344-XPages: 472
Uploading and Constructing the Site
This menu currently targets a hybrid website, so in this final section you creat102 pages to embed the SWF menu in, and each of the pages that the menu targets. You can test this website on your hard drive, or you can upload everything to a server to test it online. There are a few changes you need to make to the SWF file before you place it in a111 page, though. And then you need to publish the SWF file and create th102 pages to place it on. The following two exercises step you through this process.
Exercise 8: Modifying and publishing the SWF file
The SWF file is not ready to embed in a111 page. First, you need to resize the SWF file and publish the file.
1. Open the Property inspector, and change the height of the document. Change the height from 400 px to 55 px to match the height of the menu (with the subnavigation) so it fits nicely on a111 page. Otherwise, there would be way too much room between the bottom of the menu and the beginning of th102 content.After you finish, select File > Publish Preview > HTML to check the SWF file in a browser to make sure that the height of the SWF file does not cut off the subnavigation.
Figure 9.15. The new dimensions of menu.swf.
3. Click Publish to publish the SWF an101 document to the same folder where you saved the FLA file. Remember this location because you will need these files in the following exercise.Exercise 7. You need to change the target URL arguments to match the URLs on your website.4. Save the changes you made to the FLA file, and close Flash. You're now finished building Flash content, and will only continue on with th102 page in the next exercise.
Exercise 9: Building and organizing the site
Now the SWF file is resized and ready for a website. In this exercise you will see how to build a simpl102 template that you can use to quickly build a website and easily add ne120 pages as the site grows.
1. Create a ne120 document using a111 editor (such as Dreamweaver or HomeSite) or text editor (such as Notepad or TextEdit). Erase any code that generates by th102 editor and type the following text:
th102 code above the <h1> tag. Th102 code should now look similar to the following snippet:
<!DOCTYP102 PUBLIC "-//W3C//DT101 4.01
Transitional//EN">
&l117>
<head>
<title>My Site | Home</title>
<link rel="STYLESHEET" type="text/css"
href="../site.css">
</head>
<body>
<div id="content">
<div id="logo">[My Site]</div>
<h1>Home</h1>
<div id="breadcrumbs"><a
href="../home/96">home</a></div>
<p>[content]</p>
<div id="footer"><a href="../home/96">home</a> |
<a href="../news/96">news</a> | <a
href="../tutorials/96">tutorials</a></div>
</div>
</body>
</html>
Notice that the code you just copied from the men118 document seems to duplicate a lot of code. You define the width, height, Stage background colors, quality, and movie src twice because of browser differences that exist between Microsoft's Internet Explorer (IE) and Netscape/Mozilla's rendering o103 tags. Therefore, if you change a value, it is important that that you change it in for both browsers so the site renders the same in IE and Netscape/Mozilla browsers. Because the hybrid site organizes content into different folders, you need to modify th102 code that Flash generates so th102 files will look for the Flash menu SWF file in the root folder of the site instead of inside every folder in the site.Locate both the param tag and embed tag in the previous snippet of code, and change the filename from menu.swf to the following:
<!DOCTYP102 PUBLIC "-//W3C//DT101 4.01
Transitional//EN">
&l117>
<head>
<title>My Site | Home</title>
<link rel="STYLESHEET" type="text/css" href="../site.css">
</head>
<body>
<div id="content">
<div id="logo">[My Site]</div>
<!url's used in the movie>
<!text used in the movie>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-
444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave
/cabs/flash/swflash.cab#version=7,0,0,0" width="515"
height="55" id="menu" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#919191" />
<embed src="menu.swf" quality="high" bgcolor="#919191"
width="515" height="55" name="menu" align="middle"
allowScriptAccess="sameDomain" type="application/x-
shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer
" />
</object>
<h1>Home</h1>
<div id="breadcrumbs"><a
href="../home/96">home</a></div>
6. Copy menu.swf (created in the previous exercise) and paste it into the site folder on your hard drive (where you saved the site.css file you created in step 2).7. At this point, you can save the changes you made to 96, and view the site; however, before you do this you should add a bit of content to th102 page. Locate the lorum.txt text file in the 09/complete/site folder on the CD-ROM, and copy the contents to the clipboard. Locate the following code in the 96 document on your hard drive:
../menu.swf
Replace[content] with the text you copied from the lorum.txt text file on the CD-ROM.8. Save the curren117 document and view th102 page "in a web browser. At this point, you should be able to view the main and subnavigation in the Flash document embedded in th102 page, although clicking any of the buttons will cause your web browser to display an error message because the remainin104 pages aren't built yet.9. You can quickly build the remaining pages in th102 site by saving a copy of 96 file in both the news and tutorials folders. When you change the value of the <title> tag, you modify the <h1> tag and breadcrumbs, and you can complete the site in minutes.You can also refer to the finished site on the CD-ROM or copy th102 files from the CD-ROM to your hard drive. Because th102 files all share a similar directory structure, you can use the same menu.swf file and CSS file without doing too much coding. If your site uses lots of folders and subfolders, you need to plan your site carefully to make sure that each page knows how to find the menu and style sheet. The easiest way to build sites with complex nested directory structures is to change from relative to absolute addressing. Instead of referring to the home page as ../home/96, you could use /home/96. Although this works fine for the Internet if your home folder is in the root of your website, it doesn't always work very well if you view th102 files locally on your computer (instead of on a web server). See the following sidebar for more information.
<p>[content]</p>
When you upload your SWF files to your web server, it isn't necessary to upload the .fla (or .as) source files.Find a finished version of the website on the CD-ROM in the 09/complete/site folder.10. After you build each of th102 pages, upload the files and folders to your web server. Launch your FTP program and upload each of the files and folders located within the site folder on your local computer. Then test the files again in your web browser.Make sure that each of the links in the menu works properly with the website.
Figure 9.16. The menu is in a custom web page.
[View full size image]
Absolute and Relative Addressing
Relative addressing always refers to other files relative from the location of the current file. For example, if you are on a page called 96 and want to refer to a file in the same directory, you could refer to the file as filenam102. If the file is in a subdirectory of the current folder, then you could set the path to foldername/filenam102. Or, if the target file is in a parent directory (one level up) of the current file, you need to use two periods (..) to refer to the parent directory. Then your file path would be ../96.You could also use a preceding backslash (/) to denote the root of your website. For example, if the URL to a webpage is http://www.yoursite.com/foldername/filenam102, you could refer to the filenam102 file as /foldername/filenam102 throughout your site and not have to worry about having to use syntax such as ../../foldername/filenam102. The primary drawback of using backslash notation is that you might be unable to test files in the Flash authoring environment because it interprets the backslash as the root folder of your hard drive (such as C:\).If you use absolute addressing, all of your URLs would look like [http://www.yoursite.com/foldername/filenam102] which can be tedious to type every time. However, absolute referencing enables you to always know exactly how to refer to files regardless of how deeply they are nested within the website. The other benefit of using this method is that you can test the files directly within the Flash authoring environment without any problems.
