Video Transcript:

EverWeb’s animation feature opens up a world of possibilities for your website design with 16 great effects at your disposal.

As there are so many possibilities with animation, I’ve made this into a two part video..

In this video I have a created a website with a number of pages to show you a variety of different effects and how they are created.

If I preview the first page, you will see the animation starts with the “please wait” text and three flashing dots, known as ellipses, that fade out, followed directly by a Click Here button that fades in. When pressed, the button will take the webpage visitor to another page in my website.

If at any time you want to see the animation again, just refresh the page in your browser.

To create these effects first create a text box and add “Please wait” as the text.

Next create a second TextBox that contains the three dots and place it at the end of the ‘Please Wait’ text.

With the ellipses selected go to the Shape Options and tick the ‘Animation’ box.

For the ellipses the Animation is as follows

Other

Flash

Duration: 3.0 seconds

Delay: 0 seconds

Repeat: 2 Times

EverWeb allows you to create a Fade In effect which we can use to create a Fade OUT effect, as we want the ‘Please Wait’ text and ellipses to fade out.

To do this add a rectangle shape in the same color as the page background. Place the rectangle so that it covers all of the text and ellipses.

For the rectangle, the Animation is as follows

Fade

In Place

Duration: 5.0 seconds

Delay: 0 Seconds

Repeat 1

To create the Click Here button use a rectangle shape and add the ‘Click Here!” text to the button. Style and position the button as you want and hyperlink it to the page you want to go to when the button is clicked.

As we want the button to appear after the Please Wait animation has finished use the following Animation settings

Fade

In Place

Duration: 5.0 seconds.

Delay: 4.7 seconds

Repeat: 1

The page is now complete. To view and test the animations and timings, use Preview.

When I click on the button, I am taken to the next page in my website.

This page has a lot going on…

The main thing to remember with animation is that the sequence and timing of the effects needs to be right to create the flow of action on the page.

The page opens with the blue panel sliding in from the left

To create the panel add a rectangle shape to your page.

In this example the following choices were made using the Metrics Inspector

Width: 320

Height: 1500

X Position: 0

Y Position: 0

Fixed Position: Checked

Relative to browser left: Checked

Note that the rectangle shape is placed at the point where the animation ends.

For the animation itself the following settings were applied in the Shape Options

Slide

From Left

Duration: 1.0 seconds

Delay: 0

Repeat: 1

The EverWeb ‘Whoosh’ sound effect is added to the page using the Audio widget which is hidden from view

To do this, place the audio widget on the page and move it to a location where it cannot be seen by your visitors. Add your sound effect to the widget and set ‘Auto play audio on page load’ on.

Next, place a rectangle shape over the widget in the same color as the background in order to ‘hide’ the widget from view.

Next the EverWeb logo comes in from the left. To create this effect the logo was added to the page using the following settings in the Metrics Inspector:

Width: 285

Height: 285

X Position: 158

Y Position: 208

Fixed Position: Checked

Relative to browser left: Checked

Note that the logo shape is placed at the point where the animation ends.

For the animation itself the following settings were applied to the logo in Shape Options

Other

Roll In

Duration: 1.0 seconds

Delay: 1.0

Repeat: 1

The effect is delayed for one second so that the blue rectangle effect has finished before the logo rolls in.

The next step in the animation sequence sees two TextBoxes added to the page to make an impact by having the text ‘EverWeb’ come in separately.

Add the first text box. Enter the text you want and style and position on the page at the point where you want the animation to end.

Use the following Animation settings in Shape Options:

Zoom

In Place

Duration: 1.0 seconds

Delay: 2.0

Repeat: 1

Now create the second text box which in our example contains just the word “`EverWeb’. Style and place in position as required.

Use the following animation settings for the second text box

Zoom

In Place

Duration: 1.0 seconds

Delay: 2.5

Repeat: 1

Finally I added an arrow pointer to direct the user to click on it to go to the next page.

The settings used to create this effect are

Other

Roll In

Duration: 1.0 seconds

Delay: 6.4

Repeat: 1

The page is now complete. To view and test the animations and timings, use Preview.

In part two of Animation Effects in EverWeb, we’ll look at how you can easily create more interesting effects…