7/23:Videos Due-Export to Quicktime/Final Exam, Last Day of Class

Last Day of Class!

• Exported 30-second Video project due at 2:30pm.

• Place the file “yourname_video.mov” in the Class Drop Box by that time.

• Copy any files you wish to take home onto your Flash Drive. Your files may or may not be kept on the servers when you return this Fall!

• Log-out of your computers for Student Presentations and Final Exam. Place all notebooks, backpacks, etc on the floor.

• When you are done with the exam, you may leave class.

Export your Final Cut Project to a Quicktime movie:

1. In FCP, save and Render your Video project.
2. Move the cursor playhead to the beginning of the Timeline.
3. Go to: >File >Export: Using Quicktime Conversion
4. Name it : “yourname_video.mov”
5. Format: Quicktime Movie…Options: Video Settings: Select Compression Type: Mpeg4-Video. “Ok”
6. Use: Broadband Medium
7. Point to your Video Source Folder
8. “Save”
9. After a few seconds, you should see a new compressed Quicktime movie of your project in your Video Folder! This is a stand-along file, you will no longer need the supporting FCP files to play the movie. You should still keep your Video Source Folder in case you need to go back and edit the movie at another date.
10. Drop your exported video file :yourname_video.mov”  on to the Class Server to turn in for Thursday’s student presentation.

Thanks for taking IDST 120!

I really enjoyed having you all in my class.

Enjoy the rest of the summer (what is left of it)  and feel free to keep in touch:-)

-Wendy

7/22: Sound, Import Flash

Sound
Add Audio to your Sequence. By default there will be two Audio Tracks, one for the left channel and another for the right channel.
1. Place audio files in your Video Folder.
*Refer back to blog post from Flash re: Importing Sound in Flash
2. Open FCP. Import Audio file into the Browser: >File >Import File: point to the audio file
3. Double click on the audio file in the Browser to display the WAVEFORM in the Viewer Window.

WAVEFORM- a visual representation of sound.

4. Edit the Audio file in the Viewer using Mark In and Out buttons, as needed.

5. After setting Marks, drag the Audio clip from the Browser Window into the Timeline.

note:
* Lock Video tracks to separate Audio from the clips
* Use Toggle Clip Overlay to make Audio file louder or softer/fade in, fade out
* Note Sound Levels Bar-make sure that they do not go into the Red zone.

Sound Effects
Add a special effect to your Audio clip:
1. In the Browser, choose the >Effects tab: “Audio Filters”: Final Cut Pro
2. Select Audio Filter and drag onto Audio clip in Timeline.

Importing Flash:

Export your Flash animation and import it into FCP. Normally, importing a .swf works…but as we are having issues in the classroom….export your Flash project as a Quicktime movie instead.

1.Complete your Flash animation

2. >File  >Export Movie…Format: Quicktime

Save it as “____.mov”

3. Place the new flash .mov file into your Video Source folder.

4. Import into FCP like you would any other file!

**Key Out the background color with a Filter if you want Flash to animate over a Video.

Import an Image:

You may import .jpg, .gif, .psd, etc…so long as the files are first placed in your Video Source folder.

Add sound (music and/or sound effects) to your 30-second video project.

You may begin a new 30 second project if you have completed the first one.

• Videos due Thursday!

• Final Exam Thursday! Review the Study Notes to prepare for the exam.

• Last Day of Class….Thursday!

7/21:Wireframe, Text, Mark In/Out,Filters

Wireframe:

Video clips different sizes? Change the size of your clips to make the Sequence more uniform -or- add a layered look by stacking one “Window” on top of one another.

1. In the Canvas Window, select the ‘Image and Wireframe’ option (the drop-down button at top of screen). Video clip will be highlighted with a blue border.
2. In the Canvas Window, use the Selection Tool to resize the clip: click and drag the edges of the clip (Note: transform size is constrained. If you need to cut into the clip, use the CROP Tool).

3. Render edit as needed.

Speed Up/Slow Down a Clip:

1. Select the rendered clip in the Timeline with the Selection Tool.
2. >Modify >Speed: change % -or- >Modify >Duration **A Reverse option is available here

Filters: add a special effect to your clip.

1. Select the rendered clip in the Timeline with the Selection Tool.
2. In the Browser Window, select >Effects Tab: “Video Filters”. Open the folder.

3. Click and Drag the desired filter directly onto the clip in the Timeline. You may add more than one filter to a clip!

Edit a filter by selecting the the rendered clip, then use the “Filters” tab in the Viewer Window: Un-check the filter in this window to delete filter.

Titles: Add Text to your Sequence

1. In the Timeline, insert a new Video track (“V3″):  >Sequence >Insert Tracks: “1″ Video
2. In the Viewer Window, select the dropdown menu with the ‘A’ icon (lower right corner)
3. Select the Text menu (crawl, lower third, type options, etc.)
4. Click on the Controls tab in the Viewer Window to edit the text.
5. Preview the text in the Video tab.
6. Add the text into the Timeline by dragging directly from Viewer Window into Timeline (onto V3 track).

Mark in /Mark out: A more precise and efficient way to edit. Edit clips using Mark In/Mark Out in the Viewer before adding them to the Timeline.

1. In the Viewer Window, preview a clip from the Browser.
2. Move the playhead(cursor) to the desired starting edit-or-play & pause (hit the spacebar) at desired point.
3. Click the “Mark In” button. Note the “start” of the clip is lined up with the playhead.
4. Now move the playhead to the desired ending edit -or-play & pause (hit the spacebar) at desired point.
5. Click the “Mark Out” button. Note the “end” of the clip is lined up with the playhead.
6. Drag the clip from the Viewer Window into the Timeline. Note the new “edited” clip.

**Delete Mark In/Mark Out by dragging from the playhead -or- >Mark >Clear In & Out

Note: The same Mark In/Mark Out option buttons are found in the Canvas.

Continue with the 30-second Video project.

* Add Text on Video Track 3: include your name, year, etc.

* Add a Video Filter.

*Use the Wireframe to correct any clips that are different sizes and/or experiment the Window-within-Window

• Wednesday: Adding Sound to Video. Bring headphones & CDs to class to add to your video project.

• Review The Final Exam Study Notes! Exam/video presentations & last class this Thursday!
  

Links:

What is FCP?

This video about Final Cut Pro was made by a former student.

Final Exam Study Notes

The Final Exam is scheduled for this Thursday, 7/23.

This is also the last day of class!

The exam will be written (no computers) and is required by all students taking IDST 120. In preparation for the exam, review all our class notes from the website and freshen up on the software programs we covered these past 6 weeks. You aren’t expected to be an expert, but should have a basic understanding of the different software and the underlying concepts discussed in class.

—————————–

IDST 120 Final Exam Study Notes

OSX-What is an Operating System? Options found in Apple Menu, System Preferences, The Dock, folders (create,name,delete,move,copy,paste, get info,etc).

Photoshop-Bitmap, Resolution, Tools, Layers, file formats,best uses for the application, what  bitmap images are composed of…

Illustrator-Vector, file formats, best uses for the application,what vector images are composed of…

HTML/Dreamweaver-definitions (html, browser, absolute/relative links…), basic HTML tags, root/source folder, uploading to CCSF Hills Server,compressing for the web, file formats, Fetch

Flash-Vector,Tools, Basic windows & functions of Timeline, Stage, Toolbar, Library & Properties Panel, definitions (Frame, Key Frame), Motion/Shape Tweens, Adjusting: View size, fill, stroke, Layers

Final Cut-Basic windows & functions of Timeline, Browser, Viewer, Canvas, definitions( render, waveform), root/source folder, Tracks (adding,deleting, locking, invisible)

7/20: Intro to Final Cut Pro

Final Cut Pro is a nonlinear software application developed by Apple, used for editing, importing and exporting digital video. Since the program is MAC based, there is no easy way to install FCP on a PC.

Non-linear: out of sequence

Get Started

Like HTML/Dreamweaver, a Root (source) folder needs to be created for FCP video sequences.

1. Create a new Video  source Folder. All video, sound, image, etc files used in your Video sequence must be stored here!
2. Go to the Class Server and  select 5-6 clips and move to your new Video folder

3. Open the application Final Cut Pro>Applications >Final Cut Pro

Set Scratch Disks:
You only need to do this once, unless working on a new project with a different source folder. This is the same theory behind one source folder for your project, like HTML & Dreamwever.

>Applications >Final Cut Pro
You will be asked to set your Scratch Disks. Point to your Video source folder.
>Final Cut Pro >System Settings >Scratch Disks : SET, Point to your Video Folder.

Basic Windows

Browser Window

The original source window, imported (unedited) video clips and SEQUENCES stored here. Video clips, Audio files, Flash .swf files , and image files can all be imported into FCP.

Import a clip from the Video Source folder into Final Cut Pro:
>File >Import: point to Video Source folder
The imported clip will appear in the Browser Window. The file name and duration is shown.

Viewer Window
The source monitor, used to view imported clips.

To view clips:
Double click on the clip in the Browser-or- click & drag clip directly into Viewer.
* Play clip: button, cursor, by frame, w/ left and right arrow keys
* Display clip time (upper right side window)
* Use tab drop down menu to toggle between browser clips that have been imported.

Canvas Window
Corresponds with the Timeline, displays an edited Video Sequence. Similar Play functions & time display of entire Sequence

Timeline Window
Composed of Video and Audio tracks, Video Sequences are built here.

• Add clips to Timeline by dragging from Browser or Canvas window.
• Delete clips in Timeline by selecting with Selection Tool and using the Delete key.
• Play Sequence by hitting the Space Bar on your keyboard (you will see the sequence in the Canvas).
• Move a clip by clicking and dragging with Selection Tool.

Toolbar
Selection Tool, Razor Blade and Pen Tool.

Change the Duration (length) of a Clip:
Select clip using the Selection Tool, hover over the edge of the clip to see a double arrow. Drag to desired length -or- use Razor Blade tool to “cut” the clip.

Add/Delete a Track:
By default there is a Video 1 Track and Audio 1 & Audio 2 (left and right channel) in the Timeline. An unlimited number of Tracks can be added to your Video Sequence.

>Sequence >Insert Video Track/>Delete Track

Fade In & Fade Out using Clip Overlay:

Like Photoshop Layers, Video Tracks can have their opacity altered. Tracks are read from left to right, top to bottom.

1. Clip on the Toggle Clip Overlay button on the bottom left of the Timeline.
2. An opacity line will appear across the clips in the Timeline.

3. Use the Pen Tool in Toolbar to mark opacity points along the clip.

4. Use the Selection Tool to raise/lower opacity line.

Video Transitions:

Use transitions to segway one clip into another (ie: Push, Slide, Diamond…)
1.There must be a Video Track 1 and Video Track 2! Clips should be layered in a specific overlap, see class demo.
2.In the Browser Window, select the tab >Effects >Video Transitions
Choose the Video Transition clip of your liking.
3.Click & drag the specific Video Transition onto a clip in Timeline, on Video Track 2 .
4. Render your edit to see the Transition.

Rendering: ‘processes’ your edits in order to playback video and audio effects. A red line appears at the top of the Timeline that indicates the need for rendering.

RENDER an Edit:

Rendering “processes” any edits made on the Timeline so that it may be viewed in the Canvas Window.

Apple + R -or- >Sequence >Render Selection (Return key + Apple +R)
*red line on top on Timeline will disapear, review clip in the Canvas Window

Project #1:

* Create a 30 second Video Sequence with at least 4 different clips from the Stock Videos, Youtube, and/or a combination of additional video files.

* Video 1 & 2 Track

* Use at least 2 transitions

* Fade In & Out using Clip Overlay

Links:  Video Converter

1. Convert a You Tube video and use it in your project:
2. Find a video clip on YouTube
3. Select & Copy the video’s URL-found under “more info” tab on right side of screen
4. Go to Media Converter: http://onlinevideoconverter.com/online-video-converter.aspx
5. Paste the URL into the box (next to ‘#1′)
6. Select  “.mov”; un-check “Video HD” for quicker conversion
7. After the conversion/download (time depends on video length) click “Download” and “Save File” . In this lab,the downloaded .mov file will appear on the Desktop -or- in the Downloads folder located on the Dock.
8. Move the new .mov file your Video Folder
9. Import the .mov file into Final Cut Pro

7/16: Editing Sound in Audacity, Student Flash Projects due

Flash Project due at 4pm for presentation. Turn in at least one project to show to the class.

BOTH the .fla files and a compressed .swf due.

Total files due: 6

1. Create a new folder called “yourname_flash”
2. Move a copy of your 6 project files to this new folder:

“yourname_motion.fla”

“yourname_motion.swf”

“yourname_shape.fla”

“yourname_shape.swf”

“yourname_flash.fla”

“yourname_flash.swf”

Basic Sound Editing with Audacity:

1. Download the program Audacity:

http://audacity.sourceforge.net/download/mac

2. An icon appears on the Desktop, click on it to open the Audacity 1.2.5 folder.

3. Double-click on the Audacity icon within the folder to open the program.

4. >File >Open..point to the music track (already imported in iTunes  if from a CD).

5. Zoom in/out with the magnify tool as needed.

6. Take the Selection Tool and highlight the area of the track you wish to save.

7. >Edit >Trim

8. >File >Save as .WAV

9. Rename it, save it to your Flash folder.

10. Follow directions from yesterday’s post to import the edited track into Flash.

Importing .swf files into Dreamweaver:

1. Make a copy of the .swf file and move to your Dreamweaver folder
2. In Dreamweaver, >Insert >Media :Flash
3. Save and Preview in Browser
4. If uploading to the Hills Server, use Fetch to log-in and “Put” the .swf *and* updated .html page. REMEMBER to set permissions for these new files. Refer back to your handout if you have questions.

CCSF Flash Classes

Flash classes in the Multimedia Studies Program:
* MMSP146. 2D Animation with Flash
* MMSP 142. Designing Interactive Applications with Flash ( Prereq.- MMSP 146 -or- CS 183A)
* CS 183A. Multimedia Tools

* CS 183B. Flash Game Programming I
(Prereq.-CS 183A or IDST 146 or experience using Flash: graphical tools, built-in objects, and how to create timeline-based movies)

7/15: Importing Sound & Images

Importing an Image File into Flash:

There are numerous file formats that can be imported into Flash. However, adding bitmaps can increase your file size. Keep the file size small by compressing your images first in another image editing program (ie: Photoshop). Compare the quality and file size of different image formats for the best results.
*Save an image as “___.gif” to keep a transparent background

1. Create & name a New Layer for an Imported Image.  Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. >File >Import to Stage, point to Image file (this image is placed on the Stage & in the Library).
3. Images can be used as a background, turned into a Symbol/Motion Tweened, re-sized with the Free Transform Tool. *Shape Tweens are not recommended for imported images.

*If using the imported image as a background, match the file size to the Stage automatically in the Document Properties:   >Modify >Document: Match : CONTENTS

Break Apart an Image:

Edit an image further or create a image Shape Tween by “breaking apart”

Follow the above steps for importing an image and then:
1. Select Image on the Stage.
2. >Modify >Break Apart

Adding Sound to Flash

Sign out a pair of headphones if you do not have a pair with you .

Part 1: Import a Music CD into iTunes
Open the program iTunes: >Applications >iTunes

Set Preferences in iTunes

Use .MP3s for smaller file size
>iTunes >Preferences: General : “Import Settings” : Import Using : MP3 Encoder
Select “Good Quality” , click ‘OK’
*This preference only needs to be set once per computer.

Get Started:
1. Insert your music CD into the computer. The Eject key is found on upper right-hand side of the keyboard.
2. Your CD tracks will appear in iTunes. Check the track you’d like to import, uncheck all others.
3. Click the “import CD’ button to download the track onto your computer (button found on bottom right of screen).
4. A green check arrow icon appears next to song track when done.

After importing into iTunes, retrieve a track:
iTunes will automatically place imported tracks into the Music Folder.
Locate your imported track:
>Music >iTunes >iTunes Music >name of album >track
*move .MP3 into your Flash folder

Part 2: Import music file into Flash
1. Open Flash.
2. Insert a New Layer, call it “Soundtrack” or “Music”.
3. >File >Import to Library (notice the new Sound file in Library; displays as a WAVEFORM).
4. Modify the Sound file if needed by double clicking on it.
5. Create a New Layer for your sound. The music will start where you have placed your first KeyFrame.

6. Drag the Sound file directly into the Stage from the Library -or- Select the track name from the Sound Panel within the Properties.

A Waveform will appear in your Timeline.
Waveform: A visual representation of sound.

5. In the Properties Inspector, choose “Synch: STREAM”. This matches the track with the duration of the animation.
6. >Control >Test Movie to preview your sequence.

• Finish In-Class Exercise #1 Motion Tweens  & #2 Shape Tweens  before starting the next project.
• Add SOUND -music and/or  sound effects- to both exercises!
• Stock sound effects have been placed on the Class Server for use. Drag a copy of the sound file to your Flash folder a before importing into Flash.
  

Flash Final Project #1: 180 Frames minimum

Background Layer (Try using an imported Image..if cutting up an image for a background, you may have more than 1 BG Layer)

Motion Tween Layer 1

Motion Tween Layer 2

Shape Tween Layer 1

Shape Tween Layer 2

Sound Layer

* Save as : “yourname_flash.fla”

**ALL Flash Projects and Exercises will be due for class presentation Thursday

7/14: Edit Symbols in Library, Modify a Symbol’s Instance, Shape Tweens

Edit Symbols in the Library
Once an object is converted to a Symbol it automatically gets placed in the Library. A Symbol is not editable on the Stage, but can be edited in the Library.

1. On the Stage or in the Library Panel, double click on the Symbol you wish to edit. The Library Window opens-notice the Timeline looks slightly different: the Symbol name appears on the top of the Timeline, Layer names and Tweens disappear.
2. Edit the Symbol (ie: change the Fill or Stroke color).
3. Click on the “Scene _#_” icon to return to the Timeline.

The new appearance of the Symbol is automatically swapped!

Modify A Symbol’s Instance
Options include: Alpha (fade in/out), Free Transform (grow/shrink), Rotate (clockwise ‘CW’, counter clockwise ‘CCW’). Note: These options affect only Symbols, which are limited to Motion Tweens. Different options apply for Shape Tweens!

Motion Tween an Alpha (fade in/out):
1. Complete a Motion Tween(see notes from previous class). Select the first Keyframe.
2. Click on the Symbol on Stage to activate the Color Effect menu in the Properties Panel.
3. In the Properties Panel, select Color Effect: Style: Alpha. Change the Alpha %…100% is full opacity-0% is none/invisible.
4. Select the next Keyframe (on the same Layer) in the Timeline.
5. Click on the Symbol on Stage to activate the Color Effect menu in the Properties Panel.
6. In the Properties Panel, select Color Effect: Style: Alpha. Reverse the the Alpha %…100% is full opacity-0% is none/invisible.
7. Hit the Return Key to play your animation!

*Grow/Shrink a Motion Tween using the Free Transform Tool (Toolbar)
*Rotate Motion Tweens using the Rotate options (in Properties Panel): Tweening: Rotate: CW, CCW…x #

Add some of these new options to your In-Class Exercise #1.

Shape Tweens

Unlike Motion Tweens, a Shape Tween *morphs* from one object into another (ie: a star morphs into a circle). In general, this works best with simple shapes. A Shape Tween is NOT CONVERTED TO A SYMBOL!

Create a Shape Tween:
1. Create & name a New Layer for a Shape Tween. Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. Create an Object on the Stage. Notice a Keyframe (black dot) automatically created in the Timeline.
3.Create a second Keyframe at another point in your Timeline:
Select a Frame (click on the actual frame so that it is highlighted), Go to >Insert >Timeline: Keyframe -or – ‘f6′ key. Notice a second Keyframe (black dot) appears.
4. At the second Keyframe, modify the Object on your Stage (ie: replace with another Object, add or subtract from it, etc). Click on first Keyframe and next Keyframe to verify the different Object modifications.
5. Add a Shape Tween:  >Insert >Shape Tween -or- Control + click: Create Shape Tween.  A solid arrow with a green highlight appears in your Timeline, between the first and second Keyframe.
6. Hit the Return Key to play your animation!

Shape Tween Text: Morph words, numbers , phrases, etc…
1. Create & name a New Layer for a Text Shape Tween. Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. Using the Text Tool, click on the Stage to get the flashing cursor. Add text content. Notice a Keyframe (black dot) automatically created in the Timeline.
3. Text needs to be “broken apart” in order to successfully Shape Tween.
Use the Selection Tool to Text Tool to highlight the text.
4. Choose >Modify >Break Apart.  Do this twice!
5.Create a second Keyframe at another point in your Timeline.
6. At the second Keyframe, insert new text with the Text Tool on the Stage. Delete the first text with the Eraser -or- Selecting/delete key.
7.  Once again, Text needs to be “broken apart” in order to successfully Shape Tween. Use the Selection Tool to Text Tool to highlight the text, then choose >Modify >Break Apart. Do this twice! Click on first Keyframe and next Keyframe to verify the different text modifications.
8. Click on the first Keyframe.
9. Add a Shape Tween:  >Insert >Shape Tween -or- Control + click: Create Shape Tween.  A solid arrow with a green highlight appears in your Timeline, between the first and second Keyframe.
10. Hit the Return Key to play your animation!

In Class Exercise #2: Shape Tween

* Create 4 Shape Tweens, including a TEXT SHAPE TWEEN, each on a seperate Layer (name each layer).

* Include a static Background Layer.

* 5 layers total

* Save as “yourname_shape.fla”. Save to your >Flash >Assignments folder

———————————

For Wednesday:

Bring some headphones & music CDs to class, we will add sound to Flash.

7/13: Intro to Adobe Flash CS4

Adobe Flash is a multimedia platform commonly used to create animation. Like Illustrator, it is vector-based.  Flash is also used for creating web page components and  integrating video into web pages. Examples: Web banners, Websites, Games, Learning applications, Slideshows, Creating Video Players.

In this class, we will focus on the basic animation aspect.

The CS4 version of Flash offers various approaches to animation;  tutorials reviewed outside of class may be different from class lecture notes.

Main file formats:
“.fla”- Native working Flash file
“.swf”-Flash content viewed in a Flash Player as a “ShockWave Flash” file; a compressed version of the working file

The Principles of Animation tutorial:
http://www.evl.uic.edu/ralph/508S99/index.html

Get Started:
Open the application Abode Flash CS4 :  >Applications >Abode Flash CS4
In the Welcome Window, Select : Create New: Flash File (ActionScript 3.0)
-or-
>File >New: (General tab) Type: Flash File (ActionScript 3.0)
A new document appears

Different Workspace Views Available:
I will be lecturing in ‘Classic’ View

Basic Windows: The Stage, Toolbar, Timeline, & Panels (Properties & Library)

The Stage

The main working area in Flash. The rectangular box is the work space; the surrounding (grey) area is the Scratchpad/Pasteboard.

Modify the Stage: Options include selecting a background color, project dimensions, and Frame Rate-the speed of your movie based on Frames Per Second (FPS).
>Modify >Document

The Toolbar

Similar to vector tools seen in Illustrator. Look to the Properties Panel/bottom of the Toolbar for options.

Selection Tools: Selection, Subselection, Lasso
*Select an item to move, delete, edit, or Convert to Symbol

Painting & Drawing Tools: Line, Pencil, Brush
*Select item with a Selection Tool to modify a path’s Stroke color, located in the Properties Panel -or- bottom of the Toolbar

Shape Tools: Rectangle, Oval, Rectangle Primitive (editable corner radius), Oval Primitive (editable inner radius & angles).
*Select item with a Selection Tool to modify the object’s Fill & Stroke color, located in the Properties Panel -or- bottom of the Toolbar
*Object Drawing Mode (advised)-keeps objects entact; easier to edit and arrange; the button is located at the bottom of the Toolbar
*Merge Drawing Mode-editable overlapping objects; separates fill from stroke;more difficult to apply simple edits and arrangment; this mode is automatically turned on when Object Drawing Mode is off

View Tools: Zoom (In & Out-toggle with ‘Control’ button), Hand

Editing Tools: Eraser (toggle Faucet Mode to erase entire color sections or use as a freehand earser tool), Free Transform (click & drag handles to resize-hold ’shift’ to constrain proportions; rotate; distort option).

Panels: Properties & Library

Click on icons -or->Window >select the panel

Properties Panel-Additional options for the Toolbar, Tweens, Sound…and more!

Library Panel-contains Symbols, images, sound files

The Timeline

Composed of Frames and Keyframes. Multiple Layers are available.

Frames are the “backbone” of your animation, denoting the passage of time.

ie: If your FPS is 12, this means in one second, 12 frames will be displayed.

Frames Per Second (FPS)
Can be altered in Properties Panel “FPS”: #
-or-
>Modify >Document

• Add a Frame to the Timeline :

>Insert >Timeline>Frame -or-  ‘f5’ key

• Delete a Frame from the Timeline:

Control + Click : Remove Frames -or- Shift + ‘f5′ key

Keyframes denote an action taking place; there is a beginning and end. Additonal Keyframes may reside elsewhere in the Timeline wherever an action takes place.

note: creating an Object to the Stage automatically creates a Keyframe.

• Add a Keyframe to the Timeline:

Click on a frame in the desired Layer, >Insert >Timeline>Keyframe -or- ‘f6’ key

• Delete a Keyframe from the Timeline:

Highlight the Keyframe, Control + Click : Clear Keyframe -or- Shift+ ‘f6′ key

• Move a Keyframe in the Timeline:

Highlight the Keyframe, click and drag

Create a New Layer for each Tween: Layers are stackable and read from top to bottom.
The bottom Layer is usually your background, a static image that provides a backdrop for your animation.
Lock Layers that are not being worked on/make them temporarily invisible as needed.

1. In the Timeline, click on “Insert Layer” icon.
2. Name the Layer by double clicking on the title.

• Lock a Layer by clicking on the Lock icon.
• Make a Layer temporarily invisible by clicking on the Eye icon.
• Delete a Layer by highlighting it and clicking the Trash icon.

Create a Symbol:Symbols are objects that have been converted to special containers. Once they have been converted, they reside in the Library Panel. From the Library, you may use a symbol over and over again. To do a Motion Tween, an object MUST be converted to a symbol!

1. Create an object on the Stage.
2. Select the entire object with a Selection Tool.
3. Go to >Modify >Convert to Symbol
4. In the Convert to Symbol box, Give it a name and select Type: “Graphic”
5. Click “OK”
6. The new Symbol appears in the Library Panel (>Window >Library)

Create a Classic Motion Tween:

Motion Tweens are the most common form of animation in Flash. The user creates Keyframes for the primary actions of the Symbol (ie: starting point and ending point) and then Flash fills in the “in-betweens”.

A MOTION TWEEN USES SYMBOLS.

Motion Tweens can move Symbols from one Keyframe to another Keyframe, can change size, alpha %, rotation, etc. Despite minor changes (size or color), the Symbol ultimately stays the same (unlike a Shape Tween).

1. Create & name a New Layer for a Motion Tween. Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. Create an object on the Stage. Notice a Keyframe (black dot) automatically created in the Timeline.
3. Convert the object into a Symbol (follow “Create a Symbol” Steps 1-6 ).
4. Create a second Keyframe at another point in your Timeline:
Select a Frame (click on the actual frame so that it is highlighted), Go to >Insert >Timeline: Keyframe -or – ‘f6′ key. Notice a second Keyframe (black dot) appears.
5. At the second Keyframe, use a Selection Tool to modify the Symbol on your Stage (ie: place it elsewhere, resize it, rotate it, etc). Click on first Keyframe and next Keyframe to verify the different Symbol modifications.
6. Click on the first Keyframe.
7. Add a Motion Tween:  >Insert >Classic Tween -or- Control + click: Create Classic Tween.  A solid arrow with a blue highlight appears in your Timeline, between the first and second Keyframe.
8. Hit the Return Key to play your animation!

Modify a Motion Tween:
1. Select the Keyframe in the Timeline.
2. Use a Selection Tool to modify the Symbol on your Stage (ie: place it elsewhere, resize it, rotate it, etc). Click on the first Keyframe and second Keyframe to verify the different Symbol modifications.
3. Hit the Return Key to play your animation!

Create a Motion Tween (updated in CS4):
1. Create & name a New Layer for a Motion Tween. Lock/make invisible other layers as needed. All steps are done within a specific Layer.
2. Create an object on the Stage. Notice a Keyframe (black dot) automatically created in the Timeline.
3. Convert the object into a Symbol (follow “Create a Symbol” Steps 1-6 ).
4. Add a Motion Tween:  >Insert >Motion Tween -or- Control + click: Create Motion Tween.  A blue highlight appears in your Timeline for the amount of 1 second. The # of frames is dependant on the FPS of the project.
6. Hit the Return Key to play your animation!

Modify a Motion Tween (updated in CS4) :
1. Select the exisiting Keyframe by moving the Playhead to the desired frame in the Timeline.
2. Use a Selection Tool to modify the Symbol on your Stage (ie: place it elsewhere, resize it, rotate it, etc). A small diamond icon appears in the Timeline to specify the Keyframe.
3. Hit the Return Key to play your animation!

In Class Exercise #1: Motion Tween

* Use some of the tools discussed in today’s lecture to create 4 Motion Tweens, each on a separate Layer (name each layer).

*Do not import any bitmap/vector images into your Flash assignment.

* Include a (static) Background Layer.

* 5 layers total

* Save as “yourname_motion.fla”. Save to your >Flash >Assignments folder

7/9: Dreamweaver Projects due today

• Dreamweaver 3-page website project due today at 3:30pm.

• Have at least one other person QA (test) your website for any mistakes; modify changes before uploading.

• We will be uploading your website to the CCSF Hills Server.  See instructions in the .pdf file found in the class server “ReadWrite” folder.

• When you have successfully uploaded all your pages, check your new CCSF URL to verify that everything is working-no broken links, missing images, etc. Your URL will look something like:   “http://hills.ccsf.edu/~your user name“

• Enter your new CCSF URL in a Word Document. Save it as: “yourname_dreamweaver”  and upload this to the Class Server DropBox. This is what you will hand in for your grade-NOT the actual Dreamweaver folder!

Dreamweaver  Classes at CCSF:

MMSP 130   Multimedia  Process and Production                 3.0 credit

Monday:

Intro to Adobe Flash CS4