2. Final editing before placing your code onto your html web page.
Before you can place your code onto your html page, you may need to do some final editing. This is where the blue, red, and yellow color coding in the example code above come into play.
The text in blue represents .swf attributes in your code that may appear different from this page, but will be generated correctly by Kool Moves based on your input. You don't have to do anything with these.
The text in red represents the url location of your .swf file which may need to be edited before you upload your web page and .swf file to the web server. Continue below for editing instructions.
When Kool Moves generates the javascript code for your .swf file, it generates the code based on the name and location of the .swf file you select from your hard drive. Therefore, the code generated points to your hard drive as the .swf file's default location. For my example code above, the name of the .swf file I used was "box". The file was located in "My Documents" on my hard drive. So Kool Moves generated the url of "box.swf" that points to the .swf named box on my own hard drive. This is great for viewing an html page from your own hard drive, but it's not going to work when you view it from the web. Therefore, a little minor editing is needed.
First, look at your javascript code and locate the two lines of code that correspond to the text which is marked in red in the example code above. This red code represents the url (address) of your .swf file. At present, it is configured to read your .swf file from your hard drive. You need to change it so it will read the .swf file from its new web address (the web site directory to which you plan to upload your file).
Next, delete only the two url's that point to your hard drive (the text in your code that corresponds with the red text above as it appears between the quotation marks). (IMPORTANT! Do not delete the entire line of code, the quotation marks, equal sign, or parentheses!).
After you delete the two url's, replace each with the new url.that will point to the location of your .swf in your web site directory.
Example: If your web site name is mysite.com, the directory you use for your files is named images, and the name of your .swf file is entrance then your url might look similar to this:
"http://www.mysite.com/images/entrance.swf"
Using your web editor, open up the your html file and place the javascript code wherever you need it between the <body> and </body> tags. If you already have content on your page, you will have to determine where within your html file you wish to place the javascript code.
3. Place the javascript code onto your html page.
Note: Many wysiwyg editors ( like Dreamweaver, Namo Web Editor) can automatically import .swf files directly from your hard drive and write all necessary code to the html page using their own special features. Others (Homestead's Sitebuilder, Web Studio, etc.), allow you to position layers of code onto an html page by way of html snippet boxes. For those who use neither and /or are having difficulty locating the .swf to display in the proper position, see the tutorial on Positioning to learn some basics. Users of Microsoft Front Page should consult the Kool Moves Help File for more information regarding this subject.
The last part of the javascript code generated by Kool Moves contains a section of javascript that points to a .gif image to display a message to viewers who do not have a Flash Player or cannot read javascript. This .gif is NOT created by Kool Moves. You need to create this .gif yourself using the same dimensions as your .swf file, and load it up to your web server. then you need to look at your javascript code and locate the three lines of code that correspond to the text that is marked in yellow in the example code above. This yellow code represents the url (address) for the .gif file.
Next, delete these two url's for the nonflash.gif and change them to the url of your .gif image. (IMPORTANT! Do not delete the entire line of code, the quotation marks, equal sign, or parentheses!).
Example: If your web site name is mysite.com, the directory you use for your files is named images, and the name of your .gif file is message then your url might look similar to this:
"http://www.mysite.com/images/message.gif"
Note: This tutorial explains how to display your .swf file on the web "as is". Changes to other parameters within the javascript code can also affect the way your .swf file displays. Please consult the Kool Moves Help file to learn more about adjusting these parameters.
Search this Site
Learn to Edit your Kool Moves Generated Javascript
Learn how to edit the javascript parameters that affect the display of your Kool Moves movie.
Note: Before completing the next steps, you need to know your web site url (address) and the directory to which you will be uploading your files.
Note: When you create your .gif, using the same dimensions as your .swf is important, especially if you have other web content surrounding it. An example message for your .gif might read: "To view the Flash content on this site, please enable Javascript and/or download the Flash Player". If you wish to include a link for your viewers to download a Flash Player you can attach a link to the Macromedia Flash Player Download Center. If you do not have a seperate drawing program with to create a .gif image, do not worry. You can draw your image right in Kool Moves and use a Screen capture tool like Gadwin PrintScreen (freeware) to capture the image as a .gif.
The tutorial above may involve the use of some actionscript, html, and the like, but are not necessarily intended to teach them. These tutorials are intended to familiarize new users to the Kool Moves interface and contain simplified examples of how to perform specific tasks in Kool Moves as they would relate to the use of materials from this site. Suggested examples contained within these tutorials may not necessarily be the "best" way to accomplish a task, but they do accomplish the job at hand. These tutorials are not an attempt to copy already existing tutorials. In some instances, more detailed tutorials on actionscript and the use of the Kool Moves tool are available at the Support page on the Kool Moves web site.
The information in the javascript code you use to place your Kool Moves movie onto a web page can affect how that movie displays in various browsers. Therefore, some editing may be necessary to acheive the effects you want. Below you will find a color coded representation of the javascript code generated by Kool Moves to use with the rest of this tutorial. If you haven't generated your code yet, click here to find out how.
1.
The text in yellow represents a non-flash .gif that will display in the browsers of those who do not have a Flash Player or have Javascript disabled.
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
