Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:

Issue 151 Tutorial Files

Dreamweaver
Form validation with JQuery
Style switching with CSS

Flash
Add realistic smoke effects
Drag and drop techniques

8 Comments »

  • Pierre said:

    Although your mag is a bit pricey I tend to buy one every quarter. I should get a subscription I think.

    Keep up the great work. Thanks.

    All my best,

    Pierre

  • heba said:

    so cool & creative ..,

  • eric heil said:

    nice

  • John said:

    very good…thanks a lot

  • Shaheryar said:

    how we can validate on submit button in jquery using above code

  • immi said:

    hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

  • rachouan said:

    with your drag and drop tutorial you have a bug the circle behind the price is also dragable.
    add this to your code.

    //
    item1.mouseChildren = false;
    item2.mouseChildren = false;
    item3.mouseChildren = false;
    item4.mouseChildren = false;
    //

  • rachouan said:

    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;

What's your opinion?

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

* Required fields