For many Freeway users, the built-in Sequence Timer Action used in conjunction with a stack of items with the Target Show/Hide Layer Action applied is fine for making a fading slideshow of images on their page. This is done by using the steps in the movie tutorial at http://www.softpress.com/support/tutorials (Episode 11).
However, we are often asked about how to make a “thumbnail” item on the page (perhaps a numbered square or a circle button) give the visitor a visual reference as to the order of the items, and also to give them an option to click on one of the thumbnail items to jump through the standard sequence straight to the referenced image. Walter Davis has written an Action to do just this, and it is available on ActionsForge at http://actionsforge.com/actions/view/218-scriptyfader. That page also has a link to a sample page where you can see the “jumping” sequence (or click on a link on that page to see the “portraits” sample sequence).
Downloading the Action from the ActionsForge page gets you an Action bundle containing four separate Actions, all of which work together to make up the ScriptyFader suite.
Below is a tutorial on how to set up a ScriptyFader sequence of four images with “thumbnail” buttons to give a visual reference of which image is being viewed at that time. This can be adapted to suit your particular need because the same procedure can, for example, be used to set up numbered boxes for the “thumbnails” or you can even use HTML items which have graphics and text embedded inside them. If you want to try yourself, click on the link at the end of this article to download a semi-completed Freeway file and images.
Note that you must download and install the Actions from ActionsForge (see above) before you can follow this tutorial.
Create a new Freeway file, give it a width of 900px, align it center and give the page a dark gray page background color. Because we will be placing large items on the pasteboard, it’s best to make the pasteboard area larger than the default of 500px - to do this, go to File>Document Setup then enter a value of 2000px in the Pasteboard width field and click OK (note that because the pasteboard area is always square, this also gives a height of 2000px as well).
Before you add content to the page, switch on the CSS Layout button (so it displays in blue, which will mean that every item drawn on the page will be a “layer” item).
Click on the Graphic button and draw an item on the page. Go to File>Import, navigate to the media folder you downloaded, select the graphic named “first”, check the Pass-through option and then click Open. Unless the item you drew on the page is larger than the imported image, you will see a large cross through the item (indicating that the item is “overflowing”) - go to Item>Fit Box to Content to see make the item the same size as the image. You don’t need to use pass-through images, but I prefer to optimize graphics first and then import them as pass-throughs so that Freeway will not optimize them further. A pass-through image cannot be scaled or cropped, so this needs to be done before the image is imported if you want to work in this way.
Move the imported image item into place and then, with the item selected, go to Item>Actions and choose ScriptyFader. Once the Action has been applied you will see that you have two options - the Auto-Fade Interval (which controls the speed of the “slideshow”) and another to show or hide the “spinner” (which gives the visitor a visual cue to tell them that the next image is loading). You will need to enter a value for Auto-Fade Interval (the default of zero will mean that it won’t work), so try 4 to see if you prefer it to run quicker or slower (the higher the value, the slower the slides changes).
The item which has the ScriptyFader Action applied is the base location of where the other images in the slideshow will display. These other images can be used anywhere within the Freeway window, so it’s best to place them on the pasteboard area so they don’t obscure other content on the page you might need to work on. Click on the Graphic tool again and draw an item on a blank area of the pasteboard. Go to File>Import, choose the file named “second”, check the Pass-through option and click Open. Go to Item>Fit Box to Content and then move the item so it clears the page area. With the item selected, go to Item>Actions and choose ScriptyFader Option. In the Actions palette you will only see one option and that will, by default, have the name of the ScriptyFader item chosen automatically in the Target popup. You can leave it like this (but note that if you have multiple ScriptyFader slideshows on the same page you can choose a specific ScriptyFader base item into which you can make the different “option” images appear).
Repeat this procedure to import the images named “third” and “fourth” in two new graphic items, and apply the ScriptyFader Option Action to each of them. The ScriptyFader is now set up and will now work so that the items appear in a sequence of images with a fading transition on each change - but as stated earlier, it’s probably best to use the Sequence Timer and Target Show/Hide Layer Actions to do a basic fading slideshow like this because you have more control of the effects. The main reason for using the ScriptyFader Action is really so that you can have a thumbnail graphic which changes with the sequence (and that can’t be made to work with the Sequence Timer Action).
For this sample file, I used a white circle which has a red circle inside it - and I made it so the red circle highlights the active image in the slideshow sequence. The easiest way to do this is to draw a white circle on a blank area of the page area (so you can see it, as it’s difficult to see on the pasteboard area) - but make sure you don’t draw any items on top of the ScriptyFader item (otherwise this new item will become a “child” item, embedded inside the ScriptyFader item). I drew a white circle of 23px and then a red circle of 17px and then, with both items selected, I went to Item>Align and centred them both horizontally and vertically.
Once you have one set of circles created, select both items and go to Item>Duplicate, enter 3 copies, use a Horizontal Offset of 50px and a Vertical Offset of 0. Draw a selection marquee over all four sets of circle items and move them on top of the ScriptyFader item in the position you want them to be.
Zoom in and select the first red circle item, go to Item>Actions and choose ScriptyFader Thumbnail. In the Actions palette you will see that you need to choose a “Fader” (which is the ScriptyFader item you want to target) and an “Option” (which is the ScriptyFader Option item you want to match the thumbnail button to. For the first button set the popups to Fader = first and Option = first.
Apply the ScriptyFader Thumbnail Action to the other three red buttons in turn, using the settings of Fader = first for each, and then Option = second (for the second thumbnail), third (for the third thumbnail) and fourth (for the fourth thumbnail) respectively.
You can now preview the file in a browser to see it working. If you wait, you will see the second image display and the second red thumbnail will change from semi-transparent to opaque when the transition occurs. Note, however, that once you click on a specific red button to display the matching graphic you will see that the self-running slideshow doesn’t restart.
A limitation of the ScriptyFader Action is that the thumbnails will only change from their semi-transparent state to their opaque state - you cannot choose any other effect for the thumbnails.
scriptyfader_sample_files.zip (3.4 MB)