abeamer
Advanced tools
Changelog
[1.1.0] -
story.virtualAnimator is deprecated.
use
addVirtualAnimator/removeVirtualAnimatorinstead.
_ChartVirtualAnimator to SimpleVirtualAnimator.
Using
SimpleVirtualAnimatorgives a cleaner implementation, and by also usinganimatePropsreduces the render count when the animator has multiple animation properties.
addVirtualAnimator/removeVirtualAnimator to the story.
By using these methods instead of direct access to
virtualAnimator, allows to create maps for quicker access to virtual animators.
SimpleVirtualAnimator class.
To be used by plugin creators to simplify the process of animating their content.
--movie-pre and --movie-post parameters to abeamer cli.
These arguments to be passed to ffmpeg before/after the arguments passed by abeamer.
--gif-pre and --gif-post parameters to abeamer cli.
These arguments to be passed to convert before/after the arguments passed by abeamer.
Launch abeamer cli to VSC debugger configuration.VSC complains about too many files on the project.
This change is an attempt to solve this issue.
By having an environment variable pointing to the ffmpeg executable, ABeamer can generate a movie without requiring ffmpeg to be in the search path.
By having an environment variable pointing to the imagemagick convert executable, ABeamer can generate a gif without requiring imagemagick convert to be in the search path.
On windows the search path points to windows convert program which can conflict with imagemagick convert.
check command to the abeamer cli.
Gives the user information how to configure
puppeteerto useChromeinstead ofChromium.
It helps windows developers to test developer versions.
Using
frameRenderedallows animators with multiple animation properties to be called only once per frame. This is the case of charts and many other common canvas and WebGL virtual animators.
By having many core parts as plugins, the ABeamer will load faster and the user can opt-out parts that aren't needed in a project.
Since this will generate breaking changes, this phase will only be a preparation.
This allows the dev script teleport.sh to inject on non-release version, and in the release version to correctly inject in case the user changed from abeamer to another path.
Readme
ABeamer is a powerful frame-by-frame animation ecosystem, designed to create an animated story in the web browser and generate the file images of each frame in either a local machine or in the cloud.
Unlike VelocityJs and JQuery.animate which were built for real-time user interaction,
ABeamer allows you to build complex frame based animations and save them frame-by-frame
with transparency at high resolution and lossless compression without frame drop.
When an animated story is designed to be rendered in the cloud, no software is required to install on the local machine, allowing video hosting services, ad network, e-commerce companies many other businesses to provide a tool for their users to add text, images, and special effects to their images or videos by just using the web browser and then teleport the story to the company's machine to render the frame images and generate animated gifs or videos.
ABeamer 1.1.0:
check command to verify the requirements and help to configure puppeteer.ffmpeg and imagemagick convert.ABeamer was raised to production level with the release of ABeamer 1.0.0.
This is the first LTS version and it includes many improvements, bug fixes, a few cosmetics changes in the documentation,
and better support on Windows platform and Microsoft web browsers.
ABeamer 1.0.0 gives great access to the command-line allowing to create stories that can
be configure by the server, opening the door to multiple dimension rendering.
read more >>>
The animated-badges now are configurable by the server, and don't require the installation of local js/css files.
How to generate an animated badge with ABeamer >>>
ABeamer 0.3.2: Now ABeamer has a website and blog. Have a look: https://www.abeamer.com.
With the creation of the blog, the project updates will be described in more detail and its information can be used as documentation.
In this version includes more detailed documentation and several fixed several documentation bugs.
The major goal now is to raise the ABeamer to production level.
The roadmap was also updated and added many details.
ABeamer 0.3.1 includes chart series as expressions, allowing to plot mathematical functions.
The standard library now also includes log, log10 and exp.
read more >>>
ABeamer 0.3.0 includes the first implementation of the charts plugin.
Although there is still a lot of work for reach production stage, and the API can still change,
is already usable in projects.
This plugin, will now enter a phase of research to ensure all parameters are consistent and their names
and specifications are easy to use.
Have a look how the charts look in action or
play with them in Code Pen.
read more >>>
This version also includes:
For more details see the CHANGELOG.
ABeamer includes a web browser library, a render server agent and a command line utility.
For the ABeamer Animation Editor, read Animation Editor.
Read the requirements for details about the necessary software to install if you need to render, create gifs or movies in the local machine.
To build this project, and take it to the next level with the creation of the Animation Editor, it requires a full-time developer, please, consider donating to keep this project alive and help to tell your story or to grow your business:
paypal
Bitcoin: 1mH89kWbvffActY7FAke26t2fbJE9U6jv
ABeamer has a complex system that allows to interpolate pixels, numbers,
text, colors and much more.
ABeamer guesses the starting value and property type from CSS style information,
or if that information is given via valueStart.
prop: 'border-style'; valueText: ['dotted', 'dashed'].
valueStart: 10px; value: 100;
valueText: ['red', '#FF00AA'];
valueFormat: '%d%'; value: 100;
prop: 'src'; valueText: ['a.png', 'b.png'];
class property.prop: 'class'; valueText: ['+class1 -class2'];visible property.prop: 'visible'; duration: 1; value: 1;transform property:prop: 'transform'; valueFormat: 'rotateX(%fdeg)';ABeamer doesn't supports CSS animations, but ABeamer was designed in a way that
its animations are similar to CSS animations, therefore it's easy to convert CSS Animations
to ABeamer animations.
Besides the property interpolation described above, ABeamer also supports:
disturbance to produce random effects.
ABeamer provides several interpolators, which can be defined by:
ABeamer has following interpolators:
harmonic and damped oscillators - Rotation and Balancing motion.
pulsar oscillator.
The interpolators are chained in the following order: easing→oscillator→path.
ABeamer has a rich toolset. Extensibility and teleportation are the key features of these tools.
Unless is noticed, all the built-in tools support teleportation.
Just like in the case of interpolators, Code Handlers aren't teleported, and the tools can be extended via plugins but only official plugins are teleportable.
ABeamer has the following tools:
info flyover.
video-sync flyover [1].
text-split task.typewriter task.
factory task.
decipher task.
color-attack task.
shape task.
speech shape task.
charts task.and much more coming soon.
To create animations, It's only required to have the web browser library without the need of any software installed in the computer.
If you have nodejs already installed, install using npm:
[sudo] npm install -g abeamer
Otherwise if you don't want to install nodejs, download from here, but it won't execute the command-line utility.
However, in order to render frames, generate gifs and movies, it requires:
To render, it requires puppeteer render server npm install -g puppeteer.
Puppeteer installs Chromium by default, since Chromium is outdated and it has less features than Chrome,
before installing puppeteer, read the following note
on how to configure puppeteer to use Chrome instead of Chromium.
ABeamer also supports phantomjs but since its features are outdated it is preferable to use puppeteer.
To generate gifs, it requires to have imagemagick on system path.
For Windows users, read the following note.
To create movies, it requires to have ffmpeg on the system path.
To check if 2-4 points are installed and configured, execute:
abeamer check
Try these examples online without any installation:
Start by creating a new project using the ABeamer command line utility:
abeamer create myproject
ABeamer web browser library root is ABeamer.Story.
When you create a story, you define an immutable number of frames per second,
and all animations are interpolated based on that fps.
on file js/main.ts:
var story = ABeamer.createStory(25); // creates a story with 25 fps
The story holds a collection of Scenes.
Only one scene can be visible at a given moment in time except during the transition between two scenes.
It represents the natural concept of a scene in a storyline.
By using Scenes, ABeamer can speed up the processing speed by reducing the global amount of calculations.
The bare-bones of a html file:
<div class="abeamer-story" id=story>
<div class=abeamer-scene id=scene1>
<p id="hello">Hello world</p>
</div>
</div>
The bare-bones of a abeamer.ini file:
$abeamer-width: 200;
$abeamer-height: 100;
The bare-bones of a scss file:
@import "./../abeamer.ini";
body,
html,
.abeamer-story,
.abeamer-scene {
width: $abeamer-width + px;
height: $abeamer-height + px;
}
Html Elements with abeamer-scene class are added automatically.
Scenes can be added manually with the following code:
var newScene = story.AddScene();
Creating scenes with abeamer-scene class is the preferable way.
You add animations to the scene defining the time in 'seconds', 'milliseconds' or 'frames'
but if it's defined in time, these are converted to frames based on the story fps.
scene1.addAnimations(
[{
selector: '#hello', // dom or JQuery selector
duration: '4s', // at 25fps, the duration is 100 frames
props: [
{
prop: 'left', // property, text, url to animate
easing: 'easeOutQuad', // easing
value: 100 // end value
}
]
}]
);
You can add multiple properties in parallel or off-sync with the position or advance parameter.
ABeamer command line utility is used to:
abeamer check.abeamer create.abeamer serve.abeamer render.abeamer gif.abeamer movie.For detailed examples, read: Command Line Utility.
Read Requirements for details about the necessary software
to install if you need to render, create gifs or movies on the local machine.
ABeamer
was built on Linux/Chrome/Puppeteer and tested on Windows, Firefox, Opera, MS IE11 and MS Edge.
To keep an healthy cooperation environment, before posting an issue, please read Code Of Conduct.
Report issues on github.
(c) 2018 Alexandre Bento Freire
FAQs
Animation for the cloud
We found that abeamer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.