Drag and Drop

Project 5. Veggie Shop

For this project we will create a quite complicated application. Of course it cannot represent a full-size shopping business… but at least it’s a start.

The application will allow to make an order in the “Veggie Shop”. There are several items available. It’s carrot, lemon, banana, cabbage, pepper and so on. If you drag any of those items and drop it into the “basket” , this vegetable or fruit name and price appear in the “bill”. Also the overall sum of the purchase is displayed.

• Collect images of several shopping items. You may draw them by yourself or import pictures or find them in artistic fonts. It’s not necessary to be vegetables – it could be anything you want to “sell”
• Create an outline for the application. Prepare the Title, directions how to use, draw borders
• Create a movie symbol for the dropping target. In our example it’s a circle with the instance name “basket”
• Make two dynamictext boxes. The first box will keep the bill items. In the Properties Inspector give it an instance name “thebill”. Make it multilane and extend vertically to make it able to keep several items
• The second text will keep the sum of purchases. Place it below “thebill” and assign it a variable “atall”.
• In the first (and the only one) frame of the main timeline place a following code

  _root.thebill.HTML=true;
  atall=0.00;
  
  

  The first line assign HTML property to the true and after that it will be possible to use HTML formatting in the billing text. The second line initialize billing sum “atall” variable to the decimal number. It’s useful because after that Flash will recognize it’s data type and make correct calculations.
• Convert each shopping item to the button. Place the same code under each button event handlers

  
  on(press){
  	startDrag(this,false);
  }
  on(release) {
  	stopDrag();
  	
  }
  

  This is the code we always add to the buttons inside draggable symbols
• Convert each button to the movie symbol. Remember – in the hierarchy it must be movie symbol (for example mvLemon ) and inside it button symbol (for example btLemon) – actually all buttons may be instances of the same symbol, but movie symbols around them must be different.
• Enter the following code under each movie. Be sure that you enter the code in the movie symbol – not in the frame

  
  onClipEvent (mouseUp) {
  		
  if (eval(this._droptarget) == _root.basket ){
  	this._visible = false;
  	_root.thebill.HTMLtext =  _root.thebill.HTMLtext + "Banana - 50c
  ";
  	_root.atall += 0.50;
  	
  
  	}
  }
  

  Look at the code and find what each line is doing. Code is similar to what we’ve done in previous example. The only difference – the text boxes are updated. Note that we used breaking line HTML tag in the bill text.
• Enter the code above for all your shopping items and change name of the items and price in each case.
• Check everything. If you accidentally put the code in the wrong place (remember you need the certain code for each button and for each movie encapsulating button) – your application will work incorrectly.
• Check the movie. – When you drag the shopping item it must disappear and it’s name and price must be added to the bill.

Of course this application is not perfect and need more work to became a “real” e-commerce “shopping cart” – but at least you know the concept now.

Next