13 Replies Latest reply on Feb 16, 2009 7:46 AM by Newsgroup_User

    Rollovers and layers

    allen_m
      I am trying to make a complicated rollover web image that started off as an Illustrator file, exported to Photoshop, and now open in Fireworks.
      The idea is to create rollover slices where the image states change simply by making various layers visible and invisible- Should be easy- I have done it in PhotoShop/Image Ready; but, since no more Image Ready I am really lost and have tried to figure this out for days...

      Sorry if this is a rudimentary question but I have a deadline looming and, well, for now at least, I wish I had Image Ready back!

      TIA,

      -Allen M.

        • 1. Re: Rollovers and layers
          Level 7
          allen_m wrote:
          > I am trying to make a complicated rollover web image that started off as an
          > Illustrator file, exported to Photoshop, and now open in Fireworks.
          > The idea is to create rollover slices where the image states change simply by
          > making various layers visible and invisible- Should be easy- I have done it in
          > PhotoShop/Image Ready; but, since no more Image Ready I am really lost and have
          > tried to figure this out for days...
          >
          > Sorry if this is a rudimentary question but I have a deadline looming and,
          > well, for now at least, I wish I had Image Ready back!

          Here's everything you ever needed to know about creating interactive
          bits in Fireworks.

          http://help.adobe.com/en_US/Fireworks/9.0/help.html?content=frw_slicing_sl_01.html

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: Rollovers and layers
            allen_m Level 1
            been there before... still not working for me-
            I have created the 1st slice; but can't set the states properly. I tried sharing the layers with all states; but, that didn't help. I need to select a rollover state, change which layers are visible; and preview the results in a browser. I suspect the root of my problem has to do with th way my file was imported from Illustrator via photoshop; but, I don't really know.
            • 3. Re: Rollovers and layers
              Level 7
              allen_m wrote:
              > been there before... still not working for me-
              > I have created the 1st slice; but can't set the states properly. I tried
              > sharing the layers with all states; but, that didn't help. I need to select a
              > rollover state, change which layers are visible; and preview the results in a
              > browser. I suspect the root of my problem has to do with th way my file was
              > imported from Illustrator via photoshop; but, I don't really know.
              >

              Sharing the file might be helpful. Can you post a link to it?

              --
              Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
              http://www.communityMX.com/
              CommunityMX - Free Resources:
              http://www.communitymx.com/free.cfm
              ---
              .:Adobe Community Expert for Fireworks:.
              Adobe Community Expert
              http://tinyurl.com/2a7dyp
              ---
              .:Author:.
              Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
              Peachpit Press -
              http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
              Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
              • 4. Re: Rollovers and layers
                allen_m Level 1
                Update...

                It does seem to be related to the intermediate introduction of photoshop. I was using photoshop in order to introduce layer styles for drop shadows... When I just open the Illustrator ai file directly in Fireworks, I can create the rollover just fine.... Odd; I will try a couple of other things and either report success, or, post a copy of the offending file...

                -Allen M.
                • 5. Rollovers and layers
                  elthib
                  >The idea is to create rollover slices where the image states change simply by
                  > making various layers visible and invisible- Should be easy- I have done it in
                  > PhotoShop/Image Ready; but, since no more Image Ready I am really lost and have
                  > tried to figure this out for days...


                  allen_m,

                  I am having the same problem or at least one similar to yours. My rollovers were created in PhotoShop/ImageReady CS2. It sounds like yours were created in a similar manner (various layers visible and invisible). I'm trying to create them in Fireworks hoping I could do it like I did in CS2. Someone on my post told me to create the text for the rollovers in Dreamweaver. That does not solve my problem. I want the website to be a click through/prototype with all of the rollovers. CS2 created all the rollovers when they were sliced and exported.
                  If you go to http://www.nfc.usda.gov you will see the rollover effect I am trying to achieve in Fireworks.

                  I hope you get a better response than I did.

                  LT

                  • 6. Re: Rollovers and layers
                    Level 7
                    elthib wrote:
                    >> The idea is to create rollover slices where the image states change simply by
                    > > making various layers visible and invisible- Should be easy- I have done it
                    > in
                    > > PhotoShop/Image Ready; but, since no more Image Ready I am really lost and
                    > have
                    > > tried to figure this out for days...
                    >
                    >
                    > allen_m,
                    >
                    > I am having the same problem or at least one similar to yours. My rollovers
                    > were created in PhotoShop/ImageReady CS2. It sounds like yours were created in
                    > a similar manner (various layers visible and invisible). I'm trying to create
                    > them in Fireworks hoping I could do it like I did in CS2. Someone on my post
                    > told me to create the text for the rollovers in Dreamweaver. That does not
                    > solve my problem. I want the website to be a click through/prototype with all
                    > of the rollovers. CS2 created all the rollovers when they were sliced and
                    > exported.
                    > If you go to http://www.nfc.usda.gov you will see the rollover effect I am
                    > trying to achieve in Fireworks.
                    >
                    > I hope you get a better response than me.
                    >
                    > LT
                    >
                    >
                    >
                    Fireworks doesn't do this by changing layer visibility. It creates
                    rollovers using States.

                    A quick search of the help files produced these results:

                    http://help.adobe.com/en_US/Fireworks/10.0_Using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd3 .html
                    http://help.adobe.com/en_US/Fireworks/10.0_Using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fda .html
                    http://help.adobe.com/en_US/Fireworks/9.0/help.html?content=frw_slicing_sl_01.html

                    HTH


                    --
                    Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                    http://www.communityMX.com/
                    CommunityMX - Free Resources:
                    http://www.communitymx.com/free.cfm
                    ---
                    .:Adobe Community Expert for Fireworks:.
                    Adobe Community Expert
                    http://tinyurl.com/2a7dyp
                    ---
                    .:Author:.
                    Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                    Peachpit Press -
                    http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                    Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                    • 7. Re: Rollovers and layers
                      mydigitaldiva_adobe
                      Jim, I'm currently doing your lynda.com "Fireworks CS4 Essential Training" course. Are rollovers covered in there? You mentioned them early on, saying that would be for "another course" but it doesn't look like they're covered? If not, are you going to do a course about that? Or should I "buy the book?" :)

                      In any case, thanks for these links, I'll probably be able to get it figured out via Help. It's just that I too am a former ImageReady user looking to *finally* make use of my expensive suite properly...
                      • 8. Re: Rollovers and layers
                        Level 7
                        Erika Heggie wrote:
                        > Jim, I'm currently doing your lynda.com "Fireworks CS4 Essential Training"
                        > course. Are rollovers covered in there? You mentioned them early on, saying
                        > that would be for "another course" but it doesn't look like they're covered? If
                        > not, are you going to do a course about that? Or should I "buy the book?" :)
                        >
                        > In any case, thanks for these links, I'll probably be able to get it figured
                        > out via Help. It's just that I too am a former ImageReady user looking to
                        > *finally* make use of my expensive suite properly...
                        >
                        Hi Erika:

                        I cover rollover buttons in Chapter 5, Creating Button symbols. Is there
                        something specific you would like to know?

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        • 9. Re: Rollovers and layers
                          mydigitaldiva_adobe Level 1
                          The goal is to know rollovers as well as I do in ImageReady, including how to best configure the HTML when exporting. I skipped Ch 5. I also bought your book (100 How-To's)

                          Would also love to know where you cover the HTML exporting in depth -- in terms of formatting tables, et al.

                          Thanks!
                          erika
                          • 10. Re: Rollovers and layers
                            Level 7
                            Erika Heggie wrote:
                            > The goal is to know rollovers as well as I do in ImageReady, including how to
                            > best configure the HTML when exporting. I skipped Ch 5. I also bought your book
                            > (100 How-To's)
                            >
                            > Would also love to know where you cover the HTML exporting in depth -- in
                            > terms of formatting tables, et al.
                            >
                            > Thanks!
                            > erika
                            >

                            Hi Erika:

                            I hope you enjoy both the videos and the book! :-)

                            I have no idea how well you know rollovers in ImageReady ;-) And having
                            successfully avoided that application for most of its lifetime in PS, I
                            don't know where to start in terms of comparisons.

                            One thing I can tell you is that FW uses states for creating rollovers,
                            not layer visibility.

                            Here is a free tutorial which goes over the basics. It was written for
                            an earlier version of FW, but just replace the word "frames" with
                            "states" and things are pretty much the same.

                            http://www.communitymx.com/abstract.cfm?cid=27ED3

                            Keep in mind, this is just one simple way in which to create rollovers.

                            In my book, look to tips 45, 46 and 65.

                            Honestly I don't cover exporting in terms of tables in any great detail,
                            but in the book, tips 51 and 89 go over the basics. HTML and Images
                            export is suitable only for mock ups, not for commercial grade web sites.

                            HTH!

                            --
                            Jim
                            • 11. Re: Rollovers and layers
                              mydigitaldiva_adobe Level 1
                              great. thanks!
                              • 12. Re: Rollovers and layers
                                dlaitila
                                Jim, in your Fireworks CS4 100 how to's book you mention on tip #87 this:

                                1. Select the web layer and then click the New Sublayer icon at the bottom of the layers panel.
                                2. With that sublayer active, add in your interactive web elements. (How do you do this? Drag and drop or copy and paste?)
                                3. Select Share layer to pages from the layers panel Options menu.
                                4. Choose which pages you want to share the Web layer with, then click OK.

                                You don't say whether you should have a Master Page set up before you start step 1 above. My rollovers show up on Page 1 but do not show up on the other pages. Does a master page get set up at all in this scenario?

                                Does this work only with Fireworks CS4 and not CS3?
                                • 13. Re: Rollovers and layers
                                  Level 7
                                  dlaitila wrote:
                                  > Jim, in your Fireworks CS4 100 how to's book you mention on tip #87 this:
                                  >
                                  > 1. Select the web layer and then click the New Sublayer icon at the bottom of
                                  > the layers panel.
                                  > 2. With that sublayer active, add in your interactive web elements. (How do
                                  > you do this? Drag and drop or copy and paste?)
                                  > 3. Select Share layer to pages from the layers panel Options menu.
                                  > 4. Choose which pages you want to share the Web layer with, then click OK.
                                  >
                                  > You don't say whether you should have a Master Page set up before you start
                                  > step 1 above. My rollovers show up on Page 1 but do not show up on the other
                                  > pages. Does a master page get set up at all in this scenario?
                                  >
                                  > Does this work only with Fireworks CS4 and not CS3?
                                  >
                                  Hi there!

                                  Sorry, I just saw this message.

                                  1)Select the web layer and then click the New Sublayer icon at the
                                  bottom of
                                  > the layers panel.

                                  > 2. With that sublayer active, add in your interactive web elements.
                                  (How do
                                  > you do this? Drag and drop or copy and paste?)
                                  Cut and past is more reliable than drag and drop

                                  > 3. Select Share layer to pages from the layers panel Options menu.
                                  > 4. Choose which pages you want to share the Web layer with, then
                                  click OK.
                                  >
                                  > You don't say whether you should have a Master Page set up before
                                  you start
                                  > step 1 above. My rollovers show up on Page 1 but do not show up on
                                  the other
                                  > pages. Does a master page get set up at all in this scenario?

                                  This does not require a master page. If you have web elements on a
                                  master page, they are shared to all pages unless you break the link
                                  between the page and master page.

                                  I'll bet your other pages don't have a second state added. Go into each
                                  page and add a new state. That will allow the rollover to occur.
                                  >
                                  > Does this work only with Fireworks CS4 and not CS3?

                                  IT shoudl work the same way for CS3 and CS4.

                                  HTH!
                                  --
                                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                  http://www.communityMX.com/
                                  ---
                                  .:Adobe Community Expert for Fireworks:.
                                  http://www.adobe.com/communities/experts/members/206.html
                                  ---