Highlighted

How to insert an iFrame in Animate CC?

Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

I'm doing a walkthrough with animations, that I need to export in HTML 5, but also what I want to include is an iFrame to load a google map on it.

Is it possible to have a google map inside a canvas with Animate?

I would appreciate some help a ton!

Regards,

Hugo

Adobe Community Professional
Correct answer by JosephLabrecque | Adobe Community Professional

If you use any of the HTML5 Canvas components, they get added to a DOM overlay layer which rests atop the actual canvas element. With that layer existing... you could use some JavaSCript target it and add child elements (such as an iframe).

You could also write your own component specifically for this task:

https://www.pluralsight.com/courses/animate-cc-building-custom-html5-components

TOPICS
Discussions

Views

1.8K

Likes

Translate

Translate

Report

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

How to insert an iFrame in Animate CC?

Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

I'm doing a walkthrough with animations, that I need to export in HTML 5, but also what I want to include is an iFrame to load a google map on it.

Is it possible to have a google map inside a canvas with Animate?

I would appreciate some help a ton!

Regards,

Hugo

Adobe Community Professional
Correct answer by JosephLabrecque | Adobe Community Professional

If you use any of the HTML5 Canvas components, they get added to a DOM overlay layer which rests atop the actual canvas element. With that layer existing... you could use some JavaSCript target it and add child elements (such as an iframe).

You could also write your own component specifically for this task:

https://www.pluralsight.com/courses/animate-cc-building-custom-html5-components

TOPICS
Discussions

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 08, 2019 0
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

The HTML5 canvas element is a 2-dimensional bitmap. You can put pixels in it. Nothing more, nothing less.

If you want to include any other native HTML elements "in" your canvas document, you have to fake it by floating them above the canvas element.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2019 1
Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

I found an old tutorial in youtube, but it is for Adobe Edge.

Adding a Google Map - YouTube

Do you think this works for animate CC?

I have to clarify that I'm not a coder.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2019 0
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

If you use any of the HTML5 Canvas components, they get added to a DOM overlay layer which rests atop the actual canvas element. With that layer existing... you could use some JavaSCript target it and add child elements (such as an iframe).

You could also write your own component specifically for this task:

https://www.pluralsight.com/courses/animate-cc-building-custom-html5-components

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2019 1
Community Beginner ,
May 09, 2019

Copy link to clipboard

Copied

Thank you so much JosephLabrecque​! I'll watch that training.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2019 1
Adobe Community Professional ,
May 09, 2019

Copy link to clipboard

Copied

You can add any js library to ANCC in global. I suppose it would work but I have not tried it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2019 1
Community Beginner ,
Mar 16, 2020

Copy link to clipboard

Copied

Did you manage to insert the iframe in Animate CC? I watched the video-example with Edge Animate but this doesn't work in ANCC ... Struggling with the same problem... 😞

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2020 0