Slide-out image gallery


#1

Hi everyone,

I’m trying to create a slide-out image gallery using a combination of masks, symbols and custom behaviours.

I want the images to slide out from their mask to show their full sized versions then retract when clicked on.

I’m got this almost working but am having an issue with the button that sits over the top of it that should only be clickable at certain points. I’m using keyframes with display changing from visible to hidden to control when this large invisible button can be clicked on.

I’m really close but there is a bug in my project that means that it jumps around and doesn’t always work. I wonder if the large button and the display keyframes are the source of these problems?

As you can tell I’m avoiding using Javascript but perhaps that would be a better way to go, however while I understand basic code I’m not much of a programmer.

I’ve attached the Hype project in case someone can take a look and tell me what I’m doing wrong!

Thanks

SlidingTest.hype.zip (302.6 KB)


Bug(?) Interior image of a Symbol does not scale properly with Symbol
#2

I should also add that the whole gallery needs to scale up and down which is why it’s in a symbol - and these are dummy images - I’m making a widget for an iBook where there is a map and you can click on points on the map to lad small image galleries for each spot on the map.


#3

@Van

Hi Van!

I really wasn’t sure exactly what You were trying to accomplish except as a general idea - which is what I created here:
SlidingTest_JHSv1.hype.zip (304.8 KB)

You will probably need to add certain parameters back in… for instance I have the sliding effect move exactly level - not drop by 16 pixels. Also I could not figure out why You have the bottom “Weemol” group. Currently it is turned off via the Hype interface (“eye” icon). I also adjusted the “opacity” properties of the top “Weemol” group when the “Picture” group is triggered.

I eliminated~changed these details so I could focus on the main issues.

Side Note:
There was some weird behavior on the part of the “Display” setting for the “Button”. It did not lose influence when hidden on that exact frame, so I isolated the “Display Hidden” by having the trigger for the “Picture” group" placed 1 frame away.


#4

Thanks so much for looking into this Jim!

Yes - this example was sloppy and should have been exactly level, not 16 pixels out.

The bottom Weemol group is necessary because I wanted the left image (wine bottles) to remain in place as the right image (house) slid over it - with that bottom group turned off the bottles disappear as soon as the other image begins to expand, which isn’t exactly what I want. The only way (non programming) around this seemed the clumsy solution of having 2 copies of the wine bottle, 1 above and one below the house, with opacity or display adjusted as needed depending what part of the timeline you’re on.

Ultimately, there will be 4 images that slide over each other so perhaps making the other 3 just disappear will be easier anyway.

I came to the same conclusion as you - I moved triggers and timeline keyframes apart by a frame and that seemed to solve functionality issues.

I’ve now come across a new issue that I think may be a bug - when you take the symbol I created and animate its scale on the main timeline going from 10% to 100% the images become totally blurry!

It’s as though Hype is taking the first 10% scale and using that pixel size throughout! I tested this on your version in the hope that it’s something to do with me but the problem remains - here is an edit of your file where you can see the problem - is this a bug?
SlidingTest_JHSv2.hype.zip (283.3 KB)

Thanks again for your time, much appreciated.

Van


#5

Hi Van!

You’ve definitely found something here - and I found a fix. But the fix is so weird that I am wondering if there is corruption in these documents - which are basically copies of one another.

SlidingTest_JHSv3.hype.zip (296.6 KB)

The Weird Fix - Part I
I copied the “Map_Weemol_1” from inside the symbol and pasted it outside the Symbol. That’s it! The additional text “(Bottles)” has been added to the name for ease of reference compared to the original inside the symbol.

I have hidden this image via the “eye” icon which affects both the animation pane & the runtime rendering visibility. It is not necessary to hide it for the scaling to work properly - it just makes things less confusing.

The Weird Fix - Part II
If You delete the “Map_Weemol_1 (Bottles)” image from the timeline, the scaling issue for the Symbol returns. Add it back (*Undo" delete) and it scales correctly again.

Note: I have not made the image of the “chalet” visible because it is overscaled to start (it is only 253 x 199px) and just confuses the issue - whereas the bottles are sharp at full scale and make a better comparison.

More research: We need to see if the scaling behavior issue (and its strange fix) I can be recreated in another original document (not a copy of these versions). But right now it is lights out for me.


#6

I can reproduce this issue on a brand new document. It will be awhile (tonight or tomorrow - California time) before I can write it up.


#7

Thanks Jim, glad to hear it’s not just me!

I did find a weird fix I need to replicate - if I put the group (not in a symbol) on the amin timeline it weirdly fixes the problem… I’ll try to upload a sample (fresh) document in the next couple of days…