Flow Reference Manual (Previously Carousel)

Overview

What is Flow

Flow is a sliding interface of thumbnails that each represent a page of content (image, text, HTML). The thumbnails are organized in a sliding window that can be shifted left or right to access all of the pages. The content can be almost anything. Pictures work nicely as a slideshow, but styled text and even raw HTML work just as well.

How It Works

Flows are built like regular web pages using valid xHTML with DIVs and CSS. There are no frames, no Java applications, and is no embedded Flash. Instead, Flow uses a very lightweight Javascript library called mootools. Why should you care? Because by using simple standards that the web understands, like Javascript and xHTML, your page will load quickly, work well in all the major browsers, and be completely indexed by Google and the other search engines.

Installation

To install the Flow plugin:

1. Download Flow from our website.
2. Double click the Flow.stack file.
3. If RapidWeaver is running, restart.

Flow is now installed ready to use.

Getting Started

To get started, you should have an Flow page in a RapidWeaver file already created. If you don't have an Flow page already, create one by choosing Add Page in RapidWeaver and selecting Flow.

Creating a Flow

Quick Album

To create a quick photo album just drop a folder of images onto the Flow table. Flow will search the folder for images, import them, create thumbnails, and extract EXIF information. Once the album is complete you can organize the images in the list any way you like by dragging the images into the order that you prefer. Because the content of the Flow is just styled text you can edit it in any way you like. For example you may want to double click the images and scale them to a more web-friendly size, add some comment text, and delete any unwanted EXIF information. The content area works just like any styled text area in RapidWeaver so you're free to add links, use the Format menu, or even drop in raw HTML.

Adding More Content

To manually add content click on the + button, it's located below the lower left corner of the Flow content list. A new title called "No Title" will be added to the list. Enter a title in the Title field. In the text area below the title field, add content. You can use formatting to format your content and drop pictures in as well. Each title will also get a thumbnail image. Drag an image from the finder into the image-well next to the Title field. Don't worry about getting the size just right, Flow will resize the image an build a thumbnail for you.

Organizing Content

After you have a few Flow entries added to your list you may find that you need to change their order. Just drag and drop the titles within the list. The Flow will be built in the order that the content is listed.

Add/Remove Link

The Add Link and Remove Link buttons can be used to edit the links in your content. Select some text or images in the content area then choose Add Link. The standard RapidWeaver link panel lets you specify the link.

To remove a link, select the image or text with the link, then click Remove Link.

Removing Content

Select the item that you'd like to remove. Click the minus button. Poof it's gone! Be careful this operation is not undoable.

Styles

To make Flow easier to use, it comes with an easy way to create, share, and import styles. This allows you to use Flow with almost no configuration -- just add your content, select a style, and publish your new page. Other users may take the time to set up the many options that Flow provides for configuring almost every aspect of the page. You can save all that work to a style file that you can use on other Flow pages, other sites, or even share with others.

Choosing a Style

To choose a style select the Styles section of the Flow Info window then click on the Choose tab. A list of styles is presented. Clicking on a style displays a preview of Flow. When you've found a style that you like, click Apply.

Getting More Styles

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

Creating a Style

To create a style

1. Click on the Create tab.
2. Give your style a Title and add a name for the Author.
3. Click Save to save all your current settings to a style file.
   Save your new style to the folder ~/Library/Application Support/RapidWeaver/Flow

Only files located in this directory will display in the Flow style list.

A Style Tutorial XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

One of our expert users posted a quick and easy, step-by-step guide on how to build a new style. It's on our forum here.

Flow Info

Layout

The Layout tab allows you to configure how the Flow (the sliding window) will appear and behave.

Visible Thumbnails

Set this value to the number of thumbnails you would like to see at once. Your Flow can contain many more thumbnails that will scroll into view.

Height

This is the height of the Flow area. If you are using a background picture, it's probably wise to set this height to exactly the height of the images you've used for the background.

Position

XXXXXXXXX

Movement

The Flow interface can either move by sliding all the visible items off the page and sliding a whole new page of items in to view, or it can slide over only by a single thumbnail at a time.

Speed

Select the speed of the slide when the user clicks the arrow buttons. Keep in mind that slow animation is only fun the first time. If you have a lot of content to display, it's best to keep in snappy otherwise users will get turned off quickly.

Other Options

XXXXXXXXX

Images

The Images tab in the Flow section of the settings allows you to customize the look of your Flow completely. You can change all aspects of the backgrounds and buttons.

Buttons

The button images are drawn over the rest of the Flow. They support transparent PNG images even in Internet Explorer so feel free to use interesting shapes and effects.

Each button (left and right) can contain a separate image for the idle-state, for when the mouse is hovering over the button, and for when the mouse button is pressed down on the button. You can fill all our none of the button images.

If you choose not to add any images then the a default small triangle button will be added to your layout. If you leave out some of the images, then the idle image will be used instead. If you add any images, you should always define the idle image first.

Button Offset

The button offset allows the buttons to be moved from their default location (at either side of the Flow) to somewhere lower and inward -- overlapping the Flow.

Increasing the "x" dimension moves the buttons inward. Increasing the y dimension moves the buttons downward.

Backgrounds

The background images are drawn behind the Flow. The left and right images are drawn at the edges, and the remain space will be tiled with the middle image. The background images will not be stretched to fit the height of the Flow -- so it's important the the height (set in the Layout tab) and the height of the background images be chosen to work together.

Style

The Flow Style tab allows you to adjust the background color, stroke (outline), and margin around the Flow.

Background

The background of the Flow is the color that appears behind the thumbnails. If you're using background images they will cover up the background color everywhere except where the images are transparent.

Stroke

Stroke is just a fancy name for the Border. You can add a border of any color and thickness you like around all or none of the Flow.

Margin

The Flow margin is the space that is added between other items on the page and the outside of the border of the Flow.

Thumbnail

Layout

The Layout tab allows you to configure how the thumbnails are created. You can set their size and how they should be scaled or cropped to fit into that size. 

Width and Height

This is the width and height of the thumbnail image itself. It excludes any borders, margin or padding that you might apply in the Style tab. You should choose a reasonably small size so that the images download quickly and the Flow animation performs well on older computers. The default size is 53 pixels -- much above 100 pixels would probably begin to cause performance issues unless there were only a few thumbnails. You cannot make thumbnails smaller than 5 pixels high or wide.

Crop/Scale

If the image that is being used as the thumbnail does not have the same dimensions (aspect ratio) as the width/height set above then you'll have to choose how to make it fit into the new smaller area.

Choosing "Crop Edges" will scale the image down until one dimension fits, the other dimension will be cut off. The result is a thumbnail that is filled to the edge with the image, but may be missing some pieces of the image that didn't fit.

Choosing "Scale to Fit" will scale the image down until both dimensions fit, one dimension will be be even smaller than is necessary. The result is that the thumbnail will contain the entire image, none will be cut off, but the thumbnail will not be filled completely on all edges.

Style

The Thumbnail Style tab allows you to adjust the background color, stroke (outline), margin and padding around the Flow.

Background

The background of the Thumbnail is the color that appears behind the thumbnail image. This is the color that will show through if you've selected "Scale to Fit" in the Thumbnail Layout tab.

Stroke

Stroke is just a fancy name for the border. You can add a border of any color and thickness you like around any of the sides of the thumbnail image.

Margin

The Margin is the space that is added outside of the border of the thumbnail. This will cause the thumbnails to move away from each other.

Padding

The Padding is the space that is added inside of the border of the thumbnail. This will cause a gap between the thumbnail image and the border.

Content

The Content tab allows you to configure how the content will appear on your page. The content area is the text and images that appear after you click on a thumbnail.

Layout

Width and Height

Both the width and height of the content area can be enabled and set to a specific pixel dimension or disabled and left to fill that dimension of the page. If you choose a fixed height, it will probably be wise to also include a scrollbar (see below) or ensure that all your content is small enough to fit in the given area.

Scrollbars

You can choose to add scrollbars to your content area, which is a good idea for fixed height layouts, or to have scrollbars never appear. You can also let the web browser decide when a scrollbar is needed and add it on the fly.

Speed

The speed setting determines how fast the content will change from one item to the next selected item. Using the slow speed can increase the drama of the cross-fade, but can be a little annoying if someone is just trying to get the information from your site. Choose a speed that fits your content and your users.

Style

The Content Style tab allows you to adjust the background color, stroke (outline), margin and padding of the content area -- the area that displays after clicking on a thumbnail.

Background

The background of the Content is the color that appears behind the text and images of the content. If you disable the background color, then the background color will be inherited from the theme that you're using.

Stroke

Stroke is just a fancy name for the border. You can add a border of any color and thickness you like around any of the sides of the content area.

Margin

The Margin is the space that is added outside of the border. This will cause the content to move away from the edges of the page.

Padding

The Padding is the space that is added inside of the border. This will cause a gap between the content and the border.