Getting Started

NodeFire does not require JavaScript coding and HTML editing experience to use. However some basic HTML editing capability and tag knowledge is recommeded for publishing stages to your web pages. Web developers with JavaScript and HTML skills can leverage the full capabilites of the NodeFire software.

Get started with the simple animation project outlined below. The project will guide you through the process of creating an element, placing keys on the timeline, and adding a bounce type ease effect.

Simple Animation

In this project we will build a simple animated bouncing ball effect with a single element, a few keys, and an easing effect. Start by opening a new stage, then click the circle create shape tool from the top button bar. Next drag create a relatively small circle at the upper left corner of the stage.

By default, a new stages active timeline is 'stage / ready' (the root stage element / document ready action tab). All style settings (colors, sizes, borders, etc...) are saved to the active timeline. Style changes are immediately visible in the visual interface, however during run-time the stage styles are only applied when the timeline they belong to is triggered. The ready timeline runs the very first time a stage is initialized in the page, so any style settings applied here will immediatly be visible when the stage runs.

In the left tree, expand the border styles section and apply a one pixel border style to the circle.

Tip: Click the gold colored value to open the popup input box, or drag the value left and right for a quick change.

Now we are ready to build the animation. Start by adding keys that move the ball from the upper left corner of the stage to the lower right corner. A key is a point on the timeline with a defined value, frames that are in between (tween frames) the keys you define are generated by NodeFire which creates the animation effect.

Expand the "location & size" styles section in the left tree, then click the black diamond button (shown as white in the image below) next to both the top and left style setting options. This will add two keys to the timeline at the position of the playhead which should still be at the beginning of the timeline.

We now have two start keys for the top and left position and just need to add two end keys for the final position. NodeFire will handle the animation frames between the start and end keys. First move the playhead right to the two second mark. Next drag the circle to the lower right corner of the stage.

To view the current animation click the preview button on the top button bar. Your animation should move from the top left to the bottom right similar to the example below...

To make the ball bounce we need to add a bounce type easing effect to the top styles key frame.

Preview the stage to see the final animation. You should have a bouncing ball similar to the one below...

To publish the stage to your web page choose "Publish [Get Code]" from the main control menu.

NodeFire Animator
Create interactive HTML5 animation effects and widgets (banners, slideshows, drop down menus, text effects, 3D animations, layouts, and more).
Latest release - v5.2
8/8/2017 - Includes new device, preview, and file interfaces! (more...)
Other Products
Web Effects
Easy to edit effects
for your website.
Follow us:
   
Copyright (c) 2016 - NodeFire Inc., All Right Reserved.