Multimedia- FINALs
<table width="500" or "
Sets width of table, in pixels or as a percentage of document width
Hyperlinks
"hot spots" or "jumps" used to locate an external file, website or place in the presentation; represented by colored and underlined text
Comparing Web Hosts File transfer technology
(ftp, webDAV, editor compatibility) Some hosts do not support some web editors and may require the use of their ftp program.
LINES AS A CHART
...
LINES THAT CONNECT
...
LINES THAT MAKE A FRAME
...
LINES THAT ORGANIZE TABLE
...
LINES THAT SHOW EMOTIONS
...
LINES THAT SHOW MOVEMENT
...
3-D Graphics and Animation
3-D animations are more complex. Creating 3-D animations involves modeling, animation, and rendering.
Order of Tags
<html> <head> <title> </title> </head> <body> </body> </html>
BALLOON
A circle or bubble enclosing copy in an illustration Often used in cartoons
RASTER GRAPHIC
A graphic made up of pixels; also known as a bitmapped graphic.
Resizing a Raster Image
A small image that is enlarged is easily distorted. Pixels are not added, just enlarged It is better to start with a large image and make it smaller File size will remain the same An image must be edited to reduce file size.
A Player
A standalone player is a separate program that can play video and audio files without the browser software being open.
END MARK/SIGN
A symbol that indicates the end of an article or news item Symbols vary
Purpose of a Website
A website is developed to build a relationship with a target audience and are created for the following reasons: Sell Social Inform Entertain Hybrid
Folder Structure
A website should be saved in one folder (the Root Folder). Subfolders can be used to organize content within the root folder.
Common Vector File Formats
AI - Adobe Illustrator EPS - Encapsulated Postscript
The website MUST contain an Index/Home Page.A business website should contain:
About Us Contact Us Privacy Policy
<hr />
Adds an horiziontal ruler
<img src= />
Adds an image
Accessibility Issues
All US government websites must meet the needs of all users including people with disabilities. About 8% of all users have a disability that makes using a traditional website very difficult or impossible. Provide text equivalent for non-text elements. Ensure that all information conveyed in color is also available without color. Provide text only pages that are useful for screen readers. Provide equivalent alternatives for multimedia elements that are synchronized Do not require style sheets.
Computer Generated Animation
All images, objects and animation are created on the computer. Typically uses 3-D images. Adds two steps to the animation process. Motion capture can be used to create animation. Actors wear special suits that allow the computer to capture their movements. The movements can then be applied to computer-generated graphics. Modeling Rendering
SMALL CAPS
All letters are caps BUT the first letter appears larger than the rest of the capitals.
Text Editors
Allow developers to write code in plain text Notepad Notepad2 Wordpad Microsoft Word should not be used to create webpages.
Transparency
Allows the background color of an image to be "eliminated" or made transparent so that the background behind the image can be seen. It makes part of the image invisible, or "see-through."
Webbed Structure
Allows users to jump to any page on the website Used for sites with a few inter-related pages The order of the viewing doesn't matter. Must be consistent or user will get confused Navigation bars or menus are included on all pages.
Traditional Animation
Also called (cel animation) or hand-drawn animation. Begins with a storyboard. A preliminary soundtrack is recorded. Penciled drawings are made by lead animators of keyframes. Pencil tests are prepared. Artists called in-betweeners draw the frames between the keyframes. The drawings are traced onto cels and painted. Finally, they are photographed
Raster Graphics
Also called bitmap graphics Consist of grids of tiny dots called pixels Have a fixed resolution and cannot be resized without altering image quality Edited in paint programs
Path Based Animation
Also called vector animation. An object follows a path which is a line, or vector, inserted by the animator. A motion path can include curves, loops, and angles. The computer calculates the correct position of the object as it moves along the path and generates the frames to create the animation Vector graphics or animated gifs can be used to create animations with very small file sizes. The small file sizes make this type of animation very popular on the Web. Many of the banner ads and embedded animations viewed on web sites use this technology because it loads so quickly and is easy to use.
Lossy
Alters and/or eliminates some data The more the image is reduced, the more the quality is degraded
Using HTML Tags
An HTML tag begins with a < character and ends with a > character. Between these characters is the actual tag name, such as body or head. <body> is an example of a correct tag. Tags should appear in pairs, with an opening tag <html> and a closing tag </html>. The only difference between the opening and closing tag is the / used in the closing tag. Text entered between the HTML tags is formatted with the code specified by those tags.
DROPPED CAP
An enlarged character at the beginning of a paragraph Drops below the line of text Grabs the reader's attention
Choose an appropriate file type.
Animated GIF AVI MOV MPEG SWF
Uses of Computer Animation: Advertising
Animation can be used to catch the viewer's eye. Popular for banner ads on websites.
MOV
Apple QuickTime Movie (MOV) Files can be either downloaded or streamed. Run on many different operating systems. Must be viewed in the QuickTime player which is a free download.
Comparing Web Hosts Storage Reliability
Are backup servers in place to host site when main server is offline?
Rules for Using Attributes
Attributes are entered inside the opening tag but not in the closing tag. Attributes are keyed in name/value pairs. Syntax: name="value" The attribute should have an equal symbol followed by the value or setting for the attribute. Attribute values should be enclosed inside quotation marks.
Adding Attributes to Tags
Attributes provide additional information about tags and control how the tag will be interpreted by the browser. href is the attribute instructing the browser to set the text between the anchor tags as a hyperlink to the specified web address.
AVI
Audio Video Interleave (AVI) Microsoft's animation and video format for computers running the Windows operating system. Does not compress animation as much as other formats. Will not play on all operating systems or in all players.
DXF -
AutoCAD
The Home/Index Page
Automatically loads when URL is keyed into the web browser. Sometimes called the front page. Introduces the website and communicates the purpose of the website. Serves as an index for the website. Should create a positive first impression of the website. Should be named index.html All major options for the website should be shown on home page. Access to home page should be possible from any other page on the website. The home page should contain navigational links or menus to provide viewers with the links they will need to navigate the website.
What are web standards?
Basic set of guidelines for authoring languages used to make webpages. Developed by the World Wide Web Consortium (W3C).
OVERSIZED CURLY QUOTES
Big--oversized quotation marks that draw attention to text Does not need to be a quote
JUSTIFIED TEXT
Both margins are the same
CAPTION
Brief descriptive text, usually accompanying an image
Meta Graphics
Can contain vector and raster data. Shapes in vector graphics can be filled with textures and patterns that are raster graphics. Useful when layering text on top of raster graphics.
CSS
Cascading Style Sheets
Text Issues
Cascading Style Sheets Help ensure consistency throughout the website. Increase editing speed Change settings of the style once to update all documents using that style Similar to styles in word processor
CENTERED TEXT
Centered text on paper
Check relative and absolute links to make sure they work properly
Check relative and absolute links to make sure they work properly.
Before Publishing-
Check relative and absolute links to make sure they work properly. Check spelling Check site in multiple browsers. Validate source code.
Check site in multiple browsers
Check site in Internet Explorer, Opera, Firefox, etc. Notice differences and adjust as necessary.
Types of Images
Clip Art - Photographs - Art Work
Factors that Affect Graphic Format
Color depth Compression Portability Transparency
XHTML is
Combination of HTML and XML Allows the designer to mix HTML and XML so that browsers can display and manage data correctly Originally intended to replace HTML as dominant authoring language Places restrictions on HTML tags so that code is cleaner and can display data as the author intended Requires all HTML tag sets be closed Requires lowercase tags Many devices can't interpret bad HTML code (mobile phones, PDAs)
Hybrid
Combination of: Sell Social Inform Entertain
JPEG - Joint Photographic Experts Group
Commonly Used For: Desktop publishing photographs Photographs and natural artwork Scanned photographs Emailing photographs Digital camera photograph
BMP - Bitmap
Commonly Used For: Editing raster graphics Creating icons and wallpaper On-screen display
PNG - Portable Network Graphics
Commonly Used For: Replacing GIF and TIFF images Online viewing of images
TIFF - Tagged Image File Format
Commonly Used For: Storage container for faxes and other digital images To store raw bitmap data by some programs and devices such as scanners High resolution printing Desktop Publishing images
Layers
Compiling multiple pictures or objects together into one image Layers can be turned on or off Elements can be colored, layered, and resized individually
Compression
Compression refers to how an image is saved in order to reduce the file size. The greater the compression, the lower the quality
Regular Frame
Contain one image or frame
MASTHEAD
Contains the name of the publisher and may include staff names and other related info—usually on page 2
Cloning
Copying part of an image and using it to replace unwanted parts of the image.
CDR -
Corel Draw
These leading graphics programs allow users to:
Create live-action animation Bounce an object Zoom in or out of a scene Fade text or pictures in or out to create other animated effects.
<ul></ul>
Creates a bulleted list
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<ol></ol>
Creates a numbered list
The Home/Index Page
Creates a positive first impression of site Communicates the purpose of the website Place the company's logo on the page and use it in a consistent location throughout the website. Include navigational links or menus to provide viewers with the links they will need to navigate the website. Limit to one screen of information. Limit amount of prose text on home page. Show all major options on home page. Enable access to home page from any other page on the website. Announce changes to the website on home page.
<table></table>
Creates a table
<a name="NAME"></a>
Creates a target location within a document
<html></html>
Creates an HTML document
<a href="URL"><img src="URL"> </a>
Creates an image/link
<b></b>
Creates bold text
<i></i>
Creates italic text
<hl></hl>
Creates the largest headline
<h6></h6>
Creates the smallest headline
<u></u>
Creates underline text
Cropping
Cutting out part of an image Original image retains same file size Cut image can be saved as new object
Writing Web Content
Define acronyms and abbreviations. Use abbreviations sparingly. Avoid jargon. Use familiar words. Make first sentences descriptive. Use active voice. "John hit the baseball." rather than "The baseball was hit by John." Minimize the number of words in sentences and the number of sentences in paragraphs. Sentence: 20 words Paragraph: 6 sentences
HTML Tags: Purpose of Tags
Define and describe text, graphics, hypertext links, and other multimedia elements found on webpages Tell the browser how to display the document. By viewing the source code of a webpage, the user can see the HTML tags used to display the page. To view a webpage's source code: In the browser window, Click on the View menu and choose Source.
Style Sheets
Describe how browsers should present or display information on a webpage. Give web developers more control over layout and page formatting. Cascading Style Sheets (CSS) is a popular style sheet language.
XML is
Describes data types to facilitate data processing Designed to carry data, not to display it Allows the author to define tags to identify each data entry so that the data can be easily imported into other applications
Information Architecture:
Determine the mission/purpose of the website Define goals of the site Define target audience Examine competitive sites Identify the content of the website Determine website structure and navigation
Multimedia
Different types of media including text, video, sound, graphics, and animations
Lists
Display a series of related items in a list. Provide a descriptive heading for the list. Make lists easy to scan and understand Meaningful labels, effective colors, borders, and white space Capitalize first letter and first word in lists. Bullets/Unordered List <ul> for items of equal status or value Place important or most commonly used items at top Numbered/Ordered List <ol> for items where a particular order exists Organize alphabetically or numerically. Start numbered items at 1 rather than 0.
Text Issues-Size
Display resolutions and operating systems vary. 12 point on one machine may display as 14 point on another. Windows web browsers typically display type that is 2 to 3 points larger than a Macintosh.
Obtain a Domain Name
Domain names can be registered for a fixed period of time (usually 1 year but no more than 10 years). ICANN (Internet Corporation for Assigned Names and Numbers) maintains a list of accredited registrars. Registrars are the only companies allowed to assign domain names. Registration cost vary but are generally between $10 and $35 although some web hosts will register the domain for free. ICANN manages InterNIC, a searchable list of URLs. Has a WhoIs feature that provides information regarding the registered owner and the registrar that assigned the domain name.
Scrubbing
Dragging the playhead across the timeline in order to preview the animation.
Multimedia Overall considerations: Audio
Effective, low bandwidth way to enhance content. File sizes are smaller than video. Do not use as much bandwidth as video.
United States Website Accessibility Legislation
Equal access to and use of information on their websites for individuals and employees with disabilities. The information must be comparable to that provided to individuals and employees without disabilities. Applies ONLY to the United States.
Fair Use
Fair use allows others to use copyright material without infringing on the rights of the owner
ENTERTAINING BULLETS
Fancy bullets
Advantages of Splash page
Fast loading Gets all information on the page quickly Catches the user's attention for a short time
Types of Web Hosts
Free Shared Dedicated
Gradient
Filling an object/image with a smooth transition from one color to another.
Uses of Computer Animation: Entertainment
Films, computer games and virtual reality. 3D graphics are popular for these types of animations because they are more realistic. Virtual Reality is the use of technology to immerse a user into an artificial environment. Interaction occurs when the user moves around and manipulates simulated 3D objects in the environment. Requires high-quality graphics using 3D technology. Requires high frame rates for smooth motion, and high image resolution for realistic detail.
HTML is
First and still primary language for developing webpages/sites. Uses codes, or tags, to instruct the browser how to display text and images. Is platform independent
SHADOW FONT
Font that has a slight shadow in it
ORNAMENTAL FONT
Fonts designed strictly to catch the eye; should be used sparingly.
Publish the animation.
For animations distributed over the Internet: -Upload the file to the host computer. -Create a link to the file or embed it into the web page. -Test the animation in different browsers. For animations distributed on CDs or DVDs: -Burn the file onto the disk. -Finalize the disk. -Test the disk in several different CD or DVD players.
SCRIPT/CURSIVE FONT
Formal and elegant font used for wedding and prom invitations. Also called cursive or handwriting.
Common link errors:
Forward slash in relative link http:// before a relative link Mistyping a web address using wrong case or mistaking a _ for a blank space
Frame
Frames hold the content that the movie displays or plays at that point in time. The number of frames determines the length of the animation. The higher the number of frames, the longer the animation. .
Common Raster Formats
GIF JPEG BMP PNG TIFF
Multimedia Overall considerations: Animation
GIF format Doesn't require special plug-in Has no interface control. Flash becoming dominant animation format.
Animated GIF
Graphics Interchange Format (GIF) Pronounced "jiff" or "gif" Animated GIFs can contain 2-D or 3-D images. They are used for cartoons, logos, graphics with transparent areas, and animations. GIF files are popular for the use on the Web because they: Have small file sizes. Do not require a special plug-in or player. Are supported by most browsers
Uses of Vector Graphics
Graphics that will be scaled (or resized) Architectural drawings and CAD programs Flow charts Logos that will be scaled (resized) Cartoons and clip art Graphics on websites Because they have very small file sizes. This allows them to load quickly. Fonts and specialized text effects
Advantages of Web Standards
Helps ensure webpages display consistently in all browsers. Internet Explorer, Mozilla Firefox, Opera, and other browsers display the website exactly the same way. Faster website development. Faster downloading of websites Equal access to information. Differences in browser and/or operating system versions do not limit the user's access to the site. Differences in hardware do not limit the user's access to the site.
TRACKING
Horizontal spacing between all of characters in a large block of text. Makes a block of text seem more open or more dense.
Portability
How easily you can open, modify, and view the files on computers using different operating systems, software and browsers.
Comparing Web Hosts Storage
How much storage space can the customer afford? What size is the site? Check the cumulative size of the root folder if no web editor.
HTML
HyperText Markup Language
Analyze and optimize the animation.
Identify potential problems that may occur when downloading and playing a movie. If the entire movie will be downloaded before it is played, determine which parts of the movie are taking the most time to download. If the movie will be delivered through a streaming connection, look for ways to reduce or control the pauses during download and playback. Animations should be optimized in order to: Reduce the file size for quicker downloads. Make the video or animation play more smoothly during playback. Maintain sufficient quality for viewing. Videos can be optimized anytime or only when they are published. Optimizing animation involves fine-tuning compression settings. Optimize the sounds in the Library by compressing to MP3
Guidelines for Using Sound
If the animation is for a Web site, keep the overall file size small for faster downloads by using more compact MP3 files and looping a shorter sound segment. On the other hand, if the animation is part of a presentation delivered in an auditorium equipped with a high-quality audio system, use the highest quality sound file possible. When creating or choosing the sounds to include in the animation, keep the intended purpose of the animation in mind.
ART/GRAPHIC
Illustrations and photographs used to convey meaning and add appeal. Most anything that is not text
Match The Image Quality To The Delivery Method.
Images that will be displayed on a monitor do not need a high resolution. Using a low resolution means smaller file sizes. Images with small file sizes load quicker. Images that will be printed need a higher resolution. Images with 150 PPI are sufficient for printing on most personal desktop printers. Images with 300 PPI are better for printing on more sophisticated printers and will produce higher-quality photographs.
Animation
In the early 1800's, the phenomenon known as persistence of vision gave mankind the first glimpse into the modern world of animation. The rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement. Relies on persistence of vision to create the illusion of movement.
AI - Adobe Illustrator
Industry standard used by developers of vector graphics. Used to create, save, and archive original artwork.
Guidelines For Designing Frame-by-Frame Computer Animations
Insert keyframes at each change in the action Content on keyframes can be changed by: Adding and deleting objects. Replacing one object with another. Moving objects, resizing, or rotating objects. All these actions simulate some kind of motion or action. Add a keyframe at the point where the animation will stop. Allow sufficient time for the image to be viewed after the final content change.
<br />
Inserts a line break
Before using an animation, be sure to answer the following questions:
Is it appropriate for the target audience? Does it help deliver the message? Is it overused? Does it load quickly?
<tr valign="top"> or <td valign="top">
Sets vertical alignment for cell(s) (top, middle, or bottom)
Upload files to a web host
Know protocol being used. FTP—File Transfer Protocol Non-secure transfer that doesn't encrypt access password or allow data encryption during transfer WebDAV-Web Distributed Authoring and Versioning Secure file transfer that uses Web Folders to encrypt password and data during transfer; useful when using multiple authors to create site Does the host require an external uploading application? Does the host accept internal uploading utilities from web editing programs like Microsoft Expression Web or Dreamweaver?
Motion Guide Layer
Layer on which a motion path is drawn. Objects on different layers can be linked to the motion layer so they will follow the motion path. Once linked, they become "guided layers" Multiple objects can be linked to one motion layer. Text layers can also be linked to a motion layer.
Text Issues—Alignment
Left justified text is the most legible option for web pages. Left margin is even and predictable. Ragged right margin will not interfere with legibility Justified text is not recommended for use in webpages. Poor spacing Excessive hyphenation Centered and right justified text are not recommended. Scanning more difficult Ragged left margins make scanning extremely difficult Use indents or a blank line to indicate a new paragraph. Use paragraph tag <p> in html to leave a blank line. Use non-breaking spaces ( ) to indent.
LEFT-ALIGNED TEXT
Left-sided text on paper
MONOSPACE TYPE
Letters share an equal amount of space, not matter their size
PROPORTIONAL TYPE
Letters take up space according to their size.
WATERMARK
Lightly shaded picture underneath the text
JUMPLINE
Line which tells readers which page to refer to for the continuation of an article
Information Architecture:Determine website structure and navigation
Linear Webbed Hierarchical
RULES
Lines that separate Horizontal or vertical lines that can be applied to paragraphs, text boxes, and objects in a publication
<a href="#NAME"></a>
Links to that target location from elsewhere in the document
Hierarchical Structure
Looks like a family tree or like a chain of command. Used to organize large amounts of information with categories and subcategories Best way to organize complex bodies of information.
2 Types of Compression
Lossy Lossless
Shared Web Hosts Advantages
Low cost because it is shared with others. Own domain name. Better technical support.
Disadvantages of Vectors
Lower color quality than raster images. They do not support as many colors. Not good for photographic images.
MP3
MP3 is a standard format for music files sent over the Internet that compresses music or other types of audio. The compression process removes sounds that humans cannot hear. To most listeners, MP3 files sound as good as WAV files.
Webpage Design vs. Print Document Design
Many design principles apply to both webpages and print documents. Apply a few fundamental principles to every webpage created. Use clear titles to capture the reader's attention. Include a title in the <head> section in case viewers bookmark your page. Place a link to the "home" URL on at least the main pages of the site. Provides connection back to where a page originated.
Pros and Cons of CSS :Disadvantages
May alter the ability of some devices to accurately read and display information.
Disadvantages of Splash page
May prevent search engines from accessing the actual site. Many readers do NOT like splash pages.
EPS - Encapsulated Postscript
Meta Graphic Graphics developers generally save a copy of the AI file in EPS format because it can be opened by computers running different operating systems. Preferred format for vendors/clients who use the graphics in publications due to its portability.
<table border="1">
Sets width of border around table cells
Image Output Methods
Monitors Printers
RUNNING HEADER
More familiarly known as a header or footer. A running headline is repeating text that appears, usually at the top of each page or every other page in a book, manual, or newsletter
Sound File Formats
Most animation and video programs enable sound files to be imported in at least two formats: MP3 WAV Wave files have the highest quality sound.
GIF - Graphics Interchange Format
Most common format for: Text Clip art, animations, icons, logos Simple diagrams, line drawings Graphics with large blocks of a single color Graphics with transparent areas Images displayed on computer screens and on websites.
MPEG
Moving Pictures Expert Group (MPEG) A very compressed video format. Files tend to be much smaller and better quality than other formats. Recommended for videos that will be downloaded instead of streamed because it does not require a specific player or plug-in.
Sound could include:
Music Narration Sound Effects
BYLINE
Name of author of article, usually placed just below the headline
Nesting HTML Tags
Nesting refers to the order in which tags are opened and closed. Enter the closing tags in the reverse order from the opening tags. Closing tags in a different order than they were opened may keep the browser from displaying the page as intended by the author.
Free Web Hosts Advantages
No cost May include free email account May include online web editor with GUI
Free Web Hosts Disadvantages
No personalized domain names; usually combines the free site's URL with the path to specific site. Limited storage space. Limited technical support. Allows pop-up advertising in exchange for hosting site.
Images can be viewed in two ways
On a screen or monitor By printing it on paper
Choose the delivery method.
Once videos have been analyzed and optimized to perform best in the intended medium, the next step is to publish. Delivery methods available for distributing animations: -As part of a Web page -On a CD-ROM or DVD. -As an executable file which bundles both the animation and the program to play in a single file. When an animation or an executable file is distributed over the Internet, the entire file must be downloaded before the animation can play. Animations distributed as part of a web page can be either: -Streamed -Downloaded
Pros and Cons of CSS :Advantages
One style sheet can control the formatting for multiple webpages. An entire website can be reformatted by editing one CSS file. Styles can also be set internally. The CSS code is keyed in the header section of the html document.
MUG SHOT
Photo of a person's head and shoulders with that person looking straight ahead.
Rotating
Pivoting an object around its center point
Overall Page Layout
Place the most important items or information near the top! Be consistent in all design elements used on all pages fonts, colors, graphic size and location, alignment, and backgrounds. Use white space to divide the page into "chunks" of information that readers can quickly scan.
DECK
Placed between a headline and an article to provide a lead in to the body of the article.
4 P's of Presentations
Plan, prepare, practice, present
Plug-ins and Players
Plug-ins or players may be required to view an animation over the Internet.
<li></li>
Precedes each list item, and adds a number or symbol depending upon the type of list selected
<td nowrap>
Prevents the lines within a cell from being broken to fit
Printers
Printers create output by placing ink or toner on paper. The resolution at which printers can print is measured in Dots Per Inch (DPI). Printers are high resolution devices in order to print images clearly without pixelation or blurriness.
UNDERLINED TEXT
Prints with an underscore (_) below each character
Stop Motion Animation
Process of manipulating real-world objects and photographing them one frame at a time. Very popular method with the film industry until computer generated imagery became possible. Now used mainly in clay animation.
Multimedia Overall considerations
Provide controls so that users can stop, start, play, and adjust volume. Be aware that embedded media can make total page file size very large and slow the download process.
Publishing Animated Videos
Publishing animations and animated videos involves the following steps: Analyze and optimize the animation. Choose an appropriate file type. Choose the delivery method. Publish the animation.
Copyright Laws
Purpose Fair use situations Public domain material
Streaming Advantages
Quick Access - files can start playing as soon as a computer begins receiving the data rather than waiting for the complete file to download before playing. Data is discarded as it is played so a complete copy of the file is not stored on the viewer's computer.
PULL QUOTES
Quotation taken directly from the body of the article Used to draw attention Often made larger Between columns with word wrap Alone in a column surrounded by white space Right justified in the last column Beneath the headline as a deck
Recording Sound Files
Recording Sound Files Sounds can be recorded or captured from a variety of sources. Some animation software allows you to record narration without having to create the sound in a separate program. When recording, be aware that sound files tend to be large. Large sound files will increase the size of the finished animation which means the animation will take longer to download and require more storage space. Keep sound files as small as possible while maintaining sufficient quality by: Recording WAV files at a lower quality setting. Using recording or conversion software that will save the sound file in a compressed format such as MP3.
Site too large
Reduce number and/or size of multimedia files. Reduce number and/or size of images. Edit pages and remove links to files that no longer exist. Remove unnecessary files from host server. Pay for additional storage space.
Lossless
Reduces the file size without losing any pixel data Quality is not compromised Lossless compression is used when it is important for the compressed image to look exactly like the original image.
MASS FONT
Refers to the heaviness of a font
Copyright
Remember that in order to avoid a violation of copyright law, only original music can be used in professional productions such as Web animations and presentations. Fortunately, there is a large number of inexpensive programs that combine sound loops to create original, royalty-free music for animations and movies.
Transparency
Removing the background color of a raster image to make it "see-through" Allows image to blend in with its background
Programming or Scripting-Based Animation
Requires knowledge of a programming or scripting language.
The quality of an image is dependent upon two factors:
Resolution Aspect Ratio
Advantages of Vectors
Resolution Independent Regardless of how much the image is enlarged or reduced, the image definition and quality remain the same. Small File Sizes Easily transferred over the Internet.
Image Resolution
Resolution is the amount of detail (or data) stored for an image. The higher the resolution, the higher the level of detail in the image. Resolution is measured in PPI, or pixels per inch (the number of pixels contained in one inch). The higher the PPI, the more data that is stored and the better the quality. The higher the PPI, the larger the file size. Image editing software can be used to change the resolution of an image.
Shared Web Hosts Disadvantages
Restrictions on traffic volume (more traffic costs more money!) Offers many options such as email, database support and multiple web editor compatibility.
RIGHT-ALIGNED TEXT
Right-sided text on paper
RUNNING FOOTER
Running content at the bottom of a document on all the pages. Footers used to indicate dates, page numbers and running titles at the bottom of pages.
SANS SERIF FONT
Sans Serif fonts are fonts that do NOT have attributes on the tips Sans Serif means "without serifs."
SVG -
Scalable Vector Graphics Standard format created by W3C Versatile, all-purpose vector format
Information Architecture: Determine the mission/purpose of the website
Sell (e-Commerce) Inform Entertain Social Networking Hybrid
Cascading Style Sheets
Separates content from appearance and gives web authors more control over layout and page format CSS code instructs the Web browser how to format each item.
SERIF FONT
Serif fonts are fonts that have attributes on the tips that add weight and dimension
<tr align="left"> or <td align="left">
Sets alignment for cell(s) (left, center, or right)
<table cellpadding="1">
Sets amount of space between a cell's border and its contents
<table cellspacing="1">
Sets amount of space between table cells
<font color="green"></font>
Sets font color, using name or hex value
<td colspan="2">
Sets number of columns a cell should span (default=1)
<td rowspan="4">
Sets number of rows a cell should span (default=1)
<td></td>
Sets off each cell in a row
<tr></tr>
Sets off each row in a table
<th></th>
Sets off the table header (a normal cell with bold, centered text)
<head></head>
Sets off the title and other information that isn't displayed on the web page itself
<body></body>
Sets off the visible portion of the document
<font size="3"></font>
Sets size of font, from 1 to 7
<body bgcolor="_____">
Sets the background color, using name or hex va
<body vlink="#ff0000">
Sets the color of followed links, using name or hex value
<body alink="#00ff00">
Sets the color of links on click
<body link="blue">
Sets the color of links, using name or hex value
<body text="black">
Sets the text color, using name or hex value
SWF
Shockwave Flash (SWF) Pronounced "swiff" File format for animation created with Adobe Flash. Files can contain text as well as both vector and raster graphics; also may include interactive actions written in ActionScript. Must be viewed in the Adobe Flash Player which is a free download. Popular format for the Web because: -File size is small. -Support streaming.
Keyframe
Shows where the key (most important) actions occur
Practice
Stage in the creation process of presenting your presentation to a friend to ensure everything works properly and you know the subject matter
Importing Sound Files
Sound files are usually imported into the animation much like image files. Most animation programs require or recommend that each sound object be inserted on its own layer.
Using Sound in Animations
Sound files can be used to enhance an animation. Do not use sound unless it enhances the animation. If the sound is distracting and irrelevant to the animation, do not use it.
LEADING
Space between lines of text
Check spelling
Spelling errors can turn visitors away from site. Use web editor's spell checking utility or copy text to a word processor to check for spelling errors.
The website may contain:
Splash Page Site Map
SIDEBAR- (must clip both the sidebar and part the of related article)
Square box filled with information related to the main story or to a completely separate article
Common Terms in Animation Software
Stage Library Timeline Frame Keyframe Playhead Frames per Second Layers
Prepare
Stage in the creation proceses that ensures you have covered all bases and have everything completed properly prior to giving your presentation
Planning
Stage of the creation process in which you decide your target audience, type of information you will present and how you will present and your goal in presenting
Library
Stores frequently used graphics, movie clips, and buttons.
TEXTURE AS A DESIGN ELEMENT
Texture is an effect applied to a background or as the fill for an object.
Information Architecture: Identify the content of the website
Text Graphics Video, Audio, Animation Forms
Possible Animation for Text
Text can appear and disappear in selected frames in the movie or presentation. Text can fade in or fade out. Text can follow a motion path. Text can scroll or change colors. Text can blink on and off. Text can appear one letter or word at a time.
Text in computer animations
Text performs the same function in an animation as it does in a graphic: it provides information on the subject of the animation or directions to the viewer. An animation program provides the added option of animating the text in some way to make it more effective. To add a text object in animation software: -Create a layer to hold the text -Choose the text tool from the toolbox -Specify text settings -Key the text. Choose formatting options: -Font, font size, and font style -Change text color and alignment
VERTICAL TEXT
Text that is up and down
Streaming
The Streaming Process -Data is held in a temporary storage area called a buffer until it is played by the computer. -There will always be an initial delay while the first frame is buffered. Suppose an animation plays at 5 frames per second. -Each frame will play for 0.2 seconds. -If the first frame takes 0.3 seconds to download, the animation cannot start playing until after that time has elapsed.
What is the W3C?
The W3C is a member organization. Some well known members include: IBM Microsoft America Online Apple Adobe Sun Microsystems
The W3C and Web Standards
The W3C is working to make the web accessible to all users regardless of differences in: Culture Education Ability Resources Physical Limitations
Bandwidth
The amount of data that can be transmitted over a network in a given amount of time. The speed at which data travels over a network depends on: The type of Internet connection for the network. The number of users using the network at that specific time.
Computer Assisted Animation
The computer is used to make the animation process quicker and easier. Usually involves 2-D images Can be hand-drawn and scanned into the computer. Can be drawn directly into the computer using graphics tablets. The images are positioned into keyframes containing the most important movements. Tweening is then performed by the computer to create images between keyframes. Even though computers are now used extensively, many traditional steps are still used.
Monitors
The display resolution on monitors is also measured in PPI. Monitors are low resolution devices, most display 72 PPI.
KERNING
The horizontal spacing between letters or characters.
Color Depth
The number of colors per pixel that can be contained in an image. Most graphics editing programs will allow you to set the color depth for your image. Different graphic formats contain different numbers of colors per pixel.
Frames per Second
The number of frames that appear in one second of the animation. If the animation program creates movies at 12 fps (frames per second) by default, inserting a keyframe and change once every 12 frames results in a change in action for every second. A project with 60 frames results in a 5-second movie.
Timeline
The part of the animation program window that organizes and controls an animation's content over time using layers and frames. In video-editing software, where source clips, transitions, and audio files are arranged to create the video
Stage
The part of the animation program window where the animation's content is composed and manipulated.
WAV (Waveform)
The standard format for sound on computers running the Windows operating system. WAV files produce high-quality sound. Generate large file sizes.
Morphing Animation
The term morphing comes from the word metamorphosis, which is the transformation of one thing into another. The beginning image is inserted. The ending image is inserted. The computer performs the tweening to generate a sequence of images, each of which is slightly different from the one it follows to gradually morph the two objects.
Streaming Disadvantages
The viewer must be connected to the Internet to view the video. The viewer's connection speed influences the quality of playback. Files cannot be saved and viewed later.
Layers
Timeline is divided into layers to help organize content and allow the different layers to be edited separately. Sound would be on a separate layer. Text would be on a separate layer. A motion path would be on a separate layer.
Comparing Web Hosts Traffic
Traffic Does the host allow a maximum number of "hits" per billing cycle? What is the fee for exceeding the traffic allowance if the site becomes popular?
GRADIENT AS A DESIGN ELEMENT
Two colors blended together
Using Color
Use contrasting colors for background and text. Light text on dark background OR Dark text on light background Improves readability
Text Issues—Text as a Graphic
Use for banners and navigational graphics. Avoid using text as a graphic for headings, subheadings and body text in case the graphic does not load properly on the viewer's browser.
Headings and Titles
Use headings that are unique from one another, descriptive and relate to the content they introduce. Use headings in the appropriate HTML order. Helps users get a sense of hierarchy of information on the page Also helps users of assistive technologies understand the level of importance of information Use a descriptive, unique, concise, and meaningful title for each webpage in the website. Titles display in the browser's title bar. Titles are used by search engines to identify pages and are listed on the results page.
Text Issues—General Guidelines
Use initial caps for headlines and headings. Use sentence case for body text. All caps are difficult to read. Use italics to stress foreign words or phrases or to list book and periodical titles. Use bold to emphasize headings. Do not use underlining—it implies a hyperlink. Indicate to users when a link will move them to a page on a different website. Add URL below the link Add an exit disclaimer Add an interim page warning the user that they are leaving your site and requiring them to click an additional link to leave your site.
Multimedia Overall considerations: Tags
Use object or embedded tags to include multimedia elements in page. Use anchor tags and href attributes to link to video. Use combinations of anchor and image tags to link to video.
Hyperlinks
Use relative hyperlinks to point to other files within the website. Use absolute hyperlinks to point to other websites.
Text Issues—Typefaces
Use typefaces designed for on-screen viewing Sans serif typefaces are easier to read on computer screens. Use "font-family" property in styles to specify typeface.
Multimedia Overall considerations: Video
Use video sparingly. Video files tend to be large. They require more storage and slow the download speed of the webpage
Graphics on the Web
Use video, animation, and audio only when they help convey or support the website's content. Place the organization's logo in a consistent place on every page Use images that add value and increase the clarity of the information on the site. Ensure that images load quickly. Use several small images rather than a large single image. Include height and weight pixel dimension attributes in the image tag. Use thumbnails to preview larger images. Use simple background images.
Multimedia Overall considerations: Slideshows
Use when image quality is a top priority. Uses a smaller file size than most video so storage and bandwidth are optimized. Combine with audio for additional emphasis
Filters
Used to apply special effects to an image that would be too difficult to create manually.
Authoring Languages
Used to control the appearance and functionality of webpages when displayed in a browser HTML (HyperText Markup Language) XML (eXtensible Markup Language) XHTML (eXtensible HTML)
Linear Structure
Users view pages one at a time in a specific order. Topics are arranged in chronological, alphabetical, or series specific order. Pages have links to the next page and back to previous or index page only.
ISP is most common web host for
Usually package Internet access, email, and limited web site storage for its customers Can be a solution for personal or small business use
Validate source code
Validating checks for errors in HTML code such as: Tags spelled incorrectly Tags left open Validating does not find spelling errors in text. Some validators correct errors while others just highlight the error. Many web editors contain internal validating utilities. For sites created in a text editor, validating is available online and via free downloads.
Vector Graphics
Vector Graphics Vector graphics are created from mathematical formulas used to define lines, shapes and curves. Edited in draw programs Shapes can be edited by moving points called nodes (drawing points)
Playhead
Vertical red marker in the timeline that shows which frame is the current frame.
Dedicated Web Hosts Disadvantages
Very expensive Requires high-level computer skills.
Factors that influence the delivery of computer animations:
Viewer's bandwidth, or connection speed. Streaming rate Playback rate
Dedicated Web Hosts Advantages
Website is hosted on its own server—not shared with others. Very powerful—can accommodate any kind of software.
Comparing Web Hosts Cost
What can the customer afford?
BLEED
When graphic goes up to and even appears to run off the edge of the page
: Rollover or Mouseover
When the mouse is moved over an image, it changes to a different image so quickly that it looks as if the change has occurred in a single instant. Created by using scripting languages such as Javascript. Rollovers are extremely important for navigation buttons on user interface designs.
Metadata
data about data
HTML
While many old browsers can display "old" HTML, newer ones rely on the current standard. Remember, web pages are accessed from desktop computers, mobile phones and handheld devices—all using a variety of browser technologies!
WMF -
Windows Metafile
KICKER
Words positioned above a headline, usually as a lead-in or teaser
The leading graphics programs designed specifically for creating and editing 3D images are:
Xara 3D 3ds Max 4 Maya Blender Flash Cinema 4D
Popular Vector Graphic Software
Xara Xtreme Adobe Illustrator CorelDraw DXF - AutoCAD Inkscape - open source software similar to Adobe Illustrator.
Site Map
a basic skeleton of the website intended to help users quickly locate information on the website.
Website -
a collection of related webpages.
Multimpedia Presentation
a computer based, interactive experience that incorporates text, graphics, sound and video
Webpage -
a document stored on a web server which can be accessed and viewed using a web browser on a computer or mobile device. It can contain: Graphics, audio and video. Hyperlinks to other documents on the World Wide Web.
Menu
a list of options that use hyperlinks to move to other parts of the presentation
TABLE OF CONTENTS
a listing of the major entries in a publication
interactivity
ability of user to interact with an application
PORTRAIT ORIENTATION
a page or worksheet rotated so it is longer than it is wide.
LANDSCAPE PORIENTATION
a page or worksheet rotated so it is wide than it is longer .
optical center
a point slightly above and to the right of the mathematical center of the screen
Frame-by-Frame Animation
a sequence to create the optical illusion of movement. Digital animation is based on the frame by frame animation process. The quality of frame-based animation depends on the frame rate. Frame Rate = Frames per Second The more frames per second, the smoother the motion appears.
LOGO
a symbol that represents a company
A web host is also called
a web server.
non-linear presentation
allows user to interact with a prsentation and control how information will be viewed
Build effect
an effect applied to text that makes it appear on a slide in increments of one letter, word or section at a time; keeps attention
VECTOR GRAPHIC
an image that is created using paths or lines
Splash page
an introduction page that appears while the website is loading. Provides information that is needed only once per visit to the site. May be used as a promotion or lead-in to the site's home page. Show a progress bar indicating the website is loading. Tell the user what kind of browser or software they need to view the site. Allow users to choose their language or country's version of the website.
Adobe Flash
animation program for developing 2-D animations
Graphics
anything on the page that is not actual text, from simple line drawings to fully active images found on the World Wide Web. There are many different graphic file formats. The format you choose depends on several factors.
WHITE SPACE
areas on a page with no text or graphics; designed to provide a visual break and to give other elements on the page a greater impact; also known as negative space
symmetrical balance
arranging elements as mirrored images
asymmetrical balance
arranging of non-identical elements on both sides of an imaginary center line on the screen
linear presentations
author controls flow, a slideshow
Adobe Director
authoring program that uses a movie metaphor with the user as the "director" of the movie; has a scripting language called Lingo which creates CD-ROM's and supports 2D and 3D
NAMEPLATE
banner on the front of a magazine or newsletter that identifies the publication and usually includes the name of the publication, a logo, and a motto
NEUTRAL COLORS DEPICTED IN AN IMAGE
beige, ivory, taupe, black, gray and white.
Navigation buttons
buttons that are hyperlinked to other parts of the presentation allowing user to move through the presentation
Art Work
computer created drawings or paintings; may be raster or vector.
The Root Folder
contains: The Index.html file (index/home page) Products Folder Order Forms Folder
CALMING COLORS DEPICTED IN AN IMAGE
cool colors blues, greens and violets
Traditional animation is
defined as the process of creating the illusion of motion by viewing a series of individual drawings successively.
About Us page
defines the website's purpose and goals.
balance
distribution of optical weight in the layout
XHTML
eXtensible HyperText Markup Language
XML
eXtensible Markup Language
no balance
elements on screen with no regard to optical weight
Copyright Law
ensures that the author's rights of images and sounds used in multimedia products are protected and acknowledged. Copyrighted material cannot be used with the owner's permission
rollover
functioin performed as the mouse pointer rolls over and points to an object
treatment
how a presentation will be offered to user
intra-screen unity
how various elements relate to one another on same screen
Uses of Computer Animation: Teaching
illustrating concepts or processes.
A plug-in
is a program that works with the browser to expand its capabilities.
Playback rate
is the rate in frames per second at which the video plays.
Streaming rate
is the rate in frames per second at which videos can be downloaded or transferred to a computer and is determined by: -The viewer's network connection speed. -The content of the video file being downloaded.
*Public domain
material do not have a copyright for the possible following reasons: no copyright issued, copyright expired, or it was not renewed.
Toolbook
multimedia authoring software program
REVERSE TEXT
often used in headlines to draw attention
Sends webpages to viewers
over the Internet upon request.
Contact Us
page containing contact information to make it easy for viewers to communicate with the business.
Privacy Policy
page informs viewers how their private information will be handled.
Clip Art -
premade graphics that are available online and in many software packages; may be vector or raster.
Rendering -
process of applying colors, textures, shadows, transparency, etc. to create the final image or animation
Modeling -
process of creating a wireframe structure of the 3-D objects and scenes.
Shockwave
program that allows an internet user to play applications created with Adobe Director
Players
programs that allow users to run multimedia
authoring programs
programs used to create multimedia presentations; i.e. Microsoft visual Basic, Adobe Director
Social
provides a network where people can interact online.
Inform
provides information about a cause, event or organization and may provide tutorials or demonstrations.
Entertain
provides information or links to movies, music, magazines, etc.
Patterns
raster graphics used to fill an object or selection
Photographs - raster images that contain millions of colors.
raster images that contain millions of colors.
WRAPPED TEXT
refers to the placement of a picture around text
Persistence of vision
refers to the way our eyes retain images for a split second longer than they actually appear, making a series of quick flashes appear as one continuous picture.
Aspect Ratio
relationship of an object's width to its height
XHTML
requires some modification of the old HTML standard. All tags must be in lowercase. All tags must have a closing tag. All tags must be properly nested. The <html> tag must be the root tag for every document.
Uses of Computer Animation: Selling
showcasing products or services
Uses of Computer Animation: Training
simulating events or demonstrating techniques in presentations.
Fair use
situations apply to use in news reporting, parody, research, and education.
sequential navigational scheme
take user through a controlled, linear process
optical weight
the ability of an element such as a graphic, text, or headline to attract the user's eye
Copyright laws protect
the right of intellectual property and access to possible monetary rewards for owners, which should encourage creativity.
slide transitions
the visual effect of a slide as it moves on and off the screen during a slide show
Sell
to sell products or services.
Textures
used to create filters and backgrounds
inter-screen unity
users encounter as they navigate from one screen to another
EXCITING COLORS DEPICTED IN AN IMAGE
warm colors reds, oranges and yellows
A computer that stores
web page files.
GUTTER
white space between columns
