0 Replies Latest reply on Jun 2, 2010 3:08 PM by PRAYMAYERD

    rotate3d behavior

    PRAYMAYERD

      I'll start by exclaiming I know I don't properly understand the 3d aspect of flex.

       

      In any case, I have 3 spark video players with fade, resize and rotate3d effects applied to them.

       

      The effects run wonderfully (for the most part) on the intended target... however, when the effects run on a target, the other video players also change position, sometimes dramatically.

       

      I realize somethings you will find have some silly logic.. but I've done some really major fundamental changes to the code to find whats reponsible.

       

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

      <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"

      minWidth="

       

      955" minHeight="600" creationComplete="initActions();">

       

       

      <fx:Declarations>

       

       

       

      </fx:Declarations>

       

       

       

      <fx:Script>

      <![CDATA[

       

       

      import mx.events.FlexEvent;

       

       

      import spark.components.VideoDisplay;

       

      import spark.components.VideoPlayer;

       

      import spark.effects.Animate;

       

      import spark.effects.AnimateColor;

       

      import spark.effects.Fade;

       

      import spark.effects.Resize;

       

      import spark.effects.Rotate3D;

       

       

      private var roll3d_disp1:Rotate3D = new Rotate3D();

       

      private var roll3d_disp2:Rotate3D = new Rotate3D();

       

      private var roll3d_disp3:Rotate3D = new Rotate3D();

       

       

      private var resizeThis_disp1:Resize = new Resize();

       

      private var resizeThis_disp2:Resize = new Resize();

       

      private var resizeThis_disp3:Resize = new Resize();

       

       

      private var fadeThis_disp1:Fade = new Fade();

       

      private var fadeThis_disp2:Fade = new Fade();

       

      private var fadeThis_disp3:Fade = new Fade();

       

       

       

      //starting xyz rotation (rotate 3d) coords... set in initActions()

       

       

      private var startingX:Number = 0;

       

      private var startingY:Number = -30;

       

      private var startingZ:Number = 0;

       

       

      //finishing xyz rotation (rotate 3d) coords ... set in disp functions

       

       

      private var finishingX:Number = 0;

       

      private var finishingY:Number = 30;

       

      private var finishingZ:Number = 0;

       

       

      //starting width + height.. bound in the player tags..

       

       

      private var startingWi:Number = 300;

       

      private var startingHe:Number = 300;

       

       

      protected function initActions():void {

       

      // stuff for vid disp1

      disp1.rotationX = startingX;

      disp1.rotationY = startingY;

      disp1.rotationZ = startingZ;

      disp1.x = 100;

      disp1.y = 200;

      disp1.depth = 1;

      disp1.toolTip =

       

      'test 1';

      disp1.alpha = 0.80;

      disp1.source =

      'theDoctor.f4v';

      disp1.autoPlay =

      true;

      disp1.loop =

      true;

       

      disp2.rotationX = startingX;

      disp2.rotationY = startingY;

      disp2.rotationZ = startingZ;

      disp2.x = 400;

      disp2.y = 200;

      disp2.depth = 1;

      disp2.toolTip =

      'test 2';

      disp2.alpha = 0.80;

      disp2.source =

      'pcfusion_06_prod.f4v';

      disp2.autoPlay =

      true;

      disp2.loop =

      true;

       

      disp3.rotationX = startingX;

      disp3.rotationY = startingY;

      disp3.rotationZ = startingZ;

      disp3.x = 700;

      disp3.y = 200;

      disp3.depth = 1;

      disp3.toolTip =

      'test3';

      disp3.alpha = 0.80;

      disp3.source =

      'globe.f4v';

      disp3.autoPlay =

      true;

      disp3.loop =

      true;

       

      }

       

        

       

      protected function disp1_rollOverHandler(event:MouseEvent):void

      {

      disp1.depth = 2;

       

      resizeThis_disp1.target = event.currentTarget;

      resizeThis_disp1.widthFrom = startingWi;

      resizeThis_disp1.heightFrom = startingHe;

      resizeThis_disp1.widthTo = 640;

      resizeThis_disp1.heightTo = 400;

      resizeThis_disp1.duration = 400;

      resizeThis_disp1.startDelay = 250;

       

      fadeThis_disp1.target = event.currentTarget;

      fadeThis_disp1.alphaFrom = 0.80;

      fadeThis_disp1.alphaTo = 1.0;

      fadeThis_disp1.duration = 400;

       

      roll3d_disp1.target = event.currentTarget;

      roll3d_disp1.autoCenterProjection =

       

      true;

      roll3d_disp1.autoCenterTransform =

      true;

      roll3d_disp1.angleXFrom = startingX;

      roll3d_disp1.angleYFrom = startingY;

      roll3d_disp1.angleZFrom = startingZ;

      roll3d_disp1.angleXTo = finishingX;

      roll3d_disp1.angleYTo = finishingY;

      roll3d_disp1.angleZTo = finishingZ;

      roll3d_disp1.startDelay = 250;

       

      resizeThis_disp1.play();

      fadeThis_disp1.play();

      roll3d_disp1.play();

      }

       

       

      protected function disp1_rollOutHandler(event:MouseEvent):void

      {

      disp1.depth = 1;

       

      resizeThis_disp1.target = event.currentTarget;

      resizeThis_disp1.widthTo = startingWi;

      resizeThis_disp1.heightTo = startingHe;

      resizeThis_disp1.widthFrom = 500;

      resizeThis_disp1.heightFrom = 300;

      resizeThis_disp1.duration = 400;

       

      fadeThis_disp1.target = event.currentTarget;

      fadeThis_disp1.alphaTo = 0.80;

      fadeThis_disp1.alphaFrom = 1.0;

      fadeThis_disp1.duration = 400;

       

      roll3d_disp1.target = event.currentTarget;

      roll3d_disp1.angleXTo = startingX;

      roll3d_disp1.angleYTo = startingY;

      roll3d_disp1.angleZTo = startingZ;

      roll3d_disp1.angleXFrom = finishingX;

      roll3d_disp1.angleYFrom = finishingY;

      roll3d_disp1.angleZFrom = finishingZ;

       

      resizeThis_disp1.play();

      fadeThis_disp1.play();

      roll3d_disp1.play();

      }

       

       

       

      protected function disp2_rollOverHandler(event:MouseEvent):void

      {

       

      disp2.depth = 2;

       

      resizeThis_disp2.target = event.currentTarget;

      resizeThis_disp2.widthFrom = startingWi;

      resizeThis_disp2.heightFrom = startingHe;

      resizeThis_disp2.widthTo = 640;

      resizeThis_disp2.heightTo = 400;

      resizeThis_disp2.duration = 400;

      resizeThis_disp2.startDelay = 250;

       

      fadeThis_disp2.target = event.currentTarget;

      fadeThis_disp2.alphaFrom = 0.80;

      fadeThis_disp2.alphaTo = 1.0;

      fadeThis_disp2.duration = 400;

       

      roll3d_disp2.target = event.currentTarget;

      roll3d_disp2.autoCenterProjection =

      true;

      roll3d_disp2.autoCenterTransform =

      true;

      roll3d_disp2.angleXFrom = startingX;

      roll3d_disp2.angleYFrom = startingY;

      roll3d_disp2.angleZFrom = startingZ;

      roll3d_disp2.angleXTo = finishingX;

      roll3d_disp2.angleYTo = finishingY;

      roll3d_disp2.angleZTo = finishingZ;

      roll3d_disp2.startDelay = 250;

       

      resizeThis_disp2.play();

      fadeThis_disp2.play();

      roll3d_disp2.play();

      }

       

       

      protected function disp2_rollOutHandler(event:MouseEvent):void

      {

      disp2.depth = 1;

       

      resizeThis_disp2.target = event.currentTarget;

      resizeThis_disp2.widthTo = startingWi;

      resizeThis_disp2.heightTo = startingHe;

      resizeThis_disp2.widthFrom = 500;

      resizeThis_disp2.heightFrom = 300;

      resizeThis_disp2.duration = 400;

       

      fadeThis_disp2.target = event.currentTarget;

      fadeThis_disp2.alphaTo = 0.80;

      fadeThis_disp2.alphaFrom = 1.0;

      fadeThis_disp2.duration = 400;

       

      roll3d_disp2.target = event.currentTarget;

      roll3d_disp2.angleXTo = startingX;

      roll3d_disp2.angleYTo = startingY;

      roll3d_disp2.angleZTo = startingZ;

      roll3d_disp2.angleXFrom = finishingX;

      roll3d_disp2.angleYFrom = finishingY;

      roll3d_disp2.angleZFrom = finishingZ;

       

      resizeThis_disp2.play();

      fadeThis_disp2.play();

      roll3d_disp2.play();

      }

       

       

       

      protected function disp3_rollOverHandler(event:MouseEvent):void

      {

      disp3.depth = 2;

       

      resizeThis_disp3.target = event.currentTarget;

      resizeThis_disp3.widthFrom = startingWi;

      resizeThis_disp3.heightFrom = startingHe;

      resizeThis_disp3.widthTo = 640;

      resizeThis_disp3.heightTo = 400;

      resizeThis_disp3.duration = 400;

      resizeThis_disp3.startDelay = 250;

       

      fadeThis_disp3.target = event.currentTarget;

      fadeThis_disp3.alphaFrom = 0.80;

      fadeThis_disp3.alphaTo = 1.0;

      fadeThis_disp3.duration = 400;

       

      roll3d_disp3.target = event.currentTarget;

      roll3d_disp3.autoCenterProjection =

      true;

      roll3d_disp3.autoCenterTransform =

      true;

      roll3d_disp3.angleXFrom = startingX;

      roll3d_disp3.angleYFrom = startingY;

      roll3d_disp3.angleZFrom = startingZ;

      roll3d_disp3.angleXTo = finishingX;

      roll3d_disp3.angleYTo = finishingY;

      roll3d_disp3.angleZTo = finishingZ;

      roll3d_disp3.startDelay = 250;

       

      resizeThis_disp3.play();

      fadeThis_disp3.play();

      roll3d_disp3.play();

      }

       

       

      // orig rollout

       

      protected function disp3_rollOutHandler(event:MouseEvent):void

      {

      disp3.depth = 1;

       

      resizeThis_disp3.target = event.currentTarget;

      resizeThis_disp3.widthTo = startingWi;

      resizeThis_disp3.heightTo = startingHe;

      resizeThis_disp3.widthFrom = 500;

      resizeThis_disp3.heightFrom = 300;

      resizeThis_disp3.duration = 400;

       

      fadeThis_disp3.target = event.currentTarget;

      fadeThis_disp3.alphaTo = 0.80;

      fadeThis_disp3.alphaFrom = 1.0;

      fadeThis_disp3.duration = 400;

       

      roll3d_disp3.target = event.currentTarget;

      roll3d_disp3.angleXTo = startingX;

      roll3d_disp3.angleYTo = startingY;

      roll3d_disp3.angleZTo = startingZ;

      roll3d_disp3.angleXFrom = finishingX;

      roll3d_disp3.angleYFrom = finishingY;

      roll3d_disp3.angleZFrom = finishingZ;

       

      resizeThis_disp3.play();

      fadeThis_disp3.play();

      roll3d_disp3.play();

      }

      ]]>

       

      </fx:Script>

       

       

      <s:VideoPlayer id="disp1"

      rollOver="

       

      disp1_rollOverHandler(event)"

      rollOut="

       

      disp1_rollOutHandler(event)"

      width="

       

      {startingWi}" height="{startingHe}" />

       

       

      <s:VideoPlayer id="disp2"

      rollOver="

       

      disp2_rollOverHandler(event)"

      rollOut="

       

      disp2_rollOutHandler(event)"

      width="

       

      {startingWi}" height="{startingHe}" />

       

       

      <s:VideoPlayer id="disp3"

      rollOver="

       

      disp3_rollOverHandler(event)"

      rollOut="

       

      disp3_rollOutHandler(event)"

      width="

       

      {startingWi}" height="{startingHe}" />

      </s:Application>