7 Replies Latest reply on Dec 18, 2006 5:54 AM by peterent

    problem with transition and external image

    Craig Grummitt Level 3
      Hi! I'm having a bit of trouble with transitioning to a new state which contains an external image. i want a titlewindow to resize when the user selects a button, and display an external image. the size of the external image is not known until it is loaded, so i have set widths/heights to 100%. however the 'resize' transition doesn't know the size of the image in time, and animates to a small rectangle...

      i have worked out how to resolve this by removing the transition, and making the titlewindow invisible until the image is loaded(using the 'complete' event). i ideally would like to use the transition feature, however and am curious to know if anyone has any ideas on this - perhaps by triggering the resize to begin after the image is loaded? i can only find a way to display a transition through mxml - can this be achieved through actionscript?
        • 1. Re: problem with transition and external image
          peterent Level 2
          You've hit upon a dicey problem, or rather a chicken-and-egg problem: you can't do an effective resize transition without knowing the size of the image and you can't load the image until you switch states, triggering the resize.

          Here's a possible strategy:

          1. User clicks button which executes a function.
          2. In the function the image tag (which is created already, but is not yet added to the display list) is given the url to the image. The image tag should have a complete event handler.
          3. When the complete event fires, the image's contentWidth and contentHeight hold the size of the image.
          4. The complete event handler then switches to the new state which has the image tag added and which has a matching transition that has a AddChildAction followed by Resize in a Sequence for the state change.

          You can use the Image at any time, whether the state it is in is active or not - the image is created, it just hasn't been added to the display list.
          • 2. Re: problem with transition and external image
            Craig Grummitt Level 3
            many thanks for the reply. my hopes for resolving this haven't quite eventuated yet though! if i could clarify a couple of points in your response, i should be on my way.

            you say the image tag "is created already, but is not yet added to the display list." what do you mean by this? that the image tag is sitting inside the states, state, addchild tags? if so i can't seem to access its properties until it becomes active: "Cannot access a property or method of a null object reference." or do you mean that i create the tag using action script? in which case i'm not sure whether its possible(or how, at least) to add the image to the state using actionscript. (at this point in writing, i decided to go away and test this out. half way through i got called on to something else... but i am still interested to hear your response to this issue, and i'll be hopefully back onto this tomorrow)

            thanks again for your help peter,
            craig
            • 3. Re: problem with transition and external image
              peterent Level 2
              When you use states and there is an <mx:AddChild> tag it means that the child is going to be added to the display list. The actual object already exists (a new operation was done on it). It may not be in a fully realized state the first time since it hasn't been added to the display list and thus its full Flex framework creation cycle hasn't been run.

              I have not run the scenario I am proposing, so it may in fact not work, but I have another suggestion below.

              You should be able to have <mx:Image id="img" complete="handleComplete(event)" /> in the state and when you are ready to load the image, img.source = url; should not give you an error. The question is, without the image being added to the display list, will it even attempt to load the image from the url and fire the complete event? If it does fire the complete event, then you can switch states there.

              My alternative is to not put the Image into the state, but leave it in your base state with a width and height of zero. Have the button set the image's source property (or call its load() method). When complete event fires switch states.

              In your <mx:State>, instead of having an AddChild, you'll have SetProperty. Something like this (for width, height would be similar):

              <mx:SetProperty target="{img}" name="width" value="{img.contentWidth}" />

              The transition now has to simply use the <mx:Resize> effect.
              • 4. problem with transition and external image
                Craig Grummitt Level 3
                hmm.. as you say - objects don't appear to be fully realised until the state it is in becomes current. See below for sample code to illustrate this - as simple as possible - when you click a button it attempts to change a property of an object in a different state, and receives the error message "Cannot access a property or method of a null object reference." (i tried it with a label as well just to make sure it wasn't a phenomenon specific to image).

                Great lateral suggestion though to have an image of width and height of 0 and merely changing its width and height upon change of state. next time i get a chance i'll be trying this technique out.

                Cheers
                Craig
                • 5. Re: problem with transition and external image
                  Craig Grummitt Level 3
                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                  <mx:Script>
                  <![CDATA[
                  private function doThing():void {
                  //pic.source="simple.jpg";
                  picLabel.text="pic label";
                  }
                  ]]>
                  </mx:Script>
                  <mx:states>
                  <mx:State name="otherstate">
                  <mx:RemoveChild target="{button1}"/>
                  <mx:AddChild position="lastChild">
                  <mx:Image x="293" y="159" id="pic"/>
                  </mx:AddChild>
                  <mx:AddChild position="lastChild">
                  <mx:Label x="293" y="208" text="d" id="picLabel"/>
                  </mx:AddChild>
                  </mx:State>
                  </mx:states>
                  <mx:Button x="254" y="71" label="Do thing" click="doThing()" id="button1"/>
                  </mx:Application>
                  • 6. Re: problem with transition and external image
                    Craig Grummitt Level 3
                    Changing the image size in a new state rather than introducing it did the trick Peter. Many thanks for your help!
                    • 7. Re: problem with transition and external image
                      peterent Level 2
                      You are welcome.

                      I've found that <mx:AddChild ... /> in a state is not always the best solution when using transitions. Remember that a transition takes you from one state to another so that a transition where in one state a component is not on the display list to a state where the component is on the display list can be problematic for transitions that morph the component, such as zoom and resize. Even Move can be awkward as the component has to be first added to the display list (possibly causing it to appear briefly) then moved to its Move effect starting location.

                      It is often better to have the component on the stage but with visible="false" or alpha="0" (whichever is appropriate) or x="-2000" (for a Move) and then have the new state change the property to make it visible. The transition can be take over the change of value in the property.