1 Reply Latest reply on Sep 4, 2010 6:22 PM by Shongrunden

    3D effect and applyChangesPostLayout

    frederic_m Level 1

      Hello,

       

      I'm wondering if it's possible to have a layout that takes into account the 3 dimensions. In the example http://help.adobe.com/en_US/flex/using/WSF0D55C84-17E0-456a-A977-04BFE1E23BA8.html

      under the section "Component layout and 3D effects", 1 image rotates around the Y axis. Because it's the second component in the HGroup layout, it's always drawn on top of the leftmost image. What I'd like is to have that component be rendered with it's z position taken into account: at some point the rotated image should appear behind the leftmost one. I tried the applyChangesPostLayout property but that doesn't change a thing. Am I reaching the capabilities of Flex/Flash or is there a way to do it?

       

      Thanks!

        • 1. Re: 3D effect and applyChangesPostLayout
          Shongrunden Adobe Employee

          This is possible, but depending on how fancy you want to get, it might get pretty tricky.  Understanding the basic geometry behind the Flash Player's 3D system and how effects and layout interact with that will be needed the more complicated you get.  I took the example you mentioned and tweaked it to do what I think you  are after.  I took advantage of the depth property on IVisualElement to  accomplish this.

          <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">
             
              <fx:Declarations>
                  <s:Sequence id="rotateEffect2" target="{targetImg}"  >
                      <s:Rotate3D angleYFrom="0" angleYTo="180" duration="1000">
                          <s:easer>
                              <s:Linear />
                          </s:easer>
                      </s:Rotate3D>
                      <s:SetAction property="depth" value="-1" />
                      <s:Rotate3D angleYFrom="180" angleYTo="360" duration="1000">
                          <s:easer>
                              <s:Linear />
                          </s:easer>
                      </s:Rotate3D>
                      <s:SetAction property="depth" value="0" />
                  </s:Sequence>
              </fx:Declarations>
             
              <s:HGroup horizontalCenter="0" verticalCenter="0" >
                  <mx:Image source="@Embed(source='image.jpg')"/>
                  <mx:Image id="targetImg" source="@Embed(source='image.jpg')"/>
                  <mx:Image source="@Embed(source='image.jpg')"/>
              </s:HGroup>
              <s:Button label="rotate" click="rotateEffect2.play();"/>
             
          </s:Application>