how can I mask out or move this clip?

[systemoverload]

Hello all,

I am pretty new at flash and using action script and I really like this tutorial on creating a scrolling gallery, my question is how do I adjust the placement of it, left to right. I would want it to start say 20px in and end 20px before the edge of the screen leaving a boarder away from the edges, makes sense? I have attached the file to see if you can give me any insight I really appreciate it and I had to remove the large images to reduce the file size so if you click on an image it will just freeze but i'm not worried about the large images, thanks!

[AS3.0]

why does no one just use cs3 now a days -.- I can never open shii lol

[angelhdz]

Lol Basses, is time to go on haha. Get CS6. I was on CS3, then CS5 Portable, now i have CS6 and is very cool and i can open anything woo

[angelhdz]

systemoverload, i'm working on your flash. I'm almost there. I managed to reduce 20px from the right side of the stage. Now for the left side, top and bottom.

[fruitbeard]

Hi,

Simple, just make a box shape that is 20px less wide and 20px less high than the movie size.
turn it into a movieclip and call it Masker.
then centre the masker movieclip.

then at the bottom of all of your code put this

container.setMask(Masker);

[systemoverload]

No way you figured it out, sweet, i'm looking forward to seeing what needed to be done with it, thanks so much.

[fruitbeard]

Hi,

Or just make a movieclip call it Masker and put this code at the bottom of your code.

MyGap = 20;
Masker._x = MyGap;
Masker._y = MyGap;
Masker._width = Stage.width - (MyGap * 2);
Masker._height = Stage.height - (MyGap * 2);
container.setMask(Masker);

MyGap = space on either side

[angelhdz]

Something like that i was making fruitbeard but instead of "myGap" i called it "myStage", nice one

But it doesn't work. Neither what i made. I made a fake stage width var, so the scroller fits that fake stage, that is

myStage= Stage.width - 20;

[systemoverload]

thanks again Fruitbeard & angelhdz for your help man I pulled out a lot of hair trying to figure this out (well, what's left at least), I guess this is what happens when dabble in a program you only know a little bit about. Thanks again!

[fruitbeard]

Hi,

here is the fla, it is CS6, so maybe Angel can deplatform it.

[angelhdz]

Ok fruitbeard, that did the job, but i think not at 100%. You managed to create the "gasps/boarders" but the mask removes or hides part of the first image and last image, and i'm sure our friend systemoverload wants the images fully viewable. But its nice great job

[fruitbeard]

Hi,

I see what you mean.

replace all the code with this then and voila.

//Paste this code at the top of your existing code to be able to use the Tween Class

import mx.transitions.Tween;
import mx.transitions.easing.*;

this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 9;
var scrolling:Boolean = true;

for (i=1; i<=imagesNumber; i++) {
    container.attachMovie("thumb"+i,"thumb"+i+"_mc",i);
    myThumb_mc = container["thumb"+i+"_mc"];
    myThumb_mc._x = (i-1)*myThumb_mc._width;
    myThumb_mc._y = (Stage.height-myThumb_mc._height)/2;
    myThumb_mc._alpha = 50;
    myThumb_mc.largerImage = i;
    myThumb_mc.onRollOver = function() {
        this._alpha = 100;
    };
    myThumb_mc.onRollOut = function() {
        this._alpha = 50;
    };
    myThumb_mc.onRelease = function() {
        this._alpha=50;
        for (i=1; i<=imagesNumber; i++) {
            var myClip = container["thumb"+i+"_mc"];
            myClip.enabled = false;
        }
        scrolling = false;
        _root.attachMovie("image"+this.largerImage,"large_mc",2);
        large_mc._x = (Stage.width-large_mc._width)/2;
        large_mc._y = (Stage.height-large_mc._height)/2;
        new Tween(large_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);
        new Tween(container, "_alpha", Strong.easeOut, 100, 50, 0.5, true);
        large_mc.onRelease = function() {
            this.enabled=false;
            scrolling = true;
            var myFadeOut = new Tween(large_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);
            new Tween(container, "_alpha", Strong.easeOut, 50, 100, 0.5, true);
            myFadeOut.onMotionFinished = function() {
                for (i=1; i<=imagesNumber; i++) {
                    var myClip = container["thumb"+i+"_mc"];
                    myClip.enabled = true;
                }
                large_mc.removeMovieClip();
            };
        };
    };
}

MyGap = 20;
Masker._x = MyGap;
Masker._y = MyGap;
Masker._width = Stage.width - (MyGap * 2);
Masker._height = Stage.height - (MyGap * 2);
container.setMask(Masker);

container.onEnterFrame = function() {
    if (scrolling) {
        this._x += Math.cos((-_root._xmouse/Masker._width)*Math.PI)*15;
        if (this._x>MyGap) {
            this._x = MyGap;
        }
        if (-this._x>((this._width - Masker._width) - MyGap)) {
            this._x = -((this._width - Masker._width) - MyGap);
        }
    }
};

[angelhdz]

Perfect.

[angelhdz]

This was my attempt:

var myStage:Number=430; //the stage width is 450 so I subtracted 20 = 430
                                    //myStage is a fake Stage size, so it would 
                                      //leave a   20px gap from the real stage
Stage.width  = myStage;


container.onEnterFrame = function() {
    if (scrolling) {
        this._x += Math.cos((-_root._xmouse/myStage._width)*Math.PI)*15;
        if (this._x> 0) {
            this._x =  0;
        }
        if (-this._x>((this._width - myStage._width)) {
            this._x = -((this._width -  myStage._width) ;
        }
    }
};

Again, good job.


One thing fruitbeard, I've seen a lot of scripts with the multiplying symbol * black, and sometimes i see it purple. It turns black when put together with other characters *likethis, but it turns purple when you leave a space between the multiply symbol and the character
* likethis. Which way is the correct?

[fruitbeard]

Hi,

I'm not sure if it makes any difference to the output, but I prefer to have spaces: (width * 2) and that is purely aesthetical (looks better) for me.

[angelhdz]

Hi, and thanks. I preffer doing it that way too.