5 Replies Latest reply on Dec 18, 2012 2:10 AM by Mahesh.w

    Image Rotate 3D in Flex, but display another image on back of this image?

    hoangcoltech

      Hello everybody,

       

      i want to rotate 3D an Image called img1 in Flex. I want to rotate it around y axis 180 degree. I can do this by using 3D effect already built in Flex but i want to do a bit more different.

       

      I want during rotating, there's another image called img2 appear on back of img1 (in default case, the image appear on the back is img1) and when rotating finish, the image will be img2.

       

      How can i do this ?

       

      Thank you.

        • 1. Re: Image Rotate 3D in Flex, but display another image on back of this image?
          saisri2k2 Level 4

          I would create a component like the following and play with the depths of the images. And then add rotation on the whole container itself.

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Group 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>

                              <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                    <s:Image source="/assets/images/blankcover.png" depth="0" x="0" y="0" />

                    <s:Image source="/assets/images/beam.jpg" depth="1" x="0" y="0"/>

          </s:Group>

          1 person found this helpful
          • 2. Re: Image Rotate 3D in Flex, but display another image on back of this image?
            hoangcoltech Level 1

            But because i rotate 180 degree. If i use this method, the img2 will display its pixels inversely from right to left.

            This is not what i want. I want the img2 still display its pixels normally from left to right. Do u have any ideas ?

            • 3. Re: Image Rotate 3D in Flex, but display another image on back of this image?
              kraikit

              Try rotating the img2 with a starting angle of 180 and an ending angle of 360, e.g.

               

                      <s:Parallel id="rotateImages" >

                          <s:Rotate3D id="rotate1"

                                      target="{image1}"

                                      angleYFrom="0" angleYTo="180"

                                      autoCenterTransform="true" />

                          <s:Rotate3D id="rotate2"

                                      target="{image2}"

                                      angleYFrom="180" angleYTo="360"

                                      autoCenterTransform="true" />

                          <mx:AnimateProperty target="{image2}"

                                              property="depth"

                                              fromValue="0"

                                              toValue="2"

                                              />

                      </s:Parallel>

               

              This plays three animations simultaneously:

              1) rotate image1 to be reversed

              2) rotate image2 in the same rotation direction from reversed to normal

              3) animate the depth value of image2 so it moves in front of image1 (which is at depth 1)

               

              -- Tom

              Flex SDK Engineer

               

                                                                 

              • 4. Re: Image Rotate 3D in Flex, but display another image on back of this image?
                hoangcoltech Level 1

                Oh man, thanks a lot. It works like a charm

                • 5. Re: Image Rotate 3D in Flex, but display another image on back of this image?
                  Mahesh.w

                  Hi kraikit

                   

                  This is quite usful thread. I tried the given example. Its good.

                  But I am not able to implement if there are 4 or n-number of images and each time i have to rotate each image 90, 180,270,360 Degrees.

                   

                  In detail :

                   

                  1st Image rotates 90 D from 0, then 2nd Image starts rotating 90 D from 0 In parellel image 1 rotates 180 D from 90 D then 3rd image starts from 0 to 90 D in parellel 2nd image from 90 to 180 and 1st image from 180 to 270 ... like wise fourth image or n-number of images.

                   

                  I want to create a spinner which spinns n number of images n number of times, clockwise or anticlockwise. If there are any examples will be very helpfull. Its a big deal to create such application.

                   

                  Can you please suggest the way how to implement this scenario ?

                   

                  I need to implement this as soon as possible. If I am not clear please reply back.

                   

                  Thank you

                  Mahesh

                   

                   

                  Here is my example:

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"

                                       creationComplete="startPlay(new EffectEvent(EffectEvent.EFFECT_END))">

                            <fx:Declarations>

                                      <s:Rotate3D id="rotateEffect1" target="{targetImg1}" effectEnd="startPlay(event)" />

                                      <s:Rotate3D id="rotateEffect2" target="{targetImg2}" />

                                      <s:Rotate3D id="rotateEffect3" target="{targetImg3}" />

                                      <s:Rotate3D id="rotateEffect4" target="{targetImg4}"/>

                            </fx:Declarations>

                   

                            <fx:Script>

                                      <![CDATA[

                                                import flash.text.engine.EastAsianJustifier;

                                                import mx.core.IVisualElement;

                                                import mx.events.EffectEvent;

                                                import spark.effects.easing.EaseInOutBase;

                                                public var count:Number = 1;

                                                public var angle:Number = 90;

                                                public var rot1:Boolean=false;

                                                public var rot2:Boolean=false;

                                                public var rot3:Boolean=false;

                                                public var countForAngle:Number=1;

                                                public function startPlay(evt:Event):void

                                                {

                                                          if(count>4)

                                                                    count=1

                   

                                                          rotateEffect1.angleYFrom=(rotateEffect1.angleYTo==NaN)?0:rotateEffect1.angleYTo;

                                                          rotateEffect1.target = targetImg1;

                                                          rotateEffect1.duration=4000;

                                                          rotateEffect1.repeatCount=1;

                                                          rotateEffect1.angleYTo=countForAngle*angle;

                                                          rotateEffect1.autoCenterProjection = false;

                                                          rotateEffect1.applyLocalProjection = true;

                                                          rotateEffect1.focalLength = 360;

                                                          rotateEffect1.disableLayout = true;

                                                          rotateEffect1.hideFocusRing = true;

                                                          rotateEffect1.angleXFrom=0;

                                                          rotateEffect1.angleXTo=0;

                                                          rotateEffect1.angleZFrom=0;

                                                          if(count==1)

                                                          {

                                                                    var dispObj:DisplayObject = grp.getChildByName('4');

                                                                    grp.setElementIndex(grp.getElementAt(grp.getChildIndex(dispObj)), 3);

                                                          }

                                                          rotateEffect1.play();

                                                          if(count==2)

                                                                    rot1=true;

                                                          if(rot1)

                                                          {

                                                                    rotateEffect2.angleYFrom=(rotateEffect2.angleYTo==NaN)?0:rotateEffect2.angleYTo;

                                                                    rotateEffect2.target = targetImg2;

                                                                    rotateEffect2.duration=4000;

                                                                    rotateEffect2.repeatCount=1;

                                                                    rotateEffect2.angleYTo=rotateEffect1.angleYTo-90;

                                                                    trace(rotateEffect2.angleYTo)

                                                                    rotateEffect2.angleXFrom=0;

                                                                    rotateEffect2.angleXTo=0;

                                                                    rotateEffect2.angleZFrom=0;

                                                                    rotateEffect2.autoCenterProjection = false;

                                                                    rotateEffect2.applyLocalProjection = true;

                                                                    rotateEffect2.focalLength = 360;

                                                                    rotateEffect2.disableLayout = true;

                                                                    rotateEffect2.hideFocusRing = true;

                   

                                                                    if(count==2)

                                                                    {

                                                                              var dispObj:DisplayObject = grp.getChildByName('3');

                                                                              grp.setElementIndex(grp.getElementAt(grp.getChildIndex(dispObj)), 3);

                                                                    }

                                                                    rotateEffect2.play();

                                                          }

                                                          if(count==3)

                                                                    rot2=true;

                                                          if(rot2)

                                                          {

                                                                    rotateEffect3.angleYFrom=(rotateEffect3.angleYTo==NaN)?0:rotateEffect3.angleYTo;;

                                                                    rotateEffect3.target = targetImg3;

                                                                    rotateEffect3.duration=4000;

                                                                    rotateEffect3.repeatCount=1;

                                                                    rotateEffect3.angleYTo=Math.abs(rotateEffect2.angleYTo-90);

                                                                    rotateEffect3.angleXFrom=0;

                                                                    rotateEffect3.angleXTo=0;

                                                                    rotateEffect3.angleZFrom=0;

                                                                    rotateEffect3.autoCenterProjection = false;

                                                                    rotateEffect3.applyLocalProjection = true;

                                                                    rotateEffect3.focalLength = 360;

                                                                    rotateEffect3.disableLayout = true;

                                                                    rotateEffect3.hideFocusRing = true;

                   

                                                                    if(count==3)

                                                                    {

                                                                              var dispObj:DisplayObject = grp.getChildByName('2');

                                                                              grp.setElementIndex(grp.getElementAt(grp.getChildIndex(dispObj)), 3);

                                                                    }

                                                                    rotateEffect3.play();

                                                          }

                                                          if(count==4)

                                                                    rot3=true;

                                                          if(rot3)

                                                          {

                                                                    rotateEffect4.angleYFrom=(rotateEffect4.angleYTo==NaN)?0:rotateEffect4.angleYTo;;

                                                                    rotateEffect4.target = targetImg4;

                                                                    rotateEffect4.duration=4000;

                                                                    rotateEffect4.repeatCount=1;

                                                                    rotateEffect4.angleYTo=Math.abs(rotateEffect3.angleYTo-90);

                                                                    rotateEffect4.angleXFrom=0;

                                                                    rotateEffect4.angleXTo=0;

                                                                    rotateEffect4.angleZFrom=0;

                                                                    rotateEffect4.autoCenterProjection = false;

                                                                    rotateEffect4.applyLocalProjection = true;

                                                                    rotateEffect4.focalLength = 360;

                                                                    rotateEffect4.disableLayout = true;

                                                                    rotateEffect4.hideFocusRing = true;

                   

                                                                    if(count==4)

                                                                    {

                                                                              var dispObj:DisplayObject = grp.getChildByName('1');

                                                                              grp.setElementIndex(grp.getElementAt(grp.getChildIndex(dispObj)), 3);

                                                                    }

                                                                    rotateEffect4.play();

                                                          }

                                                          count++;

                                                          countForAngle++;

                                                }

                   

                   

                                      ]]>

                            </fx:Script>

                   

                            <s:Group width="100%" height="100%">

                                      <s:layout>

                                                <s:VerticalLayout horizontalAlign="center"/>

                                      </s:layout>

                                      <s:Button id="playButton"

                                                            label="Rotate Image" />

                                      <s:Panel width="75%" height="80%"

                                                           horizontalCenter="0"

                                                           title="Rotate3D Effect Sample">

                                                <s:Group width="100%" height="100%">

                                                          <s:BorderContainer backgroundColor="#DDDDDD" width="100%" height="100%">

                                                                    <s:layout>

                                                                              <s:HorizontalLayout  paddingLeft="400" horizontalAlign="center"/>

                                                                    </s:layout>

                                                                    <s:Group width="100%" height="100%" id="grp">

                                                                              <s:Group id="a" name="1">

                                                                                        <s:BitmapImage id="targetImg4" width="200" height="200" source="@Embed(source='assets/3.jpg')"/>

                                                                              </s:Group>

                                                                              <s:Group id="b" name="2">

                                                                                        <s:BitmapImage id="targetImg3" width="200" height="200" source="@Embed(source='assets/2.jpg')"/>

                                                                              </s:Group>

                                                                              <s:Group id="c" name="3">

                                                                                        <s:BitmapImage id="targetImg2" width="200" height="200" source="@Embed(source='assets/1.jpg')"/>

                                                                              </s:Group>

                                                                              <s:Group id="d" name="4">

                                                                                        <s:BitmapImage id="targetImg1" width="200" height="200" source="@Embed(source='assets/4.jpg')"/>

                                                                              </s:Group>

                                                                    </s:Group>

                   

                                                          </s:BorderContainer>

                                                </s:Group>

                                      </s:Panel>

                            </s:Group>

                   

                  </s:Group>