23 Replies Latest reply on Sep 13, 2010 11:31 AM by Jim_Babbage

    Rollover buttons

    jimfid45

      Hi,

       

      I am trying to create a rollover button in Fireworks CS5.

       

      I want only two states  say normal state and mouse over state.

       

      Does anyone know where such a tutorial exists?

       

      Thanks,

      Jim

      P.S. I can easily do this with a brute force method, I want to do this all in Fireworks CS5

        • 1. Re: Rollover buttons
          jimfid45 Level 1

          Let me refine this post a bit.  ( I want the normal state to be BLUE and the Mouse over state to be RED )

           

          1. I drew a small rectangle on the canvas   200 pixels wide by 100 pixels tall and gave it the color blue. The button has no text it does not matter.

          2.  I then right-clicked on the blue rectangle and selected, "Convert to Symbol". I named it, "Button_one"  and gave it a type of, "Button". Then clicked OK.

          3.  This is where I do not understand what to do next. I want the over state to be RED.  So from step 3 thru say step 7 or 8 whatever what do you do.

          • 2. Re: Rollover buttons
            Linda Nicholls Level 4

            I think the easiest way is to do a simple rollover. Instead of converting the rectangle to a symbol, right click on it and choose Insert Rectangular Slice. Once that is done, click in the little target shape in the middle of the slice and choose Add Simple Rollover Behavior from the menu that pops up. Open the States panel, and then the States panel menu. Choose Duplicate State.  That creates a second copy of your rectangle (and text if you have added any) to the mouseover state. Change the colors of the duplicates. Switch the document window to Preview mode to test your rollover. You should be good to go.

            • 3. Re: Rollover buttons
              jimfid45 Level 1

              Linda,

               

              I tried what you have said countless times and it does not work.

               

              Here is what you said , that does work fine.

               

              I think the easiest way is to do a simple rollover. Instead of  converting the rectangle to a symbol, right click on it and choose  Insert Rectangular Slice. Once that is done, click in the little target  shape in the middle of the slice and choose Add Simple Rollover Behavior  from the menu that pops up. Open the States panel, and then the States  panel menu. Choose Duplicate State.  That creates a second copy of your  rectangle (and text if you have added any) to the mouseover state.

               

              Then here is the part that does not work:

              Change the colors of the duplicates.

               

              I cannot change the color of the duplicate state, for some reason I am not allowed to.

               

              So state 1 is BLUE  and state 2 is BLUE  as well. I cannot make state 2 RED.

               

              Jim

              • 4. Re: Rollover buttons
                Jim_Babbage Level 4

                Are you in preview mode? Other than that, the only reasons I can thinknof is that  the object is locked or you're using a bitmap object rather than a vector rectangle

                • 5. Re: Rollover buttons
                  jimfid45 Level 1

                  I still cannot do it. I have spent about 4 hrs with it. The best I can do is get the state 2 color to be transparent but not an actual color

                  • 6. Re: Rollover buttons
                    Jim_Babbage Level 4

                    Please share the exact file you are using. The original FIreworks PNG file.

                    • 7. Re: Rollover buttons
                      jimfid45 Level 1

                      Untitled-705.png

                      I have followed the instructions perfectly.  Take my word for it State 1  is a BLUE vector rectangle. I created a new/duplicate state using the icon in the lower right just to the left of the trash can. So now with state 2 selected, it is IMPOSSIBLE for me to give it color, using the fill color of red in the lower left.  Also it is transparent. When I preview it ( the whole thing ) it goes from the BLUE to the mouse over color of NONE. That's the problem I can set state 2 color.

                      • 8. Re: Rollover buttons
                        jimfid45 Level 1

                        Jim here is the file attached.  Thanks!

                        • 9. Re: Rollover buttons
                          jimfid45 Level 1

                          File rollover.png was sent to Jim B.


                          • 10. Re: Rollover buttons
                            Jim_Babbage Level 4

                            There was no attachment.


                            • 11. Re: Rollover buttons
                              Jim_Babbage Level 4

                              There appears to be no object (or no selected object) in State two. Without the PNG file I can't be sure, though

                              • 12. Re: Rollover buttons
                                jimfid45 Level 1

                                Jim the file is attached.

                                • 13. Re: Rollover buttons
                                  Jim_Babbage Level 4

                                  The icon in the bottom corner ONLY creates a duplicate if you drag the other state to the icon. Otherwise, you get a new, empty state.

                                  • 14. Re: Rollover buttons
                                    jimfid45 Level 1

                                    Jim thanks for this last post. I dragged sate 1

                                    to the new state icon and I still can not   create a

                                    new fill color for state 2. I give up for today.

                                    • 15. Re: Rollover buttons
                                      Jim_Babbage Level 4

                                      Sorry, it's not attached. Either email it to me directly or - ideally - upload the file to your web site and send us a direct link to the file.

                                      • 16. Re: Rollover buttons
                                        Jim_Babbage Level 4

                                        Well when I see the file I'll hopefully be able to shed more insight. This is not a problematic workflow, normally. It s

                                        hould take minutes o achieve.

                                        • 17. Re: Rollover buttons
                                          Linda Nicholls Level 4

                                          Hmm. You didn't do what I said. I wrote that you should choose Duplicate State from the states panel menu. Using the insert New/Duplicate State icon at the bottom of the panel just inserts a blank state. To open the States panel menu, click on the tiny down arrow at the top right of the panel. Since  you have already inserted a second, blank state proceed  follows:  open the States panel menu, click on the second state, and choose Copy to States. That will copy the content fron the first state into the second one, after which you can change the colors.

                                          • 18. Re: Rollover buttons
                                            jimfid45 Level 1

                                            Jim see:

                                            http://www.youtube.com/watch?v=dUTGRfOY9Yw

                                             

                                            I do not understand first off why my PNG file will not send to you via the attach method in Yahoo mail. I tried twice.

                                             

                                            Also the video link above depicts a video that for some reason the mouse pointer is lost. I hope you can still follow it..

                                             

                                            Yes this is a no-brainer 60 second excersize to get a two-state rollover but I can't do it.

                                             

                                            Jim

                                            • 19. Re: Rollover buttons
                                              jimfid45 Level 1

                                              Linda said, "I think the easiest way is to do a simple rollover. Instead of   converting the rectangle to a symbol, right click on it and choose   Insert Rectangular Slice. Once that is done, click in the little target   shape in the middle of the slice and choose Add Simple Rollover  Behavior  from the menu that pops up. Open the States panel, and then  the States  panel menu. Choose Duplicate State.  That creates a second  copy of your  rectangle (and text if you have added any) to the  mouseover state."

                                               

                                              I cannot get this to work in the order specified.

                                               

                                              I have found a sure fire way to create the rollover buttons which takes a few seconds.

                                               

                                              1.  On the canvas draw a rectangle.

                                              2. Give the recatngle a color.

                                              3. Go to the states panel and left-click on State 1 so State 1 is highlighted. Then right click on State 1 and select Duplicate State.

                                              4. Accept the defaults of  "1" and "after current state"  and click OK

                                              5.  Now left click on State 2 and then click on the rectangle on the canvas.

                                              6. You should now see in the properties inspector all of the properties for the rectangle associated with the second rectangle.

                                              7. Change the colors of the Second state rectangle at will using the Properties Inspector.

                                              8. You can go back and forth between State 1 and Stage 2 rectangles as you desire to get them just right.

                                              9. When you are happy with both States1 and States 2.  Go back to State 1  and left click on the rectangular button on the canvas .

                                              10. Right click on the button and select "insert  rectangular  slice".

                                              11. Note: Once you " insert rectangular slice"  you are then locked out of all edits to your button.

                                               

                                              12  Now click inside the circle of the on screen button from step 11 and select, "Add simple rollover behavior".

                                              13. You are done. In Fireworks you may select the Preview Window or go directly "File then Preview in browser"

                                               

                                              Notes: If at any time you cannot see a Properties panel for your selected button you cannot make changes to it.

                                              Notes: The last 2 steps before preview need to be "insert  rectangular slice" followed by, "add simple rollover behavior"

                                              • 20. Re: Rollover buttons
                                                Jim_Babbage Level 4

                                                Why are you converting the shape to a symbol?

                                                 

                                                Jim Babbage

                                                1 person found this helpful
                                                • 21. Re: Rollover buttons
                                                  Jim_Babbage Level 4

                                                  OK I had to pause your video to see what was happening when you created the symbol.

                                                   

                                                  You have created a button symbol.

                                                  Button  symbols are edited WITHIN the symbol itself, not on the canvas. Nor do  they require the swap image behavior added separately.

                                                   

                                                  STEPS

                                                   

                                                  1. Draw a rectangle
                                                  2. Create button symbol
                                                  3. Double click on the symbol to edit it
                                                  4. Select the rectangle to change the color on the first state as desired
                                                  5. Deselect the rectangle and choose the OVER state from the State menu in the Properties panel.
                                                  6. Choose Duplicate Up graphic.
                                                  7. Select the rectangle and change the color
                                                  8. Double click on the cnavas (not the rectangle) to return to the main page view.
                                                  9. Switch to Preview for testing.
                                                  1 person found this helpful
                                                  • 22. Re: Rollover buttons
                                                    jimfid45 Level 1

                                                    Thanks to both of you. The whole fiasco started for me when after creating  the first rectangle, I then went

                                                    straight to the the slice, then rollover/ At this point I became locked out of the ability to modify the second

                                                    rectangle or the rectangle was non-existant. Also I did not realize at first when I had no properties panel

                                                    for what I thought was the second button.  This should have been a red flag for me, but I did not know that.

                                                     

                                                    Maybe you can do the steps above and still get a rollover. But  I am going to use Jim's steps below:

                                                    1. Draw a rectangle
                                                    2. Create button symbol
                                                    3. Double click on the symbol to edit it
                                                    4. Select the rectangle to change the color on the first state as desired
                                                    5. Deselect the rectangle and choose the OVER state from the State menu in the Properties panel.
                                                    6. Choose Duplicate Up graphic.
                                                    7. Select the rectangle and change the color
                                                    8. Double click on the cnavas (not the rectangle) to return to the main page view.
                                                    9. Switch to Preview for testing.

                                                     

                                                    This works the easiest for me.

                                                    Jim

                                                    • 23. Re: Rollover buttons
                                                      Jim_Babbage Level 4

                                                      Glad you have it working now.

                                                       

                                                      Cheers

                                                       

                                                      Jim Babbage