1 Reply Latest reply on Jan 9, 2013 11:32 PM by Mahesh.w

    Implementing spinner with n-number of images using Flex 4+ Rotate3D component

    Mahesh.w

      Hi Guys,

       

      I have a challenge in front of me and I am here to get some help from you.

       

      Target : Implement an application which takes n-number of images (paths from xml file) and each image rotates 90 Degrees in parallel(4images at a time)

       

      Details: Lets consider 4 images to begin. We name each image as a1, b1, c1 and d1.

       

      app starts with image a1 and rotates 90 Degrees from 0 D

      once the rotation is over, a1 rotates 180D from 90D in parallel b1 starts rotating from 0D to 90.

      in the next rotation: a1 from 180D to 270D and b1 from 90D to 180D and c1 from 0D to 90.

      next : a1 from 270D to 360D b1 from 180D to 270D -- c1 from 90D to 180D -- d1 from 0D to 90D

      and this process loops infinitely.

       

      Here important and challenging  task is, none of the images should show their back, I mean rotating image in any quadrant should show face.

       

      If anyone know or have seen any examples anywhere, please do reply to this thread.  Quick reply will be a greate help. And if the task is not clear please update me. Will try to make it clear.

       

      Thank you all.

       

      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>