Split Flap Display

[jason23970587du8q]

Hello Adobe Community 

I hope you are all very well.

My name is Jason and I am a photo artist living in London, England

Can anyone offer any advice on the best Adobe product (or non Adobe) that will enable me to build a digital version of a Split Flap display?

A Split Flap display, also known as a Solari Board, is a mechanical display device for text often found in train stations and airports etc. Think of rotating and cascading letters that indicate a destination and time. 

I'd like to try and emulate and utilise the lovely visual effects of a Split Flap board but rather than make a mechanical object, I’d like to use a computer monitor or large screen.

I am a documentary photographer and over the last few years I have made 2224 portraits of people that live in and visit the London Borough of Camden.

Traditional ways of showing this work include printed books and magazines and photo prints in art galleries, which are all great but I’d like to try a ‘new’ take on disseminating documentary work and feel that 2224 portraits in a digital Split Flap could be very interesting.

Is there an Adobe app or program on which I can build my idea? 

My project is called jason wilde’s Free Portrait Studio [ Link removed by Moderator ]

You would make me a very happy artist if you could offer a solution to my issue.

Thank you.

Jason

[Mylenium]

There's a ton of presets and template projects for "departure boards" in After Effects and I'm sure you could find similar stock content for whatever is your 3D program of choice. There may also be an action for Photoshop that converts a text layer into such a flap thing look. So it's definitely possible, but you shouldn't expect a canned solution for your specific use case. A lot of this is just cheating because nobody wants to put up with hundreds and thousands of such animated flaps just to display a pixture, so to stick with my AE example (since that's my primary domain of Adobe programs) you'd use effects like Card Dance and Motion Tile to create the repeating flap structure and then find ways to use your photos as textures and then transition through them. At 2224 we're likely talking about just as many compositions in an AE project, though, which is an insanely big project. So again, it is doable, but you should not expect this to be in any way simple or intuitive. Even an experienced artist (that you would have to hire and pay) can easily work his fingers off on this kind of project and it is probably completely unfeasible to do for yourself if you have no such prior experience...

Mylenium

[jason23970587du8q]

Thank you Mylenium. Thats very kind of you to reply. I'll look into AE. I did consider the size and thoght that I would probably have to split the project into smaller manageable chunks. My very best, Jason

[matt33394174oppo]

Hi Jason

its late 2023 and I came across hour post.  I am after the same idea as hou but want it customizable to my liking.  Did you get help with your idea?  Thanks!

[Trevor.Dennis]

It would be easy enough to build from scratch and design to your liking.  You'd need a monospaced (Fixed width) font like Courier (Consolas Bold worked better).  Using this ready made one as a template, which has ten characters wide and seven deep, (but make it any size you like.

What I did is lay some text on top of the the above template and matched its hieght, and adjusted tracking to match the spacing.  It was then fairly easy to work out a guide layout that fitted, but I could have set the guide layout first and adjusted tracking to fit.  Bother ways work.  I am not sure that Consolas is perfectly monospaced — what do you think?

Set up blanks to knock out the holes for the letters

Merge those layers, copy again and space for the rows.

New layer at the top of the stack for the front face.

Ctrl click our merged blanks layer to load the selection, and add a layer mask to the front face.

You can lose the blanks now. We don't need it any more.

OK, Layer style bevel & Emboss for the depth, and outer glow rather than drop shadow when you want a fairly hard  and centralised shadow.  You need to change the default blend mode to Multiply.

The flip panels will be easy, but I am having to think about the line through the letters.  And I can see that those flip panels are going to cover most of the outer glow I thought I was being so clever to use.  Hmmm.

OK< that surely gives you a start.  You can use a simple frame animation to animate the text change, and two layers of text with a blank between so one reveals the other when changing.  I'd like to see a video of that operation so we'd know how to animate it.

A really nice little project.  I love it.

[matt33394174oppo]

That ia just what I wanted.  I can show you a video of what I want it to look and sound like. Is that something you can make into an app or a web app?

[Trevor.Dennis]

I watched this video last night.  You can get anidea what a transition looks like here.  

I was thinking frame animation that would loop, but you mentioned sound, and that means video.

If you want it to be interactive then that's a whole other ball game, and way outside my skill set.  You could make a frame animation that was easy to update inside Photoshop, and export out.  The trick is to have all of the layers constructed before you make the frame animation. You'd need something like 20 frames for the transition. 

The text would be Smart Objects so they could be edited.  In fact, if I was doing it from scratch, I'd use more Smart Objects.  The panels behind the text for sure.  I have copied the type layer to above that panel, and also a copy of the slit through that panel.  

Note I used a rectangular shape for the panel behind the text, because we can radius the corners.

I would work much larger than the finished product, because it is easier and you can be more accurate.  You are welcome to the layered file if it helps you. PM me your email if that's the case.

[Trevor.Dennis]

The way the animation would work is to have random letters with a lot of vertical motion blur, and flit between them with no time delay.  The absolutely crucial thing would be to have all of the panels merged for each frame.  That would give you a manageable layer count so you could use make frames from layers.  You'd do this in a separate document , and bring the front cover etc. in as a merged smart object.  It will need some planing, but it's definitely doable.

If you do it with video, then that's twice as many frames to make your two second transitions.  Give me a shout if you get stuck.

[matt33394174oppo]

Hi TD. 
here is a video for the concept... will thos work?

[Trevor.Dennis]

Absolutely.  In fact if that's the kind of scale you are looking to create, it would be a lot easier than the high resolution graphics I was thing of.  Bear in mind, I was thinking in terms of a frame animations (GIF) and would not be able to help you do an interactive animation.  That's way beyond my particular set of skills.   

BTW Have you seen the Netflix series Bodies?  It's opening credits put me in mind of this thread.

[video]

[Conrad_C]

Decided to give it a shot…the demo below was created by prepping two portraits in Photoshop, and bringing them into Adobe After Effects. It was created using 3D layers so that you could see what was going on from the side, but you could just show it from the front if you want. But setting it up as 3D would allow things such as seeing the ends of the flaps come forward and the flap itself in perspective as it falls around.

I’ll caution that this might take a very long time for a beginner, because many steps require familiarity with a long list of After Effects fundamental skills. I am not a pro at this but I know just enough to suggest how this might work.

Edit: Also, Mylenium reminds us in another reply here that there might already be effects in After Effects that do this kind of thing, so maybe you don’t actually have to set up everything I show below.

Ingredients:

• Each portrait set up in Photoshop in a single image of the correct proportions for a top and bottom flap. 
• In After Effects, set up a parent composition at the pixel dimensions of a single flap pair.
• Each portrait image is in its own composition. 
• In each of those, add a vector mask to reveal only the top half. Duplicate the composition and move the mask to reveal only the bottom half. 
• Add this pair of compositions to the parent composition, so that this “flap pair” becomes nested comps within the parent composition. 
• Add another pair of compositions set up for the second portrait. 
• For the layer of the top flap of the first portrait, set up X axis keyframes for the Rotation property. Between the first and second keyframes, apply +180 degrees rotation. 
• Repeat for the layer of the bottom flap of the second portrait, but it should start at -180 degrees and end at 0 degrees. (After Effects pros would probably tell me I need to just parent that property to the other flap so that it follows along.) 

This is only a quick and dirty attempt, so I left out lots of details, and there will be refining to do, such as making sure the layers of the first and second portrait are offset so that they don’t show through each other during the rotation. Again, someone with After Effects training would look at the steps and say “Ah, I get it, and here are the further problems we need to solve to make it look really convincing.”

To build it out further:

Duplicate this parent flap pair composition as many times as needed for as many portraits as you will do.

Then swap out the portrait images with the different ones that need to be in each flap pair, using the Replace Footage command. I am not sure if there is a way to auto-populate each layer with a different portrait using an After Effects script, but it would be worth looking into.

The concept movie you uploaded shows the flaps falling kind of at random all over the board. You do not want to animate this manually. You want to take advantage of After Effects expressions, using a random expression that randomizes the times when each of the flaps starts falling, within a time span such as 5 seconds.

I am definitely not an expert at expressions or scripts…

[Trevor.Dennis]

Nice job Conrad.   I had planned to make use of the flicker effect we might see with a real life split flap noticeboard at a railway station, by way of example.  That would work with the jerky stutter effect we associate with Frame animations. In fact, if I was doing it with video I'd slow the flap movement to 12fps.

You have done a lovely job of pivoting the flap, so to speak, complete with perspective.  I was going to cheat and try for a Rollerdex effect with intermittent frames of black and the top of a random character.  A dozen such frames before snapping to the end text and hope that the viewer's eyes and brain would put it together.  This would be easy to edit, but you need to Export > Save for web every time you edit.  That's why I was saying that an interactive display was beyond my skill set.