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:

  1. Use Firefox to test the animation with a background video.
  2. Set serverRender: false to prevent beamtoix render from attempting to sync the video while server render.
  3. When using 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,
});
 
#API
 
## InfoFlyoverParams

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.
    example: story-frame: ${storyFrameNr} story-time: ${storyTime}
    default: ${storyFrameNr}

public property [InfoFlyoverParams]

maxPrecision?: int;

Maximum number of decimal digits for time macros.
default: : 4

 
## VideoSyncFlyoverParams

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.

 
## WorkFlyover

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.