Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.

Slides:

Advertisements

Similar presentations

2.02B Methods and Uses of Animation

Advertisements

Understand the Macromedia Flash environment Open a document and play a movie Create and save a movie Work with layers and the timeline Plan a Web site.

Unit 6 – Multimedia Element: Animation

Flash animation For beginners. Lesson objectives To understand how to animate a ball To understand how to loop animations To learn how to use animation.

Create shape-tweened animation Create a mask effect Add sound Add scenes Create a slide show presentation Unit Lessons.

Video on the Web. Should you add video to your web page? Three main questions 1. How will it enhance the purpose of my page? –Entertain –Explain a process.

Macromedia Flash 5 Intermediate Level Course. Animation Basics Playhead In-Between Frames Keyframe Current Frame Number Framerate Current Time Frames.

Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX GETTING STARTED WITH.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Introduction to Macromedia Flash 8

Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.

3.02 Computer Animation Software and Design Guidelines

Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.

3.02 Explain basic motion graphic programming.

3.02 Computer Animation Software and Design Guidelines

ITIS 1210 Introduction to Web-Based Information Systems Chapter 41 How Animation on the Web Works.

Flash Michelle Johnston, Firebird Services Ltd. What Is Flash? Flash is a multimedia program created specially for use on the Web You can create animations/movies.

FLASH ASSIGNMENTS YOUR NAME COMMUNICATION SYSTEMS DATE Click Play to show animations Choose a Design for the background FILENAME: FLASH ASSIGNMENTS (IN.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

Case Study: Using Macromedia Director

Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.

Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.

Flash Lesson 1 Simple Animation. Get Acquainted With The Software.

Dm 11 – Intro. To Flash Macromedia Flash MX GETTING STARTED WITH.

1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Dr. Joseph Otto Silvia Castaneda Christopher deCastro CSULA Macromedia Flash MX Introduction.

Macromedia Flash CS4. What is Flash CS4? –Animation and interactive authoring program –Tools for complex animation, as well as excellent drawing tools.

FLASH LESSON 1: INTRODUCTION BASIC MOTION TWEEN

© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.

® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.

UNDERSTANDING ADOBE FLASH. The Flash Interface  The flash interface provides you with:  A menu bar  Panels  A work area: stage.

WWW via the Internet Local via an Intranet Individual Computer.

EXAM # 2 Review. Review the Power Point Presentations for: Sound Video Animation Web Accessibility.

Flash Adobe Flash Introduction Kyungeun Park. Bitmap vs. Vector based  Bitmap –Bitmaps are made up of single pixels  Vector based –Vector graphics are.

Agenda – Week 8, Day 2 Tuesday Intro to Flash Animation process Computer animation Lesson 1 – Overview Lesson 2 – Drawing Lesson 4 – Layers Lesson 8 –

Multimedia Animation. Animation Principles Persistence of vision object seen by human eye remains mapped on retina for a brief time after viewing display.

Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.

2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.

Motion Tweening – Lesson 81 Motion Tweening Lesson 8.

Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.

Ch. 8 Web Page Design – Animation and Behaviors Mr. Ursone.

Creating a rotating image banner Activity 7 Procedure Creating AP Elements 1.Start Dreamweaver and select the ‘Hong Kong Scenery’ web site. 2. Create a.

Copyright © 2003 Pearson Education, Inc. Chapter 6 – Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.

Agenda 1 - Sketchbook - DUE TODAY! 1 - Flash Environment and workspace continued - Nested or embedded Movie Clips (car animation) - - Bone tool.

Introduction to Flash. A Metaphor Definitions Stage is the rectangular area where you place graphic content, including vector art, text boxes, buttons,

Agenda Sketchbook DUE today - assignment dates listed on next page 1 - Flash Environment and workspace continued - Movie clip symbols - timeline.

Bringing Animation to Your Websites introducing ADOBE FLASH.

Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.

Dm 11 - Flash Special Effects Special Effects CREATING.

Macromedia Flash MX 2004 – Design Professional Special Effects CREATING.

Chapter 18 Working with Animation, Video, & Photography.

Chapter2 Create animation. Objectives Import image Use the blank keyframe Add sound Publish the movie as an SWF file Use a motion tween animation.

Flash animation For beginners. homework Your homework is over two weeks so please write in each week of your planner for the next two weeks For homework.

2.02B Methods and Uses of Animation 2.02 Develop Computer Animations.

Tutorial 7 Creating Animations. XP Objectives Learn about animation Create a timeline Add AP divs and graphics to a timeline Move and resize animation.

FLASH!!!!!!!!!!!!!!!!!!!!!!!!! A TUTORIAL BY BRITTANY HESS AND MARGARET DENTON.

XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.

Flash Animation By Kaotip and Victoria. COLOUR TWEEN ON FLASH.

Flash 1. Document Properties Set frame rate and dimensions of project Set frame rate and dimensions of project (default width=550 and height=400)

Introduction to Animation In animation, a series of images are rapidly changed to create an illusion of movement.

Animation in flash. Frame-by-Frame Animation An animation is made from a series of framed images displayed one after the other to create the motion. Flash.

Macromedia Flash Design Professional Macromedia Flash GETTING STARTED WITH.

Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.

Frame(GIF) and Vector Animation

Video on the Web.

Frame(GIF) and Vector Animation

3.02 Computer Animation Software and Design Guidelines

Frame(GIF) and Vector Animation

2.02B Methods and Uses of Animation

Flash animation For beginners.

Presentation transcript:

Frame, Timeline and Vector Animation

Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set a mood or on-screen environment –ExampleExample Entertain –ExampleExample NOT TO INTERFERE OR ANNOY

Three Applications for Creating Animations 1.Dreamweaver 2.Photoshop 3.Flash

Frame Animation Displays a series of still images, or frames, at a certain rate to give the impression of motion. Can be created Photoshop and special GIF animation software.

Duplicate Layer Merge Layers Save for the Web -> GIF format -> Check Animate Box Animate object on constant background

Vector Animation More complex and used to move an object along a path, or vector Objects defined by mathematical equations rather than drawn “Flash” is a popular software for vector animation

Flash Animation Example Project Example Project

Flash Workspace File -> Import to Library

 Creating shape tweens: shape tweens:  Creating motion tweens: motion tweens:

Flash Tutorials

See my tutorials for how to “Publish” your Flash Animation as A “shockwave” a.swf file format. Do not try to put the.fla format file on your web page. This format can only be read by Flash.

1, Click in the cell where you want Your Flash animation and select “Plugin” Adding Your Flash Animation to your Web Page 2. Select the.swf file published in M:\Home from Flash

The Flash object will appear like this but not play until viewed In the browser

Produce Flash Movie -- Minimum acceptable for credit: Author present for Peer Review at start of class Movie available for Peer Review There is a working link from WebEx Page to the movie A “story” at least 10 seconds long – 120 frames at 12 fps Background image At least one motion tween At least one shape tween or morph Includes GIF animation Movie (and Gif) stops at end Contains sound

The Following Slides Address Animation in Dreamweaver

Timeline Animation with Dreamweaver Window -> Timelines Frames (horiz) Layers (vert)

Insert -> Layer (AP Div)

Modify -> Timeline -> Add Object to Timeline

Timeline Frames Layer may contain Live text, Image text or picture Frame rate, autoplay, loop

Adding Motion to a Layer Keyframes

Inserting Keyframes Modify -> Timeline -> Add Keyframe

Record Layer Motion Modify -> Timeline -> Record Path of Layer

Dreamweaver Timeline examples Reveal Pool Balls