 |
|
|
|
|
|
 |
 |
 |
 |
 |
|
INTRODUCTION TO MULTIMEDIAInstructors:
|
| Image Format | Transparencies | Gradient Trans. | File Size | Best Purpose |
| PING (.png) | Yes | Yes (not supported in all browsers) |
Largest | Flash / Director |
| GIF (.gif) | Yes | No | Smallest | Graphics |
| JPEG (.jpg) | No | No | Small | Photos |
Wednesday: Today we'll look at some design issues and how to use Fireworks to cut up web graphics. Remember that your basic website project is due by next class. Those of you who have questions regarding site mangement, here's a link to some tutorials which go over the details of setting up your site both locally and remotely:
http://www.macromedia.com/support/dreamweaver/manage.html
Introduction to Multimedia - Week 4
Monday / Tuesday: Flash
is an extremely versatile application which allows it's users to create
an infinite array of applications from something as simple as motion graphics
to as complex as fully functional arcade style games. Our first assignment
will be to create a bouncing ball in Flash (due by end of lab on Wednesday).
Click here to view an example.
To create the bouncing ball, start
a new document in Flash MX. Select the oval tool and draw a circle. To constrain
your ball to a perfect circle, hold down the shift key while dragging. You
can also choose to select a fill color or gradient to make your ball a little
more fancy. After your satisfied, from the Insert menu choose "Convert
to Symbol". Make sure you name it and select graphic as the type.
Insert a key frame at frame 10 and another at frame 20 (for a slower bounce try inserting the key frames at 20 and 40). Select the middle key frame and shift+drag the ball to the bottom of the scene. Here you can also adjust the height property of the ball so that it appears to squash down a bit as it strikes the floor.
Now select the 1st key frame and in the properties panel choose "motion" under "Tween" and set the ease to -100. On the middle turn on the motion tween as well and set the ease equal to 100. Hit ctrl+enter to watch the animated ball bounce. When you're finished please copy your assignment to the drop off drive for credit.
Flash Exercise – The Bouncing Ball
Due Date – 1st Class or Week 5
Total Points - 10
http://www.flashkit.com
http://www.macromedia.com
http://www.macromedia.com/support/flash/
http://www.actionscripts.org
Flash Project – Interactive Flash Animation: "Four Seasons" (4 scenes)
Due Date – 2nd Class of Week 7 (beginning of class)
Total Points - 45
Assignment Overview:
For the "The Four Seasons " project detailed requirements, download the assignment sheet in MS Word format. Using Flash as an interactive tool, you will create a 4 scene interactive
animation based on the four seasons. You will create 4 animated landscapes
or city scenes representing the seasons of the year. For example, one animated
element during the winter scene could be snow falling.
Content Specifics:
Animation Length – 10 second minimum per scene.
Minimum of 4 unique landscape scenes.
Design can be a combination of raster and vector artwork.
Must be your original artwork, including any photos (vacation photos would
work great).
Must be fully interactive, navigate to any scene from any scene.
Completed project must be uploaded to your OLS account to be on the WWW
Competencies:
Importing of Digital Images into Flash
Using vector tools within Flash
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
Use of Motion tween
Use of Motion guides
Use of Shape tweening
Use of Masks
Incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web
Overall Use of Flash (scenes, tweens, ActionScripting) –
20 points
Design – 15 points
Use of OLS – 10 points
Flash Samples:
http://analogik.com/multimedia_samorost.asp
2advanced
Macromedia Flash Showcase
Introduction to Multimedia - Week 5
Monday / Tuesday: Today your bouncing ball is due. Also, let's
take a look at scenes, buttons, navigation, and some simple ActionScripting
in Flash MX. ActionScript allows us to control navigation throughout a Flash
project. Certain "Actions" can only be applied to buttons, while
others only to movie clips. Take a look at this example of the seasons project
by Corvis.
http://www.pjsattic.com/flash/seasons.htm
Wednesday: Incorporation of ActionScripting for movie control
including stops & navigation is probably the trickiest thing in Flash
that we will be doing. However, just a couple of very short scripts are
what is needed to accomplish this.
Stops are needed to prevent your movie from looping and give the user a
chance to make a choice based on navigation options that have been presented
in the piece. The ActionScript command "stop();" can be placed
on a keyframe to accomplish this.
stop();
To create navigational behaviors, place ActionSricpts on buttons. Usually
the "on" method is used to handle mouse click functionality, such
as "release" for mouse button up actions. Apply the following
example to navigate to the first frame in a different scene:
on (release) {
gotoAndPlay("Scene 2",1);
}
Introduction to Multimedia - Week 6
Monday / Tuesday: Today we'll go over sound, motion paths and masks.
First of all I would like to review tweening. Here are a few points to keep
in mind about motion tweens:
1. Remember to convert to symbol (Modify/Convert to Symbol, or F8) before
making motion tweens.
2. Use the scale checkbox in the frame properties (next to tween) to apply
transform to motion tweens.
3. It's a good idea to put each shape or symbol on it's own layer if you
before tweening.
Shape Tweens:
Excerpted from
the Macromedia Flash MX Help File
1. Click a layer name to make it the current layer, and create or select
a keyframe where you want the animation to start.
2. Create or place the artwork for the first frame of the sequence. For
best results, the frame should contain only one item (a graphic object or
broken-apart group, bitmap, instance, or text block).
3. Select the keyframe in the Timeline.
4. Choose Window > Properties.
5. In the Property inspector, select Shape from the Tween pop-up menu.
6. Drag the arrow next to the Easing value or enter a value to adjust the
rate of change between tweened frames. (By default, the rate of change between tweened frames is constant. Easing
creates a more natural appearance of transformation by gradually adjusting
the rate of change.)
7. Choose an option for Blend: Distributive creates an animation in which the intermediate shapes are smoother
and more irregular. Angular creates an animation that preserves apparent corners and straight
lines in the intermediate shapes. Note: Angular is appropriate only for blending shapes with sharp corners
and straight lines. If the shapes you choose do not have corners, Flash
reverts to distributive shape tweening.
8. Create a second keyframe the desired number of frames after the first
keyframe.
9. With the second keyframe selected, select the artwork you placed in the
first keyframe and do one of the following: Modify the shape, color, or position of the artwork. Delete the artwork and place new artwork in the second keyframe.
Wednesday: The last thing we'll go over in Flash before
moving on to our final project is a refresher on how to publish your Flash projects on
the internet. Everyone has an account on the OLS which includes at least
5 megabytes of web space. To access your account you can use FTP client
software such as RBrowserLite in the Mac labs. Documents you wish to publish
on the web need to be copied into the "htdocs" directory, or subdirectories
within it.
Make sure you get your project published to your website before Monday / Tuesdayso we can view them on the web in class. If you're not absolutely confident
on how to do it, make an attempt during lab today and I'll help any of you
who need it.
Introduction to Multimedia - Week 7
Monday / Tuesday: Today we'll be discussing the final project which is a full interactive website. We will be combining several types of media within the site, but some important factors not to be overlooked are design and usability. An excellent set of usability criteria goes by the acronym SCANMIC. These guidelines can improve the design of your site in many ways. Here's a brief overview of the criteria:
1. Screen Design (Space, choice of color, readability,
image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility,
Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation
Links. Good navigation is like a roadmap, know where you are where you've
been and where to go next.)
5. Media Use (Graphics help keep users attention and can
enhance usability, poor use slows down sites and distract users, Sound,
Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat,
user customization)
7. Consistency (Page size/page layout, navigation buttons/
images, menus, etc. text - font, font size and color).
Full Webiste – Interactive Website with Flash Elements
Due Date – 2nd Class of Week 10
Evaluations - 1st and 2nd Class of Week 11
(5% of final project grade)
Components:
Proposal 25 pts. Due week 8 Class 2
Mockups 10 points. Due 1st Class of Week 9
Beta Version 15 points. Due 2nd Class of Week 9
Final site 50 points. Due 2nd Class of Week 10
Total Points - 100
Assignment Overview:
Using Dreamweaver and Flash create an interactive website with a minimum
of 10 content areas. Universal navigation, text content, images, sound,
and motion graphics are required in your site. Sites will be evaluated based
on the SCANMIC criteria.
Content Specifics:
- Choose a subject, product or service for your site.
- Content of site must be approved by me.
- Design must be your original work.
- Include at least 2 uses of audio (background/sound effects).
- Include a minimum of 8 photo stills.
- Use a maximum of 3 font styles.
- Incorporate self designed buttons, rollovers, and headers.
- A minimum of 10 pages or content areas are required.
- Content must include text as well as graphics (all image sites are unacceptable).
- Universal navigation is required so users can easily get around your site.
- Links to related websites outside of your project are required.
- Final project must be uploaded to your OLS or comparable account and available
on the World Wide Web.
Competencies:
Project planning and organization.
Resource gathering.
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web
Processing of Digital Images into a web format
Using Dreamweaver to create html documents
Creating tables within Dreamweaver
Creation of consistent navigation systems.
Creating relative links for navigation and hard links for linking outside
your site
Linking to an email address
Targeting links to different areas
Publishing a website to the WWW
Grading Standards:
Completion of the project by the required deadline does not guarantee
a passing grade. Your project must demonstrate the knowledge of the project
competencies and a moderate level of design detail.
Schedule / Points Breakdown:
2nd Class of Week 8 - Paper copy of the proposal is due (25 points).
1st Class of Week 9 - Mockups required for feedback (10 points).
1st Class of Week 10 - Beta version due for review (15 points).
Week 11 - Final Project Due (50 points).
Week 11 - Evaluations (5% of Final Project grade).
Wednesday: A very important part of building interactive
media projects is the planning stage. Let's discuss each of the components
required for our design documents (often called development plan) for
your final project. Here's a list of components generally included in
this type of document:
1. Title page (Title, Author, Table of Contents, etc.)
2. Summary/Overview (A brief summary of what the project does and what
it's for, etc.)
3 . Feature Lists/Requirements (A list of the features with brief descriptions)
4 . Flow Charts (Represent each unique screen of the project with a shape
connected via navigation)*
5 . Screen Schematics (Simple pages shown with wire frame boxes for nav
buttons, and images. Also include notes describing the purpose of each
screen.)
6. Proposal/Bid in hours (time per pages, etc.)
Introduction to Multimedia - Week 8
Monday / Tuesday: Try to finish selecting the subject for your site and get a good start on your development plans today. Remember that paper prints of your design documents (development plans) are due next class. If you have finished your proposal you can start working on your mockups. Use your favorite graphic design application to create your mockups (Photoshop, Illustrator, FIreworks, etc.).
Wednesday: Please don't forget to hand in your printed design documents today. Let's continue working on our mockups. Mockups are fully designed layouts which we will later convert into templates for our websites. We should create a mimum of three uniques designs for one page. Out of the three designs we will choose the best and use it as a consistent template for the rest of the site.
Introduction
to Multimedia - Week 9
Monday / Tuesday: I will be looking at everyone's mockups today
(10 points). Based on the feedback I give you, choose your design, make
any final adjustments and start creating a template. I suggest using FIreworks
MX to create your HTML template. I'll demonstrate the process of creating
HTML templates from your mockups in Fireworks today as well.
Wednesday: Let's look at importing flash content into
HTML documents.
Introduction
to Multimedia - Week 10
Monday / Tuesday: Today I'll be looking at the "beta"
versions of your website (15 points). A beta version is a nearly complete
version of software or web projects that is used to make sure that nothing
is wrong with the project. This is commonly refered to as beta testing.
Wednesday: Today is the last chance to get my feedback
on your final projects and work out any difficulties you may be having.
Introduction
to Multimedia - Week 11
Monday / Tuesday: Evaluations.
Wednesday: Evaluations.