Interface Overview

NodeFire is an online visual tool that generates browser controlled HTML5 / CSS3 transition animations and widgets. NodeFire is fully supported by all modern browsers, tablets, and smart phones. Down level animation support runs for all CSS styles supported by the older browsers (down to IE7), or deliver alternate content.

NodeFire is the first and only visual tool to create hybrid browser controlled CSS3 transitions with synchronized script based key frame animations. The advantage is that CSS3 transition animations run much faster and smoother than scripted key frames, especially on tablets and smart phones. Key frames with CSS3 transition support will automatically be handed over to the browser for faster rendering. Key frames utilizing NodeFire features that exceed the CSS3 transition animation specs. are automatically rendered by NodeFire's scripted tweening engine. Scripted key frames run in true time along with CSS3 transitions, even when both are required on the same element at the same time.

Visually leverage the full power of the browsers CSS3 transition support, then go beyond it to create stunning effects with NodeFire's hybrid scripted key frame capabilities.

Compatibility

The NodeFire visual interface is fully supported on Mac, Windows, and Linux in the latest versions of FireFox, Chrome, and Safari.

There are minor pros. and cons. to the visual interface in each browser. The features available are identical in all, however in our testing FireFox is the most responsive and quickest running. Chrome is another good choice and runs animations very smoothly, however we have noticed some element dragging delays (typically for the first 30 seconds or so of visual interface use).

Note: The above information applies to the visual interface only. The animations you publish are fully supported by all modern browsers (including ie9 & ie10). Old browsers run all animation key frames with CSS matching the browsers capabilites back to ie7.

Element Basics

Top Button Bar: The top button bar can be used to add new stage elements, select elements, modify element content, and preview your design. The "Create Element" buttons are drag create tools. Click the button for the element type you want to create, then use the mouse to drag create the new element directly on the stage.

Tip: To nest elements, start drag creating while the mouse is inside an existing stage element. Elements can be nested to any depth. Positioning and CSS styles for the nested element will be relative to the parent.

Element Type Bars: These button bars are to the lower right corner of the stage editing area and automatically switch depending on the types of elements selected. There is a unique bar for each element type that has specific buttons which perform editing tasks unique to the elements intended function. The example button bar depicted below is specific to horizontal 3D rotating polygon faces.

Tip: Elements which are drag created or moved to an existing element types parent automatically join the element type as a new item (e.g. add a new list item by drag creating the element in the parent list container). Right click the item and choose 'remove from layout' to join the parent element as a standard child box element.

Left CSS Styles Tree: The left tree is where all styles associated with the stage and stage elements can be applied. At the top of the tree is the 'Apply To' box, here you can switch between inline styles or choose a global CSS rule. When 'Apply To' is set to 'Selected Elements', styles are individually applied to the selected elements on the stage. When a CSS Rule is selected, styles will be applied to all elements (existing and new) which match the rules criteria.

To edit a style setting click the gold colored values, a popup input box with value editing options will appear. For quick editing, drag the gold colored values left or right. Dragging string option type values will rotate them through the availalbe CSS settings. A setting of 'auto' can be applied to some numeric values such as top, left, width, height, margin, etc... To open a color dialog click on the color indicator box to the left of 'RGBA'.

Tip: Multiple rules or a combination of rules and stage elements can be selected in the right tree (CTRL + Mouse Click). Style settings are applied to all selected elements and rules.

Stage Design Options Bar: This button bar is to the lower left corner of the design area. The button options control various stage interactivity features and global element visibility. To hide an individual element you can also click they 'eye' icon for the element within a tree.

Tip: When the 'drag & drop' nesting button is on, elements on the stage can be dragged to and made a child of any other element. Note: Dragging with the center move selection handle disables drag & drop nesting.

Timeline Basics

Setting The Active Timeline: Animating stage elements and CSS rules first requires selecting an active timeline (by default the root stage elements document ready timeline is active and selected). NodeFire supports unlimited timelines for each stage. A single timeline is active and may be edited at any given time.

The active timeline is a combination of the selected event element and event action tab. The event element can be any element on the stage, or the root stage element itself. The event action tabs are directly above the timeline and determine the action on the event element which will trigger the timeline (document ready, mouse over, mouse click, etc...)

Tip: To quickly switch between your stages defined timelines click the timline action event associated with your elements in the right reference tree.

Adding Timeline Keys: Click a style values diamond button (left tree) to add a new key frame to the timeline. The key will be added at the position of the playhead.

Tip: If the playhead is after an existing size or position key, keys will automatically be added when dragging or sizing elements on the stage. If keys are not auto added to the active timeline, your drag and size stage edits will be applied to the default stage / ready timeline.

Timeline Interface: The active timeline is shown below the stage at the botoom of the visual interface. The timline is organized as a hierarchial list of elements and CSS rules, each with a hierarchial list of style component values that have at least one key which has been added to the timeline. Any style for any element or CSS rule can be added to any timeline, there are no restrictions. This allows the user to decide the best way to group and organize multiple animations (similar to scene support in other tools).

Each timeline may also contain default settings for any style, these values are not represented in the timeline, but instead are shown in the left tree when the playhead is at 0 and the selected elements style does not contain a timeline key defined at position 0. Default values are applied when the timeline is triggered by the associated event elements action tab. When you are first getting used to the software pay close attention to the active timeline. It's common to accidentially apply values to elements with the assumption that they will automatically be applied to the default stage / ready timeline.

Tip: Default values set in the left tree apply to the selected element or rules when the active timeline is triggered. If you need to set a style on an element or rule as an initial setting to be immediately applied when the stage runs, first switch to the root stage elements ready timeline, then apply the value.

Ease Options: Easing modifies the rate at which each frame progresses from the starting key value to the ending key value. Use easing to create acceleration, deceleration, bounce, elastic, circular motions, and more. Linear is the default which is the same as not applying an ease effect. In type easing starts off slow and ends fast, while out starts fast and ends slow.

Tip: To edit the ease settings on multiple key frames, first drag select the frames or hold CTRL and click select the desired frames. Next click any one of the selected frames to open the ease dialog, your changes will apply to all selected key frames.

Key Frame Editing: Key frames are easy to manipulate on the timeline with a host of quick editing features. Both keys and key frames can be selected by clicking with the mouse. Use the mouse to drag change positions, split keys, or drag select multiple keys. Use the keyboard (DEL) to delete keys, or select multiple keys (CTRL + mouse click).

Tip: To split or move a key frame first select the frame, then hover the frame with the mouse. Use the left center or right grab handles to edit the position or split a key. To combine keys drag a key on top of another key.
Tip: Key frames shown with a solid thin line are non-numeric at one or both ends, or the start and end values are equal.

Terminology

CSS Rule: In NodeFire CSS rules are applied to the browser and have the same capabilites as standard rules defined with a stylesheet in a web page. Rules are accessible for selection at the top of the left styles tree in the 'Apply To' box. CSS Rules apply to all stage elements matching the rules criteria and can be applied and animated like a standard stage element.

Ease: Easing is applied to tween frames (frames between two keys) and changes the animation rate. Typically easing is used to accelerate or decelerate an animation, however bounce, elastic, and circular motions are also possible.

Element: NodeFire elements are standard HTML DIVs. Elements can be added to the stage with the create tools on the top button bar. You can add any inner HTML to each element, nest elements in any other element, define links, JavaScript, custom classes and more.

Element Type: NodeFire offers various element types which speed the design process of widget focused animation effects and layout intensive designs. Element types include grid layouts, lists, floats, slideshows, 3d polygons, and more. Add an element type by clicking a create tool on the top button bar, then use the mouse to drag create the new element directly onto the stage.

Event Action Tabs: The event action tabs sit directly above the timeline (ready, load, mouse over, click, etc...). Unlimited timelines can be defined, and each unique timeline is the combination of the event action tab and selected event element. When the event action tab for the selected event element is fired (mouseover, click, etc...) the unique timeline is triggered.

Event Element: Each timeline is unique to the selected event element and event action tab combination. The event element can be selected by holding the 'e' keyboard key and clicking a stage element with the mouse. When the action event (ready, mouseover, click, etc...) is fired on an event element, the unique timeline for the combination will be triggered.

Key: Keys are specific values for a style component defined at some point in time. Keys are represented by diamond shaped bullets on the timeline. Add keys to the active timeline with the diamond buttons next to any style value in the left tree.

Key Frame: A key frame is comprised of one start and one end key plus the frames in between (also known as the tween frames).

Stage: The stage is the root design space. All elements you create are descendants of the stage. Elements can be positioned outside or inside the stage. The published stage is by default a relative positioned DIV element.

Style: Styles in Visual NodeFire are standard CSS styles defined and applied according to the CSS specifications. All styles are accessible in the left tree and apply to the selected stage element, CSS rule, and timline playhead position.

Style Component: NodeFire breaks all standard CSS style settings into component values which when combined make up the entire style setting. For example, color values are broken down by channel. The red, green, blue, and alpha components may be individually applied and seperately animated. Style component values are hierarchial and prioritized by depth (e.g. a border-radius axis value will overide border-radius-top-left, and border-radius-top-left will overide border-radius).

Styles Tree: The styles tree is on the left edge of the visual interface. All of NodeFire's standardized CSS style options are accessible and can be applied to stage elements and rules from the tree. Click the gold colored values to change a style setting, or drag the value left or right for a quick change.

Timeline: A timeline includes stage elements and CSS rules, along with associated styles and key values. When a timeline is played the keys and their associated elements are animated frame by frame. Unlimited timlelines can be added to a stage, each timeline is unique to the selected event element and event action tab combination.

Transform 2D: Transform 2D styles are located in the left tree and transform stage elements in 2 dimensions. Transform styles work in all modern browsers, including IE9 and IE10. Old browsers that do not support the CSS transform 2D style will simply ignore that portion of the animation.

Transform 3D: Transform 3D styles are located in the left tree and transform stage elements in 3 dimensions. Transform styles work in all modern browsers, including IE10. Old browsers that do not support the CSS transform 3D style will simply ignore that portion of the animation.

Tween: Tweens are the animation frames which are automatically rendered by NodeFire and occur between two defined key values.

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.