flash window

8/12/2019 Flash Window

1/62


2/62

Chapter 1 Lessons

1. Understand the Flash workspac

2. Open a document and play a m

3. Create and save a movie

4. Work with the Timeline

5. Distribute an Adobe Flash movi

6. Plan an application or a website 2011 Delmar Cengage Learning


3/62

What is Flash?

Defacto standard for creatingcomplex animation sequence

Web pages

Use animated GIFs for simpleanimation, Flash for more complex

sequences


4/62

Introduction: What is Adobe Flash?

A developmental tool that allows studeto create compelling interactive experienoften by using animation

An excellent program for developing

animations that are used in websites, suproduct demonstrations and banner ads

2011 Delmar Cengage Learning

Getting Started with lash


5/62

Appropriate Use of Animation Douse animation to:

Explain abstract concepts

Chemistry simulation Create subtle special effects or transitions

http://www.cbe.wsu.edu/~jsv/

Add creativity playfulness to a site

http://www.greenolive.co.uk/home.html

Explain a series of events or a process that follows a specific timeline

Draw attention to a detail in a picture by making it move http://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.htm

Don't: Use animation just for the sake of doing it

Force a user sit through a set sequence (always provide an exit or way

Overused animation so it takes away from your site's goals
http://antoine.frostburg.edu/chem/senese/101/kits/conductivitysimulation3.htmlhttp://www.cbe.wsu.edu/~jsv/http://www.greenolive.co.uk/home.htmlhttp://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.htmlhttp://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.htmlhttp://www.greenolive.co.uk/home.htmlhttp://www.cbe.wsu.edu/~jsv/http://antoine.frostburg.edu/chem/senese/101/kits/conductivitysimulation3.html


6/62Tools Youll Use

Getting Started with Flash


7/62

Flash uses vector images. Vectors are scalable

Reduces the size of graphic files

Flash provides for streaming content over the

Does not need to wait for entire contents of Web pato start playing

2011 Delmar Cengag

Getting Started with Flash


8/62

A Typical Flash Workspace

2011 Delmar Cengag

Object on the

stage

Title Bar

Menu Bar

PasteboardStage

Playhead

Selecting frame 1

displays the

object (car) on

the Stage

Understand the Flash Workspa


9/62


10/62

There are three parts of the workspace. Menu bar organizes commands within menus

Stageis where you place objects

Timeline is how you organize and control objects o

You can display one or more panels at the sa


Understand the Flash Workspa


11/62

The Stage containobjects such as drphotos, animations, video.

Shows how the objbehave within the mhow they interact wother

You can resize andthe background co


Understand the Flash Workspac


12/62


13/62


14/62


The Timeline is used to organize

control the movies contents bspecifying when each objectappears on the Stage.

The images of the Timeline arecontained within frames.

Layers help to organize the obj

on the Stage.



15/62


Understand the Flash Workspac You can use Panels to view, orgaand modify objects and featuremovie.

The Tools panel contains a set ofused to draw and edit graphics text.


16/62


Floating panel

Collapsed

panel sets

Arranging panels



17/62



The Library panel is used to store organize the various assets of a msuch as graphics, buttons, soundvideo.

You can expand a panel to showits features or collapse it to reducclutter on a workspace.


18/62


Floating panels can be resized bydragging the left side, right side, bottom of the panel.

Flash provides several presetworkspace configurations that ppanels and panel sets most often



19/62


Open a Document and Play a

Movie Flash files are called documents

movies interchangeably.

To play a Flash movie on comput

without Flash, you must change tmovie to the Flash Player (.swf) filformat.

Flash la ers can be downloade


20/62

Open a Document and Play a Movie

2011 Delmar Cengag

To preview a movie, you can play

frames by directing the playheadmove through the Timeline, and wthe movement on the Stage.

You can preview a movie using theController. To display the Controller,

the Window menu, point to Toolbars

then click Controller.


21/62


2011 Delmar Cengag

Control commands Controll

The Control m

commands anController hav

buttons that re

common DVD

options.

O D t d Pl M i


22/62


2011 Delmar Cengag

To preview the full functional

movie, you need to play it us

Flash Player.

You can use the Test Moviecommand on the Control men

test the movie using a Flash

Pla er


23/62


Open a Document and Play aMovie

Example of an Application


24/62


Open a Document and Play a

Movie To view a Flash movie on the web, ycomputer needs to have the Flash P

installed.

An important feature of Flash Player

you are able to decompress a comp

file.


25/62


Create and Save a Movie Creating a Flash Movie.

Flash movies are created by:

1. Placing objects on the Stage

2. Editing the objects

3. Animating the objects A keyframe indicates that there is a cha

the movie, such as the start of an anim

or the resizing of an object on the Stag


26/62


Create and Save a Movie

Circle object in frame 1

Objec

Stage

frame

Time


27/62



Creating an Animation.

The blue background color on the Tim

indicates a motion animation that star

frame 1 and ends in frame 24

The dotted line on the Stage indicates

path the object will follow during anim

A basic motion animation requires tw


28/62

2011 Delmar Cengage Learning Motion Animation



29/62



Flash provides a process called motion

tweening that makes it relatively simplemove objects.

Only symbols and text boxes can be m

tweened. Tween span is the number of frames in

motion tween.


30/62



Two important things happen during tmotion tween animation process.

The Timeline shows the tween span (a

the motion span), which is the number

in the motion tween

A dotted line is created, called the mot

representing the path the object takes

beginning frame to the ending frame


31/62



Flash provides several preconfigurmotion tweens that you can apply t

object on the Stage.

You can preview each preset befo

applying it and you can easily chan

a different preset, if desired.


32/62



Panel set with Motion Presets panel acti

Note: Your

Presets pa

part of a dif

set or it ma

alone pane

Preview wi

Default Preavailable, s

more


33/62



You can animate an objects appear

You can alter the objects properties

is being animated using the motion t

process.

You can make changes to an object

using the Properties panel.


34/62


Work with the Timeline

The Timeline organizes and control

movies contents over time.

By learning how to read the informa

provided by the Timeline, you can

determine and change what will behappening in the movie, frame by fr


35/62



Elements of the Timeline

Playhead Elapsed time Status bar FramesLayers Frame rateCurrent frame


36/62



Layers are like transparent sheets of

that are stacked on top of each other

contain one or more objects.

You can add layers using the Timelin

command on the Insert menu or by cthe New Layer icon on the Timeline.


37/62


When a new layer is added, Flash sta

on top of other layer(s).

You can change the stacking order of

by dragging them up or down in the li

layers.

You can name, hide, and lock layers.


38/62



The concept of layers The Stag


39/62



The Timeline is made up of individua

segments called frames.

The contents of each layer appear as

playhead moves over the frames.

Frames are numbered in increments

five.


40/62


If you create a motion tween, the firs

of the tween span will be a keyframe

Types of keyframes. Property keyframe specifies locations on th

Timeline where you want an animation to Blank keyframe indicates that no content

appear on the frame


41/62



The Timeline of a movie with a second ob


42/62



Interpreting the Timeline: What is

happening on the Stage is represen

symbols and colors.

Common symbols and colors on the Time


43/62



The Playhead indicates which fram

playing and can be manually mov

dragging it left or right.

Dragging the playhead allows you

a quick check of the movie withou

having to play it.


44/62


Distribute an Adobe Flash Mov

You can view Flash movies on the

as part of a website or directly fro

viewers computer using the Flash

Player; they cannot be viewed on web using the web browser.

To publish a Flash movie, you mu


45/62



Publishing a movie creates two fil

.htmlthe HTML document

.swfthe Flash Player file

The HTML document contains thethat the browser interprets to disp

movie on the web.


46/62



Sample HTML code

Movie source

Background color


47/62



Creating a projector file is another

you can distribute a movie that ma

may not involve delivery on the we

The projector file is an executable

where you can specify the type of

you want to create such as Windo


48/62


Plan an Application or a Webs

Use Flash to:

Develop animations that are part of a

product and delivered via the Interne

Create enhancements to web pages,as animated logos, interactive naviga

buttons, and banner ads

Create entire websites


49/62



Planning an application or an entire

website should include:

Stating the Purpose (Goals). Wha

want to accomplish? Identifying the Target Audience. W

use our application or website?

Determining the Treatment. What

look and feel?


50/62


Defining Treatment.

Tone: Will the website be humorous,

serious, light, formal, or informal?

Approach: How much direction will beprovided?

Emphasis: How much emphasis will

placed on various multimedia elemen



51/62


Sample flowchart


A flowchart

representati

the contents

application owebsite are

and how var

screens are


52/62


Specifications state what will be incl

in each screen as well as:


The Playback System: the choice of

configuration to target for playback

Elements to include: details about th

various elements included in the site

Functionality: the way the program re


53/62


A storyboard shows the layout of

various screens, often in the form

thumbnail sketches.

It describes the contents and illus

how text, graphics, animation, and

screen elements will be positioned



54/62


Flowcharts and storyboards make u

user interface (how the objects are

arranged on the screen) and the

interactivity (how the user navigatesthrough the site or application).



55/62


Screen design guidelines.

Balance refers to the distribution of op

weight in the layout of the screen des

Unity helps the screen objects reinforother

Intra-screen unity refers to how the va

screen objects relate and how they a



56/62


Sample Storyboard


Plan an Application or a Website


57/62


Screen design guidelines.

Inter-screen unity refers to the design thencounter as they navigate from one scr

another, and how it provides consistency

throughout the entire application or site

Movement refers to the way the viewers

move through the objects on the screen

Plan an Application or a Website

Distribute an Adobe Flash Movie


58/62


Guidelines determine the interactivity

applications. Simplicity: make it easy so users don

to spend time learning what the applic

does Consistency: build in consistency in th

navigation scheme so users dont get



59/62


Guidelines determine the interactivity

applications. Feedback: provide feedback to users

completing an action, such as changin

color of a clicked box User control: allow the user to skip lon

introductions and provide controls for

starting, rewinding, and skipping anima



60/62



61/62



Project Management.

Develop a project plan that provides thproject scope and identifies the milesto

including analyzing, designing, building

testing, and launching

Identify personnel and resources need

budget, tasks, and schedules

Successful projects are a team effort


62/62

Arrow:

This is used for when ever you are not using any of thIt selects individual objects or frames or a marquee fomultiple objects. It operates the tool bar and menu sy

Brush:The Brush tool is not unlike the pencil but it allows ythicker objects and if you're in the mood it can also dobut I'll let you figure that one out.

Dropper:Use the eyedropper tool to copy fill and stroke attribushape or line and immediately apply them to another The eyedropper tool also lets you sample the image inuse as paint.

Eraser:Pretty self explainatory really.

flash window

Documents