Splash Page - Animation Lesson

Many sites contain a splash page, which is an animation or photo collage which has only one link, into the main page where the site content can be accessed. Think of a splash screen as a extra doorway which leads to your site. Some folks love them, and find that they set the tone for the entire site. Others find them annoying and a waste of time.

When creating a splash page make sure you place the word "enter" or "begin" so folks understand that they should click to continue.

I included the splash page concept in this lesson, since students often ask about it. If you want to create elaborate splash screen animations I recommend you use MacroMedia's Flash or Adobe Live Motion.

I created a splash screen for my campus client. I began in Photoshop where I created a text collage. I used a limited color palette and only 2 fonts. The image is displayed below.

I plan to use a shortcut to create the animation, so before I launch ImageReady I take a careful look at the order of the layers. I can import a PSD file into ImageReady and each layer of the Photoshop document will be automatically placed on an animation frame.

The bottom layer is the first frame in the Animation palette, the frame with the word "business" is second, etc...

Once I have the layers in the order I want them to display I save the file, and then launch ImageReady.

Choose File > Open, and select the Photoshop file to open.

Select Make Frames From Layers in the Animation palette menu.

Each layer in the image appears as a frame in the Animation palette. The bottom layer in the Photoshop image is frame 1 in the Animation palette.

I just love shortcuts, but sometimes they do not produce EXACTLY the effect I am looking for. I wanted the beige color to display on every frame and I see that the majority of my frames are on a transparent background.

Fortunately this can easily be fixed. I select the layer which contains the solid beige color and then select Match Frames Across Layers from the Animation palette.

Now all my frames have the beige background.

I select all frames (using the animation palette) and then set the delay to 0.5 seconds. The loop is set to once.

Here is what the animation looks like at this point.

It is close to what I want but there needs to be a bit of refinement. I would like to have one screen where all the text choices appear, then a blank beige screen, then the phrase "Have questions?" another beige screen, and finally the phrase "We have answers enter...". Sounds like I will need to learn how to add a frame.

I move down to the frame which contains the word "COLLEGE" and select the new frame icon, located at the bottom of the animation palette.

New Frames are automatically added behind the selected frame, and they contain the same information. I now have 2 frames which display the word "COLLEGE."

I turn on all the previous layers of text so the entire text collage displays.

Next I add another frame and turn off all layers except the beige color. I want a blank screen to appear before the "questions" frame. I also want a blank screen before the "answers" frame. As I play the animation I find the transition from the word "COLLEGE" to the text collage to be too sudden. To soften the effect I select these 2 frames, and select the tween tool so I can create a 3-frame tween based on opacity.

I run the animation several times to get the timing just right. I save the file as a PSD file and also save it as a GIF.

Here is the finished animation

To view the Photoshop file access CD > CIS 58.53B Advanced Class > PSD Files > animation > splash.psd. You will need to be in ImageReady to view the animation frames.