Embed HTML (Webpage) Within Adobe Animate

[_Rolento_]

Hi All

I have a web-page (simple HTML/CSS page content) and I want to find a way of embedding that page into my movie (e.g. as a symbol or a frame, etc).

e.g.

Is there a way that I can do this?

Perhaps it is possible to create an IFrame (within Animate) and load the web-page into it?  However, I dont know how to incorporate HTML (e.g. IFrame)

Please note, I am new to Adobe Animate and I have been trying to figure this out for days and have had little / no luck (I have searched various forums with no luck).

Any help you can provide would be appreciated.

Rolento.

[kglad]

what kind of animate project? as3 or html5/canvas?

[_Rolento_]

Hi kglad,

I have created an AS3 project.  In an ideal world there were be an object like the good old TWebBrowser (i.e. like you would get in Delphi/etc).

Regards,

Rolento

[kglad]

if that's an air project use stagewebview to load your html.

otherwise:

1. you can load the code of your html, css, etc and parse that and display.  in general, not an easy thing to do.

2. link to the html.

[_Rolento_]

Hi kglad,

Unfortunatel I am not using Air - so I guess I need to use a different approach.  I think what I will do is the following (and IMO this is a hack at best!)

1. Create a rectangle shape/symbol within Animate and place that over the region I want my HTML page to appear

2. When I want to display the web page I do the following:

2.1 get the x1, y1, x2, y2 coordinates of the rectangle shape (as defined in step 1)

2.2 call a javascript function (that resides on the web page - i.e. not in Animate) called showFloatingWindow(x1, y1, x2, y2) passing in the coordinates that correlate with the shape location as defined within the Animate canvas.

2.3 the showFloatingWindow() function causes a floating DIV/Frame etc to appear at the specified coordinates

2.4 the DIV will then display the HTML page content

Not what I would call an elegant solution - but I think this could fool the user into thinking that the HTML page is in fact part of the web-app as developed in Animate.

This might be a crazy idea... but in theory it should work

[pziecina]

Animate uses the html5 canvas element, which is then embedded into a web page. You could create a web page using javascript, (which is what angular.js does) but you cannot place all the html elements that make up a web page inside a canvas element, (invalid code if you try).

[_Rolento_]

Hi

I dont think I 100% understood what you described.  As I understand it, you are saying that it is possible to create a webpage using Angular/React etc, the you can embed an Animate HTML5/Canvas into that webpage - but not the other way around?

I know in React for example you can create your own HTML tags that render whatever you like, is there a way of referencing such a tag from within Animate?

Thanks

[pziecina]

_Rolento_  wrote

Hi

I dont think I 100% understood what you described.  As I understand it, you are saying that it is possible to create a webpage using Angular/React etc, the you can embed an Animate HTML5/Canvas into that webpage - but not the other way around?

I know in React for example you can create your own HTML tags that render whatever you like, is there a way of referencing such a tag from within Animate?

Thanks

The problem is that the html5 canvas element has no way of knowing what even a simple h1 element is, or how to render it. Remember the canvas element is literally a container for drawing using javascript, nothing more. It has no way of knowing what to do with anything unless you tell it how, which is what Animate is doing for you.

Even text in the canvas element is being controlled by the javascript and the built in browsers api for canvas.

[kglad]

you're misunderstanding the op.  carefully read msg 1.

[pziecina]

kglad  wrote

you're misunderstanding the op.  carefully read msg 1.

The question is how to embed an html/css/js web page into a movie. I suppose I should have asked if they wish the web page to be usable, but as they then mentioned using an iframe, I assumed that they wished it to be usable.

Maybe the OP could clarify?

[kglad]

it's an a3 project, not html5/canvas.

[pziecina]

I missed that in reply #3.

[_Rolento_]

Hi pziecina

Thanks for the reply, I understand what you are saying regardin the HTML5 canvas and I can see the problem you described.

Please see my idea to resolve the problem (try not to laugh though!)

Cheers

[pziecina]

I understand what you are trying to do. The problem is that the canvas element cannot parse any html/css/js used in a web page, so nothing would show.

Your 2.x workflow would have to be modified, (I don't know if this would be satisfactory). instead of trying to render the html page, you could use an image of the page, and place 'hit' regions over the relevant html elements that you wish the user to interact with.

Swapping an image is one of the simplest things you can do in the canvas, so providing you have the hit regions defined for each page that the user can visit, it should work. I do have one question though, why do you wish the html page to show inside a canvas?

It is much simpler to create a html page, then insert an iframe to the 2nd html page, but there are restrictions. Security wise linking an iframe to a site not on your server, or a page without a secure site reference, will bring up a security warning in all modern browsers. Also if you do not have permissions from the 2nd html site, blocking your link, (or breaking out of the iframe, so the user leaves your site) takes less than a minute to code.

[_Rolento_ · Accepted solution]

Hi Guys,

Ok - I have finished my little "hack" project to do as I previously outlined - i.e.

1. Create a rectangle shape/symbol within Animate and place that over the region I want my HTML page to appear

2. When I want to display the web page I do the following:

2.1 get the x1, y1, x2, y2 coordinates of the rectangle shape (as defined in step 1)

2.2 call a javascript function (that resides on the web page - i.e. not in Animate) called showFloatingWindow(x1, y1, x2, y2) passing in the coordinates that correlate with the shape location as defined within the Animate canvas.

2.3 the showFloatingWindow() function causes a floating DIV/Frame etc to appear at the specified coordinates

2.4 the DIV will then display the HTML page content

It certainly is not what I would call an elegant solution - but it works quite well and from an end users perspective you would think it is part of the same web-app / movieclip.

So in summary:

1) web page before - i.e. hidden iframe, but showing workarea within Animate:

2) Now when the user clicks the button I dynamically obtain the coordinates of the workarea symbol (i.e. the black square region) and invoke a javascript function that causes a floating DIV/IFRAME to appear of the specified workarea dimensions.  I also pass in the target URL to load:

The screenshot above gives the impression that the loaded website is being displayed within a frame that is embedded directly inside the Animate movieclip.

I have created a ZIP containing the project and attached it to this post (in the hope that it may help others). 

https://www.filehosting.org/file/details/767386/Floating%20IFRAME%20Canvas.zip

The web-page, javascript and actionscript has been simplified as much as possible - so anyone wanting to apply this hack to their project should be able to do this quickly.

Im sure there are better ways of doing this... but this is good enough for my current purposes.  If there are any improvements please share...

Cheers

[_Rolento_]

BTW - I just relised that the file sharing service I used require you to enter your email.  If you know of another anonymous free file sharing service let me know and I will upload the files there instead.

[guidop21573230]

hi, in an adobe animate project i'm trying to get a web page into a box. I want to download your file but the service doesn't work. Could you please put a link of WeTransfert. Thank you very much.

[kglad]

@guidop21573230 

you have an as3 project that you're using?  if so, for what purpose?

[guidop21573230]

yes, i have an animated adobe cc project, i want to integrate a google map into a box. 

[kglad]

an animated adobe cc project is not the same as an adobe cc animate project.

and an adobe cc animate project can be any of about 10 different types.  the main two are as3 and html5.

[guidop21573230]

is a presentation that represents routes on different maps. Previously I had put still images of maps, but with google maps it would be more interactive

[kglad]

click file>publish settings and take a screenshot of the publish settings panel. copy and paste it (don't attach it) here.

[guidop21573230]

sorry, now I understand, it's a HTML5 Canvas web project

[kglad]

thank you.

@_Rolento_'s solution won't work for you.  they were using an as3 project.

for you, it's easier: https://support.google.com/maps/answer/144361?hl=en&co=GENIE.Platform%3DDesktop#:~:text=Embed%20a%20....