Problem: I am a newbie and wish to import an HTML document I have created (a diagram with some animated GIF) and use Animate to add labels/arrows etc timed to a voice over. When I import the HTML document as a resource and then embed in the HTML widget, the display in the widget is a blank white page with scroll bars surrounding. My problems:
Why can I not see the diagram? If I open the HTML doc in web browsers it displays fine.
How do I get rid of the scroll bars?
I presume the diagram should be displayed in the Animate editor, not just only when it is viewed as a web page? I need to see the diagram to be able to add other elements like arrows, labels etc
I presume Anumate will support an animated GIF, which is embedded in the HTML doc?
Please make sure that the GIF files and the HTML file are on the same folder and you import all of them as resources into your Saola Animate project.
The scrollbars will display or not depending on the HTML content, and the size (width x height) of the HTML widget. Please try increasing the HTML widget size to see if the scrollbars disappear.
Hi Toan,
Thank you for the fast response.
Yes, adjusting the widget size did get rid of the scroll bars, so good to know!
The software used to create the HTML file puts the resources into a separate directory. As you suggested, I put the HTML file and resources into the same directory and then imported them all into the Resources directory for the project. It is a pity this has to be done in this way, as it ‘polutes’ this directory with a lot of different files!
I then brought the HTML file into the HTML widget, but the result was the same - a blank white canvas… and this was a test HTML with only two simple shapes in it.
Do not know what the problem is. I believe the HTML file will have a relative pointer to the directory containing the resources, so perhaps since I put all the files in the same directory it now cannot find the resources??
Yes, I think so, too. If the software used to create the HTML file doesn’t have any options to put the resources and the HTML file into the same directory, you can use a text editor to edit the HTML file to update the paths of the GIF files.
We may allow importing folders or zip package in future releases.
Hi Toan,
OK, editing the HTML file and changing all references to the resource directory (by deleting the directory path component) worked! I tried it on the simple file. Will try the more complicated one (= much more editing of HTML file!) shortly.
Yes, definitely you need to make it easier, because it is a lot of friggin’ around
In the shorter term I would suggest you make this scenario clear in the help files. In my (limited) experience of creating HTML, the software does tend to put the resources in a separate directory.
Hi Toan,
Another significant issue I will now have with putting all these files into the Resources of the Animate project is that the software used to create the HTML content has standardised naming of resources, like “1.png”, “2.jpg” etc. I therefore cannot add a 2nd HTML document of this form into the Animate project, because the naming will be the same and either not allow it to be added or overwrite existing in your Resources directory. Can I please request that the ability to place resources into separate directories within your Resources folder is escalated and actioned sooner than later?
As I talked in my previous reply, we’ll consider importing folders or zip packages as resources into Saola Animate. It’ll resolve this issue. But I can’t make any promises that when this feature will be implemented.
Hi Toan,
Just a related clarification on a process then to animate the content I was planning to bring in via HTML. I have created content for the complete image in a graphics package and, as noted previously, can export it to HTML. I would like to be able to animate (move, rotate etc) some of the components of this graphic in Animate.
However, it seems like I cannot access individual components of this graphic in Animate directly?
If I was to bring in each component separately as an HTML, then, as noted previously, resource names would be the same between the components and dumping them all in the same resource folder in Animate would not work. Renaming resources, directory links etc to overcome this would be a nightmare.
How then do I move forward with this? It seems like I might have to export the graphic parts separately as a different file format, like SVG or GIF or similar? Seems like a backward step compared to working with pure HTML…
Is it possible for you to create your content in Saola Animate without using HTML widgets?
I mean you just import resources (SVG, GIF…) into Saola Animate to use them directly, don’t use another software to create HTML page.
Yes, I think that is what I will have to do, given the current limitations of HTML import.
I can check this, but perhaps you can let me know quickly - if I import say an svg file, does Animate give me access to cut/copy/paste/animate the individual components of that drawing, or can I only perform move/rotate etc operations/animations on the image as a whole?
Unfortunately, you can only perform cut/copy… operations on the svg image as a whole.
But you can use JavaScript to access components of the svg image:
The alternative that I’m using on some of our projects is to use Affinity’s Designer Export Persona to export all the different layers of the original graphic as independent SVGs.
This way, I can use the full power of Saola to animate and interact with each element as a native resource rather than mess around with an embedded document and JS.
Your CSS will work on Chrome and Edge browsers.
However, to style scrollbars of a HTML Widget, you need to add the CSS to the widget content.
Please find the sample attached: scrollbars_styling.saolapack (2.7 KB)
