CS 1107 Introduction to Multimedia Authoring Systems

1. CS 1107Introduction to Multimedia Authoring Systems October 2010

2. Website for this course • The website for this course is here: http://www.cs.ucc.ie/j.bowen/cs1107/

3. 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

4. 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

5. 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

6. A motivating example • Suppose we have this photograph

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

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

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

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

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

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

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

14. 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

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

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

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

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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

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

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

32. 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

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

34. 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

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

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

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

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

39. 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

40. 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

41. 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

42. 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