Banner of Disjointed Rollovers tutorial
button 1 Image of swap image area of Disjointed Rollover
button 2
button 3
button 4

 

Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources

 

 
Part 2  - Disjointed Rollover - More Slices
Page 5

Steps Covered on this Page:
More About Behaviors | Check Out Swap Image Box | Swap Button 1 | Swap Button 2 | Swap Button 3 | Swap Button 4 | Showing up In Behaviors List | Preview

Image of how the Behaviors list appears before we add the Swap Behavior to it

35> Now that the entire image has slices, it is time to apply behaviors that give us the much coveted Disjointed Rollover! Select Button 1. Notice in the Behaviors Box the only Behavior listed is a Simple Rollover. When we are finished, the Swap Image will be listed too. These Fields will normally tell us what we have and have not got going on with our selected objects.

With Button 1 still selected, click on the + sign in Behaviors>Swap Image and the impressive Swap Image Dialog Box appears as shown in part below.

Image of what we select in the Swap Image Dialog Box for Button 1

36a> Become familiar with how the Swap Image Dialog Box is set up. Notice in the image to the left that all of the Buttons you named in the Object Dialog Box are listed along with the large swapshapearea.

Compare it to the list below.


 

Image of how Fireworks slices and names the same design we customized.

36b>It is the same design showing how Fireworks automatic slicing does the file naming and slicing. As you can see, the names are confusing and there are many more slices which increases file size and download time.
For Button 1, follow the left image example. Click on the swapshaparea in the puzzle (the large area). Go to Frame No: and select 1. Button 1 does not swap so it needs to remain on frame 1 as shown in the left image.

Image of settings in Swap Image Dialog Box for Button 3

37>
1.Select Button 2
2.Click on + sign in
in Behaviors Box>Swap Image to open Swap Image Box.
3.In the Swap Image Box, click on the large area in the puzzle named swapshapearea.
4.Next, select 2 from the Frame No: drop down fly out menu.
5.OK
6.Preview or check the Behaviors field box to see if the action, on mouse over - swap image is listed below the On mouse over - Simple Rollover.

Image of settings in Swap Image  Dialog Box for Button 2

38>
1.Select Button 3
2.Click on + sign in
in Behaviors Box>Swap Image to open Swap Image Box.
3.In the Swap Image Box, click on the large area in the Puzzle named swapshapearea.
4.Next, select 2 from the Frame No: drop down fly out menu.
5.OK
6.Preview or check the Behaviors field box to see if the action, on mouse over - swap image is listed below the On mouse over - Simple Rollover.

Image of settings in Swap Image Dialog Box for Button 4

39>
1.Select Button 4
2.Click on + sign in
in Behaviors Box>Swap Image to open Swap Image Box.
3.In the Swap Image Box, click on the large area in the Puzzle named swapshapearea.
4.Next, select 2 from the Frame No: drop down fly out menu.
5.OK
6.Preview or check the Behaviors field box to see if the action, on mouse over - swap image is listed below the On mouse over - Simple Rollover.

Image of what the Behaviors List looks like once the Swap Image Behavior has been successfully applied.

40> All of your Buttons, when selected, should have the onMouseOver - Swap Image added to the list in the Behaviors Field Box Window.

Button OnePart of Disjointed Rollover that contains the Swap Image area
Button Two
Button Three
Button Four

41> It's Play n' Pray Time! If you have any problems or suggestions, please e-mail them to me. The more specific your comments, the more responsive to your ideas I can be. It is always a pleasure to improve and your input is valued and appreciated. Good Luck with your future Disjointed Rollovers!

Steps Covered on this Page:
More About Behaviors | Check Out Swap Image Box | Swap Button 1 | Swap Button 2 | Swap Button 3 | Swap Button 4 | Showing up In Behaviors List | Preview | Back to Top

 

Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources
To Sharpie SheetTo Page 4To Page 6To Sharpie SheetTo Sharpie Sheet
Revised 05.08.01
Contact Ginny LeBleu

Copyright 2001 © Ginny LeBleu
URL: http://www.digitalartbeat.com/websites/report/index.htm