stepMate Stack Tutorial

The first thing you need to do is add a Stacks page to your project and then drop the stepMate Stack. Your window will look like the screenshot below. If not, go to Page Inspector>Page and check "Render HTML in Edit mode."

By default, stepMate creates a canvas of 600x400 pixels and creates an area where you can start adding your content. In addition, it sets the Arrow Style to 0, i.e. text buttons.

Next, you can start adding a stepMate Layer stack to the "Drop stacks here." area. Your window will look like this:

Inside each stepMate Layer stack, there's an additional "Drop stacks here." area where you will add the actual content of your layer.

In this example, we will create an animation with 3 images: 2 of the images will be dropped into Image stacks and the 3rd image will be on a server therefore, we will use an HTML stack. Images will behave as follows:

• Image 1: slowly fade in
• Image 2: slide from the left over 1 second
• Image 3: slide from the right over 1 second

Although in this tutorial we will drop 2 of the images directly into the stack, we highly recommend that you save your images on your server to reduce the size of your RapidWeaver project. We show this option when adding image 3.

OK, let's start with the first image.

To begin, add an Image stack to the first stepMate Layer and drop our image in it. It will look like this:

Please note that RW has scaled down the image therefore we'll need to activate the Media Inspector (by clicking on the image twice) and set the Scale back to 100%.

By the way, while you are in the Media Inspector, we suggest that you add a Filename and Alt Tag to each of your images. This is a good SEO practice and will prevent Internet Explorer from showing strange names when hovering over the images. In addition, it will make sure that RW only uploads the images once even if you re-publish your project.

As a final suggestion, unless you MUST use PNG images, I recommend using JPEG instead as they will load much faster. To do this go to Page Inspector>General>Image Format and select JPEG from the drop-down menu. Of course, saving your images on a server will be even better. We'll show you how when we add the 3rd image later on in this tutorial. Now, back to the tutorial...

Your window will look like this (partial view):

Next, we'll set the End, Star, and Animation values for images 2 and 3. The settings for Image 2 are as follows:

And for Image 3, as seen here:

You'll notice that we've also set up the variables for the animation. Let's review them in detail:

• Image 1 will Fade in over 500 ms (1/2 seconds)
• Image 2 starts outside the canvas 600 pixels to the left (Start Left set at -600px) and ends aligned to the left side of the canvas (End Left set at 0px) therefore, it slides in from the left. Fade in is set to zero because the image is outside the canvas and not visible anyway. Duration is set to 1000 ms (1 second) therefore, the slide in animation will last 1 second
• Image 3 starts outside the canvas 600 pixels to the right (Start Left set at 600px) and ends aligned to the left side of the canvas (End Left set at to 0px) therefore, it slides in from the right. As with Image 2, Fade in and Duration were set to 0 and 1000, respectively

As you can see, by changing the Start, End, and Animation settings, you can achieve many different effects at any speed...

Here's the final animation.

Using it as a string point, let your imagination take over and put together a compelling slideshow.

You can watch a stepMate tutorial created with stepMate, check it out...