Skip navigation
Currently Being Moderated

how to rotate a square clockwise as well as anti clockwise?

Aug 3, 2012 1:22 AM

Tags: #actionscript3

hello

 

i know how to rotate a square in clockwise.

___________________________________________

 

square.addEventListener(MouseEvent.CLICK, rotate);

 

function rotate(Event:MouseEvent):void{

     square.rotation += 90;

}

___________________________________________

 

Now, I want to rotate a square clockwise if MouseClick in lower part of the square. and anticlockwise if MouseClick in upperpart of the square.

 
Replies
  • Currently Being Moderated
    Aug 3, 2012 5:50 AM   in reply to sachin_mak

    Just subtract the rotation increment instead of adding it....

     

    square.addEventListener(MouseEvent.CLICK, rotate);

     

    function rotate(Event:MouseEvent):void{

         square.rotation -= 90;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 6:44 AM   in reply to Ned Murphy

    Put a transparent sprite over the square that is large enough to cover the whole squares rotation and determine based on the click location versus the height of that hitarea if the rotation should be clockwise or counter-clockwise.

     

    Here would be a quick full code example (paste in frame 1 of a new document). I left the hitarea slightly opaque just so you could see it:

     

    import flash.display.Sprite;

    import flash.events.MouseEvent;

    import flash.events.Event;

     

    // rotation state

    var rotateClockwise:Boolean = true;

     

    // add sprite

    var square:Sprite = new Sprite();

    addChild(square);

     

    // draw square, center registration

    square.graphics.beginFill(0x000099,1);

    square.graphics.drawRect(-50,-50,100,100);

    square.graphics.endFill();

     

    // position a bit

    square.x = square.y = 75;

     

    // create "semi-transparent" hitarea

    var hitarea:Sprite = new Sprite();

    addChild(hitarea);

     

    // draw hitarea

    hitarea.graphics.beginFill(0x0,0.2); // set the 0.2 to 0 for full transparent

    hitarea.graphics.drawRect(0,0,150,150);

    hitarea.graphics.endFill();

     

    // add listener to change rotation state

    hitarea.addEventListener(MouseEvent.CLICK, changeRotation);

     

    // change rotation function

    function changeRotation(e:MouseEvent):void

    {

              // top half or bottom half?

              if (e.localY < (e.target.height / 2))

              {

                        rotateClockwise = true;

              }

              else

              {

                        rotateClockwise = false;

              }

    }

     

    // add enter frame to rotate clock

    addEventListener(Event.ENTER_FRAME, onEnterFrame);

     

    // rotate square

    function onEnterFrame(e:Event):void

    {

              square.rotation += rotateClockwise ? 2 : -2;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 8:40 AM   in reply to sachin_mak

    The bottom few lines are rotating the square, the addEventListener(Event.ENTER_FRAME...) and the function below it "onEnterFrame". Just remove that code and it will stop rotating automatically.

     

    To have it only rotate when the mouse is clicked then add a few lines to the bottom of the function called when the hitarea is clicked "changeRotation":

     

    function changeRotation(e:MouseEvent):void

    {

         // top half or bottom half?

         if (e.localY < (e.target.height / 2))

         {

              rotateClockwise = true;

         }

         else

         {

              rotateClockwise = false;

         }

     

     

        square.rotation += rotateClockwise ? 90 : -90;

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points