Banner of Disjointed Rollovers tutorial
button 1 Image of swap image area of Disjointed Rollover
button 2
button 3
button 4
 
Part 1  - Simple Rollover - Slicing Begins
Page 3
Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources

Steps Covered on this Page:
Slicing Tools | Naming Slices | Name Alt Tags in Objects Box| Add Behavior | Draw Lines and Large Circle | Align Lines | Save as Preset | Apply Custom Preset | Arrange Order of Objects

Image of the part of the Tool  Bar that shows the Slice Tools

18> These are the tools on the Toolbar we will be using to slice our design into the pieces that lay the groundwork to apply Behaviors (actions) to our Buttons so it will become a Simple Rollover. The Slice Tool draws the slices over the objects and all the page parts of the design that we want to eventually export. The Show Slices lets us see the Slices and the Don't Show Slices puts them behind the scenes so we can see everything clearly. All we do to switch slices on and off is click back and forth on the Show/Don't Show Slices icons. This is called Toggling. Later, when Behaviors (actions) are added, it is important to see the Slices. When the actions are all applied and we want to Preview, it is better to turn the Slices off.

 Image illustrating how to Slice the  Buttons
You must be on Frame 1 before Slicing

19> Return to Frame 1. Be absolutely certain that you are back on Frame 1 before you begin the next step. Click on the Slice Tool and draw over the number 1 Button as shown to the left. This Slice Tool is extremely intuitive which means it almost does the job without you! Draw the rectangle all the way over the Button and about halfway down to Button 2. Next, start where you left off and pull the Slice Tool over Button 2 the same way. It has a crosshair to show you where you are and it lines up intuitively where you left off. Work on through the Buttons and you will notice how nicely the tool works.

Image os the Object (Slice) Box where the Buttons are renamed and Alt Tags descriptions are entered

20> Naming your slices is the next step. Naming your slices keeps your hair on your head and reduces babbling. (It develops good working habits as well).

Go to Windows>Object to open Object(Slice) Dialog Box. Select Button number 1 and uncheck the Auto-Name Slices. Type in buttonone without spaces. Now, click in the <alt> field box and type Button One. Leave the rest of the field boxes alone (that's another tutorial).

Go to Button number 2 and repeat, except name it 2. Continue for Buttons 3 and 4.

Image of the Behaviors fly out menu list where Simple Rollover is selected

21> Here comes the fun and fancy part...the actual rollover action! Go to Windows>Behaviors to open Behaviors Dialog Box. Click on Frame 1 and Marquee Select all Buttons. Click on the plus (+) sign on the Behaviors Box and click on Simple Rollover at the top of the menu.

Button One
Button Two
Button Three
Button Four

Click back into workspace. Click on Don't show Slices icon. Click on Preview to see how the rollover action works. The numbers should turn yellow when you roll over them.

If I were stopping here, I would go to Modify>Trim Canvas to crop the canvas before Exporting. However, we are moving on to creating Disjointed Rollovers so we will deal with Trimming and Exporting later.
back to top

 

Image of drawing  the lines and setting stroke size in the Stoke Dialog Box

22> Before drawing the lines, be advised that they are optional. They make the process a little more complex and if they hang you up, leave them out and just follow the instuctions concerning the large Circle. In drawing the lines, we will be using some of the same techniques we did earlier.

If you opt to include the lines, go to Windows>Stroke to open Stroke Dialog Box. With the Pen Tool, draw one straight line. Just eyeball the size. With the line selected, choose the settings to the left. Pencil, Fill well is blue, 1-Pixel Hard, stroke set at 5 and leave the rest of the settings at default.

Click on line and press Alt + press and hold down mouse to drag and drop three more duplicate lines. If you prefer to duplicate using the menu list, with line selected, go to main menu>Edit>Copy>click back on workspace to deselect line. Then return to main menu>Edit>Paste and click back on workspace. Ctrl+V to paste again for 3 and repeat for 4.

Image of aligning the lines to the Buttons and the Large Circle

23> In Stroke box, change stroke back to 1 and draw the circle and use it to align the lines top to bottom. When they are in place, marquee select all of the lines and Alt+Ctrl+9 to Distribute Heights evenly.

Image of where to name and save an Effect you like so it can be applied to another object later

24> To color the large circle, we will go to Button 1 to save the Effect so it can be applied to the Large Circle. Click on the number 1 Button (circle only...not the number) and then click on the disk at the lower right hand side of the Effects Dialog Box. It will open a Save Effect As Dialog Box and there you will name the effect mybluebutton without spaces and in lower case and click OK.

Select your Large Circle and go to the ink well and select #3300FF by typing it in the # field box or using the eyedropper (just sweep it across the colors in the ink well or on the objects in your workspace and it shows you the hexidecimal name in the field box.

Image showing how to access the Effect you just saved

25> Click on the Down Fly Out Arrow in the right of the Effects Field Box to open a list of presets including the custom one you just saved. Scroll down and select mybluebutton. The effect will be applied to your Circle completely matching your smaller ones! Better yet, you can apply this to anything you want in the future. This is just the beginning of your own personal library of custom presets!

 

 

Image of how the lines should be positioned before moving on to next step

26> Get your top and bottom lines to go behind the small circles but in front of your large circle. The two inbetween are behind both the small and large circles. Use the Modify>Arrange>Bring to Front (Ctrl+F) or >Send to Back (Ctrl+B) to get everything where it should be. Sometimes, not only can these shortcut keys can be glitchy and if they will not obey your command, do each line individually using the main menu list. i.e. Select the line you are going to move and go to main menu>Modify>Arrange>click on arrow to open fly out menu list and click on Send To Back or Bring to Front (whichever one you want it to do).

Steps Covered on this Page:
Slicing Tools | Naming Slices | Name Alt Tags in Objects Box| Add Behavior | Draw Lines and Large Circle | Align Lines | Save as Preset | Apply Custom Preset | Arrange Order of Objects | Back to Top |

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

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