Multimedia – Lab/Project Help

Today’s Lab will be used to assist anyone with issues they have been experiencing with labs, projects, or project planning reports. We will be meeting in Memorial as per our regularly schedule lab time.

Tuesday of next week, we’ll be discussing Copyright Law and Fair Use as this is an important part of creating a Multimedia project. Please review the following documents:

We’ll also be discussing Project Presentations…how to plan, prepare, and present your project. Here’s the presentation order that I have scheduled:

May 9:

  • 12:30-12:38: James Hodgman – ???
  • 12:40-12:48: David O’Connell – ???
  • 12:50-12:58: John Chirila – ???
  • 1:00-1:08: Jonathan Bilodeau – Homestarrunner-esque Flash Site
  • 1:10-1:18: Paul Auger – Multimedia Storage Site Revamp
  • 1:20-1:28: Matt Baillargeon – Music Video & Documentation
  • 1:30-1:38: Jamie Howard – Rugby Website in w/ Flash
  • 1:40-1:48: Eric Croteau – Hockey Tutorial in Flash

May 11:

  • 12:30-12:38: Ryan Morash – Flash/Video filled website
  • 12:40-12:48: Tucker McGaw – A Flash Movie production
  • 12:50-12:58: Felix Rosen – DJ Flash Webpage
  • 1:00-1:08: Angela DiCicco – Cooking Lessons in Flash
  • 1:10-1:18: Matthew Doenges – Pocket PC Back End Application (Visual Basic)
  • 1:20-1:28: Erik Kowlachuk – NHL Promo Video

May 16:

  • 11:00-11:08: Christopher Signor – Dungeons and Dragons Character Creation Tutorial in Flash
  • 11:10-11:18: Jesse Patch – Company Webpage
  • 11:20-11:28: Colby Schneider – Navigable Snowboarding DVD
  • 11:30-11:38: Liam Jewell – PSU Help Tutorials in Flash
  • 11:40-11:48: Brendan Emery – TikiWiki
  • 11:50-1:30: Final Exam

Multimedia – Video (w/ Lab)


Check out the Music Video I made! Whee. I will be taking autographs later.

As many of you may already know, myPlymouth and WebCT is down (and has been since 3am). This directly effects my duties in IT and will be needed in the office during official class time. However, here are the slides which we will go over next Tuesday (I’ll combine the two days into one). In the mean time, read this: Digital Video for Multimedia Basics.

And I suppose I’ll give you a Video Assignment. w00t! Have fun with this one.

Using the video application of your choice (Windows Movie Maker, iMovie, Adobe Premiere, etc) create a music video for one of your favorite songs. You will need to find an mp3 of a song from somewhere you can do this a few ways:

  • download it (legally) from iTunes, then download WavePad and open the song that you downloaded and save as .mp3.
  • ‘borrow’ an mp3 from a friend
  • rip one of your own cds

Next, using that song, find pictures and video from elsewhere to match your music, thus creating a sort of Music Video collage-type thing. If you’ve never used video editing software, Windows Movie Maker is super easy to learn. If you get stumped, do some google searches to find the answers you need. (Or e-mail me)

Once you are done…DO NOT turn in the Movie Maker project file…you need to save it as a Movie (.wmv). (obviously, if you are using iTunes, turn in a .mov)

Now…how should you turn it in? Well…Don’t upload it to WebCT. Save it to your M:Drive in your Home folder. (or burn it to a CD) and either send me the link to your video or get the CD to me by next Friday (4/21).

Multimedia Final Projects

According to our Final Project document, your first Planning Report was due today. I have pushed the due date off until next Tuesday (4/18) so as to give more ample opportunity for you to ask questions. Here’s the exerpt on what you will need to do:

Description of 1st planning report:
Each of the following items should clearly labeled in the report:

  1. A description of the topic of your project.
  2. A description of the measurable objectives of your project. I will be using the objectives that you indicate that you have for your project as my evaluation tool for the project.
  3. An indication of the authoring program you will use to put your project together (Flash, PHP, Powerpoint, some other tool like Java or Javascript).
  4. An indication of the software applications that will be necessary for you to complete the project.
  5. A beginning storyboard of your project. Note that this is the beginning of your project planning. The storyboard should lay out all the “pages” in your presentation, indicating what will be on each. This documentation must be reasonably complete. You can find more information on Storyboarding here.
  6. A description of how you will be using each of the cells in the 2D multimedia taxonomy from the Project Planning slides and why it makes sense for you to be using the cell that way. For example, for sound abstraction, you might indicate that each time the user presses a button, the sound of a bomb going off is heard. You must then explain why that choice makes sense given the goals of your project. If there is a particular cell from the taxonomy that you will not be using at all, you must explain why you will not be using it. This part of your report should be clearly linked to your stated objectives.

Multimedia – Flash (Lab 2)

This week’s lab (which is due 04/14) is more free-form where you have the opportunity to really explore Flash and see what it can do. With this lab, you’ll experiment with more complex animations. I highly suggest you do the flash tutorials that come with the application – you can find them by clicking on the Help menu. In addition to working with nicely timed animations, you will be scripting in Flash’s ActionScript.

Create a navigation page (similar to a DVD menu) that allows the user to choose from at least 5 buttons/icons/links. Four of these icons should send the user to 4 separate animations (complete with sound). The 5th icon, when clicked, should send the user to my blog BorkWeb.com. At the end of each animation, give the user a navigation menu allowing them to view the other animations or return to the first screen. The 4 animations should be more in-depth than what we did with the previous Flash lab and can include graphics from other sources (i.e. you don’t need to do all the image creation right in flash…you can get pictures or make your own in Photoshop). Here are some animation suggestions:

  • Two balls that bounds around a room, bouncing off of each other.
  • A presidential spoof
  • A kid being attacked by a giant mosquito
  • A monkey dancing across the screen
  • ….be creative

You can add to the above requirements to suit your needs (but don’t detract from them). Have fun with this one. Here are some suggested sources for learning about more complex Flash animations:

  • Here are some simple tutorials at W3 Schools
  • Flash Kit has an awesome set of tutorials on a crap ton of topics

Now, in order to create the menus and navigation; stopping and starting movies and playing from various locations needs to be done with some ActionScripting. Here are a few resources to get you started:

  • ActionScript.org has some great tutorials on ActionScripting
  • Here’s some documentation very similar to the Java API
  • Check the help in Macromedia Flash (the application for simple start() stop() and loop() commands for controlling the movie)

And don’t forget about the quiz next Tuesday (4/11)

Multimedia – Flash

Today’s Topic…Flash! w00t. This lab is due next Friday (04/07) @ midnight

Before we get started, here are some terms you should know:

Tween: In animation, it is used to describe intermediate frames often added by an assistant animator or by computer. See tweening.

Motion Tween: In animation, refers to movement of an object along a path.

Shape Tween: In animation, refers to changing the shape of an object.

Export Movie: With Flash, when you save your movie, you are actually saving a file that allows you to open the movie again and edit it later on. If you want the flash movie to be viewable on the web, you must export the movie (which essentially saves it as a .swf file). To export a movie, simply click File > Export > Export Movie, select the folder you want to save the movie in, then click the Save button.

Lets get to it!
Lab (part 1): Working with Macromedia Flash (Do sections 1 and 2)
What to turn in for this tutorial:
You can place each of the following shapes/images on separate frames of the same movie…or create a separate movie file for each. It’s up to you ;)

In this section, you will learn:
* Creating graphics in Flash
* Importing graphics
* Using color effectively
* Creating a color swatch
* Layering Flash elements
* Masking content
* Organizing content in Flash
* Reusing graphics as symbols

NOTE: This tutorial starts on page 1 of a whole series of tutorials and continues on to page to 26.

Lab (part 2): Moving Objects along a Path
What to turn in for this tutorial:

  • You will have created a simple animation by the end of this tutorial…save and export it, then submit it to WebCT
  • Note: Have a little fun with this if you want…customize it to your hearts content…remember, you are preparing yourself for more Flash next week, so everything you learn will help

In this tutorial you will learn how Flash allows us to to gain further control of the movement of an object by the use of guide layers. This method enables to you to draw a complex path or guide which the object will follow.

Note: if you get stumped with steps 11 & 12..This is the guide layer: guide_layer.gif…the steps should be combined into one.

Lab (part 3): Creating Animations with Shape Tween
What to turn in for this tutorial:

  • You will have created a simple animation by the end of this tutorial…save and export it, then submit it to WebCT
  • Note: Same as above…have a little fun with this if you want…

In this tutorial you will learn how Flash can also ‘tween’ the shape of an object. This allows the shape to change between keyframes.

What to turn in
Upload your 3 flash movies (don’t forget to export them first) to WebCT.

Why just Tutorials this week?
Well, the goal of these tutorials is simply to familiarize yourself with the application and terminology in preparation for the more in-depth lab (due on the 14th). Tonight I will be posting your assigned reading and Flash Lab 2

(Next week’s lab will be posted on Thursday of next week)

Multimedia – Webpage Critiques

This assignment requires you to pick 3 websites and critique them (in a document and place them on WebCT) telling what you like/dislike; what the rules the site is breaking; what is usable/what isn’t; what it can do to improve. Obviously I’m not expecting you to jump right in without any background on what is considered good/bad design, so here are some resources:

Top Ten Web Design Mistakes (http://www.useit.com/alertbox/designmistakes.html)
Jakob Nielson is a Web Usability guru (despite the fact that his site is so ugly). Check out the above linked article as well as the other Top Ten Lists at the bottom.

Web Design From Scratch (http://www.webdesignfromscratch.com/basics.cfm)

  • This site is great as it details the process of design and the differences between sites that have focused on art and those that have focused on providing tools. There are a lot of sections (see the links on the right hand side of the page) that are all interesting.
  • Of particular not for this assignment:
    • “How people use web pages”
    • “Other online factors”
    • “The Design Spectrum”

Web Style Guide (http://www.webstyleguide.com/index.html?/pages/editorial_style.html)

  • The whole thing is a good read, but if you don’t want to read everything, Read Chapters 2 and 4 (they are short)

Here is what you need to provide for each site you choose to critique:

  • Provide the Web Address to the site.
  • Answer these questions: Why did you select the site? What interested you about this particular site?
  • Describe features of the site, including the following:
    • Overall theme or main subject for the website
    • Types of materials presented on the website (e.g. letters, diaries, photographs, illustrations, historical summaries, literature texts)
  • Answer these questions:
    • Is the information source trustworthy? How do you know?
    • Who is the website designed for? For example, is it intended to reach the general public, medical professionals, kids, older people, etc.? How do you know?
    • Is the website well-designed to reach that group of people? Why do you think so? Give specific examples (ie., vocabulary, ease of finding information, working hyperlinks, low-tech vs. high-tech video presentation [which is important if you’re calling in on a slow modem!!], visual ‘style,’ etc.)
    • Is the website easy to navigate? Why or why not?
    • Does the site design used by the site match well with the theme/subject and topics covered? (For instance, are the main buttons set up to correspond to key topics? Do the main sections of the website, as organized and presented, work together logically? If there are photographs, illustrations or graphics, do they complement/reinforce the theme effectively?)
  • Describe and critique other design elements of the website.
    • Is the visual display plan effective? (e.g., Is the site too cluttered/busy? Is there too much empty space?)
    • Are the font sizes and designs appropriate (e.g., attractive, easy to read)?
    • Does the website make effective use of color and spacing?
  • What can be improved, if anything?

Score sheet

Points Criterion
15 Web Address Provided as a link
10 Rationale for site selection
20 Description of site’s key features
20 Answers to the questions about: Audience, navigation, theme/topics, etc.
20 Critique of the design elements
15 Plan for improving the site
100 TOTAL

Multimedia – Web 2.0

web2.jpgO’Reilly has a document on “What is Web 2.0?“. For class on Tuesday, please read the article as it really encapsulates the movement in web application design/architecture.

The important topics discussed are:

  • Web as a Platform
  • Harnessing Collective Intelligence
  • Data is the Next Intel Inside
  • End of the Software Release Cycle
  • Lightweight Programming Models
  • Software Above the Level of a Single Device
  • Rich User Experiences

Of particular note is the comparison between a Web 1.0/Web 2.0 comparisons:

Web 1.0 Web 2.0
DoubleClick –> Google AdSense
Ofoto –> Flickr
Akamai –> BitTorrent
mp3.com –> Napster
Britannica Online –> Wikipedia
personal websites –> blogging
evite –> upcoming.org and EVDB
domain name speculation –> search engine optimization
page views –> cost per click
screen scraping –> web services
publishing –> participation
content management systems –> wikis
directories (taxonomy) –> tagging (“folksonomy”)
stickiness –> syndication

Multimedia – Image Lab

In this lab we will be using Adobe Photoshop Elements to create and edit images. Images are often a large part of multimedia production, thus having a decent understanding of them is important. This lab will consist of 3 parts:

  1. Watching videos on some basic tools and menus & creation of images
  2. Creation of two additional images
  3. Do 3 write-ups. One on JPEG, one on GIF, and one on PNG; explaining quality, where they are best used, and any features the file types may have (i.e. transparency, motion, etc).

To Open Photoshop Elements: Click the Start Menu > All Programs > Classes > Multimedia > Adobe Photoshop Elements 3.0

Videos on some basic tools and menus
These videos are from Photoshop Elements User and are hugely more useful than reading step by step instructions on the various tools. They take some time to watch so you may have to watch them throughout lab as well as on your own time (in order to complete the second and third parts). I would urge you to watch a video, then try doing what it is discussing before moving to the next video.

Here are the ones I want you to watch for this lab (you can watch more if you want to learn more cool stuff):

  1. Interface
  2. Layers, Part I
  3. Change Colors
  4. Cookie Cutter
  5. Photo Filter

Image Creation from Tutorials
For videos 2 through 5, make one image using the techniques explained. Document what you used to create the image (layering, any filters used, etc) Save the image as an appropriate file type (jpg/gif/png) and explain your choice in file type.

Additional Image Creation – Image 1
The first image I want you to create from scratch is either a sweet banner image for a website or a fake advertisement. Document what you used to create the image (layering, any filters used, etc) Save the image as an appropriate file type (jpg/gif/png) and explain your choice in file type.

Additional Image Creation – Image 2
Create a humorous image using certain features available in Photoshop. Be creative :) Document what you used to create the image (E.g. various filters, smudge tool, clone tool etc. (use at least 5 tools)). Save the image as an appropriate file type (jpg/gif/png) and explain your choice in file type.

Documenting your steps
To document each image and do any write-ups I’ve asked, simply use a single Word document and separate the separate parts using appropriate headings.

Turning it all in
Zip up your life’s work and (the images and document) and upload them to WebCT. Lab is due Next Friday @ midnight (so Saturday morning, 12am)

Multimedia – Security Fair

Folks, official lecture time today is cancelled due to the Security Fair, which is being held in the HUB MPR Room.

This is a collaborative effort among ITS students, staff, University Police and others. The event will include information on firewalls, backing up, phishing, virus protection, safe computing, wireless security, file sharing, password management and much more. There are prizes and give-a-ways.

Because of this, we will NOT be meeting in Memorial for lab on Thursday, but in Rounds for our normal class time at which point we will be discussing Compression. To prepare for that class, please read the following: How Compression Works. The Compression lab will be a take home assignment rather than an in-class lab.

Multimedia Lab – Advanced Powerpoint Navigation

chimpanzee.jpgChances are, most of you have used Microsoft Powerpoint. For the class slides, simple presentations and such we only use the most basic features of the MS product. We are going to explore some of these features. The goal isn’t necessarily to expand our knowledge of Powerpoint but to experiment with some of the forms of navigation discussed in class.

The Scenario:
You are a scientist that studies chimpanzees. Last month you witnessed one or more chimpanzees do something that has never been done before. You were tasked with creating an application that details various aspects of that discovery…for some reason you chose Powerpoint as your tool.

Minimum Requirements:

  • Your application must make use of various forms of media. (text, images, etc) – 20pts
  • Your application must include at least 12 slides PLUS an additional notes slide that lists/describes the types of navigation used. – 20pts
  • Your application must utilize (at minimum) conceptual/modal navigation and hypertext. Other forms of navigation can be used as appropriate. – 25pts
  • Your application must not navigate as normal powerpoint slides navigate (i.e. advance on click). To get a starting point, read the instructions below. – 25pts
  • Use proper spelling and grammar. – 10pts
  • Be creative and have fun with the assignment! – Priceless

Setting Up Your Powerpoint Application For This Assignment:

  • With your powerpoint application open, click on Slide Show > Set Up Show….
  • In the Show options section, check the box: Loop continuously until ‘Esc’
  • In the Show slides section, check the From radio button and choose the start/end slides as appropriate to your application. (If your first slide is your contents where you begin all your navigation, then you’ll want the start/end boxes to be set to 1 and 1). Experiment.
  • …this is just a starting point. Explore the application and make it bend to your will.

Here’s a good reference for advanced PowerPoint stuff.

Handing in your Lab:
The lab is due next Friday at midnight. To hand it in:

  • log in to myPlymouth
  • click on the myCourses tab
  • click on the Multimedia course
  • go into the Assignments section
  • click on Lab 1
  • Browse to your powerpoint file in the form
  • Submit it