cs 1107 introduction to multimedia authoring systems
Download
Skip this Video
Download Presentation
CS 1107 Introduction to Multimedia Authoring Systems

Loading in 2 Seconds...

play fullscreen
1 / 42

CS 1107 - PowerPoint PPT Presentation


  • 295 Views
  • Uploaded on

CS 1107 Introduction to Multimedia Authoring Systems . October 2010. Website for this course. The website for this course is here: http://www.cs.ucc.ie/j.bowen/cs1107/. Learning outcomes. On successful completion of this module, you will be able to:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS 1107 ' - Sophia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
website for this course
Website for this course
  • The website for this course is here:

http://www.cs.ucc.ie/j.bowen/cs1107/

learning outcomes
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
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
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
A motivating example
  • Suppose we have this photograph
example 1 contd
Example 1 (contd.)
  • And suppose we also have this photograph
example 1 contd8
Example 1 (contd.)
  • Suppose we want to “cut out” the boy on the left
example 1 contd9
Example 1 (contd.)
  • Suppose we want to “cut out” the boy on the left
example 1 contd10
Example 1 (contd.)
  • And “paste” him into photograph of the picnic
example 1 contd11
Example 1 (contd.)
  • We can easily do this in PhotoPlus
example 1 contd12
Example 1 (contd.)
  • We can easily do this in PhotoPlus
    • First open PhotoPlus
example 1 contd13
Example 1 (contd.)
  • We can easily do this in PhotoPlus
    • First open PhotoPlus
    • Then choose “open” on the File menu
example 1 contd14
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 contd15
Example 1 (contd.)
  • Now that we have opened the picture
example 1 contd16
Example 1 (contd.)
  • Now that we have opened the picture
    • We can extract the piece we want
example 1 contd17
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 contd18
Example 1 (contd.)
  • This gives you a new window, called the Extraction Window
example 1 contd19
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 contd20
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 contd21
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 contd22
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 contd23
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 contd24
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 contd25
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 contd26
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 contd27
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 contd28
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 contd29
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 contd30
Example 1 (contd.)
  • Now, we use the mouse to draw line a line around the boy
example 1 contd31
Example 1 (contd.)
  • When we have completed the line around the boy
example 1 contd32
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 contd33
Example 1 (contd.)
  • This new tool is called the “Foreground Tool”
example 1 contd34
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 contd35
Example 1 (contd.)
  • When we have selected the “Foreground Tool”
example 1 contd36
Example 1 (contd.)
  • When we have selected the “Foreground Tool”
    • We click inside the green line
example 1 contd37
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 contd38
Example 1 (contd.)
  • Now, we click on the OK button
example 1 contd39
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 contd40
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 contd41
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 contd42
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