zooming in on specific areas

[psych]

I know that this has been discussed before, and I have read all of the threads, but It just isn't sinking in. What I want to do is have about 5 certain spots on the stage. When the user clicks on one of those spots, I want the content in that area to be zoomed in on. Only the content of that area, not the entire stage. I know that I would have to make each of the areas an MC, and then probably use a resize of the MC to make it appear to zoom in. Am I correct on this? When the user clicks again, I want the zoomed area to return to normal size. I know that this has to be possible.

I have been playing with MC's and I can't seem to figure them out. Are there any good tutorials on the web that pertain to MC's? I haven't found any in my search.

My deadline on this project is approx 2 weeks, so any info that you could simplify for a newbie would be greatly appreciated. In the meantime, I will continue my search and my tossing the ideas around on the stage.

Thanks.

[Billy T]

this should do the trick

cheers

[psych]

Wow, Billy. Thank you so much. That is exactly what I had in my mind, but it never came out right on the screen when I tried. And record response time too.

Thanks.

[psych]

I've run into a small problem. I now understand how to make the resize. I have an MC and have gotten it to resize to resemble a zoom in, however, I can not get it to resize back to original size and location. Basically, I was playing around with Billy's file and inserted my own graphic for a new button (thus not using the single image Billy used on all of the other buttons). The image will resize larger and in the specified location and when I mouse over when it is zoomed it will show the correct mouse over graphic, but it won't return to original size when I click for a second time. Do I need something else? I want to have 5 separate images (MC's) be resizable, not one image making up all of them.

Thanks.

[Billy T]

post your file...

[psych]

I figured out what was wrong. Small syntax error. I put a space where there shouldn't have been one.

Thanks for all your help, Billy.

[psych]

OK new problem. I have different images that resize when clicked, however I have an overlap that I don't want. I have tried swapDepths and it seems to work only some of the time. I want whichever image that is being enlarged to be brought to the front. If "Image A" is clicked, then I want it to be visible over "Image B" and vice versa depending on which section is clicked. I attached the .fla so someone can look at what I did with swapDepths and let me know what is going wrong.

Thanks.

[Billy T]

you can set a depth as your argument in the swapDepth action

therefore, say your layer with the buttons has 7 clips, their depths would range from 0 to 6.

so just give all your buttons an action such as

this.swapDepths(6);

you should buy mookes book - actionscript, the definitive guide

really good

cheers

[psych]

OK. Sorry for asking so many questions, but up until now all I have done is simple presentations using Flash.

Upon looking up information about MC's and swapDepth, I have a question. Do I have to specify the level that the MC's are loaded into to be able to specify where they swap to? I am not clear on this. I also read that the MC's have to have the same parent MC. That should mean that having all the MC's in the main timeline should be fine, right?

This is confusing, but your file has helped me tremendously, Billy. I am learning as I go.

Thanks.

[Billy T]

all on the main timeline is fine

you dont have to tell flash where it is currently located - just where it has to go

ie

this.swapDepths(6);

cheers

[psych]

I've got the images swapping depths, however, if there is a point where they overlap, when you click on the overlapped section, the bottom image will appear on top of the top image. But only when you click on the overlapped space. Is there some way to stop this from happening. It's not too big of a deal, but it would be nice if it didn't happen.

I have included the fla so you can see what's happening.
Thanks.

[Billy T]

I couldnt see the problem you are describing

one thing I didnt understand is why you were increasing _root.maxDepth every time a button was clicked?

[psych]

The problem happens when you click one of the smaller boxes (License server or netView). While they are enlarged, if you click in an area where the enlarged box overlaps the Capture box, the Capture box will appear in it's original state (not enlarged) in a portion of the enlarged smaller box. If you click on an area where the 2 do not overlap, the problem does not occur.

I have the maxDepth changing because that is the way that I could get the images to swapDepths. I tried swapping like you suggested, but I couldn't get it to work. One was always on top with the second one never swapping. Maybe I have done it all wrong. Like I said earlier, I am a serious newbie when it comes to MC's.

Thanks for your help, Billy T.

[Billy T]

oh yeah I see your problem...

not using the resetButtons function?

not sure if thats the prob

I'm in a rush now...will try and remember to respond tomorrow

cheers

[Angelozzu]

I have a similar problem in the sense that my project contains a very large chart that I had to break up into viewing sections. Basically when you open the file I want to be able to view the entire chart but there are buttons you can click which will cause the chart to zoom into a specific part. I would like to have a menu at the top with buttons- Main, Part 1, Part 2, Part 3, and no matter where you are, say Part 2, and you want to view 3, click Part 3 button and it will zoom over there. Do I make sense?

Another problem I have are buttons at close proximity, when you scroll over them they are to enlarge and slightly cover the surrounding buttons, I want each button to cover the rest when scrolled upon.

I have been messing with these problems for over 6 months. Please, Help Help Help!!!

[Billy T]

first problem would just need something like the attached file - might need to add scaling to the code

second problem, use the same scaling code on rollover but would also require swapDepth() to bring that button to the front

give it a shot

cheers

[Angelozzu]

Thanks for sending me that file, two more questions I have are what about resizing? I want to start the file where everything can be seen.

Also, the buttons, I tried the swapDepth and it did not work for me, do the buttons need to be on separate layers?

Thank you very much for the help.

[Billy T]

no the layers dont matter

you need to add scaling code to the prototype

ie

MovieClip.prototype.scrollBG=function(newX,newY,ne wScale){
this._x-=(this._x-newX)/5;
this._y-=(this._y-newY)/5;
this._yscale=this._xscale-=(this._xscale-newScale)/5;
}

are your buttons buttons or movieclips? swapDepths() only works on mcs I think (and maybe text fields)

[Angelozzu]

I tried this to the file you created-

MovieClip.prototype.scrollBG=function(newX,newY,ne wScale){
this._x-=(this._x-newX)/5;
this._y-=(this._y-newY)/5;
this._yscale=this._xscale-=(this._xscale-newScale)/5;
}

and changed the box -

//initialise some variables
newX=0;
newY=0;
newScale=50;

to start but then when it opens it shows the box shrinking to that porportion, how can I just have the movie load with it at 50% and not automatically shrinking to 50%?

The buttons are buttons, I could remake them into movie clips but the problem is I made over 300 buttons and would like to avoid remaking them if at all possible, however I could convert them to MC's. Thank you again for all the help you've given me so far.

[Billy T]

change

newScale=50;

to just target the clips scale

ie

some_mc._xscale=some_mc._yscale=50

just checked the manual and buttons dont support swapDepths but they do support _visible so theres another option - hide all other buttons when you roll over a but...

if your going to do this,make a function like

function hideButs(which){
//hide all buts
for(i=0;i<300;i++){
_root['but'+i]._visible=false;
}
//then show the button provided as the parameter
which._visible=true;
}

which you would call on rollover with

hideButs(this)

cheers

[Angelozzu]

I guess I don't understand the first part. Could you give me an example to view?

I am going to redo the buttons into MC's it k, it will be alot of time but worth it I think.

However, the chart, I had that grouped together and had a button which when you clicked it, opened a movie clip, ever since I made the grouped chart into a mc, the opening movie clip don't work. I also have buttons for the chart in a drop down menu which exists in the form of an movieclip and when I went into that and put names on the property expector for those buttons, they dont work for maneurvering the movie on the main scene.

[Billy T]

I think you have buttons inside buttons and that doesnt work (a movieclip with button actions like onRelease is considered a button)

as for the first part, just change that line of code (change some_mc to the instance name of the mc you are scaling)

[Angelozzu]

So how do I have a drop down menu with buttons that will control the movie clip?

Basically, the chart is composed of persons and when you click on a person (button) a movie (movieclip) appears and opens up which will give you a bio and photos, and then after that there is a close button.

I apologize but I am still not understanding the

some_mc._xscale=some_mc._yscale=50;

do I change every newScale in the AC or just the innitialise? I tried both ways and neither seem to be working. I just need the movie to start without the chart moving until the buttons instruct them to.

I will be converting the buttons to mc which will be better anyway. Thanks for the insight on that.

[Billy T]

just change the initialise bit...as soon as flash hits that frame it will scale your mc to 50%

there is any number of ways to make dropdown menus in flash - attached is one example

cheers

[Angelozzu]

Thank you for the drop down menu, I will take a look at it tomorrow.

The scaling isn't working for me. I changed it in the innitialise and the movie just shrinks to nothing. I tried it on your file and to no avail. Am I doing something wrong?

//the prototype
MovieClip.prototype.scrollBG=function(newX,newY,ne wScale){
this._x-=(this._x-newX)/5;
this._y-=(this._y-newY)/5;
this._yscale=this._xscale-=(this._xscale-newScale)/5;
}
//initialise some variables
newX=0;
newY=0;
this._xscale=this._yscale=50;
(I tried bg as well, the mc on your file was named that.)

//the button actions
blackB.onRelease=function(){
newX=0;
newY=0;
newScale=50;
}
redB.onRelease=function(){
newX=0;
newY=0;
newScale=100;
}
blueB.onRelease=function(){
newX=0;
newY=-600;
newScale=100;
}
greenB.onRelease=function(){
newX=-600;
newY=-600;
newScale=100;
}
yellowB.onRelease=function(){
newX=-600;
newY=0;
newScale=100;
}
//the BG actions
bg.onEnterFrame=function(){
this.scrollBG(newX,newY,newScale);
}

[Billy T]

is bg the instance name of the clip you want to scale?

[Billy T]

btw as you are starting that enterframe scipt you will also need to initialise newScale

newX=0;
newY=0;
bg._xscale=bg._yscale=50;
newScale=50;

[Angelozzu]

Adding the text worked on your file but didnt on mine but my chart is quite large and Im wondering if its slow in the process, however its scrolling from the top left to the center which dont make much sense to me.

The menu does the same thing I spoke of earlier- you open the file and it shows the submenu getting smaller, how do I make the submenu zoom down from the main menu, not enlarging but just zooming down where the sides are always equal.

I am going to be remaking my buttons into MCs and that will take quite awhile, but I want to thank you for the help so far.

[Billy T]

maybe up the file when you've converted the buttons and I'll take a look

[Angelozzu]

I will do that, however, a new problem Im facing is that the swapDepth works, however these mc's that are swapping are inside the movie clip and while they work on the main stage, they are not inside the mc. What aint I doing right?

As soon as I get these buttons done I will upload the file however, I dont know how to make it into a zip. If I cant do this can I just email you the file? I ask because I know and respect that you dont want people emailing you with their work.

[Billy T]

no idea what's wrong without seeing the file or some code or something...

I think you can figure out how to make a zip file ;)

[Angelozzu]

I made two MC's and did the swapDepth and it worked, I then made a movie clip and put them inside the mc and they didnt work, took them out and they worked so maybe I need to add something to-

on (rollOver) {
_root.x +=5;
_root.costello.swapDepths(_root.bg);
}

--

GENOVESE3 is the file with the old buttons but the coordinates and
genovesechart is the file that Im using to recreate all the buttons. Only the part that is on stage- the administration part has the new buttons.

-just tried and while I was successful at converting to zip, when I go to upload it says The Document Contains No Data. Do you have an email I can send it to, I wont ever use it unless prior approval from you.

[Billy T]

need to provide the full path

ie

_root.some_mc.costello.swapDepths(_root.bg);

or use a relative path

_parent.costello.swapDepths(_root.bg);

or

this.swapDepths(_root.bg);

or whatever...might want to read the path tute in the tutes section

email is billy at tableau.com.au

cheers

[Angelozzu]

Tried all three and they are not working for me. I sent you the files and thank you for looking at them,, I will not make a habit of emailing you.

Remember the genovesechart.fla has the new buttons only on the part on the stage while GENOVESE3.fla has the old chart with the regular buttons but with the actionscripting for coordinates.

[Angelozzu]

Did you take a look and see what I mean? I dont know what I'm doing wrong but if you can steer me in the right direction I would appreicate it.

[Billy T]

I didnt get the email

[Angelozzu]

resent it to 'please dont put my email on a public forum - get enough spam already'. let me know if you get it.

[Billy T]

got the file - please explain exactly what you want it to do

[Angelozzu]

Basically, I want it to preload and open with the entire chart viewable, not shrinking to size like it innitally starts. Then you have the top menu, you click on them to manaeuver around, the Caporegime section which has all the section crews are on a drop down menu. Now as for the individual buttons, I want them to enlarge as you scroll over them, covering the surrounding buttons. And then when you click on a button, a bio will open up.

The bio is in the GENOVESE3.FLA, BioMC, which will play and display a photo and short bio.

This file is part of a much larger webpage which will have several charts similar to this, however, this is one is bar far the largest, the second largest is only 2/5 this size.

After I have these 5 charts completed, on the website, they will be displayed in a courtroom with a guy sitting in front of them, I would like to have the cursor move them left or right and then when you click on the one you want to view, it zooms to that one, and boom- this swf file loads to the chart... but thats farther in the future, for now I need to finish this part. A good example of what Im trying to accomplish can be found on stylesucks.com which displays a shape of a body, when clicked on the abdomen, it takes you to a bar holding shirts to view. I would like the charts to be viewed like that but in a much more controlled scroll.

[Billy T]

sounds like you have a number of issues here.

I'm flat out at the moment - hopefully someone else can jump in but if not start a new thread

good luck

[Angelozzu]

Well I want to take it step by step and for now the main thing is the coordinates, getting them to work the way I want.

I'll figure out the buttons next. I need to learn how to do this.

[Billy T]

the _root.newX is for the scrolling and zoomin g - nothing to do with the drop down as far as I am aware

to set the starting point for an mc simply set its properties on the frame

ie

instanceName._x=50;
instanceName._y=100;
instanceName._xscale=instanceName._yscale=50;

[Angelozzu]

It doesn't want to work for me, can you try the GENOVESE3.fla and see how it works for you because its a no go for me.

[Billy T]

that file is a pain to work on...massive and takes forever to export

if you can whip up a basic fla with just vectors that has the same structure as your original and we'll work off that

make sure you only use mcs (no buttons) and give all mcs instance names

I really can't understtand why the code above doesnt work for you - do you have the correct instance name?

[Angelozzu]

Its the largest one, I will create another chart, the smallest one I need to make. I guess I tried to get the largest one out of the way.

And I still have the issue of the overlapping buttons.

You've been helping me an awful lot, more than the 150 + that I've spent on books and I appreciate it.

[Billy T]

no worries

[Angelozzu]

Ok, this chart is the smallest one. Only two sections to zoom into.

All the "buttons" are movie clips with the exception of the buttons on the "Top" which isn't to be controlled by coordinates. But the only buttons are Main, Administration and Soldiers which should control what coordinates are being zoomed in on.

To make an example of how the swapDepth works on stage but not in a movie clip I've included both to be found on different layers, the one marked Ungroup is the buttons with the swapDepth working but the MC Layer, the buttons will not work as it will show. (Both layers are divided by a layer called Space Between) If you Control-Test Movie it will appear odd so you need to either delete or move either the MC or Ungroup layer off before Testing it.

So, the main thing here I need to learn is to get the Coordinates working, Second- to get the "buttons" to pop up over the other buttons in the mc, and 3rd- when you click a "button" to get the bio to open.

Let me know when/if you recieve this file. It is called bonanno1963.

[Billy T]

yo

I have no idea what this is doing

_root.x +=5;
_root.presinzanof.swapDepths(_root.x);

and where is the prototype?

if you want to bring the clip thats rolled over to the front try

this.swapDepths(500);

if you want to scroll and scale the clip put the prototype and all that back on frame 1, init all the vars and then adjust then via the buttons using

on(release){
_root.newX=200;
//etc
}

[Angelozzu]

The buttons are working correctly. Thank you so much for setting that right.

The only two problems I have now are the coordinates and getting mcs to load by clicking a button inside an mc.

[Billy T]

the prototype in the file I uploaded ages ago...the one that did the sliding and scaling

here's a new one - please take the time to go through the code in detail

cheers

[Billy T]

attached file should take of the coordinates

load the movies by using attachMovie or loadMovie

http://www.tableau.com.au/tutorials/attachmovie/

http://www.tableau.com.au/tutorials/load_movie_tute/

[Angelozzu]

Coordinates and loading the bio are working fabulously but at the beginning, thed damn thing keeps zooming to where I want it and not just appearing as such.

On the movie clip I put the-

onClipEvent(load){
newX=240;
newY=90;
newScale=50;
}

and still it wants to zoom to those coordinates and not load there. What am I doing wrong?

I took a look at all three files and they helped tremendously. I just have this last wrench to complete.

The only other thing would be the pop up movie clip. You click it and it appears and you can move it around the stage and then close it. However when you open it again it is in the last place it was, how do I get it to always open on the top right?

----

Got it, this works so it will load in place.

onClipEvent (load) {
this._xscale = 50;
this._yscale = 50;
this._x = 240;
this._y = 90;
}

[Angelozzu]

I got the movie clip of BioMC to work when you click on the "button" and it opens and everything. Now I'm trying to get info loaded on that movie clip-

-----

on (press) {
tellTarget ("_root.BioMC") {
gotoAndPlay(2);
myVars = new LoadVars();
//when data is totally loaded from text file:
myVars.onLoad = function(success) {
//copy the variables to the root level
// so they can be read by the display frame...
_root.bioData = this.bioData;
_root.statsData = this.statsData;
_root.imageData = this.imageData;
};
//load the data... this line must remain below the onload function
myVars.load("DATA.txt");
}
}

--

It's not loading, any idea why?

And let's say there is a "button" inside the MC that is being zoomed around and if I want it to zoom in more when clicked on the "button" how do I get that to work?

galante.onRelease=function(){
newX=50;
newY=120;
newScale=200;
}

doesn't seem to be working.

[Billy T]

is galante on the same timeline as the variables?

tell target it flash 4 syntax

try

on (press) {
_root.BioMC.gotoAndPlay(2);
myVars = new LoadVars();
//when data is totally loaded from text file:
myVars.onLoad = function(success) {
//copy the variables to the root level
// so they can be read by the display frame...
_root.bioData = this.bioData;
_root.statsData = this.statsData;
_root.imageData = this.imageData;
};
//load the data... this line must remain below the onload function
myVars.load("DATA.txt");

}

are you sure its not loading or just not displaying?

[Angelozzu]

Not familiar with flash 4 Syntax. Galante is one of the MC "buttons" inside the movie clip that I want to move. Is it possible to click a "button" and then the entire chart zooms in closer to the clicked "button" and then that bioMC opens up and plays the bio. Then when you click "back" on the bioMC it closes and zooms back to its original state before the button was pressed?

For some reason the dymanic isnt displaying. It has to be loading because when I mispelled the text document name, it said there was an error in opening it. The BioMC is a little confusing in the sense that there is a movie clip within a movie clip called "mine" where the text should actually load. I fooled around with it some more and I'm not sure what it is I'm doing wrong.

I am so glad to have got the coordinates to work, it has taken me years to get to this point. I have taken flash classes and the instructors are mediocre, majority of what they know is the difference between a motion tween and a shape tween, stop() and gotoAndPlay() are about as knowledgable on actionscript as they are. Why are they teachers? Because no one in the area knows flash and the community college doesn't mind stating it has a multimedia web design department. In the land of the blind, the one eyed man is king I guess. They were good people and they tried to instruct but they weren't knowedgable about it. When I spoke of coordinates, they said just do motion tweens to each location. I replied I have a chart with 9 areas and each part to each part would be a total of 89 tweens they said- that is why you break the movie up into different files. And as far as using the same area to display different text fields- just create different areas for different text areas.

Frustrating, truly, considering that motion tweens are just the basic ammenities and that actionscript can do it perfectly and reduce file size at the same time, someone once told me that almost everything in flash can be done with AC and if you're an expert that is all you use. The instructors just didn't grasp that and even said that it was an incorrect statement. They were offering an advanced actionscript class which I didn't waste my money on, if they don't know the material that I needed to know I shudder to think what "advanced" meant to them.

[Billy T]

you need to read the tute on paths and look at the file I uploaded again...

you need to provide the full path to variable you are trying to set (like I did in my file)

_root.newX=50;

put a trace inside the onload to see if the data is loading.

myVars.onLoad = function(success) {
//copy the variables to the root level
// so they can be read by the display frame...
trace(this.bioData);
_root.bioData = this.bioData;
_root.statsData = this.statsData;
_root.imageData = this.imageData;
};
//load the data... this line must remain below the onload function
myVars.load("DATA.txt");

[Angelozzu]

I read all your tute's in full when they were posted and its all good stuff that I can learn from. The slide and scale was very informative and that's what helped me get the coordinates correct. I looked through you're entire website and the tutorials are all fantastic, however some of them I have difficulty incorporating into my projects, but I have tried.

However, let's say I am in the Administration section of the chart and I click the "button" it and it zooms into that button (thanks again, I got that working), and then the bioMC loads, but then on the bioMC there is a button- Back and when you click it I want the bioMC to close and then the bg zoom back to Administation automatically. So I'm wondering if there is a way for the "button" being clicked to tell the button "Back" on the bioMC to go back to Administration section when clicked and also close the bioMC at the same time. Or is there a simpler way like telling the "Back" button to zoom back to the previous coordinates. Because bioMC will load all the info from all the "buttons" but the "Back" cant go back to the same place always, depending on what section of the chart you are in. Does that make sense?

And I put the trace in there and an output loads with the text in the icon. So it is working, it is just not displaying.

[Angelozzu]

I tried that. putting the

_root.StoreThisX=_root.newX
//then set var

in the top actionscript on the main page-

Soldier.onRelease=function(){
_root.SoldierX=_root.newX
//then set var
_root.newX=50;
_root.newY=-280;
_root.newScale=100;
}

and then placed the other part inside the bioMC but it is acting screwy. It doesnt go to those coordinates or even resize, it zooms to the left.

I tried-

Soldier.onRelease=function(){
_root.SoldierX=_root.newX,newY,NewScale
//then set var
_root.newX=50;
_root.newY=-280;
_root.newScale=100;
}

and I placed in the bioMC-

_root.newX,newY,newScale =_root.SoldierX

and nothing works.

What am I doing wrong? Thank you for the help so far.

[cryptoboy]

Hi, just had to say that this zoom script is the best I have come across ... Its smooth, dynamic and easily customisable ... and for the project I am working on its absolutely the answer to all my prayers ... I tried a similar script from flashkit that kept making error looping with results like images upside down and double zooms ...

For someone eager to learn this place seems the place to be, if you want to become a flash conjurer ...!

Thanks a lot ...

Cryptoboy !!!

[fredwest1]

Hi Guys,

Fantastic work! i love it and it's just what i have been looking for. I was wondring if you could help me:

I was looking at:
http://www.matthewmahon.com/

I was amazed on how they did this and wanted to try and replicate it.
Unfortunately i haven't got a clue on where to start. I have been looking at different places and using google to search. Does anyone know how to do this or can they put me in the right direction, like tutorials, fla, or what keywords i should be looking for to find out how to construct this.

I am an intermediate level flash designer, just incase..... you know what i mean... not an expert..


Any help would be great, again thanks for your time in reading this