Final Exam Review Multimedia Spring 2010 iMovie ‘09 iMovie Desktop • Study items on the iMovie Desktop sheet you completed in class -- pay attention to all tools as well as the windows. iMovie - Desktop Specifics • Project Browser Shows how your clips are arranged in a project Basically, this is your movie -- it contains the clips after they have been edited. Contains the Project Library • Used to open previous projects created in iMovie • Viewer Allows you to preview your video Used to crop either video or still images. iMovie - Desktop Specifics 2 • Event Browser Shows the clips in your Events • Basically a storage area for video clips -- NOT a part of your movie -- this is raw footage. • Also lets you mark clips as favorites or rejected • Rejected clips are NOT deleted, they are just hidden Allows you to access various browsers -- Music & Sound Effects, Photos, Titles, Transitions, and Maps & Backgrounds. iMovie Desktop Specifics 3 • Event Library - Lists every Event you’ve created to organize video clips in different categories Events are listed along with the year in which the clips were created. Events allow you to group video into useful, named categories. iMovie - Toolbar • Has buttons for most common tasks available in menus -- sits in the middle of the iMovie Desktop. Browsers Adjust Thumbnail Size 1 234567 Volume Levels Open Camera 1 - Add selection to project 5 - Voiceover Import Window 2 - Mark selection as favorite 6 - Crop, Rotate, 3 - Unmark selection Ken Burns 4 - Reject selection 7 - Inspector Importing Video • Can import video clips from files on your computer: File > Import > Movies • Can be added to an existing Event, or to a new Event • Can import from digital video cameras through a Firewire connection. • Can import from your Mac’s built-in iSight camera. Importing Video 2 • To import from a video camera Connect camera to computer with Firewire cable Click on the Import from Camera button In the Import window, click on Import • Choose Event options • Click Import • Click Done when finished Previewing Source Video • To expand or contract the filmstrip and change the number of thumbnails shown you use the slider at the bottom of the Source area (there is also a slider at the bottom of the Project Browser). • Use the red “skimming” line to preview clips in the Viewer. Making Selections • To select just a portion of the clips, you can: Click once on a clip -- by default, it will select up to 4 seconds of video; Click and drag on the clip -- this will place a yellow selection area on the clip. • The yellow selection area can be changed by dragging on the corners of the box. Adding clips to a project • Two ways to make a clip part of your project: Select the clip in the Events Browser and then drag and drop to the Project Browser Select the clip in the Events Browser and then click on the “Add to Project” button on the Toolbar Enhancing Video • Video (and still pictures) can be cropped/resized in iMovie using the Crop button and the Viewer -- Click the Crop button Click the clip you want to crop/resize Size the green box in the Viewer around the part of the clip you want to keep/enlarge Click Done Editing Your Movie • To change the order of clips in the Project Browser -- simply click and drag the clips where you want them to go (drag & drop). • Trimming allows you to change the duration of a clip by removing unwanted frames. Editing Your Movie 2 • Editing in the Events Browser - Basic Editing Selecting portion to use in the project • Project Browser - Advanced Editing For still pics, video, and audio -- clips can be lengthened/shortened Special effects can be added Video speed can be changed Quality can be changed • Includes Exposure, Brightness, Contrast, and Saturation Audio -- volume can be changed, faded in/out The Precision Editor • The Precision Editor is a visual editing tool that allows you to edit the end of a clip and the beginning of the next clip in the same window. Can also edit the audio portion of a clip. Can be used to extend audio from one clip so that it plays while another video clip is seen. Browsers • To add pictures - use the Photos button to access pics in iPhoto. • To add Music & Sound Effects - use the Music & Sound Effects button. Can access music from iTunes or GarageBand. A wide variety of Sound Effects can be found in the iMovie Sound Effects or iLife Sound Effects Libraries. Browsers 2 • To add Titles - use the Titles button. Can be placed over various styled backgrounds or video clips. Can use various fonts, colors, and sizes. • To add Transitions - use the Transitions button. Used to move between video clips. Includes things like fades, spins and cross dissolves. Browsers 3 • Maps and Backgrounds - can be accessed through the Maps and Backgrounds button Contain animated maps that can be used to show where video was recorded. Maps have three different styles: • Globe, Flat Map, and Still Map Voiceovers • To record Voiceovers -- click the Voiceovers button to open the Voiceovers window. Begin recording by clicking on the clip you want to place the voiceover on. Press the Spacebar to stop recording. Close the Voiceovers window when done. Special Effects • Allow you to make clip appear as if it were aged, black & white or sepia-toned, or with a vignette around it (these are just a few of the effects in iMovie). • Can be accessed by double-clicking the clip in the Project Browser and using the Clip tab -- choose the effect and click Done to apply it to the clip. Sharing • Used to export movies out of iMovie so that others can see your projects. Can share to iTunes for use on an iPod, iPhone, or AppleTV. Can also share straight to: • iDVD • iWeb • YouTube • MobileMe Web Gallery • Media Browser Sharing 2 • Can publish to 4 sizes in iTunes, based on where you will view your finished movie and include: Tiny - iPhone (176 x 144) Mobile - iPhone/Computer (480 x 272) Medium - iPod, AppleTX, Computer (640 x 360) Large - AppleTV, Computer (960 540) Sharing 3 • Shared movies are saved to the Movies folder inside of your iTunes folder -- they can also be played in iTunes. • Movies can be shared to multiple places (iTunes, YouTube, Media Browser, etc…) • Shared movies can be accessed in other iLife programs like GarageBand and iDVD through the Media Browser. HTML HTML Basics • No Web authoring program is perfect, so it is useful to be able to “tweak” the code they generate. • All HTML documents are text files that can be examined and altered with a word processor. • For creating HTML, it’s better to use a basic text editor like TextEdit or Notepad. • If you create your HTML in a word processor you will need to save your document as a text file, stripping out the formatting codes to get the HTML correct. HTML Basics 2 • HTML is an acronym for HyperText Markup Language. • HTML was developed so that users of the World Wide Web could share documents that had consistent formatting. • The current version of HTML is version 4. • HTML is actually pretty easy to learn; the hardest thing about it is typing it properly. HTML Basics 3 • HTML consists of elements called tags -- these are commands that tell a web browser what to display. • Attributes modify tags in some way -- for example -- <P ALIGN=“right”> -- ALIGN is an attribute that makes the paragraph align to the right of the page (right is a definition). HTML Tags & Attributes • The code for HTML consists of tags (commands), attributes (modifiers), and definitions. Examples & explanations below….. • <IMG SRC=“pic.jpg” HEIGHT=“25” WIDTH=“30” alt=“Dog”> IMG - image – tag – embeds image on screen SRC – source – attribute – defines image file HEIGHT – attribute – changes displayed height of image WIDTH – attribute – changes displayed width of image Alt – Alternate text – attribute – displays text instead of image (if needed – for text readers, blocked images, etc…) “pics.jpg,” “25,” “30,” & “dog” -- are all definitions HTML Tags & Attributes 2 • <P></P> Paragraph – tag – begins new paragraph, leaves blank line in between • <BR> Line Break – tag – moves item to next line • <UL></UL> Unnumbered List – tag – creates list with bullets • <LI> List Item – tag – identifies item as part of list • <OL></OL> Ordered List – tag – creates list with numbers/letters • <A HREF=“http://www.gcisd-k12.org”></A> A – anchor - tag – creates anchor HREF – Hyperlink Reference – attribute – creates link http://www.gcisd-k12.org is a definition HTML Tags & Attributes 3 • <FONT SIZE=“5” FACE=“arial” color=“#ccffcc”> </FONT> Font – tag – defines text onscreen SIZE – attribute – sets font size FACE – attribute – sets font to be displayed Color – attribute – sets font color • <TABLE border="3"> Table – tag – defines table used on page for design/layout Border – attribute – defines border size of table • <BODY BGCOLOR=“# ccffcc” link="color"> Body – tag – contains contents of web site Link – attribute – defines color of unvisited link • <INPUT type="checkbox"> Input – tag – creates input item for a form Type – attribute – defines the type of input item to be displayed Web Design • 5 Basic Rules of Web Design Your web site should… • Be easy to Read • Be easy to Navigate • Be easy to Find • Have layout and Design consistent throughout site • Be quick to download (15 seconds) Web Design - Picture Formats • Differences between GIF & JPEG: GIF • Can have transparent background • Can have animation • Best for simple images with little color change • No gradients • Line art and flat colors OK JPEG • Best used for photos, lots of color change • Good for gradients, shadow, etc… • Images with detailed tonal qualities Web Design - Colors • Best color combination is dark background with light-colored text. • Good color combinations: White w/black text or Light yellow w/Dark blue text • There are 216 Web-Safe colors – these colors are the same in ALL browsers • Colors to stay away from: Red & Yellow They cause eye fatigue and can make visitors not want to stay on your site. • Use color sparingly -- too much of a good thing drives people away Web Design - Fonts • Rule of thumb -- Use Common Fonts • If the viewer does not have the font, they will see the default (usually Times New Roman). • Fancy Fonts -- Keep to a minimum, convert to a pic if you MUST use (but remember that the more pics you have, the longer the download time is.) Web Design - Miscellaneous • Link colors – can be changed, best to stay with default because that is what most people are used to: unvisited links are BLUE, visited links are PURPLE or RED • Update your web pages as often as needed Flash 8 Flash Info • Flash was created to generate vector- based graphics that could be easily delivered over the WWW. • Flash file formats FLA -- work files that can be changed SWF -- finished files that can be shared for view with the Flash Player or embedded on a web page Flash Info 2 • The Stage is where you create your work. • Items on the Stage are organized in Frames, on a Timeline, in a Scene. • The Timeline contains individual frames (or cells) of content. • Tools are used to draw and create artwork on the Stage. • The Properties Inspector shows the details of the artwork or content on the Stage. Flash Info 3 • The panels in Flash 8 help you with the design & structure of your Flash Movie. • The panels in Flash 8 are located on the right side of the Flash Interface -- they can be moved, closed, etc… • STUDY THE FLASH TOOLS SHEET!!!!! Dreamweaver 8 Dreamweaver??? • Dreamweaver 8 is a professional HTML editor that allows you to design, code, and develop web pages/sites/applications. • It is often referred to as a WYSIWYG editor because what you type in the document window is what you see in the web browser (WYSIWYG stands for What You See Is What You Get). Dreamweaver Interface • Lets you view documents and object properties. • Places most of the common operations in toolbars so that you can quickly make changes to your documents. • Dreamweaver provides an integrated workspace with an all-in-one window containing all of the windows and panels needed to create a web page. DW Document Window • Shows the current document in one of three different views: Design View -- a design environment for visual page layout, visual editing, and rapid application development (WYSIWYG view). Code View -- a hand coding environment for writing and editing HTML code. Code and Design View -- lets you view both Code and Design views in a single window. DW Insert Bar • Contains buttons for creating and inserting objects such as tables, layers, and images. Buttons are organized into several categories which can be accessed using the dropdown menu on the left side of the Insert Bar. Some categories include: • Common • Layout • Forms • HTML • Text • Flash Elements • Favorites DW Insert Bar 2 • Common - enables you to create and insert the most commonly used objects, such as images and tables. • Layout - enables you to insert tables, DIV tags, layers, and frames. • Forms - contains buttons for creating forms and inserting form elements. DW Insert Bar 3 • HTML - enables you to insert HTML tags for horizontal rules, head content, tables, frames, and scripts. • Text - enables you to insert a variety of text and list formatting tags. • Favorites - lets you group and organize the Insert Bar buttons you use the most in one common place. Dreamweaver Miscellaneous • The Files Panel lets you view and manage files in your Dreamweaver Site. • The Properties Inspector lets you examine and edit the most common properties for the currently selected item (text, pic, table, etc…). STUDY THE ITEMS ON THE DREAMWEAVER 8 INTRO SHEET!!!!!