Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | music | About
« Actionscript 3.0 Brush Up in the Books
Pittsburgh Web Design Day 09: Redux »

Flash Cart: Macgyver Style

Have you ever been on a code mission? You know one of those stubborn solution quest where nothing else matters.  Time passes around you in slow mo like Zack Braff in Garden Sate.  And the one thing that keeps you going is you know in your heart that there’s an answer and that you refuse to let roadblocks, errors, and ignorance stop you from getting something accomplished.

I Don’t know about your but for me they always sneak up out of nowhere.  Like at 4:59pm on a Friday somebody asks you for something that you think is a piece of cake, then Sunday rolls around and you’re still plugging away only to blink you eyes and realize you just missed Family Guy.

Well I just got back from one of these pilgrimages. Afterwards I typically come out of them feeling triumphant, disappointed with the amount of effort I just gave, and yet little more wise.  Usually because I missed something small in the beginning and along the way I discover a neat technique that changes my outlook on development in some way.

Every now and again I get on these little missions. Code journeys where I’m determined to find a way to make something work regardless of what other options might exist. Sometimes these missions are created by my environment and sometimes they are created by me.

This particular code mission was basically the development of a faux shopping cart system.  Just a demo to add and remove products.  Pretty easy right?  Well that’s what I thought. To add a little more fun to the situation I wanted to avoid used components.  I know I know I know it would have been easier, but this is a proof of concept for a much larger piece and compoents were not an option.  If your curious why DM me sometime and I’ll give you the low down.

Anyway it’s not perfect but I’ve got the proof of concept working

  • Multidimensional arrays
  • MovieClips as my receipt placeholders
  • Methods to add, remove, display the cart as well as the total

As the infinitely wise Colin Mook says if it works it’s not wrong.

So have it folks

flashcart.fla
flashcart.swf

  1. // array creation
  2. var productsArray:Array = new Array()
  3. var cartArray:Array = new Array()
  4. var cartClipArray:Array = new Array()
  5. // total
  6. var total:Number = 0
  7. // products
  8. productsArray[0] = {price:3, name:"burger", qty:0}
  9. productsArray[1] = {price:5, name:"drink", qty:0}
  10. productsArray[2] = {price:2, name:"fries", qty:0}
  11. productsArray[3] = {price:10, name:"shake", qty:0}
  12. productsArray[4] = {price:1, name:"cookie", qty:0}
  13. productsArray[5] = {price:2, name:"coffee", qty:0}
  14. // cartClips — These are the movieclips on the stage that reprecent my items added
  15. // to the cart
  16. cartClipArray[0] = cartClip0
  17. cartClipArray[1] = cartClip1
  18. cartClipArray[2] = cartClip2
  19. cartClipArray[3] = cartClip3
  20. cartClipArray[4] = cartClip4
  21. cartClipArray[5] = cartClip5
  22. cartClipArray[6] = cartClip6
  23. cartClipArray[7] = cartClip7
  24. cartClipArray[8] = cartClip8
  25. // clearcart
  26. // a for loop wouldn’t work here — go figure :P
  27. cartClipArray[0].visible=false
  28. cartClipArray[1].visible=false
  29. cartClipArray[2].visible=false
  30. cartClipArray[3].visible=false
  31. cartClipArray[4].visible=false
  32. cartClipArray[5].visible=false
  33. cartClipArray[6].visible=false
  34. cartClipArray[7].visible=false
  35. cartClipArray[8].visible=false
  36.  
  37. // A D D  T O  T H E  C A R T
  38. function addToCart(id:Number){
  39.         // checks if nothing is in the array
  40.         if(cartArray.length<1){
  41.                 cartArray.push(productsArray[id])
  42.                 cartArray[i].qty++
  43.         }else{
  44.                 // check for similar products
  45.                 for(var i:int=0;i0){
  46.                 cartArray[id].qty–
  47.                 if(cartArray[id].qty==0){
  48.                         showTotal()
  49.                         cartArray.splice(id,1)
  50.                         showCart()
  51.                 }
  52.                 showCart()
  53.         }
  54. }
  55.  
  56. // B U T T O N  S T U F F
  57. add_btn.addEventListener(MouseEvent.MOUSE_DOWN, onAdd)
  58. add_btn2.addEventListener(MouseEvent.MOUSE_DOWN, onAdd)
  59. add_btn3.addEventListener(MouseEvent.MOUSE_DOWN, onAdd)
  60. add_btn4.addEventListener(MouseEvent.MOUSE_DOWN, onAdd)
  61. add_btn5.addEventListener(MouseEvent.MOUSE_DOWN, onAdd)
  62.  
  63. cartClip0.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  64. cartClip1.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  65. cartClip2.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  66. cartClip3.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  67. cartClip4.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  68. cartClip5.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  69. cartClip6.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  70. cartClip7.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  71. cartClip8.addEventListener(MouseEvent.MOUSE_DOWN, onRemove)
  72.  
  73. function onAdd(e:MouseEvent):void{
  74.  
  75.         switch(e.target.name){
  76.                 case "add_btn":
  77.                 addToCart(0)
  78.                 trace("button")
  79.                 break
  80.  
  81.                 case "add_btn2":
  82.                 addToCart(1)
  83.                 break
  84.  
  85.                 case "add_btn3":
  86.                 addToCart(2)
  87.                 break
  88.  
  89.                 case "add_btn4":
  90.                 addToCart(3)
  91.                 break
  92.  
  93.                 case "add_btn5":
  94.                 addToCart(4)
  95.                 break
  96.         }
  97.  
  98.         showTotal()
  99.         showCart()
  100. }
  101.  
  102. function onRemove(e:MouseEvent):void{
  103.  
  104.         switch(e.target.parent.name){
  105.                 case "cartClip0":
  106.                 trace("remove fired")
  107.                 removeFromCart(0)
  108.                 break
  109.  
  110.                 case "cartClip1":
  111.                 removeFromCart(1)
  112.                 break
  113.  
  114.                 case "cartClip2":
  115.                 removeFromCart(2)
  116.                 break
  117.  
  118.                 case "cartClip3":
  119.                 removeFromCart(3)
  120.                 break
  121.  
  122.                 case "cartClip4":
  123.                 removeFromCart(4)
  124.                 break
  125.         }
  126.  
  127.         showTotal()
  128. }

Tags: , ,

This entry was posted on Tuesday, March 31st, 2009 at 4:27 pm and is filed under Flash, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply