Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

One project with zoom sections

Participant ,
Oct 13, 2022 Oct 13, 2022

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?

TOPICS
How to , Other
877
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

Hi.

 

HTML5 Canvas or AS3?

 

Please let us know.

 

Regards,

JC

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

I was  thinking HTML5 cnavas so that I can put it on our website...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

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

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

Got it.

 

Please have a look at this topic:

https://community.adobe.com/t5/animate-discussions/animating-the-camera-when-user-clicks/m-p/1280862...

 

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

it's much easier to use code to zoom than to control the camera for zooming.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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....

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

hold on.  i'll make you a prototype.  if's really easy, but i understand if your code averse.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

That would be amazing! Thank you so much. That on my professional "to-do" list. Learn code/javascript more!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

@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();

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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.

 

kimU_0-1665680984118.pngexpand image

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

the star is below the suspension bridge??

 

imo, this is not a project suitable for an intermediate animate user.  

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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. 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

start working on it and see how you do.  maybe you have an approach that is less difficult than i imagine.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

trial and error isn't a bad approach.  especially at the beginning to get an idea of what you're dealing with.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

That's close!!!! I just want it to go to a different spot, not the spot that is clicked. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 13, 2022 Oct 13, 2022

Thank you for all your help! I'll experiment with that. 🙂

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2022 Oct 13, 2022

sure.  keep this thread up-dated, and of course, if you have questions about that fla, ask.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines