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

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

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

Transcription

1 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 manipulation program to create simple custom and automated animated GIFs for the web. Specific Objectives: Students will be able to create an animation Students will understand the process of creating an animation Students will understand the components of an animation Students will be able to create a custom animation from individual image layers TEKS Correlations: (c) Preparation (3)(B) explain the key functions and applications of software programs (5)(C) identify, create, modify, and use available file formats such as text, image, video analog and digital, and audio files (7)(B) select, create, modify, and integrate effective multimedia content such as vectorbased and raster graphics, motion graphics, video, and audio (7)(D) demonstrate proper use of folder structure hierarchy Instructor/Trainer References: Using your favorite internet browser, perform a web search for image manipulation program. Instructional Aids: Web Animation Presentation Lab 1 Handout: Automated Animations Lab 2 Handout: Custom Animations Motion Graphics & Animations Quiz Motion Graphics & Animations Quiz - KEY Student Files folder Materials Needed: Copies of Lab 1 and Lab 2 Copies of quiz Each student will need a copy of the Student Files Folder provided with this lesson. Equipment Needed: 1

2 Each student will need a computer with the latest version of an image manipulation program. To find a program, the student can perform a web search for image manipulation program. Introduction Introduction (LSI Quadrant I): The instructor should ask students about websites that have animation on them. The instructor should also emphasize that animation on a website can be very distracting to the visitor, and the web designer should carefully consider what type of animation to include. Outline Outline (LSI Quadrant II): Instructor Notes: I. Animations overview A. How animations work B. What are animated GIFs? C. Required software D. Required knowledge E. Methods of creating animated GIFs II. Creating custom animation A. Preparing an image for editing B. Combining two images C. Creating multiple frames for the animation D. Editing each frame of the animation E. Merging layers and frames F. Previewing the animation G. Saving the animation III. Using the built-in animation tools A. Adding text B. Applying the animation filter C. Saving the animation IV. Combining two animations A. Importing an animation as a new layer B. Saving and finalizing the animation V. View animation in a web page VI. Students complete hands-on labs A. Using animation filters B. Creating a custom animation Provide each student with a copy of the Student Files Folder prior to showing the presentation. Students should follow along and complete a practice animation together during the presentation. 2

3 Application Guided Practice (LSI Quadrant III): During the presentation, students will create a custom animation together as a class. Students will also add an automated animation feature to their custom animation. Independent Practice (LSI Quadrant III): Following the presentation, the instructor should provide the students with two hands-on labs they must complete on their own. The first lab will walk the students through creating an animation. The second lab will walk the students through creating a custom animation. Summary Review (LSI Quadrants I and IV): Students will incorporate all the concepts introduced in the lesson by completing the hands-on labs. Students will then practice these concepts. Evaluation Informal Assessment (LSI Quadrant III): The instructor should periodically check during the presentation to make sure students understand the concepts and are successfully keeping up with the group exercise. Formal Assessment (LSI Quadrant III, IV): The students should complete the labs individually to reinforce and ensure an understanding of the concepts introduced. The final product the students produce from the labs should resemble the completed labs in the instructor s key folder. Extension Extension/Enrichment (LSI Quadrant IV): Students will gain a basic understanding of animations and how they work. Following the lesson, students can learn more complex animation topics. Because this lesson introduced animation for the web, students should also learn web development. The HTML Scripting lesson will introduce students to creating web pages using HTML and will go through inserting images. Once both lessons are complete, students can create their own websites with custom animations on banners and logos. 3

4 Icon Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Lecture, discussion, journal writing, cooperative learning, word origins Problem solving, number games, critical thinking, classifying and organizing, Socratic questioning Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video, DVD, charts, maps Use music, compose songs or raps, use musical language or metaphors Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems Reflective teaching, interviews, reflective listening, KWL charts Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions Personal Development Strategies Reading, highlighting, outlining, teaching others, reciting information Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind s eye) Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling Studying in a group, discussing information, using flash cards with other, teaching others Naturalist Existentialist Natural objects as manipulatives and as background for learning Socratic questions, real life situations, global problems/questions Connecting with nature, forming study groups with like-minded people Considering personal relationship to larger context 4

5 Motion Graphics & Animation Lab 1 Automated Animations 1. Open the Image Manipulation Program. 2. On the Toolbox, set the foreground color to e79c0a and set the background color to Open a new image. From the image window, click on File and select New. 4. In the Create a New Image window, set the width to 400 and the height to Click Ok to create a blank canvas for the image. 6. From the Toolbox, click on the Text tool. 7. After selecting the Text tool, the text options will appear at the bottom of the Toolbox window. Set the text to Sans, the size to Click in the center of the background and type your first and last name. 9. Click the Move Tool. 10. At the bottom of the Toolbox window, the properties for the Move tool will appear. Click on Move the active layer. Student Name 11. Use the move tool to position your name in the center of the image. 12. Merge the text down onto the background to create a single layer. To do this, we need to have access to the Layers window. To open the Layers window, click on Windows and go to Dockable Dialogs, and select Layers. 13. On the Layers window, you should see two layers: a text layer with your name and then the background layer. Merge the text layer down onto the background layer. 14. Right-click on the layer with your name. A shortcut menu will appear. Select Merge Down. The text layer should become part of the background layer, and there should now only be one layer shown in the Layers window. 15. You are now ready to apply an animation to the image. From the Filters window, select Animation. You will see the different built-in animation features available. 5

6 16. From the available animations, choose the Waves animation. This animation requires only one layer. 17. When you select the Waves animation, a window will appear that allows you to modify the default settings of the animation. You do not need to make any changes here; just click the OK button. 18. A new image will be created from the image you make. The text on the image will look smeared and swirled, but that is part of the animation. You will not be able to make out your name in the animation 19. To preview the animation, click the Filters menu at the top, move down to Animation, and select Playback. 20. The Animation Playback window will appear. At the top left is a Play button that looks like a triangle. Click it to run the animation. 21. To save the animation, click on File at the top of the image with the swirly letters, and select Save As. 22. Enter lab1.gif as the file name. The image should be saved to your Student Files folder. 23. Click Save. 24. Another window will appear asking how to export the file. You should select Save as Animation, and click the Export button. 25. Another window will appear that allows you to adjust the Animation Options. Because this is a built in animation, you do not need to modify the default settings here. Just click the Save button. 26. The image is now saved. To see your animation, open the web page named lab1.htm from your Student Files folder. Motion Graphics & Animation Lab 2 Custom Animations 6

7 For this lab, we will create a custom animated banner for a website. We will start with a simple banner to be used as the background of the animation. When the banner is loaded, the text Galveston! will appear one letter at a time across the top of the banner. 1. From your Student Files folder, open the image banner.gif in your image manipulation program. 2. You will need to change the mode of the image to RGB. From the Image window, select Mode, and choose RGB. 3. Make sure the Layers dialog window is open. If it isn t, you can open it by going to Windows -> Dockable Dialogs -> Layers. 4. Because each letter will require one frame of the animation, we need to create additional layers. There are 10 characters in the text that we will be adding, so press the Duplicate Layer button at the bottom of the Layers dialog 10 times. Because there are so many identical layers in the Layers dialog, you must make sure you are working on the correct layer while creating the animation. On the Layers dialog, there is a small icon of an eye to the left of each layer. When the eye is visible, the layer is visible; when you click the eye, the layer next to the eye will become hidden. This will allow you to hide layers you are not working on. 5. Click on the eye next to each of the layers, except for the bottom two layers. 6. Make sure that the second layer from the bottom is selected. The layer name should be Background copy. This will be the first layer we add text to. The animation will consist of the word Galveston! being typed onto the banner one letter at a time. Each frame in the animation will add one additional letter to the banner. The first background layer will be blank, so we will start working with the layer named Background copy. 7. Select the Text tool from the toolbox. 8. At the bottom of the toolbox, you can modify the text options. Change the font to Sans Bold Italic, the size to 25, and the color to white. 9. With the Background copy layer selected in the Layers window, use the Text Tool to add just the letter G to the banner. 10. When the text was added to the frame, a new layer was created between the Background copy layer and the Background copy #1 layer. We need to merge the text layer down onto the Background copy layer. 7

8 11. Right-click on the text layer in the Layers window. It will be indicated by the letter G in the Layers dialog window. A shortcut menu will appear. Select Merge Down. This option will merge the text layer with the layer directly below it in the list. 12. We are now ready to add the second letter to the next frame (Background copy #1). Select Background copy #1 from the Layers dialog, but do not make it visible just yet. 13. Use the Text tool again, with the same settings, and add a text layer above Background copy #2 with the text Ga. 14. Use the Move tool to move the text layer so that both letter Gs are perfectly aligned on top of each other. (NOTE: After selecting the Move tool, select Move the active layer from the bottom of the Toolbox window.) 15. After the Ga text layer has been created and perfectly aligned, click to the right of Background copy #1 to replace the eye and make the layer visible again. 16. The text layer can now be merged down onto the Background copy #1 layer. Right click on the Text layer and select Merge Down. 17. To add the next letter, select the Background copy #2 layer and add the text Gal. 18. Move the text layer so that the Ga is perfectly aligned. 19. Make the Background Copy #2 layer visible and merge the Gal text layer down onto it. 20. Repeat the steps above with the remaining layers until Galveston! has been placed onto Background copy # After all the frames have been completed, the last step is to save the animation. From the File menu, select Save As. The file name should be lab2.gif. The image should be saved to your Student Files folder. 22. Click the Save button. 23. Another screen will appear asking you how to export the file. You should select Save as Animation. 24. Click the Export button. 25. The last window will ask you for the animation options. a. Take the check OFF of Loop forever b. Set the Delay to 200 milliseconds. c. Set the Frame disposal to replace. 26. Click the Save button to complete the animation. 8

9 27. To view the animation, open the webpage file from your Student Files directory called Lab2.htm. If you saved the animation correctly, you should see the text appear once at the top of the banner. 9

10 Motion Graphics & Animation Quiz 1. Which of the following image file formats allows you convert the layers of an image to animation frames to create an animated sequence? a. gif b. jpg c. mpeg d. png 2. To crop an image is to a. resize the image. b. remove part of the image. c. resize the image by removing part of it. d. None of the above. 3. What is the appropriate mode to use in animation? a. CMYK b. Grayscale c. RGB d. All of the above 4. Merging layers together in an image is called. a. distorting b. filtering c. editing d. flattening 5. The is the current selected layer in the Layers dialog window. a. layer dialog b. layer menu c. image menu d. active layer 6. When a new image is created in the image manipulation program, the layer is automatically applied. a. canvas b. foreground c. background d. transparent 10

11 7. Another term for graphic images that create the illusion of motion is. a. film b. motion graphics c. photographs d. vector 8. The frame rate of an animation is the a. number of frames in the animation. b. the size of each frame in the animation. c. the length or run time of the video. d. the length of time each frame is displayed. 9. Which tool in the image manipulation program will allow you to select all regions of the same color? a. The Select by Color tool. b. The Magic Wand tool. c. The Foreground Select tool. d. The Paths tool. 10. When you edit the frame properties, the image manipulation program will allow you to either or frames in the animation. a. keep or dispose b. stack or merge c. combine or replace d. combine or stack 11

12 Motion Graphics & Animation Quiz - KEY 1. Which of the following image file formats allows you convert the layers of an image to animation frames to create an animated sequence? a. gif b. jpg c. mpeg d. png 2. To crop an image is to a. resize the image. b. remove part of the image. c. resize the image by removing part of it. d. None of the above. 3. What is the appropriate mode to use in animation? a. CMYK b. Grayscale c. RGB d. All of the above 4. Merging layers together in an image is called. a. distorting b. filtering c. editing d. flattening 5. The is the current selected layer in the Layers dialog window. a. layer dialog b. layer menu c. image menu d. Active Layer 6. When a new image is created in the Image Manipulation Program, the layer is automatically applied. a. canvas b. foreground c. background d. transparent 12

13 7. Another term for graphic images that create the illusion of motion is. a. film b. motion graphics c. photographs d. vector 8. The frame rate of an animation is the a. number of frames in the animation. b. the size of each frame in the animation. c. the length or run time of the video. d. the length of time each frame is displayed. 9. Which tool in the image manipulation program will allow you to select all regions of the same color? a. The Select by Color tool b. The Magic Wand tool c. The Foreground Select tool d. The Paths tool 10. When you edit the frame properties, the image manipulation program will allow you to either or frames in the animation. a. keep or dispose b. stack or merge c. combine or replace d. combine or stack 13

Lesson Plan. Course Title: Digital and Interactive Media Session Title: Digital Audio Editing

Lesson Plan. Course Title: Digital and Interactive Media Session Title: Digital Audio Editing Lesson Plan Lesson Duration: Approximately 1.5 hours Course Title: Digital and Interactive Media Session Title: Digital Audio Editing Performance Objective: Upon completion of this lesson, students will

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Lesson Duration: 3 hours Course Title: Web Technologies Session Title: Designing A Web Page Layout with a Bitmap & Vector Graphic Editor Performance Objective: Upon completion of the lesson,

More information

Lesson Plan. Course Title: Advanced Computer Programming Session Title: Databases. Preparation

Lesson Plan. Course Title: Advanced Computer Programming Session Title: Databases. Preparation Lesson Plan Course Title: Advanced Computer Programming Session Title: Databases Lesson Duration: 2-3 days Performance Objective: Upon completion of this assignment, the student will be able to: identify

More information

Lesson Plan. Course Title: Web Technologies Session Title: Web Site Planning & Design

Lesson Plan. Course Title: Web Technologies Session Title: Web Site Planning & Design Lesson Plan Course Title: Web Technologies Session Title: Web Site Planning & Design Lesson Duration: 3 Hours Performance Objective: Upon completion of the lesson, students will understand how to develop

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Duration: 3 hours Lesson Plan Course Title: Web Technologies Session Title: Beginning Cascading Style Sheets (CSS) Performance Objective: Upon completion of the lesson, students will understand

More information

Lesson Plan. Course Title: Digital and Interactive Multimedia. Session Title: Video Production

Lesson Plan. Course Title: Digital and Interactive Multimedia. Session Title: Video Production Lesson Plan Course Title: Digital and Interactive Multimedia Lesson Duration: Session Title: Video Production Lesson length is subjective and will vary from instructor to instructor Performance Objective:

More information

Lesson Plan. Course Title: Web Technologies. Session Title: Copyright Compliance

Lesson Plan. Course Title: Web Technologies. Session Title: Copyright Compliance Lesson Plan Course Title: Web Technologies Lesson Duration: 2 hours Session Title: Copyright Compliance Performance Objective: Upon completion of the lesson, students will show understanding of copyright

More information

Lesson Plan. Preparation. TEKS Correlations: 1C: Examine the role of certifications, resumes, and portfolios in the Web Technologies profession.

Lesson Plan. Preparation. TEKS Correlations: 1C: Examine the role of certifications, resumes, and portfolios in the Web Technologies profession. Lesson Plan Course Title: Session Title: Using Online Search Tools to Locate and Evaluate Information. Lesson Duration: 2 hours Performance Objective: Upon completion of the lesson, students will be able

More information

Lesson Plan Course Title: Web Technologies Session Title: Website Administration

Lesson Plan Course Title: Web Technologies Session Title: Website Administration Lesson Duration: Approximately 10 hours Performance Objective: Lesson Plan Course Title: Web Technologies Session Title: Website Administration Following the completion of this lesson, students will understand

More information

Lesson Plan. Course Title: Principles of Information Technology Session Title: Understanding Types & Uses of Software

Lesson Plan. Course Title: Principles of Information Technology Session Title: Understanding Types & Uses of Software Lesson Plan Course Title: Principles of Information Technology Session Title: Understanding Types & Uses of Software Lesson Duration: Approximately 5 hours Performance Objective: Upon completion of this

More information

Lesson Plan. Course Title: Digital and Interactive Media Session Title: College and Career Poster

Lesson Plan. Course Title: Digital and Interactive Media Session Title: College and Career Poster Lesson Plan Course Title: Digital and Interactive Media Session Title: College and Career Poster Lesson Duration: 3 Hours Performance Objective: Upon completion of this assignment, the student will have

More information

Lesson Plan. Course Title: Computer Programming. Session Title: Software Life Cycle

Lesson Plan. Course Title: Computer Programming. Session Title: Software Life Cycle Lesson Plan Course Title: Computer Programming Session Title: Software Life Cycle Lesson Duration: 2 hours Performance Objective: Upon completion of this assignment, the student will understand the software

More information

Lesson Plan. Course Title: Computer Maintenance Session Title: FireWire Ports

Lesson Plan. Course Title: Computer Maintenance Session Title: FireWire Ports Lesson Plan Course Title: Computer Maintenance Session Title: FireWire Ports Lesson Duration: Will vary from instructor to instructor Performance Objective: Upon completion of this assignment, the student

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Web Technologies Session Title: Planning & Designing Client Websites Lesson Duration: Varies but would be a minimum of one week. Performance Objective: Upon completion of this

More information

Lesson Plan. Course Title: Digital & Interactive Media. Session Title: Color Theory

Lesson Plan. Course Title: Digital & Interactive Media. Session Title: Color Theory Lesson Plan Course Title: Digital & Interactive Media Lesson Duration: 8 hours Session Title: Color Theory Performance Objective: Upon completion of this assignment, the student will be able to create

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Computer Maintenance Session Title: Disaster Recovery and Preventative Maintenance Lesson Duration: 3 to 4 one-hour sessions with 1 additional one-hour session for the exam (Lesson

More information

Lesson Plan Course Title: Web Technologies Session Title: Internet Fundamentals & Background

Lesson Plan Course Title: Web Technologies Session Title: Internet Fundamentals & Background Lesson Plan Course Title: Web Technologies Session Title: Internet Fundamentals & Background Lesson Duration: 2 Hours Performance Objective: Upon completion of the lesson, students will have an understanding

More information

Lesson Plan. Course Title: Computer Maintenance Session Title: Numbering Systems

Lesson Plan. Course Title: Computer Maintenance Session Title: Numbering Systems Lesson Plan Course Title: Computer Maintenance Session Title: Numbering Systems Lesson Duration: Lesson length is subjective and will vary from instructor to instructor Performance Objective: Upon completion

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Principles of Information Technology Lesson Duration: 45 Minutes Session Title: Keyboards, Mice, and Other Input Devices Performance Objective: Upon completion of this assignment,

More information

Lesson Plan. Course Title: Digital & Interactive Media Session Title: Basic Animation

Lesson Plan. Course Title: Digital & Interactive Media Session Title: Basic Animation Lesson Plan Course Title: Digital & Interactive Media Session Title: Basic Animation Lesson Duration: 10 Hours Performance Objective: Upon completion of this assignment, the student will be able to plan

More information

Lesson Plan. Instructor/Trainer References: Content developer knowledge

Lesson Plan. Instructor/Trainer References: Content developer knowledge Lesson Plan Course Title: Web Technologies Session Title: Website Publishing/Going Live! Lesson Duration: Estimated 90 Minutes and will vary from instructor to instructor Performance Objective: Upon completion

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Computer Maintenance Session Title: Hard Drives Lesson Duration: 90 Minutes Performance Objective: Upon completion of this assignment, the student will be able to recognize a

More information

Lesson Plan. Course Title: Digital and Interactive Media Session Title: Emerging Technologies

Lesson Plan. Course Title: Digital and Interactive Media Session Title: Emerging Technologies Lesson Plan Course Title: Digital and Interactive Media Session Title: Emerging Technologies Lesson Duration: 3 Hours Performance Objective: Upon completion of this assignment the student will be able

More information

Lesson Plan. Upon completion of this assignment, the student will be able to build a small network and identify the different types of hackers.

Lesson Plan. Upon completion of this assignment, the student will be able to build a small network and identify the different types of hackers. Lesson Plan Course Title: Principles of IT Session Title: Networks and Hackers Lesson Duration: Lesson length is subjective and will vary from instructor to instructor. Performance Objective: Upon completion

More information

Lesson Plan. Preparation. 130.272(c). Principles of Information Technology (One-Half to One Credit).

Lesson Plan. Preparation. 130.272(c). Principles of Information Technology (One-Half to One Credit). Lesson Plan Course Title: Principles of Information Technology Session Title: Peripheral Devices Lesson Duration: Will vary from instructor to instructor Performance Objective: Upon completion of this

More information

Lesson Plan. Course Title: Computer Programming Session Title: For Loops

Lesson Plan. Course Title: Computer Programming Session Title: For Loops Lesson Plan Course Title: Computer Programming Session Title: For Loops Lesson Duration: 3-4 hours Performance Objective: Upon completion of this assignment, the student will recognize and explain the

More information

Lesson Plan. Course Title: Advanced Computer Programming Session Title: Project Management Basics

Lesson Plan. Course Title: Advanced Computer Programming Session Title: Project Management Basics Lesson Plan Lesson Duration: Weeks/Days/Hours/Minutes 3 weeks Performance Objective: Course Title: Advanced Computer Programming Session Title: Project Management Basics Upon completion of this assignment,

More information

Lesson Plan. Course Title: Computer Maintenance Session Title: Entrepreneurship

Lesson Plan. Course Title: Computer Maintenance Session Title: Entrepreneurship Lesson Plan Course itle: Computer Maintenance Session itle: Entrepreneurship Lesson Duration: 50 minutes Performance Objective: Upon completion of this assignment, the student will further understand what

More information

Lesson Plan. Preparation. References: 1. JES and Co., A+ Certification: Introduction to Computer Hardware, Lesson 3: Preventing ESD.

Lesson Plan. Preparation. References: 1. JES and Co., A+ Certification: Introduction to Computer Hardware, Lesson 3: Preventing ESD. Lesson Plan Course Title: Computer Maintenance Session Title: Safety/Electrostatic Discharge (ESD) Lesson Duration: Approximately 120 Minutes Performance Objective: Upon completion of this assignment,

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Principles of Information Technology Session Title: Design Principles Lesson Duration: 6 hours Performance Objective: Upon completion of this assignment, the student will be able

More information

Lesson Plan. Performance Objective: Upon completion of this assignment, the student will be able to create a basic resume.

Lesson Plan. Performance Objective: Upon completion of this assignment, the student will be able to create a basic resume. Lesson Duration: Lesson Plan Course Title: Principles of Information Technology Session Title: Resume Writing Lesson length is subjective and will vary from instructor to instructor. Performance Objective:

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

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

Lesson Plan. Session Title: Computer Hardware

Lesson Plan. Session Title: Computer Hardware Lesson Plan Course Title: Principles of Information Technology Lesson Duration: 7 hours Session Title: Computer Hardware Performance Objective: Upon completion of this assignment, the student will be able

More information

After this lesson you will be able to:

After this lesson you will be able to: 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

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

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

PowerPoint 2007 Basics Website: http://etc.usf.edu/te/

PowerPoint 2007 Basics Website: http://etc.usf.edu/te/ Website: http://etc.usf.edu/te/ PowerPoint is the presentation program included in the Microsoft Office suite. With PowerPoint, you can create engaging presentations that can be presented in person, online,

More information

GRC 119 Assignment 6 Create a Flash Animation Banner Ad

GRC 119 Assignment 6 Create a Flash Animation Banner Ad GRC 119 Assignment 6 Create a Flash Animation Banner Ad 1. Brainstorm your Ad Concept and identify the 5 components 2. Storyboard your ad concept 3. Develop the visual components 4. Develop banner ad web

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

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

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

Getting started with PowerPoint 2010

Getting started with PowerPoint 2010 Getting started with PowerPoint 2010 This document is a brief introduction to PowerPoint 2010. For help with using the Office 2010 interface, see Getting Started with Microsoft Office 2010. Creating a

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

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

The latest QuickTime can be downloaded for free from Apple's QuickTime website at quicktime.com

The latest QuickTime can be downloaded for free from Apple's QuickTime website at  quicktime.com About Text-Osterone Thank you for choosing Text-Osterone. Text-Osterone is an extremely easy program to generate eyepopping Flash animated text effects in seconds! Text-Osterone creates text effects to

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

More information

PPT to Video. Making a Video from PPT. Greeneville City Schools

PPT to Video. Making a Video from PPT. Greeneville City Schools Greeneville City Schools Making a Video from PPT Instructions primarily from New Mexico State University: Information and Communication Technologies Jamie House PPT to Video Making a video from PPT See

More information

Lesson Plan. Performance Objective: Upon completion of this assignment, the student will be able to access and properly use the Internet.

Lesson Plan. Performance Objective: Upon completion of this assignment, the student will be able to access and properly use the Internet. Lesson Plan Course Title: Principles of Information Technology Session Title: Basic Internet Functions Lesson Duration: Length will vary dependent upon instructor. Performance Objective: Upon completion

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

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

Powerful presentation solutions from Microsoft Make your presentations come alive with the incorporation of audio and video, action buttons, and

Powerful presentation solutions from Microsoft Make your presentations come alive with the incorporation of audio and video, action buttons, and Powerful presentation solutions from Microsoft Make your presentations come alive with the incorporation of audio and video, action buttons, and custom slide shows. When finished, create a ready-to-go

More information

MEDIATOR 8 PRO HIGHLIGHTS

MEDIATOR 8 PRO HIGHLIGHTS MEDIATOR 8 PRO HIGHLIGHTS Page Multi-User Editing...2 Vector Drawing Tool...3 Visual Effects...3 Shadow Effect...3 Glow Effect...4 Opacity / Transparency...4 Master Pages...4 Design Tools...5 Rotation...5

More information

SMART NOTEBOOK 10. Instructional Technology Enhancing ACHievement

SMART NOTEBOOK 10. Instructional Technology Enhancing ACHievement SMART NOTEBOOK 10 Instructional Technology Enhancing ACHievement TABLE OF CONTENTS SMART Notebook 10 Themes... 3 Page Groups... 4 Magic Pen... 5 Shape Pen... 6 Tables... 7 Object Animation... 8 Aligning

More information

Microsoft PowerPoint 2011

Microsoft PowerPoint 2011 Microsoft PowerPoint 2011 Starting PowerPoint... 2 Creating Slides in Your Presentation... 3 Beginning with the Title Slide... 3 Inserting a New Slide... 3 Adding an Image to a Slide... 4 Downloading Images

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

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

Creating a Flash.swf animation

Creating a Flash.swf animation GRC 119 Assignment 5 Creating a Flash.swf animation 1. How to get started in Flash 2. Creating layers and adding content 3. Tweening or animating between two keyframes 4. How to import multiple images

More information

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION Lasted Edited: 2012-07-10 1 Use Speaker Notes... 4 Add speaker notes... 4 Change or format a note on a slide... 5 Print slides including speaker notes...

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

Introduction to Macromedia Flash MX

Introduction to Macromedia Flash MX Introduction to Macromedia Flash MX Digital Media Workshop Series Jason anavan Media Specialist 400 Taunton Rd. East Whitby, ON L1R 2K6 Table of ontents Foreward...3 Why use Flash?...4 Setup...5 Layout

More information

PowerPoint 2010 Cheat Sheet

PowerPoint 2010 Cheat Sheet PowerPoint 2010 Cheat Sheet April 20, 2012 Toolbar customize click on arrow and then check the ones you want a shortcut for File Tab (has new, open save, print, and shows recent documents) Save, Open,

More information

SMART Notebook Software Learner Resource

SMART Notebook Software Learner Resource SMART Notebook Software Learner Resource SMART Notebook Software Version 10 For Windows Operating System SMART Technologies ULC 3636 Research Road NW Calgary, AB T2L 1Y1 CANADA Phone 1.888.42.SMART or

More information

Introduction to Microsoft PowerPoint 2010

Introduction to Microsoft PowerPoint 2010 Introduction to Microsoft PowerPoint 2010 This class is designed to cover the following basics: Creating a presentation Adding new slides Applying design themes Adding text and content Animating text and

More information

GRC 119 Assignment 7 Create a Flash Animation Banner Ad

GRC 119 Assignment 7 Create a Flash Animation Banner Ad GRC 119 Assignment 7 Create a Flash Animation Banner Ad 1. Brainstorm your Ad Concept and identify the 5 components 2. Storyboard your ad concept 3. Develop the visual components 4. Develop banner ad web

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

Introduction to Microsoft PowerPoint 2010

Introduction to Microsoft PowerPoint 2010 Introduction to Microsoft PowerPoint 2010 This class is designed to cover the following basics: Creating a presentation Applying design themes Adding new slides Adding text and content Creating a background

More information

Movie Maker Lesson Plan

Movie Maker Lesson Plan Movie Maker Lesson Plan Objective: Students will be introduced to the concept of digital storytelling. Students will take an academic concept and integrate it into a multi-media project by choosing a topic,

More information

PowerPoint 2013. 3. Save: Click SAVE icon. Name your file, click SAVE

PowerPoint 2013. 3. Save: Click SAVE icon. Name your file, click SAVE PowerPoint 2013 1 1. Open PowerPoint: Select Blank Presentation 2. Click NEW SLIDE down-arrow in the HOME menu: Type the title of your presentation on Slide #1 Click NEW SLIDE Type the title of Slide #2

More information

Sample- for evaluation purposes only! Advanced PowerPoint. TeachUcomp, Inc. A Presentation of TeachUcomp Incorporated. Copyright TeachUcomp, Inc.

Sample- for evaluation purposes only! Advanced PowerPoint. TeachUcomp, Inc. A Presentation of TeachUcomp Incorporated. Copyright TeachUcomp, Inc. A Presentation of TeachUcomp Incorporated. Copyright TeachUcomp, Inc. 2013 Advanced PowerPoint TeachUcomp, Inc. it s all about you Copyright: Copyright 2013 by TeachUcomp, Inc. All rights reserved. This

More information

Infodata Systems Limited

Infodata Systems Limited Creation / Amendment of Email template for confirmations In most cases new confirmation email templates will be created based on existing templates, as those have already been formatted and include your

More information

Department of Special Education Ball State University Developing Your Digital Portfolio Website

Department of Special Education Ball State University Developing Your Digital Portfolio Website SPCED Portfolio Instructions 1 Department of Special Education Ball State University Developing Your Digital Portfolio Website The following steps will guide you through the process of developing your

More information

PowerPoint Learn It! Getting Started Organizing the Presentation Enhancing the Slides

PowerPoint Learn It! Getting Started Organizing the Presentation Enhancing the Slides PowerPoint Learn It! Getting Started Organizing the Presentation Enhancing the Slides Preview Enhancing the Slides Choosing a Theme Selecting a Slide Layout Modifying Text Box size and angle Enhancing

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

NDSU Technology Learning & Media Center

NDSU Technology Learning & Media Center 1 NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Creating a Large Format Poster (Plot) Using PowerPoint 2013 Posters should be designed and created in a manner that best

More information

Microsoft PowerPoint 2010

Microsoft PowerPoint 2010 Microsoft PowerPoint 2010 Starting PowerPoint... 2 PowerPoint Window Properties... 2 The Ribbon... 3 Default Tabs... 3 Contextual Tabs... 3 Minimizing and Restoring the Ribbon... 4 The Backstage View...

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

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

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

MICROSOFT POWERPOINT : SMART SHORTCUTS AND EXPERT SECRETS

MICROSOFT POWERPOINT : SMART SHORTCUTS AND EXPERT SECRETS PRESENTED BY ROCKHURST WEBINAR MICROSOFT POWERPOINT : SMART SHORTCUTS AND EXPERT SECRETS Participant Notebook SERIES, A DIVISION OF ROCKHURST UNIVERSITY CONTINUING EDUCATION CENTER, INC. Copyright National

More information

Canvas Tips and Techniques

Canvas Tips and Techniques Corporate Flow Image Editing Illustration Canvas Tips and Techniques Web Automation Page 1 Text Effects Creative Department Copyright 1995-2003 ACD Systems of America, Inc. (Formerly Deneba Software) Protected

More information

GRC 188 Banner Ad Creating a Web Banner Ad using Flash

GRC 188 Banner Ad Creating a Web Banner Ad using Flash GRC 188 Banner Ad Creating a Web Banner Ad using Flash 1. Brainstorm your Ad Concept and identify the 5 components 2. Storyboard your ad concept 3. Develop the visual graphic components 4. Getting started

More information

Adobe Captivate Tips for Success

Adobe Captivate Tips for Success Adobe Captivate Tips for Success Before you begin editing your Captivate project, make sure you create a back up copy of your.cp file in case you delete something you need later. 1 Before You Record Your

More information

PowerPoint 2016 Part II

PowerPoint 2016 Part II PowerPoint 2016 Part II Photo Album The Photo Album tool is a quick and easy way to import a folder of photos into a slideshow. This is especially helpful if you are creating a picture slideshow. Note:

More information

HTML Editor Contents. User Guide Updated August 22, 2008

HTML Editor Contents. User Guide Updated August 22, 2008 HTML Editor 8.3.0 User Guide Updated August 22, 2008 Contents About this guide Audience Related guides HTML Editor Overview Accessing the HTML Editor HTML Editor tabs HTML Editor Views HTML Editor Icons

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

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

Creating Accessible PowerPoint Documents. With. Microsoft PowerPoint 2008 for Macintosh

Creating Accessible PowerPoint Documents. With. Microsoft PowerPoint 2008 for Macintosh Center for Faculty Development and Support Creating Accessible PowerPoint Documents With Microsoft PowerPoint 2008 for Macintosh Table of Contents Creating Accessible PowerPoint Documents... 3 Overview...

More information

Microsoft FrontPage Step by Step Training

Microsoft FrontPage Step by Step Training Toolbars Menu Standard Formatting Quick Tag Selector Views Toolbar Type a Question for Help Box Task Pane Microsoft FrontPage Step by Step Training Views Design allows you to design and edit web pages

More information

Advanced Presentation Features and Animation

Advanced Presentation Features and Animation There are three features that you should remember as you work within PowerPoint 2007: the Microsoft Office Button, the Quick Access Toolbar, and the Ribbon. The function of these features will be more

More information

PowerPoint Intermediate 2013

PowerPoint Intermediate 2013 PowerPoint Intermediate 2013 I. Creating a Slide Master A. Using the design feature of PowerPoint essentially sets up similar formatting for all of your slides within a presentation. However, there are

More information

-SoftChalk LessonBuilder-

-SoftChalk LessonBuilder- -SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content

More information

Microsoft PowerPoint 2010

Microsoft PowerPoint 2010 Microsoft PowerPoint 2010 2 The PowerPoint Ribbon 1 4 3 Getting Started 1 Quick Access Tool Bar Contains shortcuts for commonly used tools. 2 Backstage View Contains tools to work with files and manage

More information

Lesson Plan. Preparation

Lesson Plan. Preparation Lesson Plan Course Title: Robotics and Automation Session Title: Introduction to Robotics Part 4: Sensors Performance Objective: At the end of the lesson, students will be able to recall the theory and

More information

Intro to PowerPoint 2010

Intro to PowerPoint 2010 Instructional Center for Educational Technologies Intro to PowerPoint 2010 PowerPoint is a multimedia tool that serves as a visual aid to your content and delivery. When used effectively, PowerPoint can

More information

Notebook software training for SMART Board users. Learner workbook. Level 2

Notebook software training for SMART Board users. Learner workbook. Level 2 Notebook software training for SMART Board users Level 2 Learner workbook 10552-08 - Notebook Software Training Covers April 2008 - Learner Workbook - v2.indd 2 4/22/2008 4:04:23 PM Best practices and

More information

Microsoft Office PowerPoint 2003. Add the Pizzazz to Your Presentation. Anjal Smidt Computing Services

Microsoft Office PowerPoint 2003. Add the Pizzazz to Your Presentation. Anjal Smidt Computing Services Microsoft Office PowerPoint 2003 Add the Pizzazz to Your Presentation Anjal Smidt Computing Services Table of Contents ADDING GRAPHICS TO YOUR PRESENTATION... 1 DRAWINGS... 1 CLIPART... 2 PICTURES... 2

More information

POWERPOINTTHE END OF BORING

POWERPOINTTHE END OF BORING Design Tips 1. Who is your audience? 2. What is the presentation format? Online: When the speaker is not visible, a visual change is recommended every 30 seconds. In Person: Change recommended every two

More information