AutoShapes

Creating a Shockwave “applet”

One of the more common misconceptions regarding the use of Shockwave in a web page is that it is to be used for animations or games. In actual fact, there is another very powerful use for Shockwave - to control navigation on a web page.

This exercise shows you how to create a small Shockwave application (applet) that loads a site or an HTML page into a web page. The key is Lingo's “gotoNetpage” command.

This command normally has one parameter attached to it: the URL.

For example, if the button is clicked in a web page and it's parameter is “http://www.humberc.on.ca", the college's web site will open in a new browser page. Add a second parameter, the target frame, and the Humber site opens in the targeted frame. This exercise will code four buttons. The first will load the Macromedia site into a frame. The second will load the FlashKit site into the frame. The third, will load a target page into the frame. The fourth will load a target page with a Flash animation into the frame.

1. Open the Navigation.dir located in the Shockwave Applet folder. The button bar with labels is already on the stage.

2. Select the Macromedia button on the stage.

3.Open the Score. The sprites only span three frames. If a Shockwave Navigation bar is being created , the default of 28 frames is nothing more than wasted bandwidth.

4. If the Sprite Toolbar isn't visible, open it. View, Sprite Toolbar. Command-Shift-H (Macintosh) or Control-Shift-H (PC).

5. Click the Behavior Inspector button beside the script well. This could be coded by hand but this is such a simple script that using the Behavior Inspector makes the task even easier.

6.Click the Behavior Popup button.

7. Select New Behavior.

8. Name the script “To Macromedia” in the Dialogue Box.

9. Click OK.

10. Click the Event PopUp button. The list of mouse events appears in the window.

11. Click mouseDown. This is the event that will determine when things happen.

12.Click the Action Popup button. You will now be making the choices as to what happens when the mouse button is down.

13. Select Sprite, Change castmember. A sprite swap will occur first.

14. Select “Macromediadn” from the list.

15. Click OK.

16. Select Sound, Play castmember.

17. Select “SwitchDown” from the list. Remember, the order is critical. We want the sprite to swap and then hear the sound. Not the opposite.

18.Click the Event Popup button.

19. Select mouseUp.

20. Click the Action Popup button. What we want to occur is to have the sprite go back to its up state, a sound to play, and the Macromedia site to appear in a frame of the web page.

21. Select Sprite, Change castmember. A sprite swap will occur first.

22. Select “Macromedia” from the list.

23. Click OK.

24. Select Sound, Play castmember.

25. Select “SwitchUp” from the list.

26. Click OK.

27. Select Navigation, Go to Net Page…

28. Enter “http://www.macromedia.com”.

29. Click OK.You will see the “Go to Net Page” command followed by the URL.

These steps have coded a button that will simply replace the open web page with the Macromedia site. The syntax to have the page load into a frame is : goToNetPage “URL”, “Target”. If you choose to have the page appear in a new window, regardless of what window is open in the browser the sytax would be: goToNetPage“URL”, “_new”.

Adding the Target parameter

The problem with the Behavior Inspector is that you can't add the target frame in the URL Dialogue box. You must manually add the target to the code. In the case of this site, the target is a frame named “Main”

1. Click the Script Window button. The script window will open.

2. Click the mouse at the end of the URL.

3. Press the apostrophe key.

4. Enter “Main”. You have now just told Director to put the Macromedia site into the frame named “Main”. Be sure to add the quotation marks or Director will give you an error message.

5. Close the Script window. You are back in the Behavior Inspector.

Coding the “rollovers”

The user should be given a visual clue that the buttons are “hot”. In this case when the mouse is over a button it blurs. Again, the Behavior Inspector, is the quickest way of coding this.

1.Click the Event Popup button.

2. Select mouseEnter.

3. Click the Action Popup button.

4. Select Sprite, Change castmember. A sprite swap will occur first.

5. Select “MacromediaOV” from the list.

6. Click OK. Now we have to worry about what happens when the mouse is outside of the button.

7.Click the Event Popup button.

8. Select mouseLeave.

9. Click the Action Popup button

10. Select Sprite, Change castmember. A sprite swap will occur first.

11. Select “Macromedia” from the list.

12. Click OK.

Using mouseEnter and mouseLeave

These two events should always be used together when you are coding a rollover.
A mouseEnter event occurs when the cursor crossed the sprite's bounding box. The mouseLeave occurs when the cursor passes outside of the box. On mouseEnter the sprite will blur and when the cursor leaves the sprite it goes back to its up state.

Though you could have used mouseWithin that would have left the sprite in its blurred state regardless of whether the mouse is down or up. This is because Director sees the cursor inside the sprite (mouseWithin) and executes that action.“

Down and Dirty” coding

I always tell you to work smart not hard. There are three more buttons to code, meaning there is a lot more work to be done in the Behavior Inspector. Or is there? Think about it. What really changes here? The button names and the URL change. So why not simply “reuse” the code?

1. Click the Script Window button.

2. Click and drag through the script to select the entire script.

3. Select Edit, Copy Text. Command-C (Mac) or Control-C (PC)

4. Click the New Castmember button. A blank script window opens.

5. Name the script “To FlashKit”.

6. Click once in the script area.

7. Select Edit, Paste. Command-V (Mac) or Control-V (PC)

8. Change the names of the buttons and URL as shown.

9. Click the New Castmember button. A blank script window opens.

10. Name the script “Frame Page”.

11. Click once in the script area.

12. Select Edit, Paste. Command-V (Mac) or Control-V (PC)

13. Change the names of the buttons and URL as shown.

Adding a page to a frame.

Notice the fundamental difference between this script and the “Flashkit” script. The URL simply consists of an HTML page. This page will sit in the same root level as the Shockwave movie. When the button is clicked, the page named “Frame.html” will appear in the fame named “Main” on the site.

1. Click the New Castmember button. A blank script window opens.

2. Name the script “Flash Page”.

3. Click once in the script area.

4. Select Edit, Paste. Command-V (Mac) or Control-V (PC)

5. Change the names of the buttons and URL as shown.

6. Select each of the buttons in the score and attach the appropriate script to the button.

Finishing up

1. Test the movie to be sure the buttons work and there are no script errors.

2. Stop the movie.

3. Select File, Save and Compact.

4. Name the file.

5. Navigate to your desktop Exercise folder and click OK.

6. Select File, Publish. The Shockwave file and the HTML file are added to your exercise folder.

7. Quit Director. File, Quit. Command-Q (Mac) or Control-Q (PC)

Browser Testing

The purpose of this exercise is to create the movies that get placed into web pages.

1. Get connected to the Internet.

2. Open your browser.

3. Click your browser's stop button. You don't need your Home Page for this section.

4. Netscape Navigator Users- Select File ,Open, Page in Navigator. Internet Explorer Users- Select File, Open File.

5. Navigate to the Folder on your desktop and select “Industrial.html.” in the Shockwave Applet folder.

6. Click the buttons. The pages load into the target frame.

Rolling your own “Lingo”

The Behavior Inspector does what it is supposed do but the resulting code uses the verbose Lingo. It can also be written using the dot syntax. The result is code that is a bit more efficient. The code for the Flashkit button would be:

on mouseDown me
sprite (the currentSpriteNum).member = member ("Flashkitdn")
sound (3). play (member ("SwitchDown"))
end

on mouseUp me
sprite (the currentSpriteNum).member = member "Flashkit"
sound (3). play (member (""SwitchUp"))
goToNetPage "http://www.flashkit.com","Main"
end

on mouseEnter me
sprite (the currentSpriteNum).member = member "FlashkitOv"
end

on mouseLeave me
sprite (the currentSpriteNum).member = member "Flashkit"
end

Downloads: