Neverside

How to resize dynamically?

i want to resize dynamically...for images..

Alot like this site Here

Any ideas how i would do that?

___________________

Eloquent Creations | Motorspin | MJDesignz.Net

Hey, LazR,

I've seen this effect a lot lately and I've been wanting to figure out how to do it, myself.. So after too much time spent playing around (flashturbation), this is what I came up with (click on the buttons): http://www.onebyonedesign.com/betaTest/resizerator/resizer.html

this is the entire script I used:

PHP:

<?php
scaleSpeed = 4;
fadeAmt = 5;
MovieClip.prototype.resizeForPic = function(pic, xSize, ySize) {
    _root.createEmptyMovieClip("loader_mc", 999);
    if (xSize>500) {
        xReposAmt = 30;
    } else {
        xReposAmt = 20;
    }
    this.onEnterFrame = function() {
        var disty = ySize-this._height;
        var distx = xSize-this._width;
        var movey = disty/_root.scaleSpeed;
        var movex = distx/_root.scaleSpeed;
        this._height += movey;
        this._width += movex;
        if ((Math.abs(this._height-ySize)<.2) && (Math.abs(this._width-xSize)<.2)) {
            delete this.onEnterFrame;
            _root.loader_mc._x = (this._x-this._width/2)+xReposAmt;
            _root.loader_mc._y = (this._y-this._height/2)+20;
            _root.loader_mc.loadMovie(pic);
            _root.loader_mc._alpha = 0;
            _root.checkForLoad();
        }
    };
};
function fadeIn() {
    createEmptyMovieClip("fader", 2);
    _root.fader.onEnterFrame = function() {
        _root.loader_mc._alpha += _root.fadeAmt;
        if (_root.loader_mc._alpha>=100) {
            delete this.onEnterFrame;
        }
    };
}
function checkForLoad() {
    createEmptyMovieClip("tester", 2);
    _root.tester.onEnterFrame = function() {
        if (_root.loader_mc.getBytesLoaded()/_root.loader_mc.getBytesTotal() == 1) {
            delete this.onEnterFrame;
            _root.fadeIn();
        }
    };
}
someButton.onRelease = function() {
    removeMovieClip(_root.loader_mc);
    main_mc.resizeForPic("pic1.jpg", 440, 192);
};
otherButton.onRelease = function() {
    main_mc.resizeForPic("pic2.jpg", 560, 415);
};
thirdButton.onRelease = function() {
    main_mc.resizeForPic("pic3.jpg", 190, 400);
};
?>

It's halfassed as all get out, but I'm sure it can be made useable without too tweaking...

Hope that helps.

d.

___________________

obod | weapons of mass dysfunction

im going to link this in the useful threads sticky, so if you develop manymore on this, feel free to add to the thread,

sounds good

___________________

:: pop ::

wow..now that is the real quality help TF comes to be good at.

thats great devonair...wow yeah thats perfect thanks a ton..ill print that out and study it tonight so i get the full understanding of it..wow;)

___________________

Eloquent Creations | Motorspin | MJDesignz.Net

Yo devonair, its silly to say it in here, but check your private messages please

Hey, LazR,

Glad that helped, but I've been playing with that script some more. I didn't like how you had to hard code the size of the pictures and some other parts were pretty shady. This is kind of a slide show version. The scripting is much nicer and the resizing is more dynamic - that is, it resizes according to the size of the jpg you're loading in (or .swf). I also annotated so you might can follow my line of thought...

PHP:

<?php
//2 lines to set the works in motion...
initVariables();
displayPic = setInterval(loadPic, 0);
stop();
function initVariables() {
    scaleSpeed = 4;  //determines how quickly the box rescales.  1 is quickest.
    fadeAmt = 5;  //determines how quickly pics fade in. 100 is quickest.
    bufferAmt = 5;  //number of pixels between shadow and picture
    delayAmt = 3;  //number of seconds between picture changes
    picNum = 1;  //starts with first pic.  Pics must be named "pic1.jpg" "pic2.jpg" etc.
}
//the main resizer below
MovieClip.prototype.resizeForPic = function(xSize, ySize) {
    this.onEnterFrame = function() {
        //standard easing formula
        var disty = ySize-this._height;
        var distx = xSize-this._width;
        var movey = disty/_root.scaleSpeed;
        var movex = distx/_root.scaleSpeed;
        this._height += movey;
        //the shadow is a 326X326 pixel bitmap.
        //the "main_mc" is 300X300 pixel vectored white square on top of the shadow.
        //the following few lines set the shadow's size proportional to the main_mc.
        _root.shadow_mc._height = 326*(this._height/300);
        this._width += movex;
        _root.shadow_mc._width = 326*(this._width/300);
        //close enough for government work...
        if ((Math.abs(this._height-ySize)<.2) && (Math.abs(this._width-xSize)<.2)) {
            delete this.onEnterFrame;
            //set the position of top left corner of the pic.
            _root.loader_mc._x = (this._x-this._width/2)+_root.bufferAmt;
            _root.loader_mc._y = (this._y-this._height/2)+_root.bufferAmt;
            //have the pic appear...
            _root.fadeIn();
        }
    };
};
//function to make the picture fade in.
function fadeIn() {
    //just a worker mc..
    createEmptyMovieClip("fader", 2);
    //brings in the pic.
    _root.fader.onEnterFrame = function() {
        _root.loader_mc._alpha += _root.fadeAmt;
        if (_root.loader_mc._alpha>=100) {
            delete this.onEnterFrame;
            //move to next pic or back to the first if you're done.
            picNum++;
            if (picNum>3) {
                picNum = 1;
            }
            //start from the top after waiting the delayAmt in seconds.
            displayPic = setInterval(loadPic, delayAmt*1000);
        }
    };
}
//function to check if the picture is fully loaded..
function checkForLoad() {
    //'nother worker mc.
    createEmptyMovieClip("tester", 2);
    _root.tester.onEnterFrame = function() {
        //if the sucker's fully loaded, start resizing the junk on stage
        //according to the picture's height and width in pixels
        //(taking the buffer amount into consideration, of course)...
        //if it ain't loaded yet, sit around and twiddle yer thumbs, 'til it is.
        if (_root.loader_mc.getBytesLoaded()/_root.loader_mc.getBytesTotal() == 1) {
            delete this.onEnterFrame;
            _root.main_mc.resizeForPic(_root.loader_mc._width+_root.bufferAmt*2, _root.loader_mc._height+_root.bufferAmt*2);
        }
    };
}
//function to bring in a new pic.
function loadPic() {
    //get rid of any unwanted intervals laying around.
    clearInterval(displayPic);
    //create an mc to stuff the pic into,
    //load up the pic, set it's alpha to 0 and move on to the next function.
    _root.createEmptyMovieClip("loader_mc", 999);
    _root.loader_mc.loadMovie("pic"+picNum+".jpg");
    _root.loader_mc._alpha = 0;
    checkForLoad();
}
?>

Got your pm, retroshift. Sorry, I'm a little slow..

d.

___________________

obod | weapons of mass dysfunction

good lord...devonair, you over did yourself!! but im grateful....this will definitely increase my understanding of Actionscript! Thanks!!

___________________

Eloquent Creations | Motorspin | MJDesignz.Net

::classic: but i wouldnt mind a poke at the source of that, or some instructions on how to start something like that from scratch.

plz if either lazr or devonair has the source, or a nice bit of time to teach lil old me how to create something like that, then plz pm me

hey, nudesign,

I'll attach the .fla, but you'll probably be disappointed. There's not much to it aside from the script posted above. You'll have to supply your own pictures. Just remember to name them pic1.jpg, pic2.jpg, etc and save them in the same folder as the .swf.

Have fun with it..

d.

___________________

obod | weapons of mass dysfunction

yes, good idea. i was going to ask for the fla the other day, but didnt find time. this should help me...should lol

___________________

Eloquent Creations | Motorspin | MJDesignz.Net