Insert an image in element / shape from resources?

Is it possible to insert an image into an element shape, for instance a rectangle, so that after I double click the rectangle and add my text, can I then add an image from my resources, and the image and text will scroll (if there is sufficient text)?

I’ve noticed that I can highlight and copy stuff of a webpage and then click the html button on the floating edit toolbar and paste what I copied and the images and text with links all show up and work and scroll. but I wondered if there is a way to insert an image locally from my resources in the project? ( *But not as a background image in the shape)

Hi Locky,

Saola Animate doesn’t supporting inserting an image from a project resources as content of another element.
You can use the HTML script like <img src="resources/image_file_name.extension"> to do that.
However, the path to the resources folder are different in Canvas, preview and HTML5 output so this method only works when exporting to HTML5 output. It doesn’t work in Canvas and when previewing in a browser.

You can also use two elements (one shape with text and one image), group them, set the group overflow to Auto, and adjust size and position of the group and the two child elements.

Regards

Hi Toan,

The 2nd suggestion you gave works the easiest, it does most of what I needed and most importantly you can see instant results in the preview…cool how that works when you group the two elements and then you can drag the image around exactly where you want, plus you can color the background of the “group element”, this is a great work around, thanks! :+1:

( Is text wrapping around an image possible this way, it does not look possible )

It’s not possible, unfortunately.

I did find one way to kind of fake a text wrap, I can indent the beginning of each line of text and position the image in front of the indented lines of text. :slightly_smiling_face:

The text in the example is just text I took off a web page for filler text, not my own words.

This one looks wrapped even better, I adjusted each line to fit the curve of the tape reel.

Yes, your workaround can be used for fixed-size elements.
Be aware that text can be rendered a bit differently in different browsers. So you should preview on several browsers when wrapping text this way.

You are so right, I found that out just after posting…I tried it on 3- popular browsers and I noticed just (1) image with some text works pretty good, but as you start adding more images and text, things don’t always line up correctly (image placement with the text). Oh well, in a pinch I can probably get by using (1) image with a couple paragraphs, that will work for me, thanks for you input Toan, as always great advice!