samedi 27 février 2016

Drag and Drop Tutorial with Animate CC easeljs (HTML5 Canvas)




this is the full code in the tutorial hope you find it useful

//VARIABLES
//Drag Object Size
dragRadius = 40;
//Destination Size
destHeight = 100;
destWidth = 100;

//Circle Creation

var circle = new lib.circle();
var test = new lib.test();
stage.addChild(test);
test.x = 1600;
test.y = 200;
//Drag Object Creation
//Placed inside a container to hold both label and shape
var dragger = new createjs.Container();
dragger.x = dragger.y = 200;
dragger.addChild(circle);
dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);
//DragRadius * 2 because 2*r = width of the bounding box


var box = new lib.box();
var destination = new createjs.Container();
destination.x = 850;
destination.y = 250;
destination.setBounds(850, 250, destHeight, destWidth);

destination.addChild(box);

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       //.rect(0, 0, destHeight, destWidth);
     
     }else{
       evt.currentTarget.alpha=1;
     }

});

//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
test.gotoAndPlay(0);
destination.alpha =0;
dragger.alpha = 0;
    dragger.x = destination.x + destWidth/2;
    dragger.y = destination.y + destHeight/2;
    //dragger.alpha = 1;
    stage.update(evt);
  }else{
       dragger.x = dragger.y = 200;
     }
});
//Tests if two objects are intersecting
//Sees if obj1 passes through the first and last line of its
//bounding box in the x and y sectors
//Utilizes globalToLocal to get the x and y of obj1 in relation
//to obj2
//PRE: Must have bounds set for each object
//Post: Returns true or false
function intersect(obj1, obj2){
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.getBounds().clone();

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);

  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.width / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;


  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;

  return true;
}


//Adds the object into stage
stage.addChild(destination, dragger);
stage.mouseMoveOutside = true;
stage.update();

Drag and Drop Tutorial with Animate CC easeljs (HTML5 Canvas)


this the original drag code done with easeljs 
http://codepen.io/samualli/pen/xbVGpP
and if you really need the project file of this tutorial just ask for it in the comment section i will be glad to give you the final code



jeudi 19 mai 2011

Salam

Hello World!
It's a tunisian Vfx time, we are here to present our new movie, well it's our first one and it contains a lot of VFX stuff. we will give you some of the techniques that cover the production of the movie. Enjoy it :);)