Can an image be placed that's bigger than the Scene's borders?


#1

Hi everyone!

I’m a new user of Tumult Hype and a new visitor to this forum. I’ve run into problem with a project, and would appreciate any advice. :slight_smile:

I’m creating a multimedia interactive for an ipad. The subject is on forests, and a have a page (or rather ‘scene’) which has a illustration of animals and plants in a forest environment. I’d like to have the client be able to pinch on the ipad screen to zoom and out, nad to swipe to go to different areas of the illustration. He/she can then tap on a particular animal, and a small pop-up box will appear providing info.

My concern is how to place the illustration. The ipad (using a ‘landscape’ orientation) is at say at a 1024 x 768 px setting.

The illustration (which is actually oriented at ‘portrait’ can be scanned to any size) , is currently scanned as 5000 x 10123 px. This can be reduced if need be.

The reason the illustration is so big is that I want the client to be able to zoom into small details in the forest scene.

How do you place an image that is larger than the Scene size in ‘Hype’? Do you have to create vertical and horizontal scroll bars to allow the viewer to access the whole illustration?

Attached is screen capture. As shown here, the illustration extends beyond the edges of the scene’s borders. Hopefully, the client can then pinch and scroll all over. But when the project is exported, the ipad doesn’t allow this. The illustration gets cut off at the borders. You can only see what’s within the 1024 x 768 px setting.

Hope this makes sense. Is there a solution?

Much thanks!

RH


#2

@rh009

Welcome!

Without seeing your set-up I am going to need to make some guesses; perhaps You have already done some of the steps described below.

In the following demo I have set the scene size to the iPad Horizontal preset (1024 x 768). The image used in this demo is 2145px x 1424px. Hype Project: ScrollBars_iPad.hype.zip (1.1 MB) - Demo here. Designed to be displayed on an iPad - but desktop browsers will work of course.


1) Place the desired image in a group.
Simply select the image and choose “Group” from Hype’s “Arrange” menu (or “opt-cmd-G”). You now have a folder icon in the Timeline layers panel that will simply say “Group” & inside that “Group” folder is your image. In essence what we have done is to wrap the image in a “div” tag.


**2) Next select the "Group" folder** (which You can rename) and in the "Metrics" panel choose "Scrollbars" under the "Content Overflow" heading. This "Group" is now masking the larger image.


**3) This is very important** - If You wish to be able to scroll the entire image You must make sure the upper left corner of the image is in the upper left corner of the "Group" that contains it. The image will not scroll up or to the left of the container's boundaries in a desktop browser, iOS device, etc. - even if the image extends further in those directions (hidden by the "Group" masking). The image will only scroll right & down from its placement in the "Group" container.

Below shows the setup position to make sure all of the image can be scrolled to. The yellow dotted lines indicated the “Group” that encloses the image. The “Group” is set to the “iPad Landscape” Scene size. The grey area with the dots shows where the image is (off-Scene).



4) The final step of setting the scroll of the image is optional, but almost always You will probably want to frame your image in the Scene window at a particular location. So we dip into a little coding, and the place to put this code is in the “On Scene Load” handler in the “Scene” panel.

The “On Scene Load” handler is running the “untitledFunction()” which contains the following code:

	initialscroll = hypeDocument.getElementById('scrollGroup');
	initialscroll.scrollTop = 400;  // image moved up 400 pixels
	initialscroll.scrollLeft = 650; // image moved left 650 pixels

I gave the “Group” that contains the image an “id” of “scrollGroup”. It is this “Group” of course that has the scroll bars property. In the code above the image is scrolled up 400 pixels, and scrolled left 650 pixels. The numbers can be set to whatever is needed to place the part of the image You wish to be visible within the “Group” container’s boundaries.


#3

Hello JimScott,

Thanks for the advice! It did the trick! :grinning:

RH