Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
blocks:app-note:sync-task [2021-08-05 12:35] mattias [How doe it work?] |
blocks:app-note:sync-task [2024-01-16 08:56] (current) admin Added note about "Playback Controls" |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | =====Synchronize task progress | + | =====Synchronize |
====Introduction==== | ====Introduction==== | ||
Line 5: | Line 5: | ||
This application note gives an example of how tasks can be synchronized to the progress of a video. In this case we just time some messages to appear to the screen but this setup can control any property available in Blocks. | This application note gives an example of how tasks can be synchronized to the progress of a video. In this case we just time some messages to appear to the screen but this setup can control any property available in Blocks. | ||
There is an example Blocks root available to download from [[https:// | There is an example Blocks root available to download from [[https:// | ||
- | In this exanple | + | In this example |
====Try it==== | ====Try it==== | ||
- | Open up the Blocks editor and open up a second browserwindow that will serve as our displayspot by type localhost: | + | Open the Blocks editor and open up a second browserwindow that will serve as our displayspot by type localhost: |
:!: Do not manually load the Example block on the displayspot. This will be done by the task. | :!: Do not manually load the Example block on the displayspot. This will be done by the task. | ||
- | To test drive, just make sure you use the root block from above and then use the little | + | To test drive, just make sure you use the root block from above and then use the little |
The nice lady should appear on the display talking about Blocks and some messages should appear in sync with the content. | The nice lady should appear on the display talking about Blocks and some messages should appear in sync with the content. | ||
Line 20: | Line 20: | ||
{{: | {{: | ||
- | ====How | + | ====How |
Line 33: | Line 33: | ||
{{: | {{: | ||
- | Line 1: We start with some housekeeping by resetting the realm variable textBulletToShow to 0. The statement shown on screen uses an opacity | + | Line 1: We start with some housekeeping by resetting the realm variable textBulletToShow to 0. The statement shown on screen uses an opacity |
- | Line 2: Assigns the Block we want on the spot. | + | Line 2: Assigns the Block we want on the spot. |
Line 3: Sets the display spots playing property to true. This is done by default when loading the block the first time. It is done by the synchronizer. This line set the video to play again after it finishes playing and we want it to loop. More on this later. | Line 3: Sets the display spots playing property to true. This is done by default when loading the block the first time. It is done by the synchronizer. This line set the video to play again after it finishes playing and we want it to loop. More on this later. | ||
Line 42: | Line 42: | ||
{{: | {{: | ||
- | Line 4-6 Loads the qoutes in to the vairables. Since we use bindings to this variables in text elements we can assign new qoutes | + | Line 4-6 Loads the quotes into the variables. Since we use bindings to these variables in text elements, we can assign new quotes |
- | Line 7. This is where we got our first cue. It is simply a wait statement that subtracts the time property of the synchronised video from our target time, when the result is 0 we can move on and do what we need to do. In the exampel | + | Line 7. This is where we got our first cue. It is simply a wait statement that subtracts the time property of the synchronised video from our target time, when the result is 0 we can move on and do what we need to do. In the example |
- | This cue pattern is then repeated and new text lines is loaded to the variables all the way to the end of this task. | + | This cue pattern is then repeated, and new text lines is loaded to the variables all the way to the end of this task. |
Line 55: | Line 55: | ||
:!: Since i have built my own mechanism to do the looping in the task I have disabled the loop property of the synchroniser inside the example block. | :!: Since i have built my own mechanism to do the looping in the task I have disabled the loop property of the synchroniser inside the example block. | ||
- | Line 70 When the video has finished playing we want to restart the whole process, this is done by running the Loop task. | + | Line 70 When the video has finished playing, we want to restart the whole process, this is done by running the Loop task. |
Line 68: | Line 68: | ||
===Other tasks=== | ===Other tasks=== | ||
- | There are also a couple of tasks that can be used as tools while timing events, such as jumping to 35 that move 35 seconds into the video and the Stop task stops and removes the block from the spot. | + | There are also a couple of tasks that can be useful |
+ | |||
+ | ====The Block==== | ||
+ | |||
+ | The Block is a composition with a synchronised video as background and the Dynamic_bubbles composition as overlay. | ||
+ | |||
+ | The synchroniser is there to allow us to track the spots time property but most of the " | ||
+ | They all got a opacity behaviour that is bound to the textBulletToShow realm variable and set to be visible at a unique number. I also apply a very short minimum fade rate to make the appearance more appealing. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ====CSS file==== | ||
+ | |||
+ | Those of you that noticed there is a stylesheet assigned to the block, it is just there to hide the play button that appears on the video when it is paused or looping. | ||
+ | |||
+ | < | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | This is the only css-class used in the project. | ||
+ | |||
+ | :!: **NOTE**: This CSS work-around isn't needed with later versions of Blocks. Just set " | ||