How do i make a sprite not to show any content outside itself?

#1

For exampel i have this code:

                var _rect2:Sprite = new Sprite();
		_rect2.graphics.beginFill(0xFFF000);
		_rect2.graphics.drawRect(0,50,100,100);
		_rect2.graphics.endFill();
		_rect2.
		
		var _rect:Sprite = new Sprite();
		_rect.graphics.beginFill(0xFF0000);
		_rect.graphics.drawRect(0,50,100,200);
		_rect.graphics.endFill();

		_rect2.addChild(_rect);
		addChild(_rect2);

I want my _rect2 to show its content only inside of it, like only half of the red _rect, i’m not seeing a wat to do this, can anyone gimme a hand?

#2

Hi Thiago_Sabin.

This almost begs for masking.
Here take my hand:

        var _rect2:Sprite = new Sprite();
        _rect2.graphics.beginFill(0xFFF000);
        _rect2.graphics.drawRect(0,50,100,100);
        _rect2.graphics.endFill();
        
        var _rect:Sprite = new Sprite();
        _rect.graphics.beginFill(0xFF0000);
        _rect.graphics.drawRect(0,50,100,200);
        _rect.graphics.endFill();

        _rect2.mask = _rect;
        addChild(_rect2);

Is this what you’re after?

1 Like
#3

Here’s the entire code:

        super ();
	
	var _rect2:Sprite = new Sprite();
	_rect2.graphics.beginFill(0xFFF000);
	_rect2.graphics.drawRect(0,50,100,100);
	_rect2.graphics.endFill();
	
	var _rect:Sprite = new Sprite();
	_rect.graphics.beginFill(0xFF0000);
	_rect.graphics.drawRect(0,50,100,200);
	_rect.graphics.endFill();
	
	var text:TextField = new TextField();
	text.text = "teste de scroll";
	
	_rect.addChild(text);
	
	var st = new Sprite();
	st.graphics.beginFill(0x00FF00);
	st.graphics.drawRect(0,0,20,stage.stageHeight);
	st.graphics.endFill();
	st.x = 100;
	addChild (st);
	
	var sh = new Sprite();
	sh.graphics.beginFill(0x0000FF);
	sh.graphics.drawRect(0,0,20,100);
	sh.graphics.endFill();
	sh.x = 100;
	addChild (sh);
			
	var scrollbar = new Scrollbar (Scrollbar.VERTICAL, st, sh);
	scrollbar.setTarget (_rect, "y", 0, 200);
	
	_rect2.addChild(_rect);
	addChild(_rect2);

I need the red block to scroll only inside the yellow one got it? I need the red to go up and down but not outside the yellow one, the yellow should be like a windows and the red one apears when behind it

#4

Try this:

    super();
    var _rect2:Sprite = new Sprite();
    _rect2.graphics.beginFill(0xFFF000);
    _rect2.graphics.drawRect(0,50,100,100);
    _rect2.graphics.endFill();
    
    var _rect:Sprite = new Sprite();
    _rect.graphics.beginFill(0xFF0000);
    _rect.graphics.drawRect(0,50,100,200);
    _rect.graphics.endFill();
    
    var text:TextField = new TextField();
    text.text = "teste de scroll";
    
    _rect.addChild(text);
    
    var st = new Sprite();
    st.graphics.beginFill(0x00FF00);
    st.graphics.drawRect(0,0,20,stage.stageHeight);
    st.graphics.endFill();
    st.x = 100;
    addChild (st);
    
    var sh = new Sprite();
    sh.graphics.beginFill(0x0000FF);
    sh.graphics.drawRect(0,0,20,100);
    sh.graphics.endFill();
    sh.x = 100;
    addChild (sh);
        
    var scrollbar = new Scrollbar (Scrollbar.VERTICAL, st, sh);
    scrollbar.setTarget (_rect, "y", 0, 200);
    _rect.mask = _rect2;
    
    addChild(_rect);
1 Like
#5

I tried miself the mask but i didn’t understand, now i got it, thanks!!!

And i created a third yellow rect to be in the background so i got the effect i wanted, really thank you!

#6

Have you tried _rect.scrollRect = new Rectangle(0, 50, 100, 100)? I think that might perform better.

#7

its a nice thing to addChild(_rect2) aswell to the stage, so it follow the rules the rest wast following c: