One project with zoom sections
Copy link to clipboard
Copied
Hello!!!
Beginner user here. 🙂
I have been watching many tutorials, and I am understanding how to animate objects from one place to another. However, I am looking to build a sort of infographic that the user can click on.
In the infographic, they would be using it as a map to see what level they need so I want buttons that if they click on it, it sends them to a different part on the screen that is zoomed in. They read that, then choose another button which takes them to another part of the screen (zoomed in).
Is this possible? Has anyone done this before?
Copy link to clipboard
Copied
Hi.
HTML5 Canvas or AS3?
Please let us know.
Regards,
JC
Copy link to clipboard
Copied
I was thinking HTML5 cnavas so that I can put it on our website...
Copy link to clipboard
Copied
each part of the screen that is zoomable should be a movieclip. then you can zoom each of them using createjs.Tween.
eg,
button_info1.addEventListener("click",info1F.bind(this));
function info1F(){
createjs.Tween.get(info1_mc).to({scaleX:3,scaleY:3},500); // adjust info1_mc's transform point
}
Copy link to clipboard
Copied
Got it.
Please have a look at this topic:
The code is kinda complex, but using the code and the FLA as a template is not so hard.
Alternatively, you can also try to do this kind of interaction using timeline animations.
Please let us know.
Regards,
JC
Copy link to clipboard
Copied
it's much easier to use code to zoom than to control the camera for zooming.
Copy link to clipboard
Copied
wow, this more be more complicated then I imagined.
I don't really now code that well, so I'm not sure what all I am looking at here....
Copy link to clipboard
Copied
hold on. i'll make you a prototype. if's really easy, but i understand if your code averse.
Copy link to clipboard
Copied
That would be amazing! Thank you so much. That on my professional "to-do" list. Learn code/javascript more!
Copy link to clipboard
Copied
You can choose the proposal that best suits your needs.
The advantage of the camera approach is that you don't have to worry about timelines, tweens, registration and transformation points, and so on. You just have to replace the contents in the FLA.
Please let me know if you need something else from me and good luck!
Regards,
JC
Copy link to clipboard
Copied
The code wizard makes sense too. It's just translating what you have in your head to the language that is used there that is tricky...
Copy link to clipboard
Copied
@JoãoCésar, i hit a snag with depths. zoomed objects should move the top of the display. i had trouble with that so i isolated the issue and tried to troubleshoot it with a drag and drop approach:
https://www.kglad.com/Files/forums/depth/test_drag.html
now i have the following code in the fla (most of the lines are for debugging), but i can't find the problem with why none of the dragged objects change depth with addChild.:
this is the code in the above file. so you can see console output for debugging if you test the above file. (the non-debugging code (11 lines, is at the bottom of this message.)
var alreadyExecuted; // for debugging
var rect_num = 8;
for(var i=1;i<=rect_num;i++){
this["r"+i].tf.text += " "+i;
this["r"+i].ivar = i; // for debugging
this["r"+i].addEventListener("pressmove", moveF.bind(this));
this["r"+i].addEventListener("pressup", resetF.bind(this)); // debugging only
this.addChild(this["r"+i]); // debugging only
}
function moveF(e){
e.currentTarget.x = e.stageX/stage.scaleX ;
e.currentTarget.y = e.stageY/stage.scaleY;
// the following fails with error being generated
e.currentTarget.parent.addChild(e.currentTarget);
stage.update();
// all code below for debugging only
if(!alreadyExecuted){
alreadyExecuted = true;
console.log("readded to top =","r"+e.currentTarget.ivar,e.currentTarget.name);
for(var i=1;i<=rect_num;i++){
console.log("**",i, this["r"+i].parent.getChildIndex(this["r"+i]));
}
}
}
// this resetF for debugging only
function resetF(){
alreadyExecuted = false;
}
and the fla is uploaded too, https://www.kglad.com/Files/forums/depth/test_drag.fla
// code ******************************************************
var rect_num = 8;
for(var i=1;i<=rect_num;i++){
this["r"+i].tf.text += " "+i;
this["r"+i].addEventListener("pressmove", moveF.bind(this));
}
function moveF(e){
e.currentTarget.x = e.stageX/stage.scaleX ;
e.currentTarget.y = e.stageY/stage.scaleY;
e.currentTarget.parent.addChild(e.currentTarget);
stage.update();
}
Copy link to clipboard
Copied
So, just to give you all a better idea. I'm thinking something like this (but not this, i'll have to create something different). Where they click on the star at the bottom and it zooms into maybe the circle road and then there is a different button in the circle road that they click on, that zooms them into may the spaceship etc, etc.
Copy link to clipboard
Copied
well, i don't even see a star (unless you mean the sun which i know is a start), but that's irrelevant.
the only way i can see something like that work is to scale that entire object and use x,y properties to center whatever is of interest. and that would actually be easier than what i was suggesting.
Copy link to clipboard
Copied
the star is in the bottom right. 🙂
so if i were to use the wizard, do you know what option would be best? I can't seem to find any help documents that say what things like, "go to frame label and stop" actually mean. If i can get the action right, the rest seems easier to pick the trigger.... with the button after making it a symbol and naming it.
Copy link to clipboard
Copied
the star is below the suspension bridge??
imo, this is not a project suitable for an intermediate animate user.
Copy link to clipboard
Copied
yes it is.
I didn't think it would be that complicated to say, "when this button is clicked, zoom to here". Really just that over and over....
But if it is, i may need to find another way to do it.
Copy link to clipboard
Copied
start working on it and see how you do. maybe you have an approach that is less difficult than i imagine.
Copy link to clipboard
Copied
Thanks for all your help anyways!!
I may play around with various buttons starting and stopping a zoom in. Not sure if it will work! haha
Copy link to clipboard
Copied
trial and error isn't a bad approach. especially at the beginning to get an idea of what you're dealing with.
Copy link to clipboard
Copied
is this close to what you want, https://www.kglad.com/Files/forums/zoom/zoom.html
1. click the image to zoom
2. click the black oval to reset
Copy link to clipboard
Copied
That's close!!!! I just want it to go to a different spot, not the spot that is clicked.
Copy link to clipboard
Copied
if it's close, you can probably work it out to get what you want.
here's the fla, https://www.kglad.com/Files/forums/zoom/zoom.fla
Copy link to clipboard
Copied
Thank you for all your help! I'll experiment with that. 🙂
Copy link to clipboard
Copied
sure. keep this thread up-dated, and of course, if you have questions about that fla, ask.


-
- 1
- 2