5 Replies Latest reply on Jun 13, 2008 3:47 AM by Ankur Arora

    Carousel

    raygo22
      Hello. Im trying to make a carouse for my website, in that carousel i want a picture in the middle and the icons around it to move in a way that they look 3d, meaning they never show the side but only the front. I am using the code from other carousel but that carousel when the icons are in the far right or far left turn and show the sides and look like plain pictures. How can i make them 3d? this is part of the code, i think this is what makes the carousel, i will appreciate a lot your help. Thanks!

      // user transforms
      if (pressv!=0) {
      this.panel+=pressv;
      pressv=pressv*.9;
      if ((pressv<.2) && (pressv>-.2)) {
      pressv=0;
      }
      }
      // 3d transforms
      theta+=_parent.speed;
      xbit=Math.sin(Math.PI/180 * theta);
      ybit=Math.cos(Math.PI/180 * theta);
      this._xscale=ybit*this.panel;
      this._x=xbit*this.radius;
      this._alpha=20+(ybit+1)*50;
      this._yscale=this.panel+ybit*1;
      stack=Math.round((ybit+1)*radius*.5);
      if (stack==100) {
      stack=100;
      }
      this.swapDepths(stack);
        • 1. Carousel
          Ankur Arora Level 1
          I don't know what kind of Carousel you are creating. Anyways you can go through below code may be it will help you out. In case you not able to understand it please let me know I will send you the source files(Flash and XML) which I created for one of my clients.

          /* CODE STARTS HERE */

          import mx.utils.Delegate;
          import mx.transitions.Tween;
          import mx.transitions.easing.*;

          var numOfItems:Number;
          var radiusX:Number = 300;
          var radiusY:Number = 75;
          var centerX:Number = Stage.width / 2;
          var centerY:Number = Stage.height / 2;
          var speed:Number = 0.05;
          var perspective:Number = 130;
          var home:MovieClip = this;
          theText._alpha = 0;

          var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
          tooltip._alpha = 0;

          var xml:XML = new XML();
          xml.ignoreWhite = true;

          xml.onLoad = function()
          {
          var nodes = this.firstChild.childNodes;
          numOfItems = nodes.length;
          for(var i=0;i<numOfItems;i++)
          {
          var t = home.attachMovie("item","item"+i,i+1);
          t.angle = i * ((Math.PI*2)/numOfItems);
          t.onEnterFrame = mover;
          t.toolText = nodes .attributes.tooltip;
          t.content = nodes
          .attributes.content;
          t.icon.inner.loadMovie(nodes .attributes.image);
          t.r.inner.loadMovie(nodes
          .attributes.image);
          t.icon.onRollOver = over;
          t.icon.onRollOut = out;
          t.icon.onRelease = released;
          }
          }

          function over()
          {
          //BONUS Section
          var sou:Sound = new Sound();
          sou.attachSound("sover");
          sou.start();

          home.tooltip.tipText.text = this._parent.toolText;
          home.tooltip._x = this._parent._x;
          home.tooltip._y = this._parent._y - this._parent._height/2;
          home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
          home.tooltip._alpha = 100;
          }

          function out()
          {
          delete home.tooltip.onEnterFrame;
          home.tooltip._alpha = 0;
          }

          function released()
          {
          //BONUS Section
          var sou:Sound = new Sound();
          sou.attachSound("sdown");
          sou.start();

          home.tooltip._alpha = 0;
          for(var i=0;i<numOfItems;i++)
          {
          var t:MovieClip = home["item"+i];
          t.xPos = t._x;
          t.yPos = t._y;
          t.theScale = t._xscale;
          delete t.icon.onRollOver;
          delete t.icon.onRollOut;
          delete t.icon.onRelease;
          delete t.onEnterFrame;
          if(t != this._parent)
          {
          var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,true);
          var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
          var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true);
          }
          else
          {
          var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,true);
          var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);
          var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,200,1,true);
          var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,320,1,true);
          var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true);
          theText.text = t.content;
          var s:Object = this;
          tw.onMotionStopped = function()
          {
          s.onRelease = unReleased;
          }
          }
          }
          }

          function unReleased()
          {
          //BONUS Section
          var sou:Sound = new Sound();
          sou.attachSound("sdown");
          sou.start();

          delete this.onRelease;
          var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,true);
          for(var i=0;i<numOfItems;i++)
          {
          var t:MovieClip = home["item"+i];
          if(t != this._parent)
          {
          var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,true);
          var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
          var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);
          }
          else
          {
          var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1,true);
          var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1,true);
          var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
          var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
          tw.onMotionStopped = function()
          {
          for(var i=0;i<numOfItems;i++)
          {
          var t:MovieClip = home["item"+i];
          t.icon.onRollOver = Delegate.create(t.icon,over);
          t.icon.onRollOut = Delegate.create(t.icon,out);
          t.icon.onRelease = Delegate.create(t.icon,released);
          t.onEnterFrame = mover;
          }
          }
          }
          }
          }


          function moveTip()
          {
          home.tooltip._x = this._parent._x;
          home.tooltip._y = this._parent._y - this._parent._height/2;
          }

          xml.load("icons.xml");

          function mover()
          {
          this._x = Math.cos(this.angle) * radiusX + centerX;
          this._y = Math.sin(this.angle) * radiusY + centerY;
          var s = (this._y - perspective) /(centerY+radiusY-perspective);
          this._xscale = this._yscale = s*100;
          this.angle += this._parent.speed;
          this.swapDepths(Math.round(this._xscale) + 100);
          }

          this.onMouseMove = function()
          {
          speed = (this._xmouse-centerX)/20000;
          }


          /* CODE END HERE */




          Thanks & Regards
          Ankur Arora
          Project Leader(Flash and Flex)
          http://flashdeveloper.blogspot.com
          let your thoughts fly to others... you will become rich.

          • 2. Carousel
            raygo22 Level 1
            Hello Ankur and thanks for your reply. In the carousel that i want to make the icons must be .swf files, i tried doing it with an xml that a friend gave me but i wasnt able to do it, i dont know if your code would work. Also the carousel must go around a still picture. Thanks
            • 3. Re: Carousel
              Ankur Arora Level 1
              You want a sample from me?




              Thanks & Regards
              Ankur Arora
              Project Leader(Flash and Flex)
              http://flashdeveloper.blogspot.com
              let your thoughts fly to others... you will become rich.

              • 4. Re: Carousel
                raygo22 Level 1
                Ankur, if it is possible that would be great. Thanks!
                • 5. Re: Carousel
                  Ankur Arora Level 1
                  Hi,

                  Get the source file for Flash and XML based 3D Carousel, from the below specified link:-

                  http://flashdeveloper.blogspot.com/2008/06/flash-3d-carousel.html



                  Thanks & Regards
                  Ankur Arora
                  Project Leader(Flash and Flex)
                  http://flashdeveloper.blogspot.com
                  let your thoughts fly to others... you will become rich.