1 Reply Latest reply on Jun 1, 2009 6:50 AM by MaxManNH

    Rotating multiple objects

    makportal

      I'm trying to create a flash application where the user can add points (I call them draggers) and he can move those points around an image. What needs to happen is that I will use these points and their coordinates to change the image.

       

      What I need help on is how to accomlish the rotation. Let's say the user has added three points on the stage, and they want to rotate the three points along the center of whatever triangle they form.

       

      How do I go about writing this code? So far I have this:

       

      var draggers:Array = new Array();
      var screenS:BitmapData = new BitmapData(img2.width, img2.height, true,0x33);
      screenS.draw(img2, new Matrix());
      var spObject:Sprite=new Sprite();
      addChild(spObject);
      var triangleLines:Sprite = new Sprite();
      addChild(triangleLines);    
      
      
      for(i=0;i<3;i++){
              draggers[i].addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
              draggers[i].addEventListener(MouseEvent.MOUSE_UP, dropIt);
      }
      
      
      function pickUp(event:MouseEvent):void {
      
          event.target.startDrag(true);
          event.target.addEventListener(MouseEvent.MOUSE_MOVE, drawConnection);
      }
              
      function dropIt(event:MouseEvent):void {
          event.target.stopDrag();
          event.target.removeEventListener(MouseEvent.MOUSE_MOVE, drawConnection);
      }
      
      function drawConnection(e:MouseEvent):void
      {
          var vertices:Vector.<Number>=new Vector.<Number>();
      
          vertices.push(draggers[0].x, draggers[0].y);
          vertices.push(draggers[1].x, draggers[1].y);
          vertices.push(draggers[2].x, draggers[2].y);
          
          spObject.graphics.clear();
          spObject.graphics.beginBitmapFill(screenS);
          spObject.graphics.drawTriangles(vertices, null, null, TriangleCulling.NONE)
          
          triangleLines.graphics.clear();
          triangleLines.graphics.lineStyle(1, 0xFF0000);
          triangleLines.graphics.moveTo(vertices[0], vertices[1]);
          for (var i:int = 0; i < vertices.length-1; i+=2) 
          {
              triangleLines.graphics.lineTo(vertices[i], vertices[i + 1]);
          }
          triangleLines.graphics.lineTo(vertices[0], vertices[1]);
          
      }
      

       


      In the drawConnection function whenever one of the three points is dragged a new triangle is drawn so that it is resized accordingly to where the new vertex of the triangle is.

       

      I want to add a way so that when the user presses some button the whole triangle (triangle lines and vertices) rotate let's say 20 degrees per click.

       

      How would I go about doing this?

       

      Thank you in advance!!

        • 1. Re: Rotating multiple objects
          MaxManNH Level 2

          I think you want this post in the Actionscript 3 forum, but the simple answer is you need to perform matrix math on the vertices. Matrices can be used for both 2d and 3d movement and rotation. In this case since you only want to rotate about the z-axis so it should be pretty straight forward. There must be some decent tutes online if you google matrix rotation or rotation matrix.