Animated scroll background


#1

Hi experts (@Seb @AlexB @Louie_Smith)

I am trying to develop something like the video below, can someone throw in some pointers on how to achieve this.

Any help will be appreciated !

Thanks


#2

Definitely a neat effect. And if it was built in Intuiface, it’s definitely custom.
The fact that the image they touch pulls up the record means that whole collection is part of a database, and is not just a video overlay. It’s an asset grid on steroids, lol.

The main thing would be to figure out how the exploding effect is done. I’m not exactly sure if that’s something that can be done in C#? Maybe @Seb would know. But once you figure that out, they probably have a results panel that follows behind the picture grid. Wherever they a picture on the grid, it moves the results panel to that spot, sets all the rest of the record info from the database in that panel, and cues the animation that reveals the results panel.

If you figure it out…or something close to it, that’d be a neat collection that I’m sure lots of people would be interested in. Myself included! Good luck Melvyn.


#3

Hi Alex, managed to figure a part of this out, however, could not figure out the exploding effect to make the surrounding disperse. Currently just have them behind the active detail window. Position binding of the active window needs to be refined too to make it appear at the right touched spot. I know you bind the x & y positions, problem is it differs as sizes of the button and active menu are both different. so sometimes the active windows goes off screen.


#4

Darn … no inputs from the experts except Alex. …


#5

@melvyn_br I’m sure many of them are recovering from the trip to Amsterdam over the weekend :wink:


#6

@melvyn_br @bomee.lafitte

Hi Melvyn, I did discuss with @tosolini how this could be achieved in theory at ISE.

But i think one thing you would struggle with is that when an image is pressed all the images move around the area of the image pressed.

Kind Regards

Louie


#7

Hi Louie,

Yes, that is indeed the hard bit, however, I think a simpler version would be to just have the menu appear in front with the moving in the back.

Regards,

Melvyn


#8

This kind of fluidity of the images moving in the background is something I doubt we can do in Intuiface. Not sure what tool they used, but it’s definitely able to handle a lot of pixels very smoothly.
Assuming you can create the image wall with some third party code in the background, the challenge would be to link the thumbnail you tapped with the Intuiface carousel. I don’t have an answer but I love the effect too.


#9

@melvyn_br

That would be easy enough to achieve.

Just have an asset with a collection of images and when image is tapped show menu group on position of image pressed.

Kind Regards


#10

Hi Louie,

Tried that, however, sometimes the menu group goes off screen. The images are small and scrolling to the menu needs to appear at the specific position touched. I bound the x & y but it goes off sometimes.

Since this is a 30 ft wall, there maybe more than 1 user at a time, so each image will have its own menu group bound.

Regards,

Melvyn


#11

Thank you experts for your views on this, I guess its going to be a big challenge to achieve this, let me see if i can find another program that can do something like this.

@AlexB @Louie_Smith @tosolini thank you, definitely appreciate your views on this


#12

Happy to offer my opinion, even if it’s not super helpful! Best of luck @melvyn_br, and if you get something to work, I’m sure we’d all love to see it.


#13

Just finished (almost) recovering from ISE :slight_smile:

I confirm that the effect in the video is pretty complex to achieve in Intuiface since it relies on a physical engine. Its role is to compute in real time the position of each single object (image) based on the user input + physical laws. We used to have a prototype based on box2d engine but we didn’t integrate it in the product due to the complexity to make it usable within Composer.

Rather than reproducing this behavior, I’d try to work on a nice animation to extract an item from the collection (=> zoom it big).

Something like this (to be refined :wink: ): ImageWall.zip

Seb


#14

Thank you for this Seb, really appreciate the trouble you took to get this made. I will take a look at it


#15

Hi Seb, one quick question, currently you have it set to open the single images when touched, is it possible to have an asset flow open with a set of related images. The idea is when an image is touched in the background it brings up a subset of related images that can be scrolled through.

thanks


#16

Hi Melvyn,

For sure it’s possible, because almost everything is possible with Intuiface :slight_smile:

If you need to open only 1 asset flow, it’s actually even pretty simple, following the principle of this article: https://support.intuiface.com/hc/en-us/articles/360007181512-Associate-multiple-and-variable-number-of-photos-to-individual-items-using-Excel.
Create an asset flow fed by this second Excel sheet that lists all the images, then use a filter to display only the images related to the one you touched.

If you wanted to open multiple asset flows, it would be a bit more work today, using more columns in the main sheet to add related photos for each single photo.

Seb


#17

Hi Seb, thank you for the reply, we actually need more than 1 asset, as this is a huge wall there will be more than one user interacting with it, and different images will be touched at the same time, so each image needs to bring up its own asset flow.


#18

If you can make it so each image is always associated to the same number of images to open in that asset flow, then it can be a bit easier, having this fixed number of additional columns for each image row.


#19

Hi Seb, not sure how to do that, I am guessing wont it mess up the filters in the second sheet.


#20

No need for a 2nd sheet in this case.

1 sheet, 1 row per image in the grid, 1 column per “secondary image” attached to this “primary image”.