Description

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.

ABeamer has following built-in flyovers:
- info
- video-sync.

More flyovers can be added via pluginManager.addFlyovers.

Info flyover

A info flyover provides information regarding current time position and frame.

see: animate-flyovers.

Example

css

#flyover {
  left: 10px;
}

html

<div id="flyover" class="abeamer-flyover"></div>

js

story.addFlyover('info', {
   selector: '#flyover',
   format: 'story-frame: ${storyFrameNr}\nstory-time: ${storyElapsedS}',
});

Video Sync flyover

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 abeamer render from attempting to sync the video while server render.
3. When using abeamer movie, set --bkg-movie parameter with the video filename to use a background video.

see: animate-video-sync.

Example

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{ }

InfoFlyoverParams.selector

public property [InfoFlyoverParams]

selector?: ElSelector;

Element selector from the story, it can be DOM or virtual.
default: .info-flyover

InfoFlyoverParams.format

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}

InfoFlyoverParams.maxPrecision

public property [InfoFlyoverParams]

maxPrecision?: int;

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

 

VideoSyncFlyoverParams

public export interface

export interface VideoSyncFlyoverParams{ }

VideoSyncFlyoverParams.selector

public property [VideoSyncFlyoverParams]

selector?: ElSelector;

Element selector from the story, it can be DOM or virtual.
default: #video

VideoSyncFlyoverParams.serverRender

public property [VideoSyncFlyoverParams]

serverRender: boolean;

If it's false, is disabled if isServer = true.
default: true

FlyoverParams

public export type

export type FlyoverParams = AnyParams
    | InfoFlyoverParams
    | VideoSyncFlyoverParams;

Generic parameters passed to a flyover function.

FlyoverFunc

public export type

export type FlyoverFunc = (wkFlyover: WorkFlyover, params: FlyoverParams,
    stage?: uint, args?: ABeamerArgs) => 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{ }

WorkFlyover.name

public property [WorkFlyover]

name: string;

WorkFlyover.params

public property [WorkFlyover]

params: FlyoverParams;

FlyoverHandler

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.