Zooming images in Flash

I am very new to Flash and have been reading tutorials to try to get up to speed.

However, I saw what I think is a great site – http://www.watersrestaurantctr.com/default1.htm - that uses what appear to be zooming images. After selecting the Restaurant and Bar link, a series of 5 pictures of the restaurant appear to come out from the background, starting small and then getting larger. The larger images ultimately overlap.

What is involved in achieving such an effect?

Thanks in advance.

Dan

basically you need three parts:

  1. make sure all the pics are movie clips and give their x and y scale and alpha initial values of 0

  2. make a function that resizes the pics and increases the alpha to 100

3)put it all together in an onEnterFrame function

if all the MC’s are named pic1, pic2 ,pic3 etc… you can use a for loop to give each MC the initial values :

[AS]numpics = 5;
for (i=1; i<=numpics; ++i) {
pic = “pic” add i;
_root[pic]._alpha = 0;
_root[pic]._xscale = 0;
_root[pic]._yscale = 0;
}[/AS]
each time the for loop loops, the variable pic has a value of pic + i so that all the pics (pic1-5) get the initial values.

next, the function that controls the size and alpha change is created :

[AS]speed = 5;
grow = function () {
this._alpha = this._alpha-(this._alpha-100)/speed;
this._xscale = this._xscale-(this._xscale-100)/speed;
this._yscale = this._yscale-(this._yscale-100)/speed;
};[/AS] notice that everything is refered to as ‘this’, this is so that it alows us to apply the function to multiple MCs. the scale and alpha are changed using easing and the speed of the ease is controled by the variable speed

finally we bring everything together"
[AS]onEnterFrame = function () {
pic1.onEnterFrame = grow;
if (pic1._xscale>80) {
pic2.onEnterFrame = grow;
} if (pic2._xscale>80) {
pic3.onEnterFrame = grow;
} if (pic3._xscale>80) {
pic4.onEnterFrame = grow;
} if (pic4._xscale>80) {
pic5.onEnterFrame = grow;
}
};[/AS]
first, pic 1 has the grow function that we created earlier applied to it. then, a few if statements check if the current picture has reached a certain size (80 in this case) and then the next picture has the function applied to it. that’s about it. here’s the whole AS for reference:
[AS]numpics = 5;
for (i=1; i<=numpics; ++i) {
pic = “pic” add i;
_root[pic]._alpha = 0;
_root[pic]._xscale = 0;
_root[pic]._yscale = 0;
}
speed = 5;
grow = function () {
this._alpha = this._alpha-(this._alpha-100)/speed;
this._xscale = this._xscale-(this._xscale-100)/speed;
this._yscale = this._yscale-(this._yscale-100)/speed;
};

onEnterFrame = function () {
pic1.onEnterFrame = grow;
if (pic1._xscale>80) {
pic2.onEnterFrame = grow;
} if (pic2._xscale>80) {
pic3.onEnterFrame = grow;
} if (pic3._xscale>80) {
pic4.onEnterFrame = grow;
} if (pic4._xscale>80) {
pic5.onEnterFrame = grow;
}
};[/AS] i hope this helped and sorry if my explanation was too detailed :slight_smile:

-mike

oh yeah, here’s an example fla if you want it…

Thank you.

This is exactly what I was looking for

Dan

welcome to the forum! =)