3 Replies Latest reply on Aug 10, 2012 9:50 AM by Flex harUI

    help with rollover on UIComponent

    Kristin95762 Level 1



      I've loaded an array of images into a border container, and each is it's own UIComponent. I want to roll over each object in the border container and perform some action such as a vertical transform, or maybe a tool tip, or a drag and drop. I just need some direction as to how to detect what's under the mouse and select it.


      What is the direction I should look? Would this be an event on the borderContainer, and is mouseEnabled going to utilise



      I'm a learner here. I don't even know if I can do what I want with this method. However, I did discover that placing the required number of image components on the screen really slows down the performance.


      private function result(event:SQLEvent):void


                                              var data:Array = selectStmt.getResult().data;


                                              for (var i:int = 0; i < data.length; i++)


                                                         /* trace(data[i].image);  */


                                                        var card:Loader = new Loader();

                                                        var imageUrl:String = "assets/" + data[i].image;

                                                        var cardImage:UIComponent = new UIComponent();


                                                        card.load(new URLRequest(imageUrl));



                                                        cardImage.scaleX = .5;

                                                        cardImage.scaleY = .5;

                                                        cardImage.x = 25*i;

                                                        cardImage.y = 5;

                                                        cardImage.mouseEnabled = true;                    //check out:  flash.display.DisplayObjectContainer.mouseChildren







        • 1. Re: help with rollover on UIComponent
          Flex harUI Adobe Employee

          Your code looks ok to me.


          You would then listen for MouseEvent.MOUSE_OVER on the container and the event.target should be the image.


          This should not cause a performance issue unless you have l hundreds of images.  It might help if you size the images up front so you don’t have to scale them.  You should not set mouseEnabled and/or mouseChildren on the container, but you might need to set cardImage.mouseChildren

          • 2. Re: help with rollover on UIComponent
            Kristin95762 Level 1

            Hey, thanks for your advice. I will look into the Mouse events.


            Should I still keep the MouseEnabled property as proposed above? I'm not sure if that will work in the For loop. Does setting that property make it true for each image loaded, or only the last image loaded?


            I'm trying to use the minimum amount of MXML I can get away with as I am old school and I have come to believe ActionScript is more FLEXible (hah). So when I mentioned loading image components (ie. Spark controls), that is what slows down the performance. Loading UIComponents is much faster. On the other hand, I could see how it might have been easier to use mouse events on Spark controls.





            • 3. Re: help with rollover on UIComponent
              Flex harUI Adobe Employee

              CardImage is a loop variable so it is setting it on all of them.


              For a 100 cards, I’m surprised that Spark Image is that much slower.  You could also try using BitmapImage.


              Frameworks do have a cost as they are more general so yes, you can always optimize by going low level.  But that usually takes more time and maintenance.  It is just a trade-off.