Implement the basic Flash CS3 drag-and-drop technique
Detail: Drag and throw the art
Detail: Drag and throw the art
Learn how to add some more movement to the dragged object when release
You should have learnt the basic drag-and-drop technique by now, so let’s add a little maths to give the image some bounce and gravity. Create a new ActionScript file and copy the code below:
package{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
public class ArtToss extends Sprite
{
private var art:Art;
private var vx:Number;
private var vy:Number;
private var bounce:Number = -0.6;
private var grav:Number = .4;
private var artX:Number;
private var artY:Number;
public function ArtToss(){
init();}
private function init():void{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
art = new Art();
art.x = stage.stageWidth / 2;
art.y = stage.stageHeight / 2;
art.radius = 100; // half the size of the image.
vx = Math.random() * 10 – 4;
vy = -10;
addChild(art);
art.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDown);
addEventListener(Event.ENTER_FRAME,
onEnterFrame);
}
private function onEnterFrame(event:Event):void{
vy += grav;
art.x += vx;
art.y += vy;
var left:Number = 0;
var right:Number = stage.stageWidth;
var top:Number = 0;
var bottom:Number = stage.stageHeight;
if(art.x + art.radius > right)
{
art.x = right – art.radius;
vx *= bounce;
}
else if(art.x – art.radius < left)
{
art.x = left + art.radius;
vx *= bounce;
}
if(art.y + art.radius > bottom)
{
art.y = bottom – art.radius;
vy *= bounce;
}
else if(art.y – art.radius < top)
{
art.y = top + art.radius;
vy *= bounce;
}
}
private function mouseDown(event:MouseEvent):
void{
artX = art.x;
artY = art.y;
stage.addEventListener(MouseEvent.
MOUSE_UP, mouseUp);
art.startDrag();
removeEventListener(Event.ENTER_
FRAME, onEnterFrame);
addEventListener(Event.ENTER_FRAME,
velocityGauge);
}
private function
mouseUp(event:MouseEvent):void
{
stage.
removeEventListener(MouseEvent.MOUSE_UP,
mouseUp);
art.stopDrag();
removeEventLi
stener(Event.ENTER_FRAME, velocityGauge);
addEventListener(Event.ENTER_FRAME,
onEnterFrame);
}
private function
velocityGauge(event:Event):void
{
vx = art.x- artX;
vy = art.y – artY;
artX = art.x;
artY = art.y;
}
}
}
Save the file as ‘ArtToss.as’, then create a new Flash File (ActionScript 3.0), keeping your previous Flash file open. Open the library and using the pull-down menu, select the library items from the cart.fla, then drag the image Movie Clip to the stage of your new FLA. Select the image in the library and right-click to see the properties. Select Linkage and add the class of ‘art’. Navigate back to the main timeline, open the Property Inspector and add the name ‘ArtToss’ to the Document class input field. Save your file and test.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
Not sure why this has to be flash as you can chieve very similar results using JQuery.
thank for the tutoriel , great job!
It’s seriously any together with functional section of information and facts. Now i am blissful merely embraced this valuable very helpful specifics with us. Please be america wise of this nature. Many thanks for taking turns.
I downloaded the fla file, and tested the movie… but the cart does not work.. the total does not change.. something I did incorrectly?
and I was looking at your code and there are allot of things that need a change//9
import flash.events.MouseEvent;
init();import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.motion.easing.Bounce;var totalAmount:uint = 0;
var xTween:Tween;
var yTween:Tween;
var scalexTween:Tween;
var scaleyTween:Tween;
var bin:Cart;function init():void{/*
set up the products
*/
//10
// product 1
item1.desc = “Mild White Sharky”;
item1.price = 35;
item1.startX = 50;
item1.startY = 120;
// product 2
item2.desc = “Robot Rampage”;
item2.price = 37;
item2.startX = 300;
item2.startY = 120;
// 11
// product 3
item3.desc = “Tapeworm”;
item3.price = 40;
item3.startX = 50;
item3.startY = 350;
// product 4
item4.desc = “Teethdude”;
item4.price = 25;
item4.startX = 300;
item4.startY = 350;//12
/*
Make the the movieclips act like buttons
*/
item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item4.buttonMode = true;item1.mouseChildren = false;
item2.mouseChildren = false;
item3.mouseChildren = false;
item4.mouseChildren = false;
//13
/*
Item Event Listeners
*/
item1.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item1.addEventListener(MouseEvent.MOUSE_UP, onItemUp);
item2.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item2.addEventListener(MouseEvent.MOUSE_UP, onItemUp);
item3.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item3.addEventListener(MouseEvent.MOUSE_UP, onItemUp);
item4.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item4.addEventListener(MouseEvent.MOUSE_UP, onItemUp);total.itemName_txt.text =”Choose an album”;
}
//14
/*
Mouse Events
*/
function onItemDown(e:MouseEvent):void {
var item:MovieClip = MovieClip(e.target);
item.startDrag();
//item.scaleX = item.scaleY = .70;
scalexTween = new Tween(item, “scaleX”, null, item.scaleX, .90, 0.1 , true);
scaleyTween = new Tween(item, “scaleY”, null, item.scaleY, .90, 0.1 , true);
var topPosition:uint = this.numChildren – 1;
this.setChildIndex(item, topPosition);
total.itemName_txt.text = item.desc;
}
//15
function onItemUp(e:MouseEvent):void { var item:MovieClip = MovieClip(e.target);
item.stopDrag(); if (bin.hitTestObject(item)) {
updatePurchasedPanel(item);
} else {
afterItem(item);
}
}
//16
function updatePurchasedPanel(item:MovieClip):void { trace(“ik ben in updatePurchasedPanel “);
/*totalAmout += item.price;
total.itemName_txt.text = “”;
total.total_txt.text =”£” + String(totalAmout);
item.scaleX = item.scaleY = 1;
//item.x= item.startX;
//item.y = item.startY;
item.play();*/ totalAmount += item.price;
total.itemName_txt.text = “Bought!”;
//total.total_txt.text = “£” + totalAmount;
item.play();
xTween = new Tween(item, “x”, Regular.easeOut, item.x, bin.x +100, 0.5 , true);
yTween = new Tween(item, “y”, Regular.easeOut, item.y, bin.y +100, 0.5 , true);}function afterItem(item:MovieClip):void{ xTween = new Tween(item, “x”, Regular.easeOut, item.x, item.startX, 0.5 , true);
yTween = new Tween(item, “y”, Regular.easeOut, item.y, item.startY, 0.5 , true);
scalexTween = new Tween(item, “scaleX”, null, item.scaleX, .95, 0.5 , true);
scaleyTween = new Tween(item, “scaleY”, null, item.scaleY, .95, 0.5 , true);
}this is what I changed try it out and tell me if you like ;) ooh yeah and in the items put this :import fl.transitions.Tween;var scalexTween:Tween;
var scaleyTween:Tween;this.x= this.startX;
this.y = this.startY;this.scaleX = 1;
this.scaleY = 1;