Creating a Website Splash Screen
Flash is becoming an important tool for e-businesses. Many organizations use Flash to create website splash screens (i.e., introductions), product demos and web applications. Oth-ers use Flash to build games and interactive entertainment in an effort to attract new visitors. However, these types of applications can take a long time to load, causing visi-tors—especially those with slow connections—to leave the site. One way to alleviate this problem is to provide visitors with an animated Flash introduction that draws and keeps their attention. Flash animations are ideal for amusing visitors while conveying informa-tion as the rest of a page downloads “behind the scenes.”
A preloader or splash screen is a simple animation that plays while the rest of the web page is loading. Several techniques are used to create animation preloaders. The following example creates an animation preloader that uses ActionScript to pause the movie at a par-ticular frame until all the movie elements have loaded.
To start building the animation preloader, create a new Flash document. Use the default size, and set the background color to a light blue. First, you’ll create the movie pieces that will be loaded later in the process. Create five new layers, and rename Layer 2 to C++, Layer 3 to Java and Layer 4 to IW3. Layer 5 will contain the movie’s ActionScript, so rename it actions. Because Layer 1 contains the introductory animation, rename this
The preloaded objects we use in this example are animated movie clip symbols. Create the first symbol by clicking frame 2 of the C++ layer, inserting a keyframe, and creating a new movie-clip symbol named cppbook. When the symbol’s editing stage opens, import the image cpphtp.gif (found in the images folder with this chapter’s examples). Place a keyframe in frame 20 of Layer 1 and add a stop action to this frame. The animation in this example is produced with the motion tween Rotate option, which causes an object to spin on its axis. Create a motion tween in frame 1 with the Properties window, setting the Rotate option to CCW (counterclockwise) and the times field to 2 (Fig. 16.47). This causes the image cpphtp.gif to spin two times counterclockwise over a period of 20 frames.
After returning to the scene, drag and drop a copy of the cppbook symbol onto the stage in frame 2 of the C++ layer. Move this symbol to the left side of the stage. Insert a frame in frame 25 of the C++ layer.
Build a similar movie clip for the Java and IW3 layers, using the files java.gif and iw3.gif to create the symbols. Name the symbol for the Java layer jbook and the IW3 symbol ibook to identify the symbols with their contents. In the main scene, create a key-frame in frame 8 of the Java layer, and place the jbook symbol in the center of the stage. Insert a frame in frame 25 of the Java layer. Insert the ibook symbol in a keyframe in frame 14 of the IW3 layer, and position it to the right of the jbook symbol. Insert a frame in frame 25 of the IW3 layer. Make sure to leave some space between these symbols so that they will not overlap when they spin (Fig. 16.48). Add a keyframe to the 25th frame of the actions layer, then add a stop to the Actions panel of that frame.
Now that the loading objects have been placed, it is time to create the preloading ani-mation. By placing the preloading animation in the frame preceding the frame that con-tains the objects, we can use ActionScript to pause the movie until the objects have loaded. Begin by adding a stop action to frame 1 of the actions layer. Select frame 1 of the anima-tion layer and create another new movie-clip symbol named loader. Use the text tool with a medium-sized sans-serif font, and place the word Loading in the center of the symbol’s
editing stage. This title indicates to the user that objects are loading. Insert a keyframe into frame 14 and rename this layer load.
Create a new layer called orb to contain the animation. Draw a circle with no stroke about the size of a quarter above the word Loading. Give the circle a green-to-white radial gradient fill color. The colors of this gradient can be edited in the Color panel (Fig. 16.49).
The block farthest to the left on the gradient range indicates the innermost color of the radial gradient, whereas the block farthest to the right indicates the outermost color of the radial gradient. Click the left block to reveal the gradient color swatch. Click the swatch and select a medium green as the inner color of the gradient. Select the right, outer color box and change its color to white. Deselect the circle by clicking on a blank portion of the stage. Note that a white ring appears around the circle due to the colored back-ground. To make the circle fade into the background, we adjust its alpha value. Alpha is a value between 0 and 100% that corresponds to a color’s transparency or opacity. An alpha value of 0% appears transparent, whereas a value of 100% appears completely opaque. Select the circle again and click the right gradient box (white). Adjust the value of the Alpha field in the Color Mixer panel to 0%. Deselect the circle. It should now appear to fade into the background.
The rate of progression in a gradient can also be changed by sliding the color boxes. Select the circle again. Slide the left color box to the middle so that the gradient contains more green than transparent white, then return the slider to the far left. Intermediate colors may be added to the gradient range by clicking beneath the bar, next to one of the existing
color boxes. Click to the right of the inner color box to add a new color box (Fig. 16.50). Slide the new color box to the right and change its color to a darker green. Any color box may be removed from a gradient by dragging it downward off the gradient range.
Insert keyframes into frame 7 and 14 of the orb layer. Select the circle in frame 7 with the selection tool. In the Color panel change the alpha of every color box to 0%. Select frame 1 in the Timeline and add shape tween. Change the value of the Ease field in the Properties window to –100. Ease controls the rate of change during tween animation. Neg-ative values cause the animated change to be gradual at the beginning and become increas-ingly drastic. Positive values cause the animation to change quickly in the first frames, becoming less drastic as the animation progresses. Add shape tween to frame 7 and set the Ease value to 100. In frame 14, add the action gotoAndPlay(1); to repeat the animation. You can preview the animation by pressing Enter. The circle should now appear to pulse.
Before inserting the movie clip into the scene, we are going to create a hypertext linked button that will enable the user to skip over the animations to the final destination. Add a new layer called link to the loader symbol with keyframes in frames 1 and 14. Using the text tool, place the words skip directly to Deitel website below Loading in a smaller font size. Select the words with the selection tool and convert them into a button symbol named skip. Converting the text into a button simulates a text hyperlink created with XHTML. Double click the words to open the skip button’s editing stage. For this example, we are going to edit only the hit state. When a button is created from a shape, the button’s hit area is, by default, the area of the shape. It is important to change the hit state of a button created from text so that it includes the spaces between the letters; other-wise, the link will work only when the user hovers over a letter’s area. Insert a keyframe in the hit state. Use the rectangle tool to draw the hit area of the button, covering the entire length and height of the text. This rectangle is not visible in the final movie, because it defines only the hit area (Fig. 16.51).
The button is activated by giving it an action that links it to another web page. After returning to the loader movie-clip editing stage, give the skip button the instance name skipButton and open the Actions panel for the first frame of the link layer. Invoke the add-EventListener function using the skipButton instance to call function onClick whenever
the button is clicked. Then, create an object of type URLRequest and give the constructor a parameter value of "http://www.deitel.com". The function onClick employs Flash’s navigateToURL function to access the website given to it. Thus, the code now reads
skipButton.addEventListener( MouseEvent.CLICK, onClick );
var url : URLRequest = new URLRequest( "http://www.deitel.com" );
function onClick( e : MouseEvent ) : void
navigateToURL( url, "_blank" ); } // end function onClick
The "_blank" parameter signifies that a new browser window displaying the Deitel web-site should open when the user presses the button.
Return to the scene by clicking Scene 1 directly below the timeline, next to the name of the current symbol. Drag and drop a copy of the loader movie clip from the Library panel into frame 1 of the animation layer, center it on the stage, and set its Instance name to loadingClip.
The process is nearly complete. Open the Actions panel for the actions layer. The fol-lowing actions direct the movie clip to play until all the scene’s objects are loaded. First, add a stop to the frame so that it doesn’t go to the second frame until we tell it to. Using the loadingClip movie instance, use the addEventListener function to invoke the function onBegin whenever the event Event.ENTER_FRAME is triggered. The ENTER_FRAME event occurs every time the playhead enters a new frame. Since this movie’s frame rate is 12 fps (frames per second), the ENTER_FRAME event will occur 12 times each second.
loadingClip.addEventListener( Event.ENTER_FRAME, onBegin );
The next action added to this sequence is the function onBegin. The condition of the if statement will be used to determine how many frames of the movie are loaded. Flash movies load frame by frame. Frames that contain complex images take longer to load. Flash will continue playing the current frame until the next frame has loaded. For our movie, if the number of frames loaded (frameLoaded) is equal to the total number of frames (totalFrames), then the movie is finished loading, so it will play frame 2. It also invokes the removeEventListener function to ensure that onBegin is not called for the remainder of the movie. If the number of frames loaded is less than the total number of frames, then the current movie clip continues to play. The code now reads:
loadingClip.addEventListener( Event.ENTER_FRAME, onBegin );
// check if all frames have been loaded function onBegin( event : Event ) : void
if ( framesLoaded == totalFrames )
loadingClip.removeEventListener( Event.ENTER_FRAME, onBegin ); gotoAndPlay( 2 );
} // end if
} // end function onBegin
Create one more layer in the scene, and name the layer title. Add a keyframe to frame 2 of this layer, and use the Text tool to create a title that reads Recent Deitel Publications. Below the title, create another text hyperlink button to the Deitel website. The simplest way to do this is to duplicate the existing skip button and modify the text. Right click the skip symbol in the Library panel, and select Duplicate. Name the new button visit, and place it in frame 2 of the title layer. Label the instance visitButton, then create a keyframe in the second frame of the actions layer. Duplicate the code from the Actions panel of the first frame of the link layer in the loader symbol, and replace skipButton with visit-Button. Double click the visit button and edit the text to say visit the Deitel website. Add keyframes to each frame of the title layer and manipulate the text to create a typing effect similar to the one we created in the bug2bug example.
The movie is now complete. Test the movie with the Flash Player (Fig. 16.52). When viewed in the testing window, the loading sequence will play for only one frame because your processor loads all the frames almost instantly. Flash can simulate how a movie would appear to an online user, though. While still in the testing window, select 56K from the Download Settings submenu of the View menu. Also, select Bandwidth Profiler from the View menu. Then select Simulate Download from the View menu or press <Ctrl>-Enter. The graph at the top of the window displays the amount of bandwidth required to load each frame.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.