A flyover is a function executed for every frame during render process with the main purpose of providing useful information or sync data.
A flyover operates outside a scene animation pipeline, and can it modify the content of one or more elements.
BeamToIX has following built-in flyovers:
info
video-sync
.More flyovers can be added via pluginManager.addFlyovers
.
A info
flyover provides information regarding current time position and frame.
see: animate-flyovers.
css
#flyover {
left: 10px;
}
html
<div id="flyover" class="beamtoix-flyover"></div>
js
story.addFlyover('info', {
selector: '#flyover',
format: 'story-frame: ${storyFrameNr}\nstory-time: ${storyElapsedS}',
});
A video-sync
flyover synchronizes the current render frame with a background video.
WARNING Due Chrome 'autoplay-policy', it's not possible to 'safely' use Chrome to sync with videos, In order to overcome this limitation:
serverRender: false
to prevent beamtoix render
from attempting to sync the video while server render.beamtoix movie
, set --bkg-movie
parameter with the video filename to use a background video.see: animate-video-sync.
css
#flyover {
left: 10px;
}
html
<video id=video width="385" height="288" src="assets/video.mp4" type="video/mp4">
js
story.addFlyover('video-sync', {
selector: '#video',
serverRender: false,
});
public export interface
export interface InfoFlyoverParams{ }
public property [InfoFlyoverParams]
selector?: ElSelector;
Element selector from the story, it can be DOM or virtual.
default: .info-flyover
public property [InfoFlyoverParams]
format?: string;
Text patterns supporting '${}' macros.
Supported macros are:
storyFrameNr
- current render frame within the story.storyElapsedS
- number of seconds elapsed within the story.storyElapsedMS
- number of milliseconds elapsed within the story.storyElapsedM
- number of minutes elapsed within the story.story-frame: ${storyFrameNr} story-time: ${storyTime}
${storyFrameNr}
public property [InfoFlyoverParams]
maxPrecision?: int;
Maximum number of decimal digits for time macros.
default: : 4
public export interface
export interface VideoSyncFlyoverParams{ }
public property [VideoSyncFlyoverParams]
selector?: ElSelector;
Element selector from the story, it can be DOM or virtual.
default: #video
public property [VideoSyncFlyoverParams]
serverRender: boolean;
If it's false
, is disabled if isServer = true
.
default: true
public export type
export type FlyoverParams = AnyParams
| InfoFlyoverParams
| VideoSyncFlyoverParams;
Generic parameters passed to a flyover function.
public export type
export type FlyoverFunc = (wkFlyover: WorkFlyover, params: FlyoverParams,
stage?: uint, args?: BeamToIXArgs) => void;
Defines a function that is executed on every render step.
Use it to render elements that scene independent.
public export interface
export interface WorkFlyover{ }
public property [WorkFlyover]
name: string;
public property [WorkFlyover]
params: FlyoverParams;
public export type
export type FlyoverHandler = string | FlyoverFunc
// Displays info about frames or time
| 'info'
// Synchronizes a video current time with the story current render frame
| 'video-sync';
Flyover Name, Expression or Input Function defined by the user.
in story.addFlyover
.