Web Technologies

Web Technologies Motion Graphics & Animation

How Animations Work • All animations basically work the same way. • Animations consist of a number of frames displayed at a given rate, giving the illusion of movement. • The frame rate is the time each frame of the animation is displayed. The shorter time each frame is displayed, the smoother your animation will appear, but the larger the animation will be.

Motion Graphics • Motion Graphics is a term used to describe graphics that use technology to give the illusion of movement. • The term is more specific to computer animations rather than photographic film.

Animated GIFs • Animated GIF images are a fun component to building web pages, but they are overused many times. • A subtle animation can add interest to a website, However, the animation will always draw attention to itself, so use animations to the advantage of your site's purpose and be very careful so they do not become a distraction.

Animated GIF Editors • Most image editing programs can create animated GIFs. • For this lesson, we will be using a free image manipulation program to create animated GIFs. • To find an application, open your favorite internet browser and perform a web search for “image manipulation program”.

Creating Animations in yourImage Manipulation Program • To create animated images, you should be familiar with the image types. Animated images can only be in GIF format, which means that images will be limited to only 256 colors, so you will likely lose image quality on photographs. • You will also need to be familiar with basic image editing, tools, selectedregions, and layers. • Animated GIFs are not intended to be used as videos, but rather as simple enhancements to a banner, logo, or web graphics.

Methods of Creating Animated GIFs • There are two methods of creating animated GIFs: • Custom animation—where you create each frame of the animation • Automated animation—creates the individual frames of the animation

Creating Custom Animation We will walk through creating a simple custom animation of a car driving along a road.

Creating Custom Animation • You should have a Student Files folder with these pictures: • background.gif • car.gif

Creating Custom Animation • Open both images in your image manipulation program.

Creating Custom Animation • Do the following for both images: • Click on the Image menu item • Select Mode • Choose RGB.

Creating Custom Animation • To create and manage the frames of the animation, we need to have access to the layers of the image. • From one of the image windows, • click on Windows, • choose Dockable Dialogs, and • select Layers.

Creating Custom Animation • We need to get the just the car onto the background. • On the Toolbox, select the Select by Color tool. • The Select by Color tool will allow you to select all areas of the same color on an image • Click on the white background of the car image. This will select all the white region, leaving only the car unselected.

Creating Custom Animation • By clicking on the white background, we selected all the region around the car. • To select the car, we will need to invert the selection.

Creating Custom Animation • Now just the car is selected. • We need to clean up the selection and reduce it down by one pixel so it appears cleaner. • From the Select menu, choose Shrink. • Set the Shrink Selection value to 1 and click OK.

Creating Custom Animation • Now we are ready to copy the selected region and paste it as a layer to the background image. • From the Edit menu, choose Copy.

Creating Custom Animation • Switch to the background image and click on the Edit menu and move down to Paste as, and select New Layer. • You can then close the image with just the car.

Creating Custom Animation • A pasted layer will be displayed as a floating layer. Before you can do anything with the layer, you must name it. • Double click on the layer name, type car as the layer name, and press Enter.

Creating Custom Animation • The next step will be to duplicate the image of the car so it can be placed in each location to produce the animation. • At the bottom of the Layers dialog is a Duplicate Layers button. • Select the car layer and click the Duplicate Layers button 5 times.

Creating Custom Animation • You should now have a total of 6 layers of the car. • These six layers will be arranged along the path the car will travel along the scene.

Creating Custom Animation • Select the Move Tool from the toolbox. • At the bottom of the toolbox, choose Move the active layer. • The active layer is the selected layer in the Layers dialog window.

Creating Custom Animation • Starting with the bottom layer of the car and working up, the cars should be positioned along the path to travel from right to left along the scene.

Creating Custom Animation • When the image is animated, only one layer (or frame) will be displayed at a time. • Because the background is only one frame, it will not remain throughout the animation. • The image manipulation program will allow you to either replace the previous frame with the next frame, or combine the previous frame with the next. • Neither of these options at this point will retain the background, so we need to add it to each of the car layers.

Creating Custom Animation • Select the Background layer from the Layers window. • Click duplicate layer 5 times, just as you did with the car.

Creating Custom Animation • You should have a total of 6 background layers. • The layers dialog box can be expanded to show all layers of the image.

Creating Custom Animation • Drag the Background copy #4 so it is directly below car copy #4. • Drag the Background copy #3 so it is directly below car copy #3. • Complete this process for the remaining background layers.

Creating Custom Animation • The next step will be to flatten each car image with the background image below it. • Right click on the top car copy #4 and select Merge Down. • The car layer and its corresponding background layer will be flattened.

Creating Custom Animation • Merge each of the car layers down to the background layer below it. • When finished, you should have a total of 6 background layers in your Layers dialog.

Creating Custom Animation • To test the animation, • click on Filters, • move down to Animation, and • select Playback.

Creating Custom Animation • From the new window that comes up, you can play the animation. • Use the control box at the top to run the animation.

Creating Custom Animation • The animation will be finalized during the saving process. • To save the animation, click on File and select Save As. • Type the file name driving.gif and select your Student Files folder to save the animation in it.

Creating Custom Animation • You will then be asked how to save the image in the Export File window. • Select Save as Animation. • Click Export.

Creating Custom Animation • If any of the layers exceeds beyond the boundary of the image, you will be asked how to handle the overflow. • You should select Crop to cut off the excess parts of the image.

Creating Custom Animation • The final window will ask how to animate your image. • Select Loop Forever for the animation to continuously loop. • The speed of the animation can be adjusted by adjusting the delay between frames. • Frame disposal should be set to replace previous frames. • Click Save to complete and save the animation.

Automated Animation • The image manipulation program also includes some tools in the Animation category that will create some simple animations for you. • We will create a simple automated animation and combine it with the original animation we already made with the car.

Automated Animation • From your Student Files folder, open the background.gif image. • We will use this image as the background for the animation again.

Automated Animation • We will need to add some text to the image. • To add text to your image, click on the Text Tool on your Toolbox window. • Once you click on the Text Tool, the bottom portion of the toolbar will display the properties for the tool you selected. From here, you can select the font style, size, and color.

Automated Animation • Add the text “Drive Carefully!” to the top of the image. • Font: Sans Bold • Size: 46 px • Color: White

Automated Animation • Make sure your Layers dialog window is open. • Windows -> Dockable Dialogs -> Layers • You should see two layers: the background and the text layer. • We will use the automated burn in animation to go from one layer to the next.

Automated Animation • From the Filters menu item, select Animationand then choose Burn-In. • A screen will appear asking allowing you to select different options for the animation. We do not need to modify any of the settings here. • Just click OK. • Most automated animations allow you to modify the settings.

Automated Animation • A new image is created from your image with the animation feature you chose. • We are now finished with the automated animation. (You may preview it if you wish from the Animation menu.) • Save the image to your Student Files folder. • The image name should be driveCarefully.gif • Be sure to choose Save as Animation when prompted.

Automated Animation • For the animated GIF options, make sure loop forever is selected. • Select the Replace option. • Click Save.

Combining Two Animations • You may now close the driveCarefully.gif file completely. • In your student files folder, you should have two animations: driving.gif and driveCarefully.gif • Open driving.gif

Combining Two Animations • Select the very TOP layer (frame) in the Layers dialog. • The additional frames will be added above whatever layer is selected. • Set the Mode of the image to RGB.

Combining Two Animations • From the File menu, select Open as Layers… • Choose the driveCarefully.gif file you just created. • The Open as Layers option will allow us to import all the layers, or frames, for another animation.

Combining Two Animations • All the layers from the driveCarefully.gif animation should be imported to the driving.gif animation. • You can test the animation by playing it from the Animation menu.

Combining Two Animations • Save the final version of the animation to your Student Files folder as drivingFinal.gif. • Set the animation to Loop Forever. • Click Save.

Combining Two Animations • To view your completed animation, open the webpage named practiceAnimation.htm from your Student Files folder. • If you saved your animation correctly, you should see the animation repeating in the web page.

Web Technologies