9 Replies Latest reply on Jul 6, 2009 2:33 PM by Matt Cannizzaro

    defining interactions on embedded controls


      When a user hovers over an image, I would like to display a button that the user can click to navigate to a different page. Pretty straightforward requirement.  I am able to successfully display the button when I hover over the image but the button_click interaction does not work.  What am i missing?  I have listed the steps that I have followed:


      Add an image to page and convert it to a "button" component

      On the "over" action, I add a standard button control by the side of the image

      On the button_click interaction, I transition to a different page


      The button_click just does not work...


      fyi...I am trying to build a similar UI as seen here... http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html.  Click on the "Products" tab and hover over the phone image.  Now, you can click on the "Show Details" button to navigate to a different page.



        • 1. Re: defining interactions on embedded controls
          kk88 Level 1

          Figured I will give one more short as I haven't got any responses.  Will greatly appreciate if anyone can take a look at my sample files and let me know how I can achieve the desired functionality.

          • 2. Re: defining interactions on embedded controls
            acath Level 4



            What you're doing sounds totally reasonable. Can you post your FXP file to the forum? I'd like to take a look. You should rename it to .TXT before posting...the forum has a bunch of stupid security rules.



            • 3. Re: defining interactions on embedded controls
              kk88 Level 1

              Thanks for your response, Adam.  Renamed and uploaded the .fxp file.

              • 4. Re: defining interactions on embedded controls

                Hey, I tried out your file.  It seemed to work ok, as far as I can tell.  I noticed that clicking on the phone does nothing (no click interaction associated with it), but when I click on the shopping cart or the configure button, it takes me to the appropriate page.  What is it you're trying to do again?


                Also, at the moment, the instant I move over the shopping cart button to click it, the cart button disappears (though I can still click it).  It's... well, you probably don't want it like that.


                It's interesting to see how you've arranged your file.  I hadn't used the rollout feature before, I'm glad I got to see how you did it. 




                • 5. Re: defining interactions on embedded controls
                  kk88 Level 1

                  The problem is that when you hover over the configure or the shopping cart buttons, the button gets faded out.  Ideally, I want the button to appear and would like to display a tooltip on these buttons.  Similar to ...  http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html.  Click on the Products tab and roll over the phone image in the shopping page.  You should see the shopping cart button with a tooltip.

                  • 6. Re: defining interactions on embedded controls
                    turtlesoupapples Level 1

                    I think I see what you mean now.  I played around with it, and got similar results.  I'd be interested to know the solution.


                    Here's what I tried (which you may have also tried, but it never hurts to share):


                    I tried putting the shopping cart button in the 'over' appearence for the phone button, which looked good but then the shopping cart button was not clickable.


                    Doing what you did--fiddling with the opacity of the cart button and rollover interaction of the phone button--got me the same result, that the buttons worked but as soon as the mouse was over them they'd fade away again (but still clickable).  Is this may be because the cart button isn't technically part of the phone button, so when you're over the cart button you're no longer considered 'over' the phone button, and the roll-over goes away?


                    I was successful in getting a label to pop up as you wanted, when hovering over the cart button.  I just added the text and box to the 'over' appearence of the cart button.  (this label also fades with the cart button when you roll over it....)


                    It's like the cart button isn't recognized as part of the rollover area (though I guess it's really more of a rollover object, which is the problem...)



                    • 7. Re: defining interactions on embedded controls
                      Matt Cannizzaro Level 2

                      I took a look at your project and I think I have it working the way you're looking for. My FXP is attached.


                      Here's what I changed:

                      I took the phone and the buttons and put them in a custom component. I chose a custom component because I wanted states (one state with buttons and one without), and I wanted the individual buttons to be clickable - if I had made the phone and the two buttons one big button, I would have gotten the rollover / rollout states for free, but the details and configure buttons wouldn't have been clickable.


                      Once I made the custom component, I gave it two states - one with visible buttons, and one without. Finally, I added interactions to the two buttons so that clicking them changed the application's state.


                      Hope that helps. If you have any feedback on how we could make this more straightforward, that would certainly be useful!

                      • 8. Re: defining interactions on embedded controls
                        kk88 Level 1

                        Sweet...Thanks for your help, Matt. It will be helpful if I can view your file. Looks like there is a problem with your attachment.

                        • 9. Re: defining interactions on embedded controls
                          Matt Cannizzaro Level 2

                          It should appear once it's out of the queue, might take a little while.