Web Design with HTML and CSS

232

Interactivity on the web

Web Design with HTML and CSS Digital Classroom

Integrating Flash into a pre-existing design

In the previous exercise, you generated the code necessary to add a Flash fi le to a page. You

will now add a diff erent Flash fi le to one of the pages in your site by copying and pasting

code that was originally generated by the swfobject generator.

1 Open the 10_insertFlash.html document located in your web10lessons folder. You need

to copy the relevant code generated from fl ashObjectCode.html into this document.

First, you will need the script tags.

2 Open the fl ashObjectCode.html document and select the following two script tags:

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">swfobject.registerObject("myFlashContent",

"9.0.0");</script>

Select Edit > Copy, or press Ctrl + C (Windows) or Command + C (Mac OS), to copy

these two elements.

This fi rst script tag is the link to the swfobject.js fi le. As with the jquery.js fi le, you do

not need to open this document, but you need to ensure you are correctly linking to it.

The second script tag defi nes the ID and the Flash Player version being targeted (in this

case, Flash Player 9.0).

3 Open the 10_insertFlash.html fi le and locate the ending </script> tag from your

jQuery show/hide code. We have added a commented line of instructions in the code to

help you identify the correct location.

4 Now choose Edit > Paste, or press Ctrl + V (Windows) or Command + V (Mac OS)

to paste this code. Remember that you are now in a diff erent folder (web10lessons), so

you need to update the link to refl ect the script. Make the following change to your fi rst

script tag (highlighted in red):

<script type="text/javascript" src="swfobject/swfobject.js">

</script>

This updates the path to the external JavaScript folder named swfobject.

5 You also need to copy the supporting HTML code. Return to the fl ashObjectCode.html

document and copy all the <object> code.