Implement the basic Flash CS3 drag-and-drop technique
19 Listeners to add
19 Listeners to add
Your images now know that they can act as buttons, so you can add Event Listeners to them to listen for when the mouse is clicked on them and released. Note that for each image you are calling the same function for the MOUSE_DOWN, while another function is called for all the MOUSE_UP actions. This is because we only need to create two functions to trap all the events.
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);
20 Mousetrap
Create a function that will trap the MOUSE_DOWN event. Remember to add the mouseEvent as an in parameter. Create a new Movie Clip, parsing in the inbound Movie Clip. Tell the clip it can start to drag and make it the top of the display list so that when you drag the image, it doesn’t get lost under other Movie Clips. Last of all, set the item’s description text field.
function onItemDown(event:MouseEvent):void {
var item:MovieClip = MovieClip(event.target);
item.startDrag();
item.scaleX = item.scaleY = .95;
var topPosition:uint = this.numChildren – 1;
this.setChildIndex(item, topPosition);
total.itemName_txt.text = item.desc;
}
21 Test placement
Create another function for the MOUSE_UP event. Again, create a new Movie Clip, parsing in the event.target as the Movie Clip. Tell the image to stop dragging, and then do a hit test to see if the image is over the top of the cart. If it is, call the update function.
function onItemUp(event:MouseEvent):void {
var item:Movie Clip = MovieClip(event.target);
item.stopDrag();
if (bin.hitTestObject(item)) {
updatePurchasedPanel(item);
} else {
item.scaleX = item.scaleY = 1;
}
}
22 Update
Last of all, create an update function, parsing in the image Movie Clip. Add the image’s price property to the current total, assign the text field the new total and set the image Movie Clip to play. Now the image will play the timeline Motion Tweens that you created earlier. Put the image back to its place on the wall.
function updatePurchasedPanel(item:MovieClip):void {
totalAmout += item.price;
total.itemName_txt.text = “”;
total.total_txt.text =”£” + String(totalAmout);
item.scaleX = item.scaleY = 1;
item.play();
23 Final comments
Before you can test, go back to the main timeline and select each one of the images, and in the instance name field in the Property Inspector, call them ‘item1’, ‘item2’, ‘item3’ and ‘item4’. Now run your movie, and you will see that you can drag an image into the cart and it will animate as if it’s falling into a black hole. The total will update and then the image will reappear back on the wall.
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;