Scene transitions How To

More
2 years 1 month ago - 2 years 1 month ago #2820 by Nillaz
Scene transitions How To was created by Nillaz
Since LimeyFK wanted to know how I did my scene transitions I'm creating this how to.

Some notes:

You can see some absolutely atrocious example videos of these at the following links. Be aware that even since I posted these videos I've changed things up a bit on my remotes. The transitions have remained but I got rid of that stupid honeycomb background graphic and switched to a more modern looking aesthetic, in most cases either straight up black backgrounds or on certain pages I'm using a nice 2 color gradient. I'm pointing this out because it helped in 2 ways. 1: It's easier on the eyes with higher contrast and overall just looks better, and 2: things actually load noticeably faster. Loading scenes are less jarring and the soft button pop-in is sped up/improved (or at least it feels faster).

Boot Sequence

Sources

Apps

For some people what follows is probably going to look a little intimidating, but that's just because I'm trying to be thorough. The transitions look cool but honestly it's mostly sleight of hand. It really wasn't difficult for me to implement this in myServer and myDesigner, though I suppose this could become at least a little complicated depending on how exactly you have your system and remote configured plus how comfortable you are working with myDesigner and myServer macros.

Preparation is key!

The first thing you're going to want to do is figure out what things you want to use these types of transitions for and measure the amount of time it takes to accomplish the task.

If you want an animation for a bootup sequence you'll want to measure how long it takes from the time you power on to when your system is ready for use. This was easy for me to accomplish because my system is configured in such a way that pressing the power button on the remote ALWAYS boots the system to my ShieldTV scene since that is what we are using the vast majority of the time. This is beneficial for me because the timing is consistent. For me this interval is almost exactly 15 seconds in my theater room, 7 seconds in my sunroom, and 9 seconds in my bedroom. Yours will likely be different depending on your equipment in use.

If you want transitions from source to source you're going to want to time the interval it takes for your system to switch to these sources. In my case these vary depending on the source so I had to plan accordingly. Likewise, you'll want to do the same if you use soft/hard button triggers to load apps, etc. Hopefully you get the idea here, but the point is that you need to know how much time you have to work with. There are practical reasons for this. If it takes 7 seconds to switch to your Apple TV no one is going to want to wait 30 seconds for your uber-intricate animation to finish playing on the remote before they can start doing their thing. Try to match the length or if that is not possible intentionally make your transition shorter than your load time.

On to the content!

The first thing you're going to need is your transition content. Once again you will want to be practical about this when it comes to length, and once again I suggest that you start  with a clip of roughly the same length as you want the transition to last, either from start to finish or maybe through some creative editing. I will caution you that the remote might choke up if your image content is extremely complicated with a lot of fast changing colors. I had a video that I was playing with for the Shield that changed a lot of colors at nearly seizure inducing warp speed and the remote presented the animation as a slideshow. You've been warned, but note that this was an extreme outlier.

Animated icon gifs and the like work well for this since they tend to loop seamlessly, full motion video clips can be somewhat more problematic but still doable in at least some cases. For example, my boot sequence timer is simply a countdown timer video I found through the Timerino Youtube channel and I trimmed it down to my required lengths. My Apple TV logo was simply an animated logo .gif I found through a Google images search. My bluray transition is a video that I chose because it was already close to the length I needed and was able to get it just right by trimming just a smidge off the beginning and end in a way that you would never even notice.

If you have a .gif file already you can skip to the next paragraph. If your content is an mp4, .mkv, or the like you're going to need to convert it into a .gif file. I use the Giphy website for this because 1: it's free, and 2: it has some basic editing/trimming tools that come in handy. You don't have to use this site and are of course free to use whatever site/software you prefer.

Now we're cooking with gas!

Once you have your new content in hand you're ready to roll. Copy your .gif's into the smartremote/images folder, or if you like to keep things tidy maybe put them in a separate subfolder.

In myDesigner create a new scene. I opted to name each one transition-xyz where xyz was the name of whatever scene/app (and sometimes room) I wanted the transition for so they are all conveniently grouped together in the Project Files list, but you are of course free to use whatever naming convention you prefer.

Once you have your scene add a new image component and use your .gif file as the image/server variable. Add whatever other elements to the page suit your fancy.

Boot Sequence Transitions:

For a boot sequence this might become a little complicated depending on how you have things configured. For my needs personally I find it easier and more intuitive to use separate poweron/off room macros. This works well for me because as previously stated I have three rooms configured with systems that I control and they all take slightly different amounts of time to boot up, but I know there are other ways to go about this so YMMV a bit here.

If you don't use discrete poweron/off macros you may need to experiment a bit to figure out the best way to trigger the transition scene using some If|IsEQ## command logic or similar. I'm not sure I can be much help with this specifically.

If you do use discrete poweron/off macros simply add a LoadScene|the-name-of-your-boot-sequence-transition and a Pause|the-amount-of-time-your-boot-sequence-takes near the bottom of the macro just before your regular LoadScene command.

For example, the last few lines of my poweron.theater macro look like:

LoadScene|transition-timer-theater!   
//!
Pause|14.5!                                        
//!
LoadScene|shieldtv-theater!              
// fini

App Transitions:

For apps you will likely need to create a new macro, and you will have to have your App soft/hard button in myDesigner call this macro. Add a Loadscene|the-name-of-your-app-transition,  then whatever command you need to launch your app, then a Pause|the-amount-of-time-your-transition-takes, then another LoadScene|the-name-of-your-current-scene to get back to your current scene, or alternatively to whatever remote page you want to load next (kodi.html, etc.)

For example, my Netflix transition macro looks like:

Macro|
LoadScene|transition-netflix!
//!
AV|6~Launch~com.netflix.ninja!       * This command is what launches Netflix on the Shield in my theater room. Yours will almost certainly be different.
//!
Pause|4!
//!
Loadscene|shieldtv-theater!
// fini

Source Transitions:

For sources, in myServer find whatever macro you want the transition to work with. For source devices this will typically be your activate-source macro. Near the bottom just before your final command (typically your LoadScene command) add another LoadScene|the-name-of-your-transition-scene, then add a Pause|the-amount-of-time-your-transition-takes between these two LoadScene commands.

For example, the last few lines of my activate-source.apple tv macro looks like:

LoadScene|transition-appletv-theater!
//!
Pause|5!
//!
LoadScene|appletv-theater!
// fini

Test and if all is well rejoice for thou art finished! Congrats on making it to the end!

If you attempt to do this I wish you the best of luck and I hope this helps! If any of this doesn't make sense I'll be happy to clarify as best as I can.

 

 
Last edit: 2 years 1 month ago by Nillaz.
The following user(s) said Thank You: Fattykidd, andrew, randyf, LimeyFK

Please Log in to join the conversation.

More
2 years 1 week ago #3019 by andrew
Replied by andrew on topic Scene transitions How To
Thanks to your excellent description @Nillaz I've managed to do a first version of a scene transition - launching Kodi from everything being off. I like it!

Andrew

Please Log in to join the conversation.

More
2 years 1 week ago #3024 by David Li
Replied by David Li on topic Scene transitions How To
nice!

Please Log in to join the conversation.

More
2 years 1 week ago #3026 by Nillaz
Replied by Nillaz on topic Scene transitions How To

Thanks to your excellent description @Nillaz I've managed to do a first version of a scene transition - launching Kodi from everything being off. I like it!

Andrew

 
Cool man I'm glad you got some benefit from this!

Please Log in to join the conversation.

More
2 years 1 week ago #3027 by David Li
Replied by David Li on topic Scene transitions How To
Thanx again Nilaz for your contributions!
I added an article in the myServer documentation site so this gem doesn't get lost in the forum :)
allonis.com/support/documentation?view=category&id=437
David
The following user(s) said Thank You: Nillaz

Please Log in to join the conversation.

More
2 years 5 days ago - 2 years 5 days ago #3033 by andrew
Replied by andrew on topic Scene transitions How To
@David Li @davep

I'm trying to get a bit more control over my transition animation and to that end I've split it into ten separate still frames displaying 10 down to 1. I've changed the source path for the image on the transition scene to {{sky_transition_image}} and in my activate source macro I set and update that variable as follows. Unfortunately it doesn't work - the image doesn't display anything to begin with and only loads the '1.png' image just before the scene unloads and the cabletv scene loads. As you can see I tried putting in loads of LoadScene commands to see if that would help but it doesn't make any difference. I've seen the same behaviour with labels displaying text from a variable too. The label doesn't display anything until the scene is about to unload then it displays just before the cabletv scene loads despite the variable being set before the very first LoadScene.

It's as if the Pause commands completely block the updating of anything dynamic on the scene that's just been loaded - any static content (text, images) displays fine but stuff governed by the contents of variables doesn't.

Is there any way of loading a scene with dynamic content and waiting for a time period in seconds before carrying on with the macro but without blocking the updating of the loaded scene on the remote? It feels like we need a 'RefreshClient' command if this isn't happening automatically. Am I missing something?

This behaviour is the same in myDesigner simulated remote and the real smartremote.

Andrew

Code:
// Start Sky! Run|/home/allonis/sky/scripts/power_on.sh! //! // Start transition animation! SetVariable|sky_transition_image~images/countdowns/10.png! //! LoadScene|transition-sky! //! Pause|1.0! SetVariable|sky_transition_image~images/countdowns/9.png! LoadScene|transition-sky! Pause|1.0! SetVariable|sky_transition_image~images/countdowns/8.png! LoadScene|transition-sky! Pause|1.0! ... SetVariable|sky_transition_image~images/countdowns/1.png! LoadScene|transition-sky! Pause|1.0! //! // Finally everything is ready. Send the client to the appropriate page! //! LoadScene|cabletv! // fini
Last edit: 2 years 5 days ago by andrew.

Please Log in to join the conversation.

Time to create page: 0.194 seconds