dcsimg
A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: [RESOLVED] Tweenlight z axis

  1. #1
    Member
    Join Date
    Jul 2009
    Posts
    72

    resolved [RESOLVED] Tweenlight z axis

    I just upgraded to CS4. I'm now trying to figure out how the z axis works.

    I have a little project in which I have multiple different colored squares that, when rolled over scale up with tweenlite. However as it is right now, the box that is moused over does not appear "in front" of the other boxes. Is this something that can be achieved with the z axis?

    As evident in the title, I'm using tweenlite to achieve this. Any help is appreciated/needed

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    The 2.5d features in flash 10 do not include z-ordering. You still have to manage that yourself. The z property only manipulates the appearance of the display object by altering the psuedo-3d points. It will achieve the same thing as scaling, but won't handle altering the displaylist order.

    You can bring it to the top by re-adding it to the parent with addChild. Or you could sort your displayObjects by z if you have them all in an array, and manually set the order of each after sorting.

  3. #3
    Member
    Join Date
    Jul 2009
    Posts
    72
    Alright well this problem has come up in another part of my project. Just to clarify, if I use addChild, will the added object immediately be placed on top of the other object?

    Also, kind of off-topic...I would like one object to fade in on top of the object that is already on stage, and the previous object on stage to fade out. What's the easiest way to go about this?

  4. #4
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    Assuming both objects in question have the same display parent, then yes addChild will cause the added object to be placed in front of the other object. "Immediately" here means "upon next rendering", which probably means the next frame. You could add and then sort and probably not see any flickering.

    I would think that a couple of tweens modifying the objects' alpha values would be the easiest way to accomplish your second question. Tweenlight should definitely be able to help you there.

  5. #5
    Member
    Join Date
    Jul 2009
    Posts
    72
    Well the problem is, I can't figure out how to make the alpha changes simultaneous.

    Here's what I have so far...
    Code:
    import gs.TweenLite;
    import gs.easing.*;
    
    var colors:Array = new Array();
    var btnProps:Array = new Array();
    var prop:Rectangle;
    
    for(var i:Number = 0; i < color_picker.numChildren; i++)
    {
        var _btn:MovieClip = MovieClip(color_picker.getChildAt(i));
        _btn.buttonMode = true;
        _btn.mouseChildren = false;
        _btn.id = i;
        _btn.addEventListener(MouseEvent.MOUSE_OVER, onOver, false, 0, true);
        _btn.addEventListener(MouseEvent.MOUSE_OUT, onOut, false, 0, true);
    	_btn.addEventListener(MouseEvent.CLICK, colorClick, false, 0, true);
        colors.push(_btn);
    
        var _rect:Rectangle = new Rectangle(_btn.x, _btn.y, _btn.width, _btn.height);
        btnProps.push(_rect);
    }
    
    TweenLite.to(grey, .5, {alpha:1});
    
    function onOver(e:MouseEvent):void
    {
        prop = btnProps[e.target.id];
        TweenLite.to(e.target, .2, {scaleX:1.3, scaleY:1.3});
    }
    
    function onOut(e:MouseEvent):void
    {
        TweenLite.to(e.target, .2, {scaleX:1, scaleY:1});
    }
    
    function colorClick(e:MouseEvent):void
    {
    	switch(MovieClip(e.currentTarget).id)
    	{
    		case 0:
    		addChild(eggplant);
    		TweenLite.to(eggplant, .2, {alpha:1});
    		break;
    		case 1:
    		addChild(sapphire);
    		TweenLite.to(sapphire, .2, {alpha:1});
    		break;
    		case 2:
    		addChild(lime);
    		TweenLite.to(lime, .2, {alpha:1});
    		break;
    		case 3:
    		addChild(marigold);
    		TweenLite.to(marigold, .2, {alpha:1});
    		break;
    		case 4:
    		addChild(fuchsia);
    		TweenLite.to(fuchsia, .2, {alpha:1});
    		break;
    		case 5:
    		addChild(turquoise);
    		TweenLite.to(turquoise, .2, {alpha:1});
    		break;
    		case 6:
    		addChild(taupe);
    		TweenLite.to(taupe, .2, {alpha:1});
    		break;
    		case 7:
    		addChild(periwinkle);
    		TweenLite.to(periwinkle, .2, {alpha:1});
    		break;
    		case 8:
    		addChild(coral);
    		TweenLite.to(coral, .2, {alpha:1});
    		break;
    		case 9:
    		addChild(terra_cotta);
    		TweenLite.to(terra_cotta, .2, {alpha:1});
    		break;
    	}
    }
    As you may be able to tell, I've got a color picker. There are 10 colors and I would like an image to fade when one is clicked, while simultaneously the image that was on stage fades out.

    Any idea how I can do it then?

  6. #6
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    You need to keep track of which is on stage, and fade that one out as you fade the new one in. You can also shorten that onclick quite a bit. I'd actually suggest getting rid of the switch entirely, by setting up an array of your target clips.
    Here's a start:
    Code:
    import gs.TweenLite;
    import gs.easing.*;
    
    var colors:Array = new Array();
    var targets:Array = [eggplant, sapphire, lime, marigold, fuschia, turquoise, taupe, periwinkle, coral, terra_cotta];
    var btnProps:Array = new Array();
    var prop:Rectangle;
    var current:MovieClip;
    
    for(var i:Number = 0; i < color_picker.numChildren; i++)
    {
        var _btn:MovieClip = MovieClip(color_picker.getChildAt(i));
        _btn.buttonMode = true;
        _btn.mouseChildren = false;
        _btn.id = i;
        _btn.addEventListener(MouseEvent.MOUSE_OVER, onOver, false, 0, true);
        _btn.addEventListener(MouseEvent.MOUSE_OUT, onOut, false, 0, true);
    	_btn.addEventListener(MouseEvent.CLICK, colorClick, false, 0, true);
        colors.push(_btn);
    
        var _rect:Rectangle = new Rectangle(_btn.x, _btn.y, _btn.width, _btn.height);
        btnProps.push(_rect);
    }
    
    TweenLite.to(grey, .5, {alpha:1});
    current = grey;
    
    function onOver(e:MouseEvent):void
    {
        prop = btnProps[e.target.id];
        TweenLite.to(e.target, .2, {scaleX:1.3, scaleY:1.3});
    }
    
    function onOut(e:MouseEvent):void
    {
        TweenLite.to(e.target, .2, {scaleX:1, scaleY:1});
    }
    
    function colorClick(e:MouseEvent):void
    {
    	TweenLite.to(current, .2, {alpha:0});
            var next:MovieClip = targets[MovieClip(e.currentTarget).id];
            addChild(next);
    	TweenLite.to(next, .2, {alpha:1});
            current = next;
    }

  7. #7
    Member
    Join Date
    Jul 2009
    Posts
    72
    Why thank you kind sir, that's exactly what I was looking for.

    Thanks for the tip on shortening that onclick as well...I've been doing it that other way for a while

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center