5 Replies Latest reply on Feb 15, 2010 1:31 AM by Luis Pedro Ferreira

    The width and height of an Image is 0 (zero)???

    Luis Pedro Ferreira Level 1

      Hi guys. I'm trying to add an image programmatically and set it at the center of a group. Loading the image and add it to the stage is pretty easy but position it to the center is being difficult.

       

      Ok. Part 1:

      import de Image class:

      import mx.controls.Image;

       

      create new object for the image:

      var companyLogo:Image = new Image;

       

      setting the source:

      companyLogo.source="assets/images/app_logo.png";

       

      add it to the group:

      mainAppGroup.addElement(companyLogo);

       

      position it to the center of the group:

      companyLogo.x = mainAppGroup.width/2 - companyLogo.width/2;

      companyLogo.y = mainAppGroup.height/2 - companyLogo.height/2;

       

      And this image doesn't become at the center of the box. For some reason (i've tested) and the companyLogo.width and the companyLogo.height are returning a value of 0 (zero)

       

      What am i doing wrong??? Anyone?

        • 1. Re: The width and height of an Image is 0 (zero)???
          Flex harUI Adobe Employee

          Images are loaded asynchronously.  The component won't have a final

          width/height until at least frame later.  Wait for the

          FlexEvent.UPDATE_COMPLETE after Event.COMPLETE to get the size.

          1 person found this helpful
          • 2. Re: The width and height of an Image is 0 (zero)???
            Luis Pedro Ferreira Level 1

            How can i wait for FlexEvent.UPDATE_COMPLETE after Event.COMPLETE to get the size?

             

            So far my code is:

             

            private function showLogo():void{

            var companyLogo:Image = new Image;

            companyLogo.source="assets/images/app_logo.png";

            mainAppGroup.addElement(companyLogo);

            companyLogo.x = mainAppGroup.width/2 - companyLogo.width/2;

            companyLogo.y = mainAppGroup.height/2 - companyLogo.height/2;

            }

             

            What can i modify on this to make it work?

            • 3. Re: The width and height of an Image is 0 (zero)???
              Evtim Georgiev (Adobe) Level 2

              If you just want to center the image and mainAppGroup has BasicLayout (the default for a Group) then you can use the horizontalCenter/verticalCenter constraints instead of explicitly setting x and y:

               

              private function showLogo():void{

              var companyLogo:Image = new Image;

              companyLogo.source="assets/images/app_logo.png";

              mainAppGroup.addElement(companyLogo);

              companyLogo.horizontalCenter = 0; // Offset of the element's center (companyLogo) from the horizontal center of the parent (mainAppGroup)

              companyLogo.verticalCenter = 0; // Offset of the element's center (companyLogo) from the vertical  center of the parent (mainAppGroup)

              }

               

              -Evtim

              • 4. Re: The width and height of an Image is 0 (zero)???
                Shongrunden Adobe Employee

                Here is an example of what Alex recommended:

                 

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx"
                               creationComplete="init()">

                 

                    <fx:Script>
                        <![CDATA[
                            import mx.controls.Image;
                            import mx.events.FlexEvent;

                 

                            private var companyLogo:Image;
                           
                            private function init():void {
                                companyLogo = new Image();
                                companyLogo.addEventListener(Event.COMPLETE, handleComplete);
                                companyLogo.source = "http://www.adobe.com/ubi/globalnav/include/adobe-lq.png";
                                mainAppGroup.addElement(companyLogo);
                            }
                           
                            private function handleComplete(e:Event):void {
                                trace('complete');
                                companyLogo.addEventListener(FlexEvent.UPDATE_COMPLETE, handleUpdateComplete);
                            }
                           
                            private function handleUpdateComplete(e:Event):void {
                                trace('updateComplete');
                                companyLogo.x = mainAppGroup.width/2 - companyLogo.width/2;
                                companyLogo.y = mainAppGroup.height/2 - companyLogo.height/2;
                            }
                        ]]>
                    </fx:Script>

                 

                    <s:Group id="mainAppGroup" width="200" height="200">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="black" />
                            </s:fill>
                        </s:Rect>
                    </s:Group>
                   
                </s:Application>

                • 5. Re: The width and height of an Image is 0 (zero)???
                  Luis Pedro Ferreira Level 1

                  Now, in your opinion, is that a best pratice?

                  Or the best way to do it is to declare the object i wanna center by MXML?

                   

                  I'm still confused on what i should be doing in AS2 or MXML cause there are things we can do it both ways.