You need to tile the image. In your case, you need to create three (vertical) tiles that cannot be taller than 2048 pixels. Then import the tiles into your project, resize them to 100% and add them to the scrolling panel. See here for info.
Any image imported into SL will be scaled down to fit your project dimensions (if it's larger). You can then resize your image back to its original dimensions, but cannot go beyond 2048 px.
Thank you for the alternate approach. We use web objects to scroll pdfs but the pros come with cons.
The reservation I have with web objects is that they're embedded in the .story and do not update when changes are made to local hard-drive web content. It's necessary to delete the object and recreate the object to do an update.
6 Replies
You need to tile the image. In your case, you need to create three (vertical) tiles that cannot be taller than 2048 pixels. Then import the tiles into your project, resize them to 100% and add them to the scrolling panel. See here for info.
Thanks Michael,
So the detail in SL is that any image over 2048 in height will be compressed?
Any image imported into SL will be scaled down to fit your project dimensions (if it's larger). You can then resize your image back to its original dimensions, but cannot go beyond 2048 px.
Hello Sam,
To do this, I usually use a Web Object. The Web Object will automatically get scroll bars if the image is large.
You can use notepad to create a file. Add in this text:
<!DOCTYPE html>
<html>
<body>
<img src="picture.jpg">
</body>
</html>
You can change the img src to the name of your picture.
Then choose file Save As.
Change Save as type: All Files
File name: index.html
Here is an example project for you to look at.
Thank you for the alternate approach. We use web objects to scroll pdfs but the pros come with cons.
The reservation I have with web objects is that they're embedded in the .story and do not update when changes are made to local hard-drive web content. It's necessary to delete the object and recreate the object to do an update.
With my first example, I noticed that the WebObject couldn't scroll when running on an iPhone in Safari.
I modified the code in the index.html file and it seems to work on my iPhone now.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<html>
<body>
<div style="position:absolute; top:0; bottom:0; right:0; left:0; overflow:auto;">
<img src="picture.jpg">
</div>
</body>
</html>
This discussion is closed. You can start a new discussion or contact Articulate Support.