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?

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.

2. Study Final Project Guidelines

Resources

• http://www.copyright.gov/
• More about fair use of materials on the web
• Creative Commons (CC)
• CC licenses
• Example of use: http://www.flickr.com/creativecommons

1. Step 1: import the three banner images to Flash
   1. Download the three banner images: banner-1.jpg, banner-2.jpg, banner-3.jpg
   2. Create a new Actionscript 3.0 document in Flash, save and name the file
   3. Resize the stage size to 800×260, and change the FPS to 15 in the Properties panel
   4. Import banner-1.jpg to the stage (File -> Import -> Import to Stage)
   5. 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)
   6. 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)
2. Step 2: fade out Layer 3 from frame 21 to 30
   1. On Layer 3, add 29 frames so that there are 30 frames in total
   2. Convert the 21th frame to a keyframe. Right click the converted frame and create a motion tween
   3. 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
   4. Test the movie, you should see the animation of Layer 2 fading out to reveal Layer 1
3. Step 3: fade out Layer 2 from frame 51 to 60
   1. On Layer 2, add 59 frames so that there are 60 frames in total
   2. Convert the 51th frame to a keyframe. Right click the converted frame and create a motion tween
   3. 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
   4. Test the movie, you should see the animation of Layer 3 fading out to reveal Layer 2
4. Step 4: fade out Layer 1 from frame 81 to 90
5. Step 5: add banner-1.jpg on a new layer behind Layer 1
   1. Create a new layer (Layer 4), and drag it to the bottom of all layers
   2. Open up the Library panel (Window -> Library or CTRL+L)
   3. Drag banner-1.jpg to the stage (make sure Layer 4 is selected), and position it appropriately on the stage
6. 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

1. Step 1: setup the Dreamweaver site
   1. Create a site in Dreamweaver
   2. Download the starter kit and extract it into your Dreamweaver site. Make sure index.html and sitecss.css are in the site root directory
   3. Copy your Flash banner to the “images” folder
2. Step 2: convert index.html to a Dreamweaver template
   1. Open index.html in Dreamweaver
   2. 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
   3. Also insert head-logo.gif to the “header” div (the top div), and insert bmcciscuny.gif to the div at the bottom right corner
   4. 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)
   5. 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”
   6. 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”
   7. Save and close the template
3. Step 3: create about.html based on the template
   1. File -> New -> Page from Template, then choose the template you just created in your site
   2. 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
   3. Save the file as “about.html”
   4. 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

• Video: Use Dreamweaver template to create new webpages

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
    • Extended reading
  • Frame rate is the number of frames to be played per second
• 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

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

1. Download video_demo_mmp100.mp4
2. Launch Adobe Media Encoder, click “Add” to add video_demo_mmp100.mp4. You can add more than one videos
3. 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)”
4. 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

1. Open up Flash. Create a new project, save and name it.
2. Select File > Import > Import Video to import the video clip into the current Flash document.
3. Select Embed FLV In SWF and Play In Timeline. Click Continue.
4. 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.
5. 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.
6. A final window that includes a summary of your video import settings appears, click Finish.
7. 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
  1. Copy the encoded FLV file to your “videos” folder in the Dreamweaver site
  2. In Dreamweaver, choose Insert -> Media -> Flash Video
  3. Choose the FLV file, and define settings
     
  4. Click OK
• Export an SWF movie from Flash, and embed the Flash movie in Dreamweaver
  1. Copy the exported SWF file to your “videos” folder
  2. In Dreamweaver, choose Insert -> Media -> Flash
  3. 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

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
  1. Sampling – sample the sound wave at a specific rate into discrete samples of amplitude values
     • Sampling rate (Hz or samples per second)
  2. Quantizing – map and round each discrete sample of amplitude values to the nearest value on a scale of discrete levels
     • Bit depth (bit)
• 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:

1. When the plane is flying in the sky, a persistent humming sound is played
2. 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
  1. Download aircraft.wav which is used to produce the two sound files
  2. Open aircraft.wav in SoundForge
  3. Copy the whole sound, create a new file, and paste it in
  4. Delete the first part of the sound so that only last three seconds remain
  5. Save the sound as “landing.wav”
  6. Copy the first segment of the sound, and paste it into a new file
  7. Edit and preview the new file until it sounds good in loop
  8. Save the new file as “humming.wav”
• Embed the two sound files in Flash
  1. Open up Flash, and import the two sound files to the library
  2. Create a layer called “flying sound”. Add two frames in the first and second frames
  3. Select the first frame in “flying sound”, and drag “humming.wav” to the stage. In the Properties panel, choose “loop” in the sync option.
  4. Select the second frame in “flying sound”, and convert it to a keyframe. Then in the Properties panel, change the sync option to “stop”
  5. Create another layer called “landing sound”. Add frames from the first to the last frame
  6. Convert the second frame in “landing sound” to a keyframe
  7. 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
  8. Save and test your movie

Assignments

• Read Overview of Video

Resources

• Download sounds
  • Freesound.org
  • Flashkit.com
• Detailed explanation of MP3
• Audio bit depth

Prior knowledge:

• Motion tween
• Front and back stages
• Library and Common Libraries
• Basic Actionscript 3.0

Knowlege to learn:

• Layer conventions: create a layer for each object; create a separate layer for all actions
• Symbols and instances
• Button symbol
• Movie clip symbol

Procedures

1. Download “plane.png” at HERE.
2. Create a new Actionscript 3.0 file in Flash Professional.
3. Change the movie frame rate to 15 FPS. Save the file.
4. Create five layers: sky, earth, plane, button, and action (from bottom to top).
5. Set stage background color to sky blue.
6. Select the sky layer. Use the Oval tool (with black stroke and white fill) to draw multiple ovals partially overlapping each other so that they look like a cloud. Then use the Selection tool to remove the strokes inside the cloud.
7. Right click the cloud, and convert it to a symbol. In the Properties panel, name the cloud instance as “cloud”.
8. Double click the cloud symbol to edit. Create a motion tween for the cloud so that it enters the stage on the left, moves across the stage, then leaves the stage on the right.
9. Exit the cloud scene and go back to scene 1. Import plane.png to the library.
10. Drag the plane from the library to the “plane” layer. Resize it to an appropriate size using the Free Transform Tool. And put the plane at top of the stage.
11. Insert a keyframe at Frame 26 in layer “plane”. Convert the second frame to a keyframe. And create a motion tween in which the plane moves vertically down to the lower part of the stage.
12. Create a brown rectangle in layer “earth”. Resize it so that it’s slightly wider than the stage. Put the rectangle outside the stage at the bottom.
13. Insert a keyframe at the second frame in layer “earth”. And create a motion tween from Frame 2 to 26 so that the “earth” moves into the stage and stays at the bottom.
14. Open “common libraries” window and drag a button to the first keyframe of the layer “button”. Name the button instance as “landBtn” in the properties panel.
15. Double click the button to edit it. Change its text to “Land”.
16. Go back to Scene 1. Select the first frame in layer “action”, add the following code in the Actions panel:
stop();
landBtn.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
play();
});
17. Add frames up to Frame 45 in layers “sky”, “earth”, “plane”, and “action”. The “button” layer only has one frame at Frame 1.
18. Add a blank keyframe at Frame 45 in layer “actions”. At this frame, add the following code in the Actions panel:
cloud.stop();
stop();
19. CTRL + ENTER to test your movie.

Resources:

• Preview movie
• Download completed source file

Assignments

Refer to the class exercise, create a Flash movie where:

1. In the first frame, a plane stays on the ground. A button labeled “Take Off” is provided.
2. Once the “Take Off” button is pressed, the plane takes off.
3. After the plane takes off, one or more clouds move across the sky to show the plane is flying.

Submit your “Take Off” movie (the .fla file) to me via USB or email before next class.

Assignment:

Read textbook p.433-465

or copy the following link and paste into the browser’s address bar:

https://spreadsheets.google.com/viewform?hl=en&formkey=dGktU0pFbEdfcm5SUGwxdkNPQ1FDTHc6MQ#gid=0

Note: the quiz is currently closed. It will be alive during the class session on October 22nd.