NewsCycle

Part of: Scripty Actions

Description

Create an area on your page that fades in and out, showing new content each time. This Action is very flexible in application, and can handle a wide range of content types.

Instructions

Draw an HTML (layered) box on your page where you want the effect to appear. Style this box however you like, and apply the NewsCycle Action to it.

Double-click inside this box and create a “dummy” item to set your display styles. If you’re going to be rotating text, simply type some placeholder text, apply any paragraph styles you may like to that text, and you’re finished.

If you want to rotate images, use Insert / Graphic Item to insert an example photo. If you want to show a caption below the photo, be sure to use Shift-Return rather than a full Return to separate the image from the caption, otherwise the effect will alternate between photo and caption — probably not what you want.

If you want to rotate composed HTML layouts, then use Insert / HTML Item to draw your base HTML box. To create a nested HTML element to fade in and out, click once on this inline HTML box, drag its lower-right corner to resize it to suit, then while it is still selected (corner handle showing) use any of the box tools to draw a child box directly over the inline HTML box. You will know you’re doing it correctly if the cursor changes to look like this: [ + ] and the edges of the inline HTML box glow blue. Repeat this step for each element of your nested inline element, and add placeholder content.

Once you have created your “dummy” news item, select it and copy to the clipboard. If you created a normal paragraph of text, use Select All to select the entire paragraph, including the invisible return character at the end. If you have created a nested HTML element, be sure to click once on the inline HTML box and copy that, rather than using the text cursor to select all content in your outermost box.

Next, draw another HTML box anywhere on the page or pasteboard. (This element will be hidden in the browser, but visible to search engines and other non-visual browsers.) Make a note of the name Freeway assigns to it, or change the name in the Inspector to something you will recognize later. Double-click inside this box to get a flashing text cursor, and paste your dummy content as many times as you have actual rotating content items. Be sure that each option is separated from the others by a single paragraph return. Modify each one to set your real content.

Finally, click back on your “news area” item, and use the Data Source picker in the Actions palette to choose the source HTML box you just created.

Preview or publish to see the effect.

Other Parameters

You can set the length of time that each option will be fully visible by changing the Delay between Items setting. This will depend heavily on the type and size of content you are cycling through, as well as the reading speed of your target audience.

Set the duration of the fade effect with the Fade Duration setting. Note that the entire effect will take twice as long as whatever you set, because each option will take this long to fade out, then the next option will fade in for the same time.

---

Register or log in to view or add comments.