Tuesday, 10 September 2013

Scissor cut animation

I will create a scissor cutting animation with a scissor animated movie clip, a dotted line and the Actionscript 3 graphics API. I will also be using motion guides to move the scissor movie clip around a rectangular path.

The scissor movie clip has two primitive shapes and has a tween to create an opening and closing motion of the scissors. Below is an image of the movie clip’s timeline and the primitive shape.



The dotted line is a white two pixel stroke with the stroke style type at Dashed and settings Dash at 3pts and spacing at 3pt.

The main timeline has four layers: the dotted path, scissor movie clip, the motion guide layer and an actions layer. In the actions layer open up the Actions panel and add the following code.

//Empty sprite to hold drawn line
var lineHide:Sprite = new Sprite();
addChild(lineHide);

//Set lineHide sprite ontop of the scissors movie clip
setChildIndex(lineHide, getChildIndex(scissors) );


//This function set line thickness to 10 pixels and the colour
//to 0xCCCCCC (make sure you changes this colour to the same as
//the background) move the start position to the scissors x and 
//y position and add an enter frame event. 
function cutAnim():void
{
 lineHide.graphics.lineStyle(10, 0xCCCCCC);
 lineHide.graphics.moveTo(scissors.x, scissors.y);
 
 if(!hasEventListener(Event.ENTER_FRAME)) addEventListener(Event.ENTER_FRAME, ef);
}

//This function removes the enter frame event and clears
//any drawn line in lineHide sprite.
function clearCutAnim():void
{
 removeEventListener(Event.ENTER_FRAME, ef);
 lineHide.graphics.clear();
}

//The ef function draws the lines to the scissors x and y position
function ef(e:Event):void
{
 lineHide.graphics.lineTo(scissors.x, scissors.y);
}


cutAnim();


0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP