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