Implement the basic Flash CS3 drag-and-drop technique
Add that little bit of extra dynamism to your website by introducing drag-and-drop to the user experience
Add that little bit of extra dynamism to your website by introducing drag-and-drop to the user experience
Click here to download all files for this tutorial http://www.webdesignermag.co.uk/?page_id=83
With the advances in technology and vast amount of websites out there today, the average internet user is more demanding than they were a few years ago. They not only want the content at the speed of light, but also once there they want a better user experience. We once read somewhere that you only have 20 seconds to engage your user before they lose interest and move on to the next website listed in the search engine results. Even if this statistic is incorrect, there is some truth in the fact that if you don’t engage the user and deliver the content that was hinted at in the search results, you will lose the user and potential customer.
Well, this tutorial takes a peek at one thing that might enhance your user experience: drag-and-drop. There is one caveat, though. Don’t use drag-and-drop just because you have learnt some new techniques. Only use it when there is the added value to the user experience. A quick thank you to Tom Bland (tom@tombland.net) for the use of his vector art in this tutorial.
01 Set the stage
Open up Flash CS3 and create a new Flash File (ActionScript 3.0). Save the file as ‘cart.fla’; you guessed it, you will be creating the beginnings of a simple shopping cart. Open the Properties panel and press the Size button. The Document Properties panel will appear, so make the dimensions 1,024 x 600px and the frame rate equal to 21
02 Background
On the timeline, rename the first layer ‘Background’. Add a suitable background image for your cart – Web Designer has offered lots of these on the cover discs in the past. Import the image and make sure it covers the whole stage. If your image is smaller, then break apart and use the Eyedropper tool to get the pattern, then draw a rectangle to the size of the stage and fill using the Bucket tool.
03 Title
Select the Text tool and create a new Static text field, then give your shopping cart a name. We have chosen a stencil font, which you should all have as standard in your font list. In the Properties panel, select the Filters tab, add a Drop Shadow with a Blur X and Y of two, and select the options Knockout and Inner Shadow. Next, add a Glow filter and make the Blur X and Y 15, with a colour of black.
04 Cut-out technique
Create a new Movie Clip (Ctrl+F8) and call it ‘CartHeading’. Inside the Movie Clip, create two layers. On the top layer, write the word ‘cart’ in the same font as before and also ‘<-‘ as two separate text fields. Rotate the arrow 90 degrees counterclockwise and place either side of the word ‘cart’.
05 Cart heading
Select all and break apart (Ctrl+B). On the bottom layer, create a white rectangle. Copy the text from the layer above, then select the bottom layer and paste. Delete the text and you will see it has cut out like above. Now add a Drop Shadow on the main timeline.
06 Totals
Create a new Movie Clip and call it ‘totals’. In the first layer, create a cutout for the word ‘total’ like you did previously, and place it on a red background. Create another layer and place a white panel next to the red one. Create yet another layer and add a Dynamic text field on top on the white panel. In the Properties panel, call the text field ‘total_txt´ in the instance name field.
07 Item description
In the same Movie Clip, add another layer and place this at the bottom of the other layers. Create a rounded red rectangle and as above, create the last layer here, add a Dynamic text field and call it ‘itemName_txt´ in the instance name field. Go back to the main stage and call the Movie Clip ‘total’ in the instance name field. Last of all, add a Drop Shadow.
08 Item price
Create a new Movie Clip called ‘pricemc’. Inside the Movie Clip, draw a red circle using the Eclipse tool. Adjust the size to 50px for the height and width, save and navigate back to the main timeline. Create another Movie Clip called ‘item1’, then open the Movie Clip and add the pricemc to x and y or 0px. On top of the red circle, add a Static text field with £35 as the text value.
09 Item art
Add a new layer in the item1 Movie Clip, and import one of the great illustrations Tom Bland has kindly given us to use in this tutorial. They can be found on the cover disc, and are already the correct size and format. Place the image under the red disc, then select all the items, group (Ctrl+G) and copy (Ctrl+C). Create a new layer and paste (Ctrl+P), then group again. Delete the other layers.
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;