Layer Motion With Timelines

Call (800)770-0492, email david (at) naaip.org, request via chat or at daily conference call. Click eContracting Registration or eContracting Login (after registration).

The timeline inspector is a wonderful, powerful tool; it allows us to make HTML files dynamically move. They also provide a method of simple animation that does not require the experience and patience of using Macromedia Flash. We will examine some techniques using layers and the timelines in Dreamweaver. Now, this portion of the text will get a bit in-depth.

If you feel that you are not ready to start with dynamic pages and want to stick to static, non-moving pages for now, you can skip ahead to using the properties inspector to position your layers and make a balanced Web page layout. Let us continue with layers and animation. The basis for animation is change over time. The timeline consists of channels. Each channel contains frames, and the frames represent time. The timeline is best set to move at a certain rate over time.

For example, if the timeline was set for 15 frames per second for a 10 second animation, assuming perfect performance conditions, the animation would run go through 15 frames per second until 10 seconds were met and 150 frames were run.

Animation channels are numbered and have a top down stacking order similar to layers. The only elements that can be animated and manipulated on the Object on the timeline (A: The object “web design tutorial_move” added to the timeline consists of a layer which contains a thumbnail graphic. B: The object web design tutorial on the timeline has two keyframes (dots). The keyframes represent changes.

In this case, the keyframes are a start and a finish point for motion across the Web page.) timelines are layers and images. The channel at the very top is the behavior channel. It holds JavaScript Behaviors that can be placed using the behaviors palette. We will talk more about behaviors later. There are some key terms that you must become familiar with when working with timelines. These words will come in handy later when you learn about motion graphics and Macromedia Flash.

The animation channels are like rivers; they are pathways for content to flow. To stop and change the flow, insert a keyframe. Keyframes are points in time where change occurs. In the keyframe movement application to the layer and edits to attributes such as position, color, visibility, and size will execute. These changes must occur on a keyframe placed in the timeline. Layers can be set to visible and invisible at certain keyframes. And because the timeline animates layers and what is inside of them, you can experiment with animating content that you place inside of your layers. Animating layers on a timeline requires several steps.

Once you have performed the steps, you can add more timelines and more animated objects to your Web pages. You can place layers and images on timelines. Now that does not mean you have a free pass to the land of bad design. Quite the contrary, you need to use animation sparingly and strategically. The goal of the animation should be to provide extra emphasis on communication of an important point. For instance, you may want to have an animated biography that consists of a series of images and captions that show highlights in your career.

At the end of the animation you would not want to keep animating your name over and over again in different type faces throughout each Web page. Why, it would be distracting to your real content and it would be perceived as annoying. Remember, your goal is to persuade not assault

To Animate a Layer on a Timeline

1. Start with a fresh, clean practice HTML page. FILE>NEW>HTML Open the timeline by going to WINDOW>TIMELINE. Put a Layer on the Web Page 1.Go to WINDOW>LAYERS, to open the layers palette

2.Add a layer to the Web page by going to INSERT>LAYOUT OB- JECTS> LAYER. Name the layer in the layers palette RED (Double click on Layer One and type in RED)

3.Open the Properties Inspector and change the layer bg (background) color to red.

4.Position the layer using the L(Left) and T(Top) fields on the Property Inspector (Use L=100 and T=100)

Add the Layer to the Timeline Select the layer and go to MODIFY>TIMELINE>ADD OBJECT TO TIMELINE You will see the layer name RED on the timeline in a grey bar (when selected it is purple) with a line and two dots. The dots represent keyframes. There is a start and an end to every animation.

Keyframes represent the start, middle, and finish points of the animation. If you want to change the object during the span of time, you can add a keyframe in between the beginning and finishing keyframes. For now let’s just get this layer to move across the page.

1.Click directly on the last keyframe (dot) and move the layer across the Web page. You can extend the time it take the layer to move from start to finish by selecting and dragging the last keyframe down the timeline.

2.Check off the auto play button and preview the Web page in a Web browser such as Internet Explorer or Ne tscape by pressing F12. You determine which browser is used for testing in the preferences of Dreamweaver.

3.If all is correct, you should have seen the layer move across the page. It only moved once because we do not have it set to loop. If it did not work go back to Dreamweaver and check to see if you there is a check in the Auto play box located on the timeline. To loop the animation, check off the loop box. Now preview it in browser again—F12.

You’ll notice that Dreamweaver announced that it was going to add a Behavior to your Web page code (after you checked LOOP) to allow the animation to go to frame one repeatedly. Behaviors are JavaScript based snippets that Dreamweaver supplies to help JavaScript programming become a bit easier on the novice and intermediate. Instead of writing hand coded JavaScript, Behaviors provide easy, intuitive drop down menus to allow you to use JavaScript functionality without extensive coding knowledge. We will be looking a Behaviors and JavaScript later in the text. You can set up the entire Web page with layers and then plug in your content.

Or, you can slice a page, graphic, or menu in Fireworks and export a table, which you can leave as a table or convert to layers when opened in Dreamweaver. You can also combine the two methods by starting in Fireworks and creating headers and navigation menus. Then you can add layers with all of your content items after the pages are opened in Dreamweaver.

Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable.

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - Website Owner, NAAIP.org

Moses Newman - Chief Technical Officer, NAAIP.org