CS 1107 Introduction to Multimedia Authoring Systems October 2010

Website for this course The website for this course is here:

Learning outcomes On successful completion of this module, you will be able to: –demonstrate practical skills in multimedia authoring; –create, composite and manipulate digital images, programmatically and using editors audio files –augment web sites with digital content including audio, images, and animations

Assessment scheme Continuous Assessment –100 marks total, from attendance and conduct at labs, 10 marks; 2 in-class tests, 15 marks each; 4 assignments, 15 marks each

Digital Images In this part of the course we will learn how to manipulate digital pictures You will learn how to use PhotoPlus –The skills learned here will readily transfer to other, similar, packages, such as PhotoShop You will learn how digital pictures are stored on the computer –So you should be able to understand how image- processing tools like PhotoPlus work You will learn how to use the PHP programming language to create and manipulate digital pictures, including animations

A motivating example Suppose we have this photograph

Example 1 (contd.) And suppose we also have this photograph

Example 1 (contd.) Suppose we want to “cut out” the boy on the left

Example 1 (contd.) Suppose we want to “cut out” the boy on the left

Example 1 (contd.) And “paste” him into photograph of the picnic

Example 1 (contd.) We can easily do this in PhotoPlus

Example 1 (contd.) We can easily do this in PhotoPlus –First open PhotoPlus

Example 1 (contd.) We can easily do this in PhotoPlus –First open PhotoPlus –Then choose “open” on the File menu

Example 1 (contd.) We can easily do this in PhotoPlus –First open PhotoPlus –Then choose “open” on the File menu and open the file containing the picture of the boy on the stairs

Example 1 (contd.) Now that we have opened the picture

Example 1 (contd.) Now that we have opened the picture –We can extract the piece we want

Example 1 (contd.) Now that we have opened the picture –We can extract the piece we want Choose “Extract” from the Edit menu

Example 1 (contd.) This gives you a new window, called the Extraction Window

Example 1 (contd.) This gives you a new window, called the Extraction Window Compare the two windows: –The Extraction Window (top) –The main window (bottom) See that they contain different sub-windows

Example 1 (contd.) This gives you a new window, called the Extraction Window Compare the two windows: –The Extraction Window (top) –The main window (bottom) See that they contain different sub-windows

Example 1 (contd.) This gives you a new window, called the Extraction Window Compare the two windows: –The Extraction Window (top) –The main window (bottom) See that they contain different sub-windows

Example 1 (contd.) This gives you a new window, called the Extraction Window Compare the two windows: –The Extraction Window (top) –The main window (bottom) See that they contain different sub-windows

Example 1 (contd.) This gives you a new window, called the Extraction Window Compare the two windows: –The Extraction Window (top) –The main window (bottom) See that they contain different sub-windows

Example 1 (contd.) Notice that, at the top-left- hand corner of the Extraction Window, there is a tool which looks like a marker pen This is called the edge marker We will use it to mark the edge of the part of the picture that we want to extract

Example 1 (contd.) Notice that, at the top-left- hand corner of the Extraction Window, there is a tool which looks like a marker pen This is called the edge marker We will use it to mark the edge of the part of the picture that we want to extract

Example 1 (contd.) Notice that, at the top-left- hand corner of the Extraction Window, there is a tool which looks like a marker pen This is called the edge marker We will use it to mark the edge of the part of the picture that we want to extract

Example 1 (contd.) Notice that, at the top-left- hand corner of the Extraction Window, there is a tool which looks like a marker pen This is called the edge marker We will use it to mark the edge of the part of the picture that we want to extract

Example 1 (contd.) Notice that, on the right-hand side of the Extraction Window, –there are some Tool Options –One of these options is called “Brush Size” It controls the width of the line that is made by the Edge Marker By default, the width is set to 2

Example 1 (contd.) We will set the brush size to 4 –In order to make it easier for us to see where we are drawing our line

Example 1 (contd.) Now, we use the mouse to draw line a line around the boy

Example 1 (contd.) When we have completed the line around the boy

Example 1 (contd.) When we have completed the line around the boy, –We choose another tool from the left side of the window to “cut out” the piece of the picture that we want

Example 1 (contd.) This new tool is called the “Foreground Tool”

Example 1 (contd.) This new tool is called the “Foreground Tool” It looks like a tin of paint Because we will use it to, temporarily, paint the area we want to extract

Example 1 (contd.) When we have selected the “Foreground Tool”

Example 1 (contd.) When we have selected the “Foreground Tool” –We click inside the green line

Example 1 (contd.) When we have selected the “Foreground Tool” –We click inside the green line –and the desired area will turn red

Example 1 (contd.) Now, we click on the OK button

Example 1 (contd.) Now, we click on the OK button And we are returned to the main window again, where we see the cut-out of the boy The chequer-board pattern is not “really there” –It denotes a transparent area

Example 1 (contd.) Now that we have got this cut-out, it would make sense to save it as a separate picture –In case we make a mistake and lose all our work

Example 1 (contd.) Now that we have got this cut-out, it would make sense to save it as a separate picture –In case we make a mistake and lose all our work Choose Export from the File menu –And export the picture as a jpeg file

Example 1 (contd.) So, now, how do we “paste” this cut-out onto the picture of the picnic? Before we can do that, –we must learn to use some other tools