flash actionscript: Hey.. im trying to make a site similar to http://www.amplifier.com/ but i cant
work out how the zooming in on specific areas of the site when a button is
pushed is done... it could be done with tweens but im guesing filesize would be
an issue with tweens..
Can anyone point me in the direction of any tutorials.. source
files... or give any advice... i already know how to zoom on the centre of an
MC.. i just need to know how to get the zoom to move to a specific area...

Any Help. Comments. Advice etc would be much appreciated!
Thanx.

P.S i own the flash mx 2004 actionscript bible by robert reinhardt... if there
is any chapters in book that could point me in the right direction.. could you
let me know?

I Actually wanna learn how this is done.. instead of just copy & pasting
code... if someone gives me code to paste in.. ill be sure to fully understand
it before i do so!!

Hey thanks for replying so quick!!

ive posted the code i was playing with below... the code was actually written
for another movie that had 6 circles that zoomed in on the press of a button..
what i tried to do was replace the circles with one movie clip which takes up
the size of the stage.. i put a small cross inside the movie clip at the top
left of the stage.. and used this as a goal to zoom in on..

i then tried modifying the code to look to the following:

"button1.onPress = function() {
set1 = 100; <this scales the movie clip on button press.
set1 = _x = _x +50;
}"

but this somehow scaled the clip 50% its size... instead of scaling it to 100%
and moving it..

if you could edit my code or suggest a new way of doing it... i would
appreciate it.. i still have to design the movie i want.. but ill do that once
i get the code sorted...

basically what i wanna learn is zooming and positioning a movie clip with
fluid movement on the press of a button.



-----------------------------------------------------------------

function SCALE(CLIP, SET) {
start = CLIP._xscale;
end = SET-start;
CLIP._xscale = start+(end/5);
CLIP._yscale = start+(end/5);

if (CLIP._xscale<850 && CLIP._xscale>=1) { <<<this makes the movie clip
disapear when it reaches 850% or less than 1%
CLIP._visible = 1;
this give the appearance of the camera going out of sight or behind the
} else {
"camera"...
CLIP._visible = 0;
}
}
set1 = main1._xscale= 50; <<<this scales the movie clip when its loaded.

onEnterFrame=function(){
SCALE(main1, set1);
}

button1.onPress = function() {
set1 = 100; <this scales the movie clip on button press.
}


Thanks again!
Chris.

wow! thanks alot.. that kinda clears things up.. im gonna go and re-write my
code taking into account what uve showed me..

if i have any problems.. ill post them here..
thanks again!!!!!!
Chris.

dilate2003,

I always love it when I hear this ...

[quoted text, click to view]

With an attitude like that, you're sure to succeed in this goal. :)
So, you'd like to zoom. Let's think about what that means. You mentioned
tweening, and you're right on both counts: though it would certainly be
possible with tweens, your SWF would indeed increase if you added enough
keyframes. (The increase would be relatively small, but overall efficiency
is always a goal to strive for.)

You also said you know how to zoom to the center of a movie clip ...

[quoted text, click to view]

If you're using ActionScript to accomplish this zoom, you must be either
adjusting the _width and _height properties of a given movie clip or
adjusting its _xscale and _yscale properties. Perhaps something like this:

myClip._xscale += 50;
myClip._yscale += 50;

.... adds 50 to the value of whatever _xscale and _yscale are. So a 100%
(actual size) movie clip would now be 150%, or one and a half times its
normal size.

If you're zooming over time, you would be adjusting these properties in
small increments over a series of frames or time (say, in an onEnterFrame
handler, or via setInterval()). Right? Catch us up, if that isn't the
case. In order to help you achieve what you're after, the more detail, the
better.

Zooming towards a given portion of a movie clip is actully just a scale
transform (as you've presumably done) with the addition of a location
transform. In other words, to zoom in on the upper left hand corner of a
movie clip, you would increase its _xscale/_yscale *and* increase the values
of its _x and _y properties. (The higher _x is, the more towards the right;
the lower, the more towards the left. The higher _y is, the farther down
the MC goes; the lower, the farther up.)

Does that get you started?


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

Chris,

Your sample code is a bit over-complicated. Let's break it down. I'm
going to re-arrange the order of things, a bit, hoping it will make things
more clear for you.

var set1 = main1._xscale = 50;

First off, I would add the "var" keyword. No reason not to; after all,
you're declaring a variable here. Assuming this code is in the main
timeline, you are doing two things in this one line: A) declare a variable,
set1, and set its value to the value of the _xscale property of a movie clip
with the instance name main1; B) set the value of the _xscale property of
main1 to 50. In short, both set1 and main1._xscale are set to 50.

onEnterFrame = function() {
SCALE(main1, set1);
};

Next, you're assigning a function to the onEnterFrame event handler of
the main timeline (aka the _root). Basically, you're saying, "Hey, _root,
every time you enter a frame, do the following," and then you tell it what
to do (happens to be the SCALE() function). It should be noted that by
default, FLAs are set to 12fps (frames per second), so in something as short
as 3 seconds, this function will be invoked 36 times; in one minute, 720
times.

Now, a couple thoughts ... there's nothing wrong with assigning a
function to the onEnterFrame event handler of the _root, but I would use
"this" for sake of clarity (this.onEnterFrame = ...). In addition, since
this event handler is available to all movie clip instances (see
MovieClip.onEnterFrame), why not use it on the clip itself, rather than the
main timeline? You could assign the same SCALE() function to the
onEnterFrame handler of any given movie clip ...

main1.onEnterFrame = function() {
_root.SCALE(this, _root.set1);
}

.... which means you could re-use it anywhere you like. By assigning it to
the _root instead, you can only use it once. If you tried to assign another
onEnterFrame event handler to the _root, it would overwrite the first one.

Now we come to the meat of the matter.

function SCALE(CLIP, SET) {
start = CLIP._xscale;
end = SET - start;
CLIP._xscale = start + (end / 5);
CLIP._yscale = start + (end / 5);
if (CLIP._xscale < 850 && CLIP._xscale >= 1) {
CLIP._visible = 1;
} else {
// "camera"...
CLIP._visible = 0;
}
};

This function is called repeatedly by the previously-mentioned event
handler. The function accepts two parameters, arbitrarily named CLIP and
SET.

Line one sets a variable "start" to the _xcale



[quoted text, click to view]

Woops! I hit Send way before I was ready. Continuing on ... it occurs
to me I should jump to the chase. It's getting a bit late where I am, and
besides, your code does work as is; it's only the _x you're having trouble
with.

Take a look at your proposed new button code:

button1.onPress = function() {
set1 = 100;
set1 = _x = _x + 50;
};

What's going on here? Let's see. In line 1, you're setting the set1
variable to 100, as before. That part works. In line 2, you're setting the
value of set1 again (why?). This time you're setting it to the value of _x
(_x of what?), which is getting set to the value of _x (again, _x of what?)
plus 50. Somehow or other, this digests down to 50, it looks like. Which
means you're starting with a movie clip whose _xscale is set to 50 by
default, and you're simply setting it to 50 (which it already is) on the
click of a button.

What you want to do is send one parameter to that SCALE() function for
zooming and one parameter for movement. (Actually, maybe two parameters for
movement, assuming you want to change the _x and _y separately.) Remember,
your SCALE() function is the thing doing the heavy lifting. By adding the
code you did to your button, you're only setting that set1 variable again --
nothing has changed. ;)

If this were my endeavor, I would rename set1 to zoom, just so I would
know what the variable was actually for. Then I would create two new
variables, moveX and moveY.

I would change the original set1 line to this (remember, we've renamed
the variable) ...

var zoom = main1._xscale = 50;
var moveX = moveY = 0;

.... now we have our two new variables set to whatever their counterparts are
in the movie clip, and the newly re-named variable zoom set to 50. In
addition, the _xscale property of main1 has been set to 50. While we're at
it, why not also set the _yscale property of the same movie clip?

var zoom = main1._xscale = main1._yscale = 50;
var moveX = main1._x;
var moveY = main1._y;

We could have laid these all out separately, by the way. Like this ...

var zoom = 50;
main1._xscale = 50;
main1._yscale = 50;

.... the other way is just shorthand.

Then, I would change the SCALE() function to handle the extra new
parameters ...

function SCALE(CLIP, ZOOM, X, Y) { ...

.... and finally, I would chop up my moveX and moveY variables the same why
that zoom (formerly set1) was doing. Pardon me as I change the parameter
names a bit. It's just personal preference, but I prefer lowercase.

this.onEnterFrame = function () {
SCALE(main1, zoom, moveX, moveY);
};

function SCALE(clip, zoom, x, y) {
startZoom = clip._xscale;
endZoom = zoom - startZoom;
startX = clip._x;
endX = x - startX;
startY = clip._y;
endY = y - startY;
clip._xscale = startZoom + (endZoom / 5);
clip._yscale = startZoom + (endZoom / 5);
clip._x = startX + (endX / 5);
clip._y = startY + (endY / 5);
if (clip._xscale < 850 && clip._xscale >= 1) {
clip._visible = 1;
} else {
// "camera"...
clip._visible = 0;
}
};

See what's going one? In your button, then, you might do this:

button1.onPress = function() {
zoom = 100;
moveX = 5;
moveY = 20;
};

Of course, you have to tweak the numbers quite a bit to make them "gel"
for you. In any case, this is only a start, but it should make sense (at
least, I hope it does). Keep experimenting with it. Think through each
step of your goal and break it down into smaller steps, if necessary.
Looking back, you should be able to see why your first attempt at the button
change wasn't going work.


David
stiller (at) quip (dot) net
"Luck is the residue of good design."