Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!
-
Recent Posts
Archives
Categories
Meta
Class 15 – Dec. 17 – Final Project Presentation
1. Complete the questionnaire to report your progress — Due on December 17, 2010
Questionnaire are distributed in the class, you can also DOWNLOAD it in PDF format.
2. Demo your project to the class (10 minutes per student)
- What is the URL of your site?
- What are the goals of your site?
- Who are the audience?
- How many pages do you have and what is the purpose of each page?
- What kind of media are used in each page (pictures, video, audio, Flash, etc.)?
- Will you continue working on the project? What other pages and media might be added?
Posted in MMP 100
Leave a comment
Class 14 – Dec. 10
Today each team will discuss their projects with the instructor.
After talking with the instructor, complete Project Progress Report 2 <DO NOT work on the report until talking with the instructor>
See the schedule below:
Before talking to the instructor, get ready your site web address. The schedule is really tight and we must use every minute efficiently.
| Time | Team | NO. of Students |
|---|---|---|
| 1:15 – 1:25 | Odain Thompson | 1 |
| 1:25 – 1:35 | Kyungwon Kim | 1 |
| 1:35 – 1:50 | Diego Velancia, Crystal Romero | 2 |
| 1:50 – 2:00 | Jimmy Chen | 1 |
| 2:00 – 2:10 | Leo De Jesus | 1 |
| 2:10 – 2:20 | Daquan Mcgee | 1 |
| 2:20 – 2:40 | Michael Noveihed, Chao Gao, Jose Lopez | 3 |
| 2:40 – 2:50 | Breidy Severino | 1 |
| 2:50 – 3:00 | German Rubio | 1 |
| – BREAK – | ||
| 3:15 – 3:25 | Lauren Vigilante | 1 |
| 3:25 – 3:35 | Crystal Whitherspoon | 1 |
| 3:35 – 3:45 | Ilona Ross | 1 |
| 3:45 – 3:55 | Kimberly Boyce | 1 |
| 3:55 – 4:05 | Xubin Lai | 1 |
| 4:05 – 4:15 | Joseph Akhuetie | 1 |
| 4:15 – 4:25 | Harley Saftler | 1 |
| 4:25 – 4:35 | Yohei Koizumi | 1 |
Posted in MMP 100
Leave a comment
Class 13 – Dec. 3
Posted in MMP 100
Leave a comment
Class 12 – Nov. 19
Class Exercise 1: Create a Flash banner
- Step 1: import the three banner images to Flash
- Download the three banner images: banner-1.jpg, banner-2.jpg, banner-3.jpg
- Create a new Actionscript 3.0 document in Flash, save and name the file
- Resize the stage size to 800×260, and change the FPS to 15 in the Properties panel
- Import banner-1.jpg to the stage (File -> Import -> Import to Stage)
- Position the image so that it covers the whole stage (you can do this by changing the X and Y coordinates to 0 in the Properties panel)
- Create two new layers (Layer 2 and Layer 3). Import banner-2.jpg and banner-3.jpg to these two layers respectively, and adjust their positions on the stage. You can hide the top layer(s) by clicking the eye button in the layer panel in order to work on the bottom layer(s)
You should now have three layers in total: Layer 3, Layer 2, and Layer 1 (from top to bottom)
- Step 2: fade out Layer 3 from frame 21 to 30
- On Layer 3, add 29 frames so that there are 30 frames in total
- Convert the 21th frame to a keyframe. Right click the converted frame and create a motion tween
- Move the timeline to the 30th frame, click the image on the stage. In the Properties panel, under “Color Effect”, select style “Alpha”, and change the alpha value to 0
- Test the movie, you should see the animation of Layer 2 fading out to reveal Layer 1
- Step 3: fade out Layer 2 from frame 51 to 60
- On Layer 2, add 59 frames so that there are 60 frames in total
- Convert the 51th frame to a keyframe. Right click the converted frame and create a motion tween
- Move the timeline to the 60th frame, click the image on the stage. In the Properties panel, under “Color Effect”, select style “Alpha”, and change the alpha value to 0
- Test the movie, you should see the animation of Layer 3 fading out to reveal Layer 2
- Step 4: fade out Layer 1 from frame 81 to 90
- Step 5: add banner-1.jpg on a new layer behind Layer 1
- Create a new layer (Layer 4), and drag it to the bottom of all layers
- Open up the Library panel (Window -> Library or CTRL+L)
- Drag banner-1.jpg to the stage (make sure Layer 4 is selected), and position it appropriately on the stage
- Make sure in File -> Publish Settings -> HTML, the “Loop” option is checked so that the movie will loop. Test the movie.
The final source file is HERE, and the compiled Flash movie is HERE
Class Exercise 2: Use Dreamweaver to create a template-driven website
- Step 1: setup the Dreamweaver site
- Create a site in Dreamweaver
- Download the starter kit and extract it into your Dreamweaver site. Make sure index.html and sitecss.css are in the site root directory
- Copy your Flash banner to the “images” folder
- Step 2: convert index.html to a Dreamweaver template
- Open index.html in Dreamweaver
- In “design” view, insert your Flash banner in the “splash-image” div (the second div from the top) to replace the text “Replace with Splash Image Here”. To inser the Flash banner, go to Insert -> Media -> Flash
- Also insert head-logo.gif to the “header” div (the top div), and insert bmcciscuny.gif to the div at the bottom right corner
- Save the file as a Dreamweaver template (File -> Save as Template). You will notice Dreamweaver created a folder called “Templates” in the root directory. And in that folder you can find your templates (e.g. index.dwt)
- Select the texts in the middle, click Insert -> Template Objects -> Editable Region. In the popup window, give it a name such as “center div”. You will see the texts in the middle are wrapped with a frame called “center div”
- In the same way, convert the texts in the left and right colunms to editable regions as well, and name them “left div” and “right div”
- Save and close the template
- Step 3: create about.html based on the template
- File -> New -> Page from Template, then choose the template you just created in your site
- You will find in this webpage, you are only able to edit in the three editable regions (e.g. “left div”, “center div”, and “right div”). Make some changes to the texts
- Save the file as “about.html”
- Open up index.html and about.html in the browser, you’ll find they have the same page framework. Only texts in the editable regions are different.
Resources
Class 11 – Nov. 12
Overview of Video
- A movie consists of a sequence of pictures at a constant time interval to reproduce a motion
- Three characteristics of digital video: resolution, color spaces, and frame rate
- Resolution depends on:
- Aspect ratio (width:height)
- Frame size (dimension in pixels)
- Bit depth / color depth (the number of bits used to describe the color of a pixel)
- Extended reading on definition of color depth
- Compare with the bit depth of digital audio that we discussed in Class 10 on quantizing
- Color space is the model to represent colors, e.g. RGB and CMYK
- Frame rate is the number of frames to be played per second
- Resolution depends on:
- Resolution and color spaces of digital video are similar to those of still pictures that we have discussed in Class 5
- SD videos
- Standards: NTSC (North America), PAL (Asia, Australia, Africa), SECAM (Russia, west Africa)
- 4:3 aspect ratio, 720×480 pixels resolution
- HD videos
- There are still some variations of HD video standards, but more global than SD standards
- 16:9 aspect ratio, 1280×720 or 1920×1080 pixels resolution
Digitizing Video
- Sampling quality is determined by both frame rate and image resolution
- Video files are compressed when being saved, and are decompressed when being played using a video codec
- Different video formats support different selections of video codecs
| File Type | Abbreviated From | File Info & Codecs | Created By |
| .mov | QuickTime Movie | Can contain other data such as audio. Many codecs are supported, including H.264, MPEG-4, Sorenson Video, Cinepak, Animation, Planar RGB | Apple Computer |
| .avi | Audio Video Interleve | Common codecs include Microsoft RLE, Cinepak, Indeo Video | Microsoft |
| .mpeg | MPEG-2 | Highly compressed; format widely used for digital television and DVD | Moving Picture Experts Group |
| .flv | Flash Video | Used to deliver video content over the web. Codecs include H.264, Sorenson Spark, VP6 | Macromedia |
Three Ways to Incorporate Video in Flash and Webpage
- Streaming from Adobe Flash Media Server
- Pros: reduced .swf size; direct access to any part of the video
- Cons: streaming server reliant; high expense
- e.g. YouTube
- Progressive download from a web server
- Pros: reduced .swf size
- Cons: web server reliant; moderate expense; have to wait for the video to be downloaded in order to play
- e.g. Flowplayer without streaming server
- Embedding video in the Flash document
- Pros: no server needed
- Cons: large .swf size
Class Exercise 1: Encode a video for Flash development
- Download video_demo_mmp100.mp4
- Launch Adobe Media Encoder, click “Add” to add video_demo_mmp100.mp4. You can add more than one videos
- Adjust settings if needed. Some often used settings include:
- Video -> frame rate / quality
- Audio -> encode audio / data rate
- Cue points (used to trigger events in Flash)
- Crop and Resize (make sure your video is smaller than your Flash)
- Make sure to select “FLV|F4V” and “FLV Match Source Attributes (High Quality)”
- Click “Start Queue”, and wait for the encoding to complete
How to Obtain Videos?
- Download from http://www.archive.org/details/movies
- Use Jing to capture the computer screen or from the webcam, then save as mp4 (Jing Pro required for $14.95/yr)
- Use your digital camcorder or cellphone with camera to capture
Class Exercise 2: Embed the encoded movie in Flash
- Open up Flash. Create a new project, save and name it.
- Select File > Import > Import Video to import the video clip into the current Flash document.
- Select Embed FLV In SWF and Play In Timeline. Click Continue.
- Choose the symbol type with which to embed the video in the SWF file from the drop down list. Your options are Embedded Video, Movie Clip or Graphic.
- Embedded Video: If you’re using the video clip for linear playback in the Timeline, importing the video into the Timeline may be the most appropriate method.
- Movie Clip: A good practice is to place video inside a movie clip instance, because you have the most control over the content. The video’s Timeline plays independently from the main Timeline. You do not have to extend your main Timeline by many frames to accommodate the video, which can make working with your FLA file difficult.
- Graphic: By choosing Graphic, you have placed your video into a separate symbol from the main Timeline, but you will not have as many options to control it as you will with a Movie Clip.
- By default, Flash places the video you import on the Stage. To import into the library only, deselect Place Instance on Stage. You also have the option to Include Audio and Expand TImeline if needed.
- A final window that includes a summary of your video import settings appears, click Finish.
- Test your movie.
Class Exercise 3: Embed the encoded movie in Dreamweaver
Preparation
- Open up Dreamweaver. Create a site and connect to the server. Create a webpage, save and name it.
- Create a “videos” folder to hold all your videos
Note: you MUST create the site first because when you embed the video in your webpage, Dreamweaver will automatically generate the files necessary for playing the video. If you don’t create the site first, these required files will not be placed in the correct place and your video won’t play once the webpage is uploaded to the server!
Procedures
There are two ways to embed a Flash movie in Dreamweaver and they serve different purposes:
- Embed the FLV as a progressive download video in Dreamweaver
- Copy the encoded FLV file to your “videos” folder in the Dreamweaver site
- In Dreamweaver, choose Insert -> Media -> Flash Video
- Choose the FLV file, and define settings
- Click OK
- Export an SWF movie from Flash, and embed the Flash movie in Dreamweaver
- Copy the exported SWF file to your “videos” folder
- In Dreamweaver, choose Insert -> Media -> Flash
- Choose the SWF file, and click Choose
Important: you must upload your webpage, the “videos” folder, AS WELL AS the automatically generated folders to the server
Posted in MMP 100
Leave a comment
Class 10 – Nov. 5
Download Overview of Sound
Overview of Sound
- Sound is a wave with the following characteristics
- Wavelength
- Frequency
- Pitch
- Amplitude (loudness)
- The relations between the above characteristics (in the same consistent media)
- Wavelength is inversely proportional with frequency. The frequency decreases by half when the wavelength doubles
- Frequency is positively correlated with pitch. When the frequency is higher, the pitch is also higher
- The amplitude is independent of the frequency
- Amplitude (unit: decibel / dB) and frequency (unit: hertz / Hz) are usually the two descriptors for a given sound
Digitizing Sound
- Digital sound is not the same as a real sound
- Sound forms we will use in this class
- WAV: uncompressed, CD-quality, suitable for music production
- MP3: compressed, suitable for web distribution
- Sound compression procedures
- Sampling quality is determined by both sampling rate and bit depth
- Bit rate (kbps / kilobits per second)
- The highest bit rate (320 kbps) is still not exactly the “CD-qualaity” sound
- In music production, use uncompressed forms of sound (.wav)
- In multimedia development, use compressed forms of sound (.mp3)
- Don’t use a sampling quality higher than necessary because it’s a waste of bandwidth. Most human beings cannot tell the difference when the bit rate goes over 192 kbps. And 96 kbps is good enough for voice recordings.
Class Exercise
Add sound to last week’s class exercise Flash movie so that:
- When the plane is flying in the sky, a persistent humming sound is played
- Once the “land” button is pressed, the plane starts to land. The humming sound will stop and the landing sound will start
Procedures:
- Use SoundForge to produce two sound files: a) the humming sound, and b) the landing sound
- Download aircraft.wav which is used to produce the two sound files
- Open aircraft.wav in SoundForge
- Copy the whole sound, create a new file, and paste it in
- Delete the first part of the sound so that only last three seconds remain
- Save the sound as “landing.wav”
- Copy the first segment of the sound, and paste it into a new file
- Edit and preview the new file until it sounds good in loop
- Save the new file as “humming.wav”
- Embed the two sound files in Flash
- Open up Flash, and import the two sound files to the library
- Create a layer called “flying sound”. Add two frames in the first and second frames
- Select the first frame in “flying sound”, and drag “humming.wav” to the stage. In the Properties panel, choose “loop” in the sync option.
- Select the second frame in “flying sound”, and convert it to a keyframe. Then in the Properties panel, change the sync option to “stop”
- Create another layer called “landing sound”. Add frames from the first to the last frame
- Convert the second frame in “landing sound” to a keyframe
- Select the second keyframe in “landing sound”, and drag “landing.wav” to the stage. In the Properties panel, make sure the sound repeats only once
- Save and test your movie
Assignments
- Read Overview of Video
Resources
- Download sounds
- Detailed explanation of MP3
- Audio bit depth
Posted in MMP 100
Leave a comment
