Class 10

class 10 – gif animation, swap behavior,  AP divs, assignment 5: AP divs

GIF animations
Animated GIFs are graphic files composed of a series of frames in the GIF89a format. They have the following characteristics:

• They can have a transparent background. This is accomplished by designating one color to be the transparent color.
• They can play once, play a specified number of times, or play forever
• They have a frame rate specified when they are made. Some applications allow a different frame rate to be set for each individual frame.
• They can be optimized so that only the moving objects are changed from frame to frame, rather than repeating the entire scene.

Using Photoshop
Download this file and use it to follow along with the demonstration: animated_gif_example.zip

To make animations in Photoshop, you create the different frames of the animation in separate layers, overlaid in the same location of the Photoshop file. Once you’ve done this, follow these instructions to create the animation:

• Select the slice where there will be an animation (or the whole image if that’s what you are animating)
• Click on the Animation tab in the slice palette
• Initially, there will only be one frame
• To create additional frames, click on the “new” icon at the bottom of the palette (use the trash can to delete frames)
• Select each frame and turn on and off the appropriate layers for that frame
• Select the timing for each frame by pulling down the timing menu directly under the thumbnail
• Select the loop setting by pulling down the menu in the lower left of the palette (Forever, Once, Other)
• To copy and paste frames, DO NOT use command/control-c or command/control-v (they don’t function for animation frames). Select the desired frame(s), and select copy or paste frames from the options pullout in the upper right-hand corner of the palette.
• To optimize the size of the GIF animation, select Optimize Animation from the options pullout.
• Preview your animation by using the play controls at the bottom of the palette.
• To automatically create in between frames in an animation, use the Tween feature in ImageReady. The tweening only works with changes in the position of a layer between two frames. For example, you might have the “GIF” text on the left in one frame, and use the move tool to change the position of the “GIF” in the other frame.
  • To Tween, select the two adjacent frames you want tweened. Then click on the options pullout menu in the upper right hand corner of the palette. Select “Tween…”, and then set the number of frames to be added. That number of intermediate frames will be created, tweening between any graphics that are in different locations in a layer.
• Don’t forget to set the image compression in the optimize palette. You must use the GIF format, since JPEGs cannot be animated. Since Photoshop uses the same palette for all frames, be sure to check every frame for quality.
• To save out the GIF animation, select FILE>SAVE OPTIMIZED and set the location to save your animation.

Note: The animated_gif_example.psd file is organized in layers so that the GIF1, 2, 3… layers match the bars1, 2, 3… layers. So for frame 1, turn on the following layers:

• Animated (a text layer)
• GIF1
• bars1

Exercise: Using the file for the animated gif, animated_gif_example.zip, you should complete the animated gif exercise. You don’t need to hand it in but make sure you understand how to create an animated gif.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Change a different image
Using the swap image behavior

If you want a different image to change when you rollover, it’s a little more complicated. See example page here.

• Insert the image that will be changed
• Select this image and define a name (e.g. “rollover2″) in the property inspector (in the upper left hand corner)
• Insert the other image that will cause the rollover graphic change
• Select this image and put a link or “#” character in the link box in the properties inspector
• Then, while the image that causes rollover is still selected, open the WINDOW>BEHAVIORS window.
• Using the “+” pull-down menu on the left, select the behavior/action Swap Image



• In Swap Image, select the name of the image you want to change (the first image inserted above, rollover2)

• Then browse for the replacement image (the highlight image)
• Note that you can select rollover images for as many named images as desired.
• Check the Preload Images and Restore Images onMouseOut checkboxes
• Select OK
• If you want a different event than a mouseOver to cause the image swap, you can change the event. Click on the “swap image” event, and then click on the downward pointing arrow at the right of the “Events” column. Select the event you want to cause the rollover change.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Another way to postion content on the pages is through the use of what Adobe calls AP divs. “AP” stands for “Absolute Position” and AP divs were once referred to as Layers. (So if you are working in a Macromedia version of Dreamweaver instead of Adobe, you will see they are referred to as layers not AP divs.)

AP divs/Layers: a way to position content on a page

AP divs/Layers are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. AP divs/Layers can

• Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another
  layer.
• Contain anything, including text, links, gifs, animated gifs, and jpgs.
• Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
• Can be shown or hidden.
• Can have their position changed over time.

Creating layers

1. Insert a layer by selecting INSERT > LAYOUT OBJECT > AP DIV.
   Alternatively, select the layer icon in the insert menu
   then click and drag a box to create a layer on the screen.
2. With the div selected, note the following div features in the properties inspector:
   • Left, Top – defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
   • Width, Height – defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
   • The layer name
   • Background image – tiles an image in the background
   • Background color – defines a background color for the layer.
   • Visibility – whether the contents of the layer will show when the page loads
   • Overflow – what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
   • Z index – the layer order – higher is in front
   • Clip – the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
3. The AP elements window displays information about all the divs on the screen.
   • The order of the divs, based on the Z index. The order determines the visibility of layers when one overlaps another. Divs with higher numbers are in front. You can change the order by simply dragging one div to a new location.
   • The currently selected div. You can select a div by clicking the layer name in this window
   • The nesting level of a div
   • The visibility of the div. The eye indicates if the div’s visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

CSS box model

To help you understand positioning you need to understand the box model.

Here’s a helpful tutorial you will want to review:

http://www.brainjar.com/css/positioning/default.asp

Video Demonstration

I demonstrate how to re-create the tables_example.htm sample page using AP divs. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. Note, that this page is actually built using a table structure. I will demonstrate how to build the page using a combination of AP divs and tables. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (54MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.

AP divs | Part 1

AP divs| Part 2

AP divs | Part 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Required Reading:
Read pages 93-114 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:

Below are additional resources you may find helpful:
Adobe Video: Using and customizing CSS based layouts
Adobe Dreamweaver Developer Center: CSS page layout basics

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment 5 (Week 10)

1) Ten Ton Books AP div assignment

Watch the following 3 videos about how to create layouts using CSS. You may watch the videos on either YouTube or Geoff Blake’s site Ten Ton Books. (I think the videos on the Ten Ton Books site have better resolution)

Videos on YouTube:
Creatin’ CSS Layouts In Dreamweaver, Part 1
Creatin’ CSS Layouts In Dreamweaver, Part 2
Creatin’ CSS Layouts In Dreamweaver, Part 3

Same videos on Ten Ton Books site:
Creatin’ CSS Layouts In Dreamweaver, Part 1
Creatin’ CSS Layouts In Dreamweaver, Part 2
Creatin’ CSS Layouts In Dreamweaver, Part 3

I want you to follow the tutorial and create the page as demonstrated by Geoff Blake. Your assignment is to complete the following steps as outlined in all three parts of the video:
• Create the web page using divs for the Header, Content, and Footer (Part1)
• Create a nested div for the Menu (Part 2)
• Center the page (Part 3)

Remember in order to center the page you need to follow the steps below.
(Refer to Part 3, you may need to watch it more than one time):

1. Create new CSS tag for body
2. Set text align to center
3. Add the div #Master. Set the margin to top=0, right=auto, bottom=0, left=auto. The postion needs to be set to “relative,” and the placement for the left (L) and top (T) should both = 0.
4. Cut the closing div tag for # Master and paste it before the closing body tag.

Create the web page as demonstrated in part 1-3 of the videos listed above. Upload the zipped file to “Dropbox” on the smconline.org site by noon, Tuesday, May 5.

2) Re-create the web page from my Video Demonstration

Re-create the web page from my Video Demonstration using a combination of AP divs and tables. I demonstrate how to re-create the tables_example.htm sample page using AP divs. Using the files found here web1_tables_example.zip, re-create the web page found here tables_example.htm in Dreamweaver. You are to build the page using a combination of AP divs and tables.

Recreate the web page as demonstrated in my video demonstration. Upload the zipped file to “DropBox” on the smconline.org site by noon, Tuesday, May 5.

copyright © 2006-2009, jamie cavanaugh

Advertisement