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.