Creating A Simple Fading Slideshow

Download the Fading Slideshow action from this website. As of the writing of this tutorial the version number is 1.4.

The action requires that we open our Preferences from the Freeway 5 Pro drop-down menu at the top and we need to make sure that under General the option of Enable Applescript in Actions is checked.

Create a new Freeway document and in this example our document dimensions will be 550px by 550px.

The following settings are currently optional and do not affect the final outcome of the project:

• Page Alignment is set to Center

What we're going to be doing is taking a series of five iPhone / iPod Touch wallpaper images and then creating a simple slideshow that has a white border-like frame surrounding it resembling the image above.

First draw out a layered HTML item (blue button is on for this tutorial) onto your page. Since I know my image dimensions are going to be set to 320px by 480px I'm going to start out with these measurements in my Inspector. Give this HTML item a name of frame.

Next we're going to start working on our white border-like frame. What we want to do is adjust our HTML item frame to have at least 10px of outter edge showing. We'll do this by changing our dimensions to add 20px (10px to each side) to both the height and width. This would then make the HTML item 340px by 500px.

We'll then want to add 10px of padding to our HTML item and this will return the inner part of the HTML item to be our original dimensions of 320px by 480px, but the actual screen measurement will still be 340px by 500px.

Now that we've built our frame, let's start the actual slideshow part. With our HTML item selected we'll need to single click (or double if you don't have it selected) to get the blinking text cursor inside the HTML item. Then you'll want to go to Insert and choose Graphic Item and then click off onto the white space and a dialog box will pop-up asking if the HTML item can have an undefined height. Click OK.

NOTE: If this dialog box does not appear then you'll need to change it in your Freeway Preferences, under Layout, to ask you for an undefined height.

Our HTML item has now wrapped itself around our inserted graphic item and it should look like the image above.

The next step is to import one of your images into the recently created graphic item. You'll then want to Fit Box To Content (under the Item menu) and you'll notice that the HTML item has now adjusted itself to fit the height (or width or both) image dimensions.

With your graphic item selected you'll want to goto Item and select Actions and click on Fading Slideshow. In your action's palette you should see some options for your slideshow.

Here's a list of changes I've made in my slideshow:

• Leave the Float setting to Left
• Give our BG Color a fill of White to match our outter frame edge
• You can change the delay between images to whatever you want. (I used 2 seconds or 2000 (ms).)
• FW Image options are most important
• "Use FW Image as [noscript] Image" means that you can have the imported image in Freeway be used if Javascript is turned off within a user's browser. This would then disable the slideshow and this image would then take its place.
• "Use FW Image as First Slide" means that you can also have the imported image in Freeway used as the first slide.

NOTE: If you select the third image from a group of four images then when the slideshow goes through the display order will be 3-1-2-3-4 which will show 3 twice. If you choose the first image then it won't repeat it twice.

• Since I have a folder created of my chosen images I'm going to use the folder option which requires me to check the box for Use All Files from Folder. This has a limit of 25 images in a folder and the regular individual image option allows for 10 images.
• If you choose a folder option you won't need any additional action to upload those images to your site folder.
• Also, if you choose the folder option, you can link out all the images to a specific web page and if you choose to use the single image option you can link out to different pages on a per-image basis.

After you've chosen your settings in the Action's Palette you'll want to go ahead and publish your page. You can then view the results within your browser by going to File > Preview In Browser and I've chosen Safari as my browser choice. Your images should now fade in and fade out and that's it. Enjoy!