NodeFire includes a unique element type that helps simplify the slideshow design process. Slideshow animations and interactive behavior options are limitless and completely up to the developer. This help document outlines how to work with slideshow templates or drag create your own from scratch.
The following illustrates how to quickly customize the basic slideshow template to fit your design requirements. This template features individual frames that animate on a delay timer from right to left. | tip: templates are accessible from the 'templates' link in the upper right corner of the interface. |
In this template each frame consists of a single background image that fills the frame. Frames are standard stage elements which can be further customized with interactive content, animations, nested elements, etc...
Specify Frame Images: To specify the background image for a frame first select the frame with the mouse. Next, edit the 'URL' style prperty in the 'Background' section within the left tree. | tip: images can also be manually applied with HTML image tags as element content (right click the frame and choose 'edit' --> 'content') |
Slideshow Viewport: The viewport is the default overflow container for the slideshow frames. When the viewport is selected special editing buttons are made available on the bottom-right design bar. Select the viewport using the right reference tree.
Frames Slider: The frames slider elment is a container for the individual slideshow frames. The slider may be animated left, right, up, down, or in a custom way of your choosing. This template moves the slider container from left to right with a brief delay between movements.
Frame Items: By default frame items fit the width and height of the slider container and viewport. Selecting a frame reveals specific editing options on the bottom right design bar.
Slide Animation: A custom 'preloadall' timeline attached to the root stage element defines the animation effect and delay. Click the stage elements 'preloadall' timeline in the reference tree to edit the timeline.
Ease Options: Easing is applied to tween frames (frames between two keys) and changes the animation rate. To change the ease setting for the slide animation first click the ease toggle button, then click the tween.
CSS Rules: Various predefined CSS rules are available in the 'Global CSS Rule' options apply to menu. Use the rules to quickly apply similar styles to all your slideshow frames. Custom rules targeting frames or frame child elements can be specified in the custom rules dialog.
Drag Creating New Slideshows
New slideshows can be drag created directly onto the stage. By default the size of the slide container and individual frames is set to fit the width and height of the root slideshow overflow container.
The bottom right design bar contains slideshow editing buttons specific to the type of element selected. There are different button options for the root slideshow overflow container, slide container, and individual frames.
Slideshow animations and interactivity is up to the developer. To get ideas on different ways to animate your slideshow view the templates.