Chapter 3 Multimedia Authoring Intermediate 2 Multimedia Technology Chapter 3 Multimedia Authoring TOPIC LIST: 1.) Development Process for Multimedia Applications 2.) Bit-mapped Graphic Data 3.) Digitised Sound Data 4.) Video Data 5.) Vector Graphics Data 6.) Synthesised Sound Data 7.) Implications of the use of Multimedia Technology 8.) Animation Forfar Academy

What is Multimedia? An interactive piece of software using several types of media: Text Graphics (photographs or illustrations) Audio (synthesised or digitised) Video Animation Multimedia Applications can be: Linear or non-linear Simple or extremely complex For example: PowerPoint presentation Sophisticated and basic web pages Multimedia games

The Development Process/Cycle Analysis Design Design may change if application does not work as expected Implementation Testing Documentation Evaluation Maintenance

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Analysis Stage This stage is make it absolutely clear what the project is supposed to do. The aims of the application Who will be using it? What will be in it? How will it be distributed? How much money can be spent? How long have you got? Input/output? At the end of the stage a requirements specification will be produced.

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Design Stage Navigation structure? The HCI (Human Computer Interface) What does each screen look like? What media elements will be included? Storyboards may be produced for this.

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Implementation Stage Make it: Create and combine all the media elements using the pre-decided authoring software. Testing Stage Does each screen and link work as expected? If not can it be fixed or does it have to have the design altered.

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Documentation Stage Write the documentation: The technical guide What are the hardware requirements The user guide Advice on how to use the software and provide users with any other help.

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Evaluation Stage Does it meet the specifications made at the analysis stage? Maintenance Stage Fixing any bugs that have been found after its released. Adapting and updating the application to suit clients needs.

Section 1: The Development Process DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Multimedia Authoring Section 1: The Development Process

The Development Process mnemonic DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS The Development Process mnemonic Maintenance Analysis Design Implementation Testing Documentation Evaluation A Dance In The Dark Every Monday

Methodologies used in creation of multimedia applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Methodologies used in creation of multimedia applications Text editor: Application is created using plain text e.g. Creating simple web pages using HTML. WYSIWIG editors: Previewing applications under development to check that What You See Is What You Get. E.g. PowerPoint to create a presentation

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS WYSIWYG

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Text Editor

WYSIWYG Vs Text Editors DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS WYSIWYG Vs Text Editors Advantages Disadvantages Text Editor Simple and places less demands on system. Provides greater control over the application Difficult to Visualise output Dependant on programming or text-based commands knowledge WYSIWYG Easy creation and editing of application Ideal for beginners Complex software that puts higher demands on system. Software tends to be expensive

Methodologies used in creation of multimedia applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Methodologies used in creation of multimedia applications Authoring Software Application can be customised using: Program code or scripting Icon based setting up of properties (without the need to learn programming code) Presentation Software Enables the creation of a sequence of slides Allows hyper linking to different slides or files

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS File Players If a Multimedia Authoring package has been used to create an application the a file player is used to view it. These players can often be downloaded for free from the internet. One of the more popular file players & authoring packages is Macromedia Flash

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Executable Files Some authoring packages can also save multimedia applications as Executable Files These are files which will then run as an application themselves There is no need for a separate player/browser to be used to view these applications

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Browsers Once a multimedia application has been developed a browser can be used to view it. A browser is the program that you use to navigate the WWW and display web pages to you Once a web page is created the authoring package will save an HTML file that is then viewed in the browser

Methodologies used in creation of multimedia applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Methodologies used in creation of multimedia applications Who makes authoring software? Macromedia Flash, Dreamweaver and Director Microsoft FrontPage Adobe GoLive Others Mediator, HyperStudio, etc

Methodologies used in creation of multimedia applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Methodologies used in creation of multimedia applications Who makes presentation software? Microsoft PowerPoint (Most common) Others LiquidMedia Cre8 Many others exist but not common

Creating Multimedia Applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Creating Multimedia Applications Intermediate 2 Multimedia Technology

Multimedia Applications DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Multimedia Applications These are any applications which include more than one type of media i.e. text, sound, graphics & video These could include: Web Pages Presentations

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS How are they made? There are a number of ways to create these applications: Using a text editor to create web pages through HTML Using a WYSIWYG web-page authoring package Using multimedia authoring software to create complex multimedia applications Using Presentation software to create presentations

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS WYSIWIG Editors WYSIWYG stands for ‘What You See Is What You Get’ This allows you to create your page whilst showing you exactly how the final page will appear on screen You do not need to know any HTML to create web pages using a WYSIWYG editor

Multimedia Authoring Packages DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Multimedia Authoring Packages There are now a wide range of authoring packages available to help create multimedia applications They all use a Graphical User Interface (GUI) The GUI allows the developer to easily position objects such as graphics, buttons, etc and add events to them.

Presentation Software DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Presentation Software Software such as PowerPoint can be used to create Multimedia applications This software has Templates to help structure slides Can automatically link your slides together Allows you to easily add sound, graphics, animations and videos.

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Browsers Once a multimedia application has been developed a browser can be used to view it. A browser is the program that you use to navigate the WWW and display web pages to you Once a web page is created the authoring package will save an HTML file that is then viewed in the browser

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS File Players If a Multimedia Authoring package has been used to create an application the a file player is used to view it. These players can often be downloaded for free from the internet. One of the more popular file players & authoring packages is Macromedia Flash

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Executable Files Some authoring packages can also save multimedia applications as Executable Files These are files which will then run as an application themselves There is no need for a separate player/browser to be used to view these applications

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Glossary Task Add the following words to your glossary with appropriate definitions: WYSIWYG Browser Multimedia Authoring Package GUI File Player

DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Written Exercise Write down a list of the authoring software, presentation software, browsers and file players you have used in the past and a description of what each is. Have this checked by your teacher.

Authoring Vs Presentation DEVELOPMENT PROCESS for MULTIMEDIA APPLICATIONS Authoring Vs Presentation Advantages Disadvantages Authoring Advanced features give developer more control over final application Difficult to learn, special training generally required Can be difficult to debug complex application Presentation Simple commands Easy to learn Limited features

Bit-Mapped Graphic Data: Storage of Graphic Data Intermediate 2 Multimedia Technology Bit-Mapped Graphic Data: Storage of Graphic Data Multimedia - Section 2 Forfar Academy

BIT-MAPPED GRAPHIC DATA Capturing Still Data Digital Camera Re-useable storage Removable storage (Memory Cards) Use electronic circuits called Charge Coupled Devices (CCD’s).

Charge Coupled Devices (CCD’s) BIT-MAPPED GRAPHIC DATA Charge Coupled Devices (CCD’s) uses sensors to capture the image projected by the lens. When a digital camera takes a photograph, the lens opens and lets light into the camera. The CCD turns the light coming from the lens into analogue signals Passed on to a processor which samples them and converts them into digital data.

BIT-MAPPED GRAPHIC DATA Capturing Still Data Scanners also use CCD’s Scanners have CCDs in a moveable scan head which passes over the document. The CCDs convert the light being reflected off the document into an analogue signal. converted to binary form and stored in the computer system attached to the scanner. Unlike cameras, scanners do not have storage devices, so they can only be used when connected to a computer.

Activities: p.3 - Multimedia Photo Editing LTS notes

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA File Formats Bitmap (BMP) Graphic Interchange Format (GIFF) Joint Pictures Expert Group (JPEG) Portable Network Graphics (PNG) Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA Bitmap File Format Uncompressed: A file which holds a binary number for each pixel in an image Limitation: large file size Extension: .bmp Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA Bitmap File Format Colour Depth The number of colours that can be represented Calculation: Number of colours = 2 bit depth Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA Example Colour (bit) Depth = 8 Number of colours = 28 = 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA GIF File Format Lossless compression A code is used to store repeated patterns in the image Limited number of colours: limited to 28 256 colours Features: Animation Transparency Extension: .gif Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA GIF File Format Good For: Flat areas of colour Few colours Animated images Transparency Bad For: Photographic images High colour graphics High quality videos Forfar Academy

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA JPEG File Format Lossy compression File size is reduced by removing sections of the graphic that will no be noticed by the human eye Greyscale or full-colour image compression Exploits human eye limitations Related to MPEG Extension: .jpg Forfar Academy

BIT-MAPPED GRAPHIC DATA JPEG File Format Advantages: Greater compression than lossless Good for photographic images (real-world) Compression ratio can be controlled by user Best for large files Disadvantages Doesn’t support transparency

Intermediate 2 Multimedia Technology BIT-MAPPED GRAPHIC DATA PNG File Format Has all advantages of GIF without the restrictions Allows 24 bit colour Allows for partial transparency Lossless compression Variation of JPG compression Extension: .png Forfar Academy

BIT-MAPPED GRAPHIC DATA Resolution The amount of detail in an image. Measured in Dots Per Inch (dpi)

Bit Mapped Graphics: Creation BIT-MAPPED GRAPHIC DATA Bit Mapped Graphics: Creation Paint Image Editing Programs Decrease resolution Alter Colour Depth Crop Alter Brightness & Contrast Re-size or Scale Special Effects

BIT-MAPPED GRAPHIC DATA Graphics Card A device which controls the quality of output on a monitor. There are a wide range available designed to assist the computer in achieving overall high performance.

Multimedia Autoring: Digitised Sound Data Section 3

Sound in Multimedia Types: Voice Over Special Effects DIGITISED SOUND DATA Sound in Multimedia Sound can make multimedia presentations dynamic and interesting. They can also be used to assist user. Types: Voice Over Special Effects Musical Backdrops

Intermediate 2 Multimedia Technology DIGITISED SOUND DATA Sound Capture Microphone: Analogue Can be used for voice-overs CD/DVD: Digital Capturing music files Copyright laws may apply If it comes from the real world how do we convert into digital? ADC Forfar Academy

DIGITISED SOUND DATA Sampling Frequency Once an analogue signal is received it is chopped up and a sample is taken The sampling frequency is the number of samples taken per second. Samples of Sound Wave Sound Wave

DIGITISED SOUND DATA Sampling Frequency Measurements (or samples) will be taken many times each second The sampling rate for audio CD is 44.1kHZ means 44100 thousand samples per second.

DIGITISED SOUND DATA Sampling Depth This describes the number of bits which are taken in each sample This will determine the dynamic range of the recording An audio CD will have a sampling depth of 16bits (65536 levels)

Multimedia Authoring: Digitised Sound Data Storage of Sound Data

Intermediate 2 Multimedia Technology DIGITISED SOUND DATA RAW Uncompressed audio data Sampled digital data which has not been processed further Quant – turning it into numbers Forfar Academy

WAV File Wave files are files containing digitised sound data Often used in places such as digital telephone systems and minidisc players. File size is smaller than RAW but there is no loss of quality

MP3 MPEG Audio Layer-3 (MP3) Uses lossy compression DIGITISED SOUND DATA MPEG Audio Layer-3 (MP3) Uses lossy compression Based on what humans hear best Perceptual Audio Compression Reduces RAW formats to around 10% of original size 3min of CD quality song = 30Mb 3min of MP3 = 3Mb Quality is adjustable

File Size Vs Quality Sampling depth: Sampling frequency: Sound time: DIGITISED SOUND DATA File Size Vs Quality Sampling depth: increased sound depth Greater range of values Better sound quality and greater file size. Sampling frequency: The higher the sampling frequency, the better the sound quality, the greater the file size. Sound time: Longer track lasts the larger the file size Affects file size but not quality.

Comparing Bitmap image files and digitised sound files DIGITISED SOUND DATA Comparing Bitmap image files and digitised sound files Each sample records data for a pixel Bitmap graphical data: Resolution Sound data: Frequency Bitmap: Number of bits for each sample/number of colours used Colour depth Sound: Number of bits determines number of signal levels that can be recorded Sampling Depth

Sound Card Carry out the following jobs: Recording Audio DIGITISED SOUND DATA Sound Card Carry out the following jobs: Recording Audio Playback or digitised audio Playback of Audio CD’s Sound Synthesis Interfacing with MIDI instruments, Digital Input and Output for transferring files.

DIGITISED SOUND DATA Sound Editing Crop Effects Echo Reverse Volume

Section 4: Multimedia Technology Video Data Section 4: Multimedia Technology

VIDEO DATA What is Video? A video is just a collection of bit-mapped images that when played quickly one after another give the illusion of a moving image It is a sequence of individual pictures or frames The standard rate at which these frames are taken is 25 frames per second (this gives realistic movement)

Input (Capture): Digital Video Camera (Camcorders) VIDEO DATA Work in the same way as digital cameras They use the same light sensors, called CCDs They have a lower resolution than cameras They are designed to capture lots of images (frames) fast

Input (Capture): Webcam VIDEO DATA Input (Capture): Webcam Designed for the purpose of creating videos to be transmitted over the Internet They do not need to be high resolution, keeping down the bit rates and price. They use low resolution array CCDs and low quality lenses, keeping costs down

Input (Capture): Video Capture Card VIDEO DATA Input (Capture): Video Capture Card A video capture card is needed to capture videos from analogue sources video tape players, television broadcasts and analogue video recorders Some modern graphics cards include the ability to capture video

Video Data: Storage of Video data Section 4: Multimedia Technology:

AVI (Audio Video Interleave) VIDEO DATA AVI (Audio Video Interleave) Uncompressed AVI ratio set during saving The audio is embedded into the video at different intervals.

MPEG Lossy compression cuts out unnecessary parts of a video clip VIDEO DATA MPEG Lossy compression cuts out unnecessary parts of a video clip Saves each frame of video as a JPEG These are called ‘i-frames’ Data that stays the same in following frames is removed The next frames only store data on what has changed since last i-frame

VIDEO DATA MPEG

Video Quality And File Size VIDEO DATA Video Quality And File Size Colour depth: Increasing colour depth improves quality and file sizes. Resolution: Increasing resolution improves quality and increases file sizes. Frame rate: Measured in frames per second (FPS). Increasing frame rate increases file size. Lower frame rates reduce file size but make video clip ‘jerky’.

Video Quality And File Size Video time: increasing or reducing the time of a video is the obvious way to affect the file size. Quality of the display of the clip is not affected. Lossy compression: Using MP3 compression reduces file sizes without affecting quality.

Video Data: Video Editing Section 4: Multimedia Technology:

Timeline Each frame is displayed as a thumbnail image. VIDEO DATA Timeline Each frame is displayed as a thumbnail image. Each frame can be individually edited The audio would also be on an timeline Some packages provide multiple timelines

Storyboards Simple plan of final product Usually freehand and rough VIDEO DATA Storyboards Simple plan of final product Usually freehand and rough Important process for all multimedia applications Produced at Analysis stage

Crop Basically, cutting or removing the parts you don’t want. VIDEO DATA Crop Basically, cutting or removing the parts you don’t want. You may want to remove a frame or a whole scene.

VIDEO DATA Sequencing Once you’ve got your video cropped, edited you have to put it in sequence. In other words, put it in the correct order A B C D B D C A

Wipe Transitions Used to ‘join up’ different scenes/frames VIDEO DATA Transitions Used to ‘join up’ different scenes/frames Different types are available, for example: Wipe

Transitions Dissolve Used to ‘join up’ different scenes/frames VIDEO DATA Transitions Used to ‘join up’ different scenes/frames Different types are available, for example: Dissolve

Box Out Transitions Used to ‘join up’ different scenes/frames VIDEO DATA Transitions Used to ‘join up’ different scenes/frames Different types are available, for example: Box Out

Fade In Transitions Used to ‘join up’ different scenes/frames VIDEO DATA Transitions Used to ‘join up’ different scenes/frames Different types are available, for example: Fade In

Intermediate 2 Multimedia Technology VECTOR GRAPHICS Vector Graphics Multimedia Authoring - Section 5 Forfar Academy

VECTOR GRAPHICS Vector Graphics Object oriented or vector drawn graphics are stored by their attributes. Sometimes referred to as being Scaleable, (independent of resolution). This means the image can be altered without any ‘blurry’ effect. DrawPlus is an example of a Vector Graphics Software Package.

Vector graphics can be: Layered - placed in front or behind other objects Scaled - size changed without loss of image quality Rotated - turned through a number of degrees Flipped - reflected in a vertical or horizontal axis

Vector Graphics: File Formats SVG: Scaleable Vector Graphics VRML: Virtual Reality Mark-up Language WRL: World Description Language The above are based upon storing a graphic by is attributes.

Synthesised Sound Data Intermediate 2 Multimedia Technology SYNTHESISED SOUND DATA Synthesised Sound Data Multimedia - Section 6 Forfar Academy

SYNTHESISED SOUND DATA MIDI Musical Instrument Digital Interface Standard interface to link a musical instrument and a computer. Enables notes played on an instrument to be saved, edited, and played back through a MIDI device.

SYNTHESISED SOUND DATA MIDI: Attributes Instrument: Defines which instrument is playing according to the instrument number. Pitch: Sets the musical tone of a note which is determined by frequency. Volume: Controls the loudness or amplitude of a note. Duration: Determines the length of a note (number of beats) Tempo: The speed at which the piece of music is set.

Implication of Multimedia Technology Intermediate 2 Multimedia Technology VECTOR GRAPHICS Implication of Multimedia Technology Multimedia - Section 7 Forfar Academy

Discuss the following: IMPLICATIONS OF MM TECHNOLOGY Discuss the following: Smartphone Pocket PC Digital Television Virtual Reality

IMPLICATIONS OF MM TECHNOLOGY Task Pick one of the contemporary technologies listed from the previous slide: Use MS PowerPoint to create a slide show about the device: 1 x Introduction Slide 4 x Information Slides 1 x Conclusion slide The slideshow must show captured graphic data, edited sound data (use Audacity), and some form of edited video data (use MoviePlus).

Intermediate 2 Multimedia Technology VECTOR GRAPHICS Animation Multimedia - Section 8 Forfar Academy

Animation Definition animation refers to the process of adding movements to static images through various methods. Animated movements can be measured in frame per second (fps). The higher the fps, the smoother the transition between frames.

KEYFRAMES AND TWEENING

TWO-DIMENSIONAL ANIMATION (2D)

Path Animation

Cell Animation

SPECIAL EFFECTS OF ANIMATION Morphing Warping