I am the Illustrator of this Campus Map. I provided an Adobe Illustrator vector file and I was done. I am very happy with how they brought it to life with the rollovers and popups. I also like the menu on the right side of the frame. My question is what went into this programming? Is this a complex programming project? ( I know that's relative so just YOUR opinion based on experience 1-10)Could this be accomplished in Animate 2020?It would appear to me that lots of additional JS knowledge would be needed?It also looks like a WordPress site. If so, where does WordPress begin and end on a graphic like this? I am new to the programming side so please be kind. Just trying to understand the magnitude of this project from start to finish.https://www.carrollu.edu/map

Known Participant

Question

How much programming is in this Campus Map project?

Forum|Forum|6 years ago
January 10, 2020
3 replies
754 views

I am the Illustrator of this Campus Map. I provided an Adobe Illustrator vector file and I was done. I am very happy with how they brought it to life with the rollovers and popups. I also like the menu on the right side of the frame. My question is what went into this programming?

Is this a complex programming project? ( I know that's relative so just YOUR opinion based on experience 1-10)
Could this be accomplished in Animate 2020?
It would appear to me that lots of additional JS knowledge would be needed?
It also looks like a WordPress site. If so, where does WordPress begin and end on a graphic like this?

I am new to the programming side so please be kind. Just trying to understand the magnitude of this project from start to finish.

https://www.carrollu.edu/map

How to

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

Hi.

The issues are:

1 - You're missing a this.stop(); instruction on the first frame of the main timeline;

2 - The code inside of the map symbol has two invalid references on these two lines:

Line 155:

this.buildingBut_16.addEventListener("click",buildingBut_16Clicked.bind(this));

Line 165:

this.buildingBut_17.addEventListener("click",buildingBut_17Clicked.bind(this));

If you fix these problems, then your content is going to run as expected.

Also, if you're using a recent version of Adobe Animate, go to File > Publish Settings... > JavaScript/HTML > Image Settings > Export Image > Export as and choose Texture from the dropdown menu for better performance.

For extra tips about performance, please check out the comment that starts with "Excellent!" in this thread.

Regards,

JC

J

jambojamAuthor

Known Participant

Thank you, JC for all you do. This will keep me busy for a while but I am sure I will be back.

Thanks again!!

JoãoCésar17023019

Community Expert

Hi.

I'm glad you came up with a result that you like.

Answering your questions:

- Kind of. I cannot give you a score, but I would say you need a basic knowledge of JavaScript and a intermediate knowledge of Adobe Animate;

- Certainly. Here is an example of an interactive map created with Adobe Animate that has lots of similarities with the example you provided.

https://community.adobe.com/t5/animate/best-way-to-create-an-interactive-map-with-clickable-icons/td-p/10033022

- As stated above.

- It doesn't seem to be a WordPress website. But keep in mind anyway that you would only use Animate for the map itself and the sidebar. The rest of the website should be developed outside the canvas using other HTML DOM elements, JavaScript, and CSS.

Please let us know if you have further questions.

Regards,

JC

J

jambojamAuthor

Known Participant

Thanks so much for your responses. I have made great progress but several challenges remain. For now, any input would be helpful and greatly appreciated.

1. My published file doesn't even work so I need to understand if I am publishing wrong.

2. When you test the movie you will see that it "runs" the movie timeline. I don't want that to happen. I have tried to place a Stop() on frame 1 so there is no real movement on the timeline. However, wherever I put that stop it affects all my other actions.

3. If you can test the .fla file you will see basic structure. The movie clip "map" has the pan and zoom script from one of JC's replies on another thread. It works great when I test the movie. Map movie in the back has buildings that are all buttons that call up a detail box about that building. The action "gotoAndStop(5)" on the parent timeline. buildings 1-17 work but for an unknown reason, 18 and 19 don't work. Exact same code.

4. The menu on the right is also "gotoAndStop(5)" and calls up the same detail box. I then have the entire detail box act as a close button and when clicked goes back to frame one and stop.

Any help on any of the issues would be awesome. If you see a better way to do any of this that would be welcomed as well. Keep in mind I am a beginner.

Campus Map File

or

https://drive.google.com/open?id=1IJohgEjFbJbUqGK8U7A0yTbzB0pQO7wv