After this lesson you will be able to:

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "After this lesson you will be able to:"

Transcription

1 LESSON 4: ANIMATION OBJECTIVES After this lesson you will be able to: use layers with frames create symbols and instances create motion by tweening create transformations by tweening set the timing of an animation CONTEXT Animation can add excitement and interest to a Web page. Animation techniques on a computer share a common heritage with the film animation techniques that have been used for decades. Traditional animations are produced by drawing the image components of each frame on sheets of transparent cellulose acetate. These sheets are called animation cells. The component cells are stacked to produce one animation frame. This frame is filmed, then the graphic elements in each cell are modified, the next frame is filmed, and so on. When the film is played back, the images appear to move. The same thing happens with the computer. It plays a series of images in frames to create an animation. Each cell of the animation (sprite) Fireworks is a new frame. EXERCISES Create an Animation In the first part of this lesson, you are going to create an animation frame by frame. 1. Choose File > Open, select ani.png in the Lesson 4 folder, and click Open (Figure 4-1). This file has been created for you to practice your animation techniques without worrying about all the other elements of your Outback Adventure page. Notice that the file consists of only one element, a vector graphic of an automobile. SYMBOLS AND INSTANCES To begin your animation, you will learn how to use S y m b o l s and I n s t a n c e s to simplify Fireworks animations and improve editability. Instances are representations of an original Fireworks object, which is designated as the Symbol. When the Symbol object (the original) is modified, the Instances (the copy) automatically change to reflect the modifications to the Symbol. Figure 4-1 Our animation exercise begins with an image of a single jeep. 2 9

2 Use Symbols and Instances to: simplify modifications to existing animations by changing only the Symbol object and having the Instance objects update automatically easily modify complex illustrations containing multiple copies of objects share components across rollover states Creating Symbols is an easy process. Elements, such as logos or trademark characters, which are used numerous times on one page, are good candidates to become symbols. 1. Using the Pointer tool, select the jeep graphic. 2. Choose Edit > Symbol > Make Symbol (Figure 4-2). A plus icon represents a Symbol object. Now your jeep graphic is a symbol and ready to be used in a simple animation. If you create a copy, a duplicate or a clone of your jeep symbol, you will be creating an Instance. An arrow icon represents an Instance object. Figure 4-2 Making a Symbol and creating an Instance Symbol Instance Figure 4-3 ANIMATIONS Frame by Frame You are going to create your animation by duplicating and transforming your jeep symbol step by step (Figure 4-3). 1. Using the Pointer tool, select the jeep symbol. Choose Edit > Duplicate. 2. Using the Pointer tool, select the jeep instance and move it down and to the right from the original. 3. Choose Modify > Free Transform. 4. Resize your jeep, making it smaller by dragging inward on a corner handle (Figure 4-4). 5. Rotate your jeep subtly, moving its position by dragging on the rotation handle. This is a curved hook tool that appears when you move the cursor outside the boundaries of the box around the jeep (Figure 4-4). 6. Repeat the above steps until you have six jeep instances and the original symbol. 7. When you want to reverse the direction the jeep is facing select it and choose Modify >Transform > Flip Horizontal. Figure 4-4 Rotate your jeep by moving the rotation handle. 3 0

3 8. Once you get the hang of it you can save time by copying and pasting instances and then modifying them instead of creating each one separately. In our example your jeep instances travel in an arc from the top-left corner to the bottom-left corner getting progressively smaller. At bottom left, your jeep should be approximately 50 pixels wide (Figure 4-5). Creating Motion When you have seven jeeps arranged in an arc, you are ready to create the animation. You are going to distribute the seven jeeps to individual frames to create the illusion of motion. 1. Using the Pointer tool, select the jeep symbol and all of its instances. 2. Click the Frames tab in the Layers and Frames panel. 3. Choose Distribute Selection from the Options pop-up menu (Figure 4-6). Figure 4-5 Repeat the above steps until you have six jeep instances and the original symbol. Fireworks has created seven frames, each containing one instance of the jeep symbol. There are only a few more steps to creating your animation. Figure 4-6 Choose Distribute Selection from the Options pop-up menu. Changing a Symbol Copying objects to frames creates animations, but what would happen if you needed to change the way that your jeep looks? Ordinarily, you would need to open each individual frame and make the change, which would be a long and grueling process. Instead, Fireworks allows you to make changes to a symbol, which propagates that change to all of the instances. In this case you are going to make a very simple change. You want the headlights of your jeep to be yellow instead of red. 1. Click frame 1 to select the frame with the Symbol. Be sure that your jeep is not selected; you wouldn t want to turn the whole jeep yellow. 2. Click on a bright yellow paint swatch in the Swatches panel. 3. Choose the Paint bucket tool, and click with the pouring spout cursor on the ellipses of the h e a d l i g h t s. 4. Remember, if you accidentally turn something yellow that you don t want, choose Edit > Undo. 5. Now take a few moments to examine the other frames of the animation. All of the headlights are now yellow. Symbols and instances can save you hours of work. Exporting an Animation Now that you ve created the frames of your animation, you need to export it in a file format that can be read by Web browsers. There are several settings that you will need to adjust on the Animation tab of the Export Preview dialog box. 3 1

4 1. Choose File > Export to open the Export Preview dialog box (Figure 4-7). 2. On the Format pull-down menu, choose Animated GIF from the Format pop-up menu. 3. Leave the other export settings at default. 4 Click on the A n i m a t i o n t a b. 5. control The animation the transitions options and let you frames backgrounds of the for animation. each of the Figure 4-7 Setting Disposal, Timing, and Looping The Preview dialog box The d i s p o s a l method determines how pixels of the selected frame are replaced by the next frame when viewed in a Web browser. (It s the button with the trash can icon in Figure 4-8.) There are four disposal methods: U n s p e c i f i e d : No disposal method is specified. Fireworks automatically selects the disposal method for each frame. Choose Unspecified to create the smallest possible animated GIFs. None: The frame is not disposed before the new frame is displayed. The next frame appears on top of the current frame. Choose None to add a smaller object to the existing frame. Restore to Background: Erases the current frame s image and restores the area to the background color or pattern that appears in the Web browser. Choose Restore to Background when moving an object in a transparent animated GIF. Restore to Previous: Erases the current frame s image and restores that area to the previous frame s image. Choose Restore to Previous to animate objects across a background image. 1. Click the Disposal button, but keep the disposal method Unspecified. 2. The t i m i n g of each frame is called the frame delay and is set in one-hundredths of a second. The higher the number, the longer the frame is displayed. To change the frame delay, select the frame and type a number in the Frame delay field. You will most likely need to change multiple frames at the same time. To do this, select the first frame of the sequence that you want to change, hold down the Shift key, and select the last frame of the sequence. Then type the new frame delay number in the Frame delay field. 3, An animation can be set to play once, loop a specified number of times, or loop f o r e v e r. Click the L o o p button (Figure 4-8) and choose 5 from the Number of loops field. Disposal button Number of loops field Loops Figure 4-8 The animation options let you control the transitions and backgrounds for each of the frames of the animation. 3 2

5 4. To preview your animated GIF, click P l a y from the control at the bottom of the Export Preview dialog box (Figure 4-9). Figure 4-9 Click Play to preview your animated GIF. Figure 4-10 The export Area toolbox Click the Update file size button to generate an updated GIF file size. This feature allows you to determine if your animated GIF will be of sufficiently small file size. File size is particularly important when pertaining to animated GIF advertising banners that usually have stringent rules regarding file size. If your animated GIF s file size were too large, you would have the option of limiting the palette or changing to animation settings to reduce the file size (Figure ). Click Export and name your GIF file, anitest, and save it into the Lesson 4 folder. Minimize Fireworks and navigate to your Lesson 4 folder. Double-click the anitest.gif to open the file in your browser and view the finished animation. TWEENED ANIMATIONS In traditional animation shops, a lead artist creates keyframes, the frames in which the animation changes, and other artists, called t w e e n e r s, draw all the frames in between the keyframes. This process can be quite tedious for the tweeners. Fireworks creates those in-between frames for you. This technique makes extensive use of Symbols and Instances. T w e e n i n g blends a Symbol and one or more of its Instances, creating interim Instance objects with transitional attributes. The ability to tween bitmap graphics is a powerful advantage of Fireworks. Tweening can apply to these object characteristics: transformations tween between objects with different rotation, scaling, distortion, or skew transformations opacity tween between opacity settings of the same opacity type live effects tween between settings of the same live effects Using Tweening to Make an Ad Banner Animated advertising banners on the Web are popular and effective. Let s create a simple advertising banner for a San Francisco advertising agency, Arcanum Architecture. 1. Choose File > Open and select banst.png, which you will find in the Lesson 4 folder. Click Open. 2. Choose File > Save As and type banner.png. Click Save. 3. Using the Pointer tool, hold down the Shift key, and select the text objects Arcanum and A r c h i t e c t u r e. 4. Choose Edit > Symbols > Make Symbol. 3 3

6 5. Decrease the Opacity slider to 50 (Figure 4-11). 6. Choose Edit > Clone. 7. Increase the Opacity slider to 100. Cloning creates an exact copy of the selected object and positions it directly on top of the original. 8. Using your Pointer tool, draw a selection rectangle around the capital A in Arcanum. This selects both the symbol and the instance, but not the graphic on the right side of the banner. 9. Choose Edit > Symbols > Tween Instances Enter 5 in the Tween Instances dialog box 1 1. Check Distribute to frames to distribute the tweened objects to separate animation frames (Figure 4-12). Click OK In the Layers panel choose Add Frames from the Options pop-up menu and type 3 in the number field. Choose the At the end radial button and click OK Use your Eyedropper tool to sample the color of the text from the seventh frame In the eighth frame, click the Text tool. Type Restaurants. Choose Times New Roman for the font and 35 for the font size Repeat in the ninth frame but type Retail, and for the tenth frame but type Residential. Because your text graphic is on top of a graphic, you need to include it in the frames over which your text graphic animates. Copying an object to multiple frames is not difficult Using the Pointer tool, select the graphic to the far right of the panel Click the Frames tab of the Layers and Frames panel. Choose copy to Copy to Frames from the Options pop-up menu Select All frames and click OK. Exporting the Tweened Animation Figure 4-11 Use the opacity slider to change the opacity of the image in different frames. Figure 4-12 To distribute the tweened objects to separate animation frames check Distribute to frames. In Lesson Five, you will be learning more about exporting files. However, you will export your tweened animation so that you can see the results in the browser window. 1. Choose File > Export to open the Export Preview dialog box. 2. On the Format pull-down menu, choose Animated GIF from the Format pop-up menu. Leave the other export settings at default. 3. Click on the Animation tab. 4. Click the Loop button. Choose Forever from the Number of loops pop-up menu. 5. Click the Export button. Name the file Bantest and save it in the Lesson 4 folder. 6. To test your animation, minimize Fireworks and navigate to your Lesson 4 folder. 7. Double-click the Bantest.gif to open the file in your browser and view the finished animation. MORE EXERCISES TO SHARPEN YOUR SKILLS Create two animations as you did in this lesson. The first should be an animation that you construct frame by frame and consists of 10 frames. Create an image to manipulate for this animation. The second animation should be a tweened animation, consisting of 10 frames. You might choose to tween the transparency of text or an image or the effect placed on an image. Each of these animations should be in a separate file. 3 4

Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications.

Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications. Collect ingredients. Photographs. Art. Scans. Or fill and paint new elements inside Photoshop itself. Or, import graphics from other applications. (This is the default Photoshop application window. My

More information

Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash.

Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash. LESSON 7: CREATING ANIMATED GIF IMAGES OBJECTIVES When you finish this lesson, you will understand: frame-by-frame animation onion skinning symbols tweening and you will have learned: how to create GIF

More information

m ac romed ia Fi r e wo r k s Curriculum Guide

m ac romed ia Fi r e wo r k s Curriculum Guide m ac romed ia Fi r e wo r k s Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra

More information

One of the most important features of Web graphics is the ability to link to other pages using Image Maps.

One of the most important features of Web graphics is the ability to link to other pages using Image Maps. LESSON 6: IMAGE MAPS AND SLICING OBJECTIVES By the end of this lesson you will be able to: create and edit links copy graphics to URL objects make URL link choices understand Slicing export different aspects

More information

m ac romed ia Fl a s h Curriculum Guide

m ac romed ia Fl a s h Curriculum Guide m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

Working With Animation: Introduction to Flash

Working With Animation: Introduction to Flash Working With Animation: Introduction to Flash With Adobe Flash, you can create artwork and animations that add motion and visual interest to your Web pages. Flash movies can be interactive users can click

More information

Smart Board Notebook Software A guide for new Smart Board users

Smart Board Notebook Software A guide for new Smart Board users Smart Board Notebook Software A guide for new Smart Board users This guide will address the following tasks in Notebook: 1. Adding shapes, text, and pictures. 2. Searching the Gallery. 3. Arranging objects

More information

How to create a Flash banner advert in DrawPlus X2

How to create a Flash banner advert in DrawPlus X2 How to create a Flash banner advert in DrawPlus X2 Open DrawPlus X2 and choose Start New: Keyframe Animation Select WebPlus 10 Flash Banner and click on Open The work area should look like the screenshot.

More information

Note: Animations can only be produced with the Premium version.

Note: Animations can only be produced with the Premium version. Web Animations Web Animations 273 On the move. Web Animations in Xara Web Designer Premium Note: Animations can only be produced with the Premium version. Web animations are images that move on the Internet

More information

Animated GIFs. How They Work. In this chapter

Animated GIFs. How They Work. In this chapter Animated GIFs 2 0 0 7 N O T E S This article was originally published in 2003 as Chapter 17 of Learning Web Design, 2nd edition. When you see a web graphic spinning, blinking, fading in and out, or otherwise

More information

In this lesson, you ll learn to:

In this lesson, you ll learn to: LESSON 3: INTERACTIVITY BASICS OBJECTIVES In this lesson, you ll learn to: make your Flash movie interactive apply actions to specific frames create interactive buttons create and edit symbols in the Library

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Workspace tour Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will become familiar with the terminology and workspace

More information

Lava Lamp. Step 2. Click Window Menu > Other Panels > Common Libraries > Stuff to Trace.

Lava Lamp. Step 2. Click Window Menu > Other Panels > Common Libraries > Stuff to Trace. Flash Chapter 16 A. Setup to Trace Bitmap. Step 1. Click File Menu > New and OK. Lava Lamp Click Window Menu > Other Panels > Common Libraries > Stuff to Trace. Find lavalamp.png in the list of symbols

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

Introduction to Macromedia Flash 8

Introduction to Macromedia Flash 8 Introduction to Macromedia Flash 8 Flash Workspace Current scene Tools panel Timeline Panels Layers Workspace Stage Property inspector 2 Stage You compose movie content on the Stage. Set Stage size to

More information

User s Guide. Or at Vimeo Channel: https://www.vimeo.com > Locus Picker

User s Guide. Or at Vimeo Channel: https://www.vimeo.com > Locus Picker User s Guide Tutorial movie files are also available at LOCUS Youtube channel: https://www.youtube.com/user/locusstudio/playlists > R&D Center: LOCUS Picker Or at Vimeo Channel: https://www.vimeo.com >

More information

Chapter 3: Quick Start Tutorial

Chapter 3: Quick Start Tutorial 1 Quick Start Tutorial Chapter 3: Quick Start Tutorial This chapter helps you become acquainted with the workspace, the commands, and the features that you use to create your own website. The step-by-step

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Create a new file/canvas to work with by going to the file menu and selecting new.

Create a new file/canvas to work with by going to the file menu and selecting new. GIMP: Gif Animation Animating images to create a cartoon-like effect can be performed in GIMP. The GIMP program will only animate.gi f files, so the animation will appear more like a cartoon than like

More information

CREATE A 3D MOVIE IN DIRECTOR

CREATE A 3D MOVIE IN DIRECTOR CREATE A 3D MOVIE IN DIRECTOR 2 Building Your First 3D Movie in Director Welcome to the 3D tutorial for Adobe Director. Director includes the option to create three-dimensional (3D) images, text, and animations.

More information

Introduction to Fireworks - Animated Gifs

Introduction to Fireworks - Animated Gifs Introduction to Fireworks - Animated Gifs This tutorial will look at creating Animated Gif's using Fireworks. First of all we need to create a new file so go to File > New Canvas size Canvas colour In

More information

Image Editing in Photoshop CS4

Image Editing in Photoshop CS4 Image Editing in Photoshop CS4 Photoshop CS4 Help For more technical assistance, open Photoshop CS4 and press the F1 key, or go to Help >Photoshop Help. This will open Photoshop CS4 help topics in a web

More information

Graphic Design Basics Tutorial

Graphic Design Basics Tutorial Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading

More information

Overview of the Adobe Flash Professional CS6 workspace

Overview of the Adobe Flash Professional CS6 workspace Overview of the Adobe Flash Professional CS6 workspace In this guide, you learn how to do the following: Identify the elements of the Adobe Flash Professional CS6 workspace Customize the layout of the

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Creating a logo Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will create a logo for an imaginary coffee shop.

More information

Lesson Plan. Course Title: Web Technologies Session Title: Motion Graphics & Animations

Lesson Plan. Course Title: Web Technologies Session Title: Motion Graphics & Animations Lesson Duration: 4 hours Lesson Plan Course Title: Web Technologies Session Title: Motion Graphics & Animations Performance Objective: Upon completion of the lesson, students will be able to use an image

More information

Figure 3.5: Exporting SWF Files

Figure 3.5: Exporting SWF Files Li kewhatyou see? Buyt hebookat t hefocalbookst or e Fl ash + Af t eref f ect s Chr i sjackson ISBN 9780240810317 Flash Video (FLV) contains only rasterized images, not vector art. FLV files can be output

More information

Flash MX 2004 Animation Lesson

Flash MX 2004 Animation Lesson Flash MX 2004 Animation Lesson By Tonia Malone Technology & Learning Services 14-102 Lesson Opening a document To open an existing document: 1. Select File > Open. 2. In the Open dialog box, navigate to

More information

Create a digital story with stop-motion animation

Create a digital story with stop-motion animation Step-by-Step Guide Create a digital story with stop-motion animation Armed with nothing but a digital camera and Adobe Photoshop CS6, you can tell a story by producing, directing, and editing your own

More information

Recipes4Success. Animate a Rocket Ship. Frames 6 - Drawing Tools

Recipes4Success. Animate a Rocket Ship. Frames 6 - Drawing Tools Recipes4Success You can use the drawing tools and path animation tools in Frames to create illustrated cartoons. In this Recipe, you will draw and animate a rocket ship. 2014. All Rights Reserved. This

More information

Working With Animation: Intermediate Flash

Working With Animation: Intermediate Flash Working With Animation: Intermediate Flash Creating a Frame-by-Frame Animation To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each

More information

Recipes4Success. Create an Animated Idiom. Frames 6 - Clay Animation

Recipes4Success. Create an Animated Idiom. Frames 6 - Clay Animation Recipes4Success You will learn how to create an animated movie using Frames. You will import a folder of images, add a title, credits, text effects, music, shapes, and transitions, and then export the

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

Creating Hyperlinks & Buttons InDesign CS6

Creating Hyperlinks & Buttons InDesign CS6 Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,

More information

Adobe Photoshop CS4: Advanced Part 2: Special Effects and Graphic Design

Adobe Photoshop CS4: Advanced Part 2: Special Effects and Graphic Design Adobe Photoshop CS4: Advanced Part 2: Special Effects and Graphic Design INFORMATION TECHNOLOGY SERVICES CALIFORNIA STATE UNIVERSITY, LOS ANGELES Version 1.0 Winter 2010 Table of Contents Introduction...2

More information

Adobe Illustrator CS5 Part 1: Introduction to Illustrator

Adobe Illustrator CS5 Part 1: Introduction to Illustrator CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Illustrator CS5 Part 1: Introduction to Illustrator Summer 2011, Version 1.0 Table of Contents Introduction...2 Downloading

More information

Animated GIFs. How They Work. In this chapter

Animated GIFs. How They Work. In this chapter Animated GIFs 2007 NOTES This article was originally published in 2003 as Chapter 17 of Learning Web Design, 2nd edition. When you see a web graphic spinning, blinking, fading in and out, or otherwise

More information

Step-by-Step (For Macintosh) Creating a Slide Show With Microsoft PowerPoint 2001

Step-by-Step (For Macintosh) Creating a Slide Show With Microsoft PowerPoint 2001 Step-by-Step (For Macintosh) Creating a Slide Show With Microsoft PowerPoint 2001 PowerPoint is the presentation and graphics component of Microsoft Office 2001. You can use PowerPoint to create slides,

More information

Creating an invitation

Creating an invitation Creating an invitation Michaela Maginot Concept and design Invitation complete with gift box, card, and transparent envelope. For more options, please visit www.corel.com/design collection. The goal was

More information

MASKS & CHANNELS WORKING WITH MASKS AND CHANNELS

MASKS & CHANNELS WORKING WITH MASKS AND CHANNELS MASKS & CHANNELS WORKING WITH MASKS AND CHANNELS Masks let you isolate and protect parts of an image. When you create a mask from a selection, the area not selected is masked or protected from editing.

More information

MACROMEDIA FLASH MX ~A Step-by-Step Guide~

MACROMEDIA FLASH MX ~A Step-by-Step Guide~ MACROMEDIA FLASH MX ~A Step-by-Step Guide~ 1 LESSON 1 1.1 INTRODUCTION TO FLASH You will need to know: Movie or animation Frames Layers Timeline Stage Toolbox and Modifiers Layers Timeline Menu Toolbox

More information

Fireworks for Graphics and Images

Fireworks for Graphics and Images Fireworks for Graphics and Images Joan Weeks SLIS Computer Labs Mgr. October 2009 Fireworks for Banners and Images Fireworks is a web developer s tool to make banners and graphics, as well as format images

More information

Publisher Microsoft Publisher 2013

Publisher Microsoft Publisher 2013 Publisher Microsoft Publisher 2013 Mercer County Library System Brian Hughes, County Executive Action Technique 1. Create a New Publication Start Publisher. Under Featured, you can click and choose from

More information

MS PowerPoint an overview

MS PowerPoint an overview MS PowerPoint 2010 - an overview Microsoft PowerPoint is a presentation program, i.e. a software package used to display information as a slide show. This short course is an introduction to Microsoft PowerPoint

More information

NVCC Alexandria Campus

NVCC Alexandria Campus 1 NVCC Alexandria Campus Editing Photographs Using Microsoft Picture Manager Introduction Microsoft Picture Manager is an image editing program that allows you to browse/organize your photos, resize and

More information

ACADEMIC TECHNOLOGY SUPPORT

ACADEMIC TECHNOLOGY SUPPORT ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...

More information

Embroidery Fonts Plus ( EFP ) Tutorial Guide Version 1.0505

Embroidery Fonts Plus ( EFP ) Tutorial Guide Version 1.0505 Embroidery Fonts Plus ( EFP ) Tutorial Guide Version 1.0505 1 Contents Chapter 1 System Requirements.................. 3 Chapter 2 Quick Start Installation.................. 4 System Requirements................

More information

Flash MX Image Animation

Flash MX Image Animation Flash MX Image Animation Introduction (Preparing the Stage) Movie Property Definitions: Go to the Properties panel at the bottom of the window to choose the frame rate, width, height, and background color

More information

Creating a Calendar in CorelDRAW

Creating a Calendar in CorelDRAW Creating a Calendar in CorelDRAW Welcome to this tutorial using CorelDRAW! The hardest part about creating a calendar in CorelDRAW is deciding on the size. Once you set the page size, the script will take

More information

Lession: 2 Animation Tool: Synfig Card or Page based Icon and Event based Time based Pencil: Synfig Studio: Getting Started: Toolbox Canvas Panels

Lession: 2 Animation Tool: Synfig Card or Page based Icon and Event based Time based Pencil: Synfig Studio: Getting Started: Toolbox Canvas Panels Lession: 2 Animation Tool: Synfig In previous chapter we learn Multimedia and basic building block of multimedia. To create a multimedia presentation using these building blocks we need application programs

More information

Sharing Files and Whiteboards

Sharing Files and Whiteboards Your user role in a meeting determines your level of file sharing. The type of files you can share include documents, presentations, and videos. About Sharing Files, page 1 Changing Views in a File or

More information

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Create your Web page in layout view Insert Flash Text and Flash Button objects

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Working with layout Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will create a poster for an imaginary coffee

More information

POWERPOINT 2004 for MAC

POWERPOINT 2004 for MAC CMM1108 COMMUNICATIONS AND DIGITAL TECHNOLOGIES POWERPOINT 2004 for MAC Creating Presentations This tutorial has been adapted for teaching purposes from PowerPoint:Mac 2004 Help Menu options. Microsoft

More information

Creating an invitation

Creating an invitation Creating an invitation Michaela Maginot About the author Michaela Maginot lives in Unterhaching, Germany, not too far from Munich. She graduated from the Deutschen Meisterschule für Mode (German Master

More information

To Begin Customize Office

To Begin Customize Office To Begin Customize Office Each of us needs to set up a work environment that is comfortable and meets our individual needs. As you work with Office 2007, you may choose to modify the options that are available.

More information

Create A Collage Of Warped Photos

Create A Collage Of Warped Photos Create A Collage Of Warped Photos In this Adobe Photoshop tutorial, we re going to learn how to create a collage of warped photos. Now, don t go letting your imagination run wild here. When I say warped,

More information

Create a Poster Using Publisher

Create a Poster Using Publisher Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs

More information

Gimp 2.6. Introduction. Gimp is available for: - Windows - Linux - Mac. Available for download from:

Gimp 2.6. Introduction. Gimp is available for: - Windows - Linux - Mac. Available for download from: Gimp 2.6 Gimp is available for: - Windows - Linux - Mac Available for download from: http://www.gimp.org/downloads/ Documentation: http://docs.gimp.org/2.6/en/ http://en.wikibooks.org/wiki/gimp Introduction

More information

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video.

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video. LESSON 6: PUTTING IT ALL TOGETHER OBJECTIVES In this lesson, you ll learn to: preview your movie with the Test Movie command export your movie to a Web-ready Shockwave Flash file use Macromedia Aftershock

More information

POWER BASICS. Creating a slide from scratch. Adding text to a slide. Adding another slide. Saving Your Presentation.

POWER BASICS. Creating a slide from scratch. Adding text to a slide. Adding another slide. Saving Your Presentation. Creating a slide from scratch POWER BASICS 1. Open the PowerPoint program. The PowerPoint dialog box appears. 2. In the PowerPoint dialog box, click the Blank Presentation option button. The New Slide

More information

Creating Icons with CorelDraw

Creating Icons with CorelDraw Creating Icons with CorelDraw Icons come in a variety of standard sizes, usually measured in pixels (short for picture element). All icons occupy a square space, although they may not appear square because

More information

Hands-On Practice. Using Notebook Software in the Office

Hands-On Practice. Using Notebook Software in the Office Using Notebook Software in the Office Before You Start Before you begin your meeting, ensure that your computer is turned on and the SMART Board interactive whiteboard is connected and oriented. The SMART

More information

Animation Action STUDIO. PROJECT 11 For use with Chapter 8. Objective SUPPLIES

Animation Action STUDIO. PROJECT 11 For use with Chapter 8. Objective SUPPLIES STUDIO PROJECT 11 For use with Chapter 8 Name Animation Action Date Class Period Objective Draw a simple animation sequence in a sketchbook and import your drawings into a multimedia program to create

More information

Photoshop 5.5 Hotkey Table

Photoshop 5.5 Hotkey Table Operation Photoshop 5.5 Hotkey Table Shortcut Menu commands Actual Pixels Ctrl + Alt + zero (0) Auto Levels Ctrl + Shift + L Bring Layer Forward Ctrl + ] Bring Layer to Front Ctrl + Shift + ] Clear Backspace

More information

Microsoft Publisher 2013

Microsoft Publisher 2013 CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Publisher 2013 Spring 2015, Version 1.0 Table of Contents Introduction...3 Starting Publisher...3 Overview of the User

More information

Impress Guide. Chapter 2 Using Slide Masters, Styles, and Templates

Impress Guide. Chapter 2 Using Slide Masters, Styles, and Templates Impress Guide Chapter 2 Using Slide Masters, Styles, and Templates Copyright This document is Copyright 2005 2009 by its contributors as listed in the section titled Authors. You may distribute it and/or

More information

PowerPoint Working with Visual Elements PP600

PowerPoint Working with Visual Elements PP600 PowerPoint Working with Visual Elements PP600 This page left blank intentionally Diocese of St. Petersburg pg. 2 5/29/2009 Table of Contents Working with Diagrams: An Overview... 4 Types of Diagrams...

More information

SMART Notebook 10 User s Guide. Linux Operating Systems

SMART Notebook 10 User s Guide. Linux Operating Systems SMART Notebook 10 User s Guide Linux Operating Systems Product Registration If you register your SMART product, we ll notify you of new features and software upgrades. Register online at www.smarttech.com/registration.

More information

Microsoft PowerPoint 2008 for the Mac

Microsoft PowerPoint 2008 for the Mac Microsoft PowerPoint 2008 for the Mac Hands-On Tour About this Guide Part 1: Getting Started About the Microsoft PowerPoint Window Create a New Presentation Save Your Presentation Compatibility with Previous

More information

Adding Animation With Cinema 4D XL

Adding Animation With Cinema 4D XL Step-by-Step Adding Animation With Cinema 4D XL This Step-by-Step Card covers the basics of using the animation features of Cinema 4D XL. Note: Before you start this Step-by-Step Card, you need to have

More information

Exploring Macromedia Flash MX

Exploring Macromedia Flash MX September 27, 2002 Julie Albertson, ECC Exploring Macromedia Flash MX What is Flash? Flash is a stand-alone piece of software for producing and delivering high-impact multimedia and web experiences. Developers

More information

Introduction to PowerPoint in the Classroom Victoria Cross & Barbara Sommer, TRC PC: Office XP

Introduction to PowerPoint in the Classroom Victoria Cross & Barbara Sommer, TRC PC: Office XP Introduction to PowerPoint in the Classroom Victoria Cross & Barbara Sommer, TRC PC: Office XP PowerPoint vocabulary Slide: An individual screen in a presentation. Presentation: The file you save to disk

More information

This Skill Builder demonstrates how to define and place sketched symbols in drawings.

This Skill Builder demonstrates how to define and place sketched symbols in drawings. Sketched Symbols This Skill Builder demonstrates how to define and place sketched symbols in drawings. A sketched symbol is a user-defined symbol. You create sketched symbols in the sketch environment

More information

Table of Contents. I. Banner Design Studio Overview... 4. II. Banner Creation Methods... 6. III. User Interface... 8

Table of Contents. I. Banner Design Studio Overview... 4. II. Banner Creation Methods... 6. III. User Interface... 8 User s Manual Table of Contents I. Banner Design Studio Overview... 4 II. Banner Creation Methods... 6 a) Create Banners from scratch in 3 easy steps... 6 b) Create Banners from template in 3 Easy Steps...

More information

Creating templates and slide masters in PowerPoint 2003

Creating templates and slide masters in PowerPoint 2003 Creating templates and slide masters in PowerPoint 2003 These days, it is not enough to create a presentation with interesting and exciting content; you have to create one with interesting and exciting

More information

Graphic Design Studio Guide

Graphic Design Studio Guide Graphic Design Studio Guide This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used

More information

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

Create an Art Collage

Create an Art Collage Create an Art Collage Anyone with children knows how much art they bring home from school everyday, those backpacks full of art add up fast. Now, you don t have to part with a single precious piece or

More information

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. Vectorizing images Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional. In this tutorial, you will trace a bitmap image to convert it to

More information

Flash 5 Notes. Contents: Starting Flash

Flash 5 Notes. Contents: Starting Flash Flash 5 Notes Contents: Starting Flash... 1 Starting a new movie... 2 Drawing with flash... 3 The timeline... 3 Animation... 4 Motion Tweens... 4 Grouping Objects... 6 Layers... 7 Inserting Layers... 7

More information

ACE: Illustrator CC Exam Guide

ACE: Illustrator CC Exam Guide Adobe Training Services Exam Guide ACE: Illustrator CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

Microsoft PowerPoint 2010 Animating Text (Level 3)

Microsoft PowerPoint 2010 Animating Text (Level 3) IT Services Microsoft PowerPoint 2010 Animating Text (Level 3) Contents Introduction... 1 Built-in Text Animation... 1 Applying Simple Animations... 1 Custom Animation... 2 Changing and Removing Animation

More information

Tutorial Four: Visualizing fractions with fraction tiles In this lesson you will create a new project using the Kidspiration Fraction Tiles Math

Tutorial Four: Visualizing fractions with fraction tiles In this lesson you will create a new project using the Kidspiration Fraction Tiles Math Tutorial Four: Visualizing fractions with fraction tiles In this lesson you will create a new project using the Kidspiration Fraction Tiles Math Tool. In the context of finding equivalent fractions, subtracting

More information

Microsoft Power Point Animations

Microsoft Power Point Animations Microsoft Power Point Animations Animate text and objects You can animate the text and object in your presentation to give them visual effects, including entrances, exits, changes in size or color, and

More information

Create an interactive syllabus for your students

Create an interactive syllabus for your students Step-by-Step Guide Create an interactive syllabus for your students In a world of instant messaging and social media, many instructors find the traditional text and paper approach to publishing a course

More information

Impress Guide. Chapter 5 Creating Graphic Objects

Impress Guide. Chapter 5 Creating Graphic Objects Impress Guide Chapter 5 Creating Graphic Objects Copyright This document is Copyright 2007 2009 by its contributors as listed in the section titled Authors. You may distribute it and/or modify it under

More information

TUTORIAL. Introduction to Adobe Fireworks CS4

TUTORIAL. Introduction to Adobe Fireworks CS4 TUTORIAL October 2008 2008 Adobe Systems Incorporated. All rights reserved. If this tutorial is distributed with software that includes an end user agreement, this guide, as well as the software described

More information

Creating an Animated Navigation Bar in InDesign*

Creating an Animated Navigation Bar in InDesign* Creating an Animated Navigation Bar in InDesign* *for SWF or FLA export only Here s a digital dilemma: You want to provide navigation controls for readers, but you don t want to take up screen real estate

More information

Teach Yourself Microsoft Office 365 Outlook, PowerPoint & Publisher Level 2, Week 5: Advanced PowerPoint Skills

Teach Yourself Microsoft Office 365 Outlook, PowerPoint & Publisher Level 2, Week 5: Advanced PowerPoint Skills http://www.gerrykruyer.com Teach Yourself Microsoft Office 365 Outlook, PowerPoint & Publisher Level 2, Week 5: Advanced PowerPoint Skills Last week you were introduced to PowerPoint slide animation and

More information

Flash Photo Gallery. Dynamic Content 1

Flash Photo Gallery. Dynamic Content 1 Dynamic Content 1 Flash Photo Gallery With WebPlus, you can add Flash photo galleries to your websites. Simply add your photos, and then choose from a range of professionally-designed templates. You can

More information