Warning This is still an experimental technology, to push forward the development in this field, please, consider leaving your donation or become a sponsor.
Teleporting is the process of splitting the story created in one machine into its constituting pieces and then from this pieces, recreate the story in a remote machine, in order to generate the physical story frames images in this remote machine.
Teleporting allows a user to create animations just by using a web browser from a computer or tablet without the need of installed software nor direct access to the computer files.
It was created with the main goal of allowing video hosting services, ad network, and e-commerce companies to allow their users or employees to build their animation in their machines, and then generate the video on the company's machines.
It can also be used, in case where the user is on a controlled computer environment defined by the company's policy or in case there is a faster machine available for rendering, specially when the story contains heavy computational WebGL elements.
The ABeamer Animation Editor will allow to bring the remote rending to new heights.
Without the ABeamer Animation Editor, it's required that the user has basic skills of CSS and HTML. JavaScript programming skills aren't required.
Due restrictions imposed by CORS It's required that:
abeamer serve
With the current technology still has following limitations, some of them imposed due security reasons:
url("....") format
<style>
tag inside html file is allowed.<script>
files are allowed.The whole process is fairly simple, just follow these steps:
my-project
.abeamer create my-project
download animate-transitions,
and unzip to the newly created folder my-project
. When asked to overwrite the files, select 'Yes'.
This is just a complete example of story ready to teleport.
The following steps are for testing purposes, for production mode will be
described after.
Run the live server:
abeamer serve
Due CORS and since this is a local file it requires a live server.
abeamer render my-project --url http://localhost:9000/my-project/ --teleport
This will create a file called story.json
on my-project
folder.
server
.abeamer create server
Download remote-server,
and unzip to the newly created folder server
. When asked to overwrite the files, select 'Yes'.
Copy the story.json
from the my-project
folder to the server
folder.
Copy all the assets sub-folder from the my-project
folder to the server
folder.
Execute:
abeamer render \
--url http://localhost:9000/server/ \
--allowed-plugins server/.allowed-plugins.json \
--inject-page server/index.html \
--config server/story.json
This will generate the frames on server/story-frames
.
The previous steps where built for testing purposes, since the teleporter was built to be used without the need of using anything but the web browser.
For production mode:
Open on chrome the following url: http://localhost:9000/gallery/animate-transitions/
.
Uncomment both code lines on the 'animate-transitions/js/main.ts'.
And either compile using TypeScript or port those lines into main.js.
This will create the story with { toTeleport: true }
.
Which will record every part of the animation and instruct the library and plugins
to behave differently.
On chrome developer tools, you will see on the console the complete story as string.
This data was generated via story.getStoryToTeleport()
This is the data you have to send via Ajax to the remote server.
In this case, it's no longer needed: abeamer render --teleport
, nor access to the computer disk.
When a story is created with toTeleport = true
, ABeamer will:
Instead of calling render, the getStoryToTeleport
will generate data ready to be teleported.
This data must be beamed to the remote machine, usually via Ajax.
getStoryToTeleport
will return a string, if you want to add more parameters,
use getStoryToTeleportAsConfig
, and it will return an Object.
ABeamer uses only config.abeamer
record inside the generated object,
any other field can be used to store extra data.
The remote machine has an empty story body, see remote-server, where it fills with the data has been teleported and injects the plugins.
ABeamer is an open-source library, which runs inside a contained environment such as a web browser,
and doesn't allows the execution of any javascript code except from plugins.
However, in order to prevent malicious users or plugins, ensure that:
abeamer render