Can I create a scrolling image in a Hype doc without referencing external files?

Hey guys!

Is there a way to put scrolling frames in Hype 3 that only house an image, without having to reference an external url?

For example, if you go here: http://910zen.com/vd_demo3/vd_demo3/vd_demo3.html

  1. Click “SALES LEADS” Button
  2. Click “3” at the bottom in the lower nav bar

It takes you to a page where the right hand box is using a scrolling image. I believe with Hype 1, I had to link that scrolling image to an external graphic (housed on a server). Is there a way to do this so I can have this effect while setting everything up within Hype 3?

Hopefully that makes sense. Any help would be appreciated.

Thanks!

Hi,

Add you image to the Scene. The select it and Group it. You can do that using the ctrl + click to get the contextual menu or the Toolbar menu Group

Shape the group rectangle around the image as you want but if you want a vertical scroll bar the rectangle needs to be shorter at the bottom than the image.

Now with the Group rectangle selected go to the Metrics Inspector. And change the Content flow to Auto Scroll or Scroll.

Group_AutoScroll.hype.zip (62.4 KB)

1 Like

Thanks Mark!

That does work (sort of).

On Safari, there is no visible scroll bars. On FireFox, there are.

Is there a way to make only the vertical scoll bar show?

Thanks!

I am on an old Mac, Safari and Hype at the minute…

But to get vertical scroll in my example I set it to Auto and made sure the width of the Group was wider than the Image.

Ok Back on my Modern mac. :smile:

I see what you mean. On the old Mac I got a scroll bar but on this one I can scroll but the bar is missing in action?.

So I did it manually.

Using a rectangle I added the div code and image source to that.

<div class="noborder" style="overflow: auto; width:100%; height: 200px;">

<img src="${resourcesFolderName}/screen.png" style=" align:middle; width: 398px; height: 580px; margin: 0 0px;" alt="Swans">

</div>

This works. If I can figure a way of doing it without entering the html into a rectI will post back here.

Group_AutoScroll.hype 2.zip (60.4 KB)

Thanks Mark!

This appears to be very similar to the other version I had. This code would still need to be tweeked once the file is dropped on the correct server...right? Safe to assume there is not a way to do this without using code and housing the images on an external server?

Hi @robertt8

The file in question would be an image that you dragged to your resources section in Hype. This, together with the Hype generated files when exported, would live wherever you upload the files.

When you export your project any files in your resources section would be exported to a folder named your_fileneame.hyperesources. This is what is referenced in your HTML widget ( ${resourcesFolderName} ) this is special code to reference the exported folder.

D

1 Like

As DBears says, :smile: