Webster, Richard D.
Spring, 2013 Schedule for COSC 109.001
(Subject to change, as needed)
This section of COSC 109 will be taught partially on line – meaning that you will be responsible for keeping up with your textbook readings,
reviewing on-line lecture notes, and completing laboratory activities as assigned.
DATE
M, Jan 28
W, Jan 30
F, Feb 1
M/W, Feb 4 & 6
F, Feb 8
M/W, Feb 11 & 13
F, Feb 15
ACTIVITIES
Class Meets in YR 201 at 8:00 am for Course Introduction and Syllabus.
No Class Meeting, Homework Assignments:
* Review COSC 109 Website and Bookmark same on Home PC: http://pages.towson.edu/webster/109/ ;
* Review On-line Lecture Notes for Chapter 1, and Read Chapter 1 in “Digital Media” textbook;
Class Meets in YR 302 at 8:00 am for Introduction to COSC Labs. Bring flash drive to lab.
Complete Lab Assignments #1 and #2; Webdisk and H:\ Drive Review.
No Class Meeting, Homework Assignments:
* Check your TU e-mail for assigned articles readings and instructions for completing Quiz #1;
- Complete & submit Quiz #1 (which will be based on those article readings).
- Continue Chapter 1 Review
No Class Meeting, Homework Assignments:
* Complete Lab 3
* Labs 1 & 2 are Due.
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 2, and Read Chapter 2 in “Digital Media” textbook;
* Quiz #1 is Due.
No Class Meeting, Homework Assignments:
* Begin Working through Lab 4 Parts I – IV)
(Note that Lab 4 is a non-graded lab, but a pre-requisite for upcoming Flash assignments).
* Lab 3 is Due.
M/W, Feb 18 & 20
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 3, and Read Chapter 3 in “Digital Media” textbook;
F, Feb 22
No Class Meeting, Homework Assignments:
* Complete Lab 5.
M/W, Feb 25 & 27
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 4, and Read Chapter 4 in “Digital Media” textbook;
F, March 1
No Class Meeting, Homework Assignments:
* Complete Lab 6;
* Lab 5 is Due.
M/W, March 4 & 6
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 5, and Read Chapter 5 in “Digital Media” textbook;
F, March 8
No Class Meeting, Homework Assignments:
* Complete Lab 7;
* Lab 6 is Due.
Prepare for Lecture Test #1. (Test will Cover Chapters 1 – 5 in “Digital Media” Textbook)
M, March 11
W, March 13
F, March 15
M/W/F, March 18 - 22
** Class Meets in YR-201 for Lecture Test #1, Mandatory Attendance **
No Class Meeting, Homework Assignments:
* Complete Lab 8;
* Lab 7 is Due.
No Class – Spring Break Week – COSC Labs Closed
1
M/W, March 25 & 27
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 8, Part I; and Read corresponding pages in “Digital Media”
textbook;
F, March 29
No Class Meeting, Homework Assignments:
* Complete Lab 9;
* Lab 8 is Due.
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 8, Part II; and Read corresponding pages in “Digital Media”
textbook;
Class Meets in YR-302 at 8:00 AM, Optional Attendance. Complete Lab 10.
* Lab 9 is Due.
M/W, Apr 1 & 3
F, Apr 5
M/W, Apr 8 & 10
F, Apr 12
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 8, Part III; and Read corresponding pages in “Digital Media”
textbook;
No Class Meeting, Homework Assignment:
* Complete Lab 11.
* Lab 10 is Due.
M/W, Apr 15 & 17
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 9, and Read Chapter 9 in “Digital Media” textbook
F, Apr 19
Class Meets in YR-302 at 8:00 AM, Optional Attendance.
* Lab 11 is Due.
M/W, Apr 22 & 24
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 14, and Read Chapter 14 in “Digital Media” textbook
F, Apr 26
No Class Meeting, Homework Assignment:
* Complete Lab 13
* Lab 12 is Due.
M, Apr 29 / W, May 1
No Class Meeting, Homework Assignments:
* Review On-line Lecture Notes for Chapter 15, and Read Chapter 15 in “Digital Media” textbook
No Class Meeting, Homework Assignment:
* Begin Working on Term Project, Lab 15 (yes, we had to skip Lab 14, sorry).
* Lab 13 is Due.
F, May 3
Complete Lab 12
M, May 6
No Class Meeting, Homework Assignments:
* Prepare for Lecture Test #2, which will include Chapters 8, 9, 14 & 15)
W/F, May 8 & 10
No Class Meeting, Homework Assignment:
* Complete Lab 15
M, May 13
** Class Meets in YR-201 at 8:00 am for Lecture Test #2, Mandatory Attendance **
(Test will cover Chapters 8, 9, 14 & 15)
W, May 15
Lab 15 and any and all outstanding Lab Assignments are Due by 10:00 am
Quiz #1 and All Labs will be averaged to Comprise 50% of your Final Course Grade.
Lecture Test #1 and Lecture Test #2 will each be worth 25% of your Final Course Grade.
Richard D. Webster, COSC 109 Instructor
Office: 7800 York Road, Rm 422, Towson University, Towson, MD 21252
Phone: (410) 704-2424 | Email: webster@towson.edu
109 website: http://pages.towson.edu/webster/109/
2
COSC 109 Lab Assignments - Webster, Richard D.
Spring 2013
To see finished examples of the assignments below, check out the COSC 109 website at
http://pages.towson.edu/webster/109/
Lab 01: Email
Lab 02: Digital Photography Editing
Lab 03: Painting with MS Paint
Lab 4: Pre-requisite Flash Tutorial (non-graded assignment)
Lab 4: Pre-requisite Flash Tutorial Part IV (non-graded assignment)
Lab05: Personal Illustration (Flash)
Lab 06: Flash Animation 1
Lab 07: Flash Animation 2
Lab 08: Holiday Greeting Card (Flash)
Lab09: Scanner Story (Digital Imaging Manipulation)
Lab 10: Public Web Home Page
Lab 11: Term Project Proposal
Lab 12: Home Page Update, Recipe Editing
Lab 13: Term Project Story Board
Lab 14: Audio Greeting
Lab 15: Term Project
3
Lab 01: Email
Overview / Goal:
In this exercise you will send an email message containing a personalized signature file to your instructor.
The Assignment:
Your assignment is to simply send me an e-mail message which meets the criteria established in this handout.
1. Your e-mail message must be sent from your university Gmail account;
2. and, must contain a personalized "signature file".
Notes / Procedures / Requirements:
Signature Files:
A "Sig File" is an automated attachment to every e-mail you send out. Sigs contain information like your name,
address, phone, class standing, favorite quotations, fancy line drawings, etc. Your signature file MUST contain more
than your name.
Follow the procedure outlined below when ready to begin this assignment.






Launch your web browser
Go to the URL: http://webmail.towson.edu/ (or your best bet to your TU e-mail)
Select the “Webmail Powered by Google” icon
Enter your username
Enter your password
Click the Log-In button
To create and enter your Sig File . . .



Click on the "Settings" link in the top right toolbar,
Enter your signature in the SIGNATURE Dialogue Box.
Scroll to the bottom of the page and click SAVE CHANGES.
4
To Compose an e-mail message now, noting the specifications at the end of this handout:

Click the "Compose Mail" link in the top left toolbar. (Your signature should be visible in your “compose
message” window.)
o In the Subject Line, enter the text COSC 109.004; E-mail - Lab 1
o Begin typing your e-mail per the example indicated below.
o After proofing your message for typos and grammar, click the Send button to send me your e-mail.
o Click the Sign out link on the top right toolbar to disconnect from your Gmail account.
(Example: )
To
Subject
: webster@towson.edu
: COSC 109.102; E-mail - Lab 1
(you will type the body of your text here)
The body of your e-mail should contain the following information:






your name;
your major;
a brief description of your prior computer experience and/or training;
any favorite computer software (if any) you've used in the past;
do you own your own computer or plan to purchase one in the near future;
share something personal about yourself (likes, dislikes, hobbies, family, etc.).
(Your signature file should appear at the bottom of your e-mail).
neatness, proper formatting, and spelling count
:
5
Lab 02: Digital Photography Editing
Overview
This lab will introduce Irfanview to manipulate digital pictures. You will manipulate a provided .jpeg image
with Irfanview, and then import portions of the images into a MS-PowerPoint document. Please feel free to
use any other photo editing software that is available to you and/or that you are familiar with.
Irfanview is shareware and can be downloaded from http://www.irfanview.com/ for windows users. A
freeware program for mac users can be downloaded from http://www.gimp.org/ .
Procedure: Create three digital images from the one digital image provided.
(NOTE: You don’t have to use the image specified in Step 1 below. I’d actually prefer you use a personal digital
photograph of yourself.)
1. Retrieve file H:\COSC109\Datafiles\Lab02_Digitalphoto_Datafile.JPG . You may substitute this
image with a .jpg file of yourself.
2. Save that file to your COSC109\CompletedLabAssignments folder.
3. Edit and modify your image using photo editing software. Select Start/Programs/Irfanview/.
Now click File/Open, and select the folder where you stored your downloaded digital image; and
open the image.
4. Select only part of your digital image for further work. There are three options in Irfanview: Cutselection, Cut-leave selection, Crop selection.
o Cut-selection will cut out the selected rectangle. The cut rectangle is replaced with black color
and the original image size is still the same.
o Cut-leave selection will cut out the part around the selected rectangle and keep the selected
rectangle. The part around the selected rectangle is replaced with black color and the original
image size is still the same.
o Crop selection will cut out the part around the selected rectangle and keep the selected
rectangle. The area around the selected part is "thrown away" and the image size is now only
the size of the selected part.
5. Crop your picture. Use the mouse to draw a rectangle around your portrait in the picture (cut out
most of the plain background), then select click Edit/Crop selection. If you want to re-draw the
rectangle, just click your mouse outside of the selection, this will make the selection disappear.
6. Check the size of your picture. Your picture should not be larger than appr. 3" x 2" (or 2" x 3"). To
check the size of your picture or change the size, use Image / Resize-Resample. Make sure to
choose the option "inches" in the unit field. You can change the number of inches by increasing or
decreasing the height and/or the width fields. Notice that both values for height and width change,
even if you adjust only one of those fields. This is Irfanview's way of ensuring that your image will not
be distorted.
7. Save your picture. Use File / Save As to save this picture to your
COSC109\CompletedLabAssignments folder as mypict1.jpg.
8. Rotate your picture. Use this new file mypict1.jpg, but this time rotate your picture left or right after
cropping. Use Image / Rotate L (or Rotate R) to rotate the picture. Use File / Save As to save the
picture to your COSC 109 folder as mypict2.jpg.
6
9. Use Special Effects on your picture. Open the file mypict1.jpg again (use File/Open), but this time
use the various tools under Image / Effects to enhance your picture after cropping. Use File / Save
As to save the enhanced picture as mypict3.jpg.
Create a PowerPoint Presentation with our new three digital images
You now have three picture files:
mypict1.jpg, mypict2.jpg, and
mypict3.jpg. In the next step, you will
create a digital photo album using
Microsoft PowerPoint. When finished –
your presentation should look similar to
the image to the left.
1. Start Programs / Microsoft
PowerPoint. Type the following title on
the title slide: Joe Student (Use your
name instead of Joe Student) and Digital
Photo Album.
2. Insert a new slide and use the
two-column layout. Write Introduction
in the title bar. In the left column,
introduce yourself by writing your full
Name, Major, Academic Year. Use the
right column to insert the first picture you
produced (the cropped picture). Use
Insert/Picture/From File, navigate to the
location of your picture and select your
cropped picture.
3. Insert a new slide using the
two-column layout again. Write My Major in the title bar. This time, in the left column share
something about your major and what you plan on doing after you graduate. In the right column,
insert your rotated picture.
4. Insert a new slide, this time using the regular title and text layout. Write My Hobbies in the title
bar. Insert your special effects image as the background for this slide.
For Office 2007: Select the Design tab, then Background, and format the background. Select Fill,
then picture or texture fill. Select Insert from File, navigate to the location of your special effects
picture and insert the picture.
For Office 2003: Select Format / Background, from the pull-down menu select Fill Effects, click on
the picture tab, click on the Select Picture button and select your picture
Make sure to click only on "Apply" and not on "Apply to All", since we want this background only to
appear on this slide and not on the first two we already created. Share something about your hobbies
on this slide and please also share which special effect you used.
7
5. Save your PowerPoint presentation to your COSC109 folder under the filename:
Lab02_Submit.pptx
6. Submit your PowerPoint presentation to your instructor as an e-mail attachment.
Note: Keep all your .jpg files (xxxxx.jpg). Jpg is one of the picture formats used on the World Wide Web.
Your .jpg pictures will be used in future labs.
Submitting your file:
Send an e-mail to webster@towson.edu and attach one file: Lab02_Submit.pptx
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #2”
Mastery Goals
1. To Crop an image means to remove part of the picture, leaving only the part which has been
selected.
o Click and drag over the area of your image you want to keep.
o On the Edit menu, click Crop.
2. To Resize a selection Do one of the following:
o To move one side of the selection's bounding outline, move the pointer over the sizing handle
on that side until the pointer changes to a double-headed arrow, and then drag the handle.
o To change the height and width simultaneously, drag a corner handle.
3. To Resize an image means it will be larger or smaller.
1.
2.
3.
On the Image menu, click Resize/Resample.
Enter the new width or height, or a percentage of the original.
Select other options you want to apply.
For Help on an option, click the question mark and then click the option.
To Rotate an image
To rotate an image:
1. On the Image menu, click Rotate Right, Rotate Left or Custom Rotation.
2. Choose the options you want.
8
Lab 03: Painting with Paint
Special Note to Windows 7 Users: Many of you know that Paint is a drawing tool that can be used for
simple drawings and basic image editing. Paint has been included in every version of Microsoft Windows, starting from
Windows 1.0 which was released in 1985. After 24 years of development, Paint reached version number 6.1 in
Windows 7. If you’re working with Windows 7 at home or in the COSC Labs, click here to for a quick Windows 7 Paint
Tutorial: http://www.7tutorials.com/how-work-new-paint
Overview
This lab will introduce Paint to create and edit drawings. Paint is a paint program for simple illustrations. In
this assignment we will create a Tessellation with Paint. Tessellations (also often called "tilings") are
repeated geometric designs that cover a plane without overlaps and gaps. Tessellations can be traced back
thousands of years and illustrate how mathematics and art can be combined.
Paint is a somewhat basic software for image creation and symbol manipulation, keep that in mind as we
work through the assignment. Using Paint should make us appreciate the options and complexity that Flash
has to offer :)
If you have a mac, here is a link to the equivalent program (Gimp) for the mac at http://www.gimp.org/ . The
site also has tutorials on how to use gimp at http://www.gimp.org/tutorials .
Procedure
1. Open MS Paint by selecting Start / Programs / Accessories / Paint. The Paint toolbar is displayed
towards the top of the screen. Use your mouse and move slowly over the icons shown in the toolbar
to see an explanation of the tool.
tools
Good to know.....
To draw a circle, use the oval tool and hold down the shift key while dragging out an ellipse, this
constrains the form to a circle.
To draw a square, use the rectangle tool and hold down the shift key while dragging out a rectangle,
this constrains the form to a square.
To draw (somewhat) more regular polygons, hold down the shift key while drawing the form, this
constrains all angles to 45 or 90 degrees. This feature is helpful when drawing triangles.
9
When cutting and pasting objects, make sure to draw the rectangle only as big as the object and don't
go beyond the corners of the object. If the selection rectangle is larger than the original object, the
additional selected area is also copied as white space.
2. This exercise will use geometrical or irregular shapes. Below are some sites you can consult for some
ideas of shapes to use for your tessellation.
http://mathworld.wolfram.com/Tessellation.html
http://www.coolmath.com/tesspag1.htm
http://www.teachers.ash.org.au/geparker/creating_tessellations_using_microsoft_paintbrush.htm
3. Practice by drawing some rectangles and triangles. Fill them with color and use the Image / Flip and
Rotate features on these shapes.
4. Set the dimensions for the tessellation. Select IResize / Select Pixels, and make sure to
set width=512 pixels and height=342 pixels.
5. Decide on your shape and draw the shape on the canvas. It does not matter if your shape is simple or
sophisticated. It is usually easier to use the outline mode (the top shape in the options for selected
tools box) when drawing the shape and filling the shape with color later. You may want to consider
that some shapes can be created by drawing and connecting multiple smaller shapes. For example, a
hexagon could be created from triangles. Just remember that there can be no overlaps and gaps.
6. Save your file as a .gif file. Since Paint is a somewhat basic tool, saving the shape ensures that we
always can go back to the original shape.
7. Fill parts or all of the shape with colors of your choice.
8. Now copy and paste the shape. Draw a rectangle around your finished shape using the select tool
and select Edit / Copy. Now select Edit / Paste. Move the shape so that it is directly adjacent to the
original shape (it is most likely directly on top of your original shape). You may have to flip or rotate
your shape by using Image / Flip-Rotate. Please consider that the rotation feature in MS Paint is
somewhat limited and allows only 90, 180, or 270 degrees rotation.
9. Save your file again as a .gif file, but this time use a different file name.
10. Repeat this process until all of the white space is covered.
11. Write your full name and section on your artwork. Use View / Text Toolbar to set the font and size of
your text. Make sure to select the text tool in the tool palette first (just click on the A) to ensure that
the text toolbar is active. Draw a large text box on your tessellation and set the text size to at least 14.
12.
13.
Textboxes can have a white or transparent background. Once you click on the text tool in the tool palette (click the A), two background options appear at the bottom of the toolbar.
Click on the option showing the white background box if you like your text to appear in a box with white background. Click on the option with transparent background if you like
your text to appear without a box and transparent background.
Save the current file to your H:\COSC109\CompletedLabAssignments folder under the filename Lab03_SUBMIT.gif (Save the file using File / Save As and select the .gif file
format for this work.)
Grading Criteria





Tessellation must cover the plane without overlaps and gaps
Tessellation may not have white space around the sides
Shape must be repeated at least 8 times
Image must contain your name and section
Final Image must be in .gif file format
Submitting your file
Send an e-mail to webster@towson.edu and attach one file: Lab03_Submit.gif
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #3”
10
Lab 4: Pre-requisite Flash Tutorial (non-graded assignment)
There is nothing to submit or hand-in for Lab 4 – but the following activities and tutorials are designed to introduce you
to the flash software in preparation for your upcoming flash assignments. Successful completion Lab 4 is an essential
and required pre-requisite for Labs 5, 6, 7, and 8.
If you would prefer not to download the trial version of flash to your home device, the Flash software is available for
you to use in the YR-403 and YR-407 computer labs. See the student Lab Assistant in YR-407 and ask to be directed
to a computer with the flash software already installed.
Overview
This lab will introduce the software package Flash. Flash is a multimedia drawing and animation package
for the Web. Flash is becoming increasingly popular and there are various resources for it on the Web. Take
a look at some of the Flash resources listed at the bottom of this page.
In this lab you will use an online tutorial of Flash to learn some basic functions and ideas of this package.
Please work through the tutorial as described below.
The tutorial can be used as a reference to Flash: if at any time you get stuck doing a task in Flash when
working through Labs 5 – 8, you may be able to find out how to accomplish that task by finding it in the
tutorial.
You can download a 30-day trial version of Flash from Adobe/Macromedia for use on your home
computer. The link to this trial version can be found here:
https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&promoid=EBYEX
Be forewarned that the Flash download may take a very, very, long time.
Adobe recently upgraded their free trial version of Flash from version 4 to version 6 (Flash CS6). If the link
above doesn’t work – you can also download the free trial version of Flash here:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash
If you don’t want to or cannot download the Flash software to your home PC, the Flash software is available
on several machines in the COSC YR-403 and YR-407 computer labs. Flash is also installed on all
computers in YR-302 and YR-303. See the student Lab Assistant in YR-407 if you have any questions as to
which machines have Flash installed.
11
The Assignment: To successfully complete Lab 4, work through Parts I, II, III and IV below.
Part I: Flash CS6 Online Instructional Videos
There are 21 short instructional online videos designed to provide you with a solid foundation in Adobe Flash
Professional CS6, and show you how to create an assortment of Flash content. View those videos here:
http://www.lynda.com/Flash-Professional-tutorials/Flash-Professional-CS6-Essential-Training/96304-2.html
After viewing the videos, also check out Chapter 8 in your “Digital Media” textbook as a good reference for Flash.
Part II: Flash CS6 Tutorial “Creating your first Flash Professional CS6 document”
Required materials include a Windows PC and the Flash CS6 software. See information in the Overview section above
for downloading Flash CS6 at home.
After you’ve downloaded the Flash software to your home PC, work through the Flash 6 Tutorial available at:
http://www.adobe.com/devnet/flash/articles/create-first-flash-document.html#articlecontentAdobe_numberedheader
Part III: Starting the Flash Software on your PC
Whether you’re working at home with the 30-day trial version, or working in the COSC computer labs, begin the Flash
software at your PC thusly:
Procedure
1. Use Start / Programs / Adobe / Adobe Flash CS6 to start Flash.
2. Note: to access Flash on any of the COSC Lab PC, use . . .
Start / All Programs / Adobe Design and Web Premium CS6 / Adobe Flash Professional
CS6
Here are some links to additional Flash resources on the Web:
Macromedia Flash Showcase | Absolute Cross | The FlashKit
Part IV: Complete the Tutorial: Introduction to the Flash Environment
(note there is no hard copy provided for this tutorial. Click the link above to view and work through the on-line
instruction set for the tutorial.)
12
Lab05: Personal Illustration
Overview
This laboratory activity will use Flash to draw a picture. The picture will be used as your personal illustration
to highlight an aspect of your interests or personal style. The information can be considered a form of
"business card".
Remember to always check out the COSC 109 website to see completed examples of the lab assignments.
Procedure
Note: to access Flash on any of the COSC Lab PC, use . . .
Start / All Programs / Adobe Design and Web Premium CS6 / Adobe Flash Professional CS6
1. Start Flash per above. Select File / New / Actionscript 3.0. To ensure that all controls are shown on
the screen, select View / Magnification / Show All, and select View/Preview Mode/Full. The
properties window should show to the right of your screen by default. If you don't see this window,
select Window / Properties to open it.
2. Adjust the size of the window. The default window size is unsuitable for our purposes, so use the
menu Modify / Document. In the Document Properties set the Dimensions to 512 pixels (width) x
280 pixels (height). You can also change the background (Modify / Document / Background
Color) for your drawing in Document Properties. Select OK.
3. Draw a picture to reflect your interests, or something about yourself. Your final picture must
include text, some geometrical shapes and some freehand drawing. The illustration must also
contain your name, major and class section.
4. Include some text information by using the text tool. Feel free to choose distinctive fonts. Fonts
that look like handwriting, for example, are available. You could add any other information about
yourself or your areas of interest, for example "Save the Rainforest".
5. Use at least 2 layers. You can show the usage of layers by placing objects in back (or in front) of
each other. For example, draw a tree on the canvas in one layer. Add a second layer (choose
Insert / Timeline / Layer) and place another object in the same area as the tree (for example a
cloud).
6. Experiment with layers by rearranging the ordering of the layers (called the stacking order).
Change the stacking order. Drag the bar labeled Layer 1 up into the position where the bar labeled
Layer 2 is. Observe how this causes objects to be in front or in back.
7. Save your drawing as a Flash file (.fla) to your H:\COSC109|CompletedLabAssignments
folder. Choose File / Save As and save your file as Lab05.fla. Files with .fla extension are the
native Flash format and contain the information you need if you want to change or update your
drawing in the future. However, this is not the format you will turn in. As we are working with images,
we will convert our file into a common image format, .gif.
8. Export your image to .gif format. Use File / Export Image to convert your drawing as a .gif file
(preferred). In this case, a .gif file format is preferred over a .jpg file since the .jpg format will
compress with loss of data, normally resulting in unusual color artifacts around the borders of your
text characters.
13
9. In the Save as type drop down box, select "GIF Image (*.gif)". In the File name drop down box, type
the file name as Lab05. Click OK.
10. A dialog box "Export GIF" pops up. Make sure to select "Full Document Size" in the "Include:"
drop down box. This option uses the movie size you defined. Do not use "Minimum Image Area", this
will try to optimize the movie size and might reduce or enlarge your defined movie size.
Grading Criteria






Picture must contain freeform shapes
Picture must contain geometrical shapes
Picture must contain text
Picture must contain your name, section, and major
Picture must use at least two layers
Picture must be posted in .gif format
Submitting your file:
Send an e-mail to webster@towson.edu and attach one file: Lab05.gif
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #5”
14
Lab 06: Flash Animation 1
Overview
Flash is a software package that allows you to create projects called movies. A movie is much like what
you go to see in a movie theater. It is composed of one of more scenes. A scene can be considered a
small, self-contained movie and is comparable to a chapter in a book. Our first movie will be a simple movie
showing a sunrise and an airplane flying across the sky.
Each scene consists of several frames. A frame is one single picture within a scene. Playing frames in
rapid succession gives the human eye the illusion of constant motion. A keyframe is a frame where the
action of your object changes significantly. Example: a plane flies across the screen from left to right.
Keyframe number one in this case would be the frame where the plane starts on the left side of the screen,
keyframe number two in this case would be the frame where the plane stops on the right side of the screen.
In addition to frames, each scene can be made of different layers. To understand the concept of layers,
think of a stack of transparencies. You can place different objects of your scene on separate transparencies
(layers). To see the complete scene, you would then look at all the transparencies together stacked up. This
is essentially the concept of layers. It is recommended to place each object on a separate layer. This
practice will make manipulating (animating) your objects much easier.
Objects are also called symbols. Symbols are those objects which make up your scene. Symbols are
objects that are stored in your movie's library for reuse. Symbols can easily be reused and/or modified.
Symbols can be added to the library by the user.
Each layer has a timeline which shows how the symbols on the layer change over the course of the
scene. The amount of time your movie is showing depends on the total number of frames you define.
Our movie will also contain some basic animation. To animate an object, you define two or more keyframes
(frames where the action changes significantly). Between those keyframes are several frames which show
the transition between those keyframes. This transition can be generated using Flash. The process of
transition is called tweening. Tweening is a Flash function which determines the best way to transfer an
object from one keyframe to the next.
Our first movie will be an animation showing a nature scene. We will create a movie showing the sun rise
and a cloud flying in the sky. The movie will also have credits which show who created this movie. This
movie will have one scene, 40 frames and four layers.
15
Procedure
Note: to access Flash on any of the COSC Lab PC, use . . .
Start / All Programs / Adobe Web Premium CS6 / Adobe Flash Professional CS6
1. Start Flash per above. Select File / New / ActionScript 3.0. To ensure that all controls are shown on
the screen, select View / Magnification / Show All, and select View/Preview Mode/Full. The
properties window should show to the right of your screen by default. If you don't see this window,
select Window / Properties to open it.
2. Flash has a dialog box called Document Properties that allows you to change the main
characteristics of your movie. The default background for each movie is white. Our movie will show
the sky, so we would like to change the color of the background to blue. Select Modify / Document
and in the dialog box that appears, click on the Background Color button. In the color palette that
then appears, click on a light blue shade for your background. Then click OK.
3. Create a sun. To help with this step, refer to the picture above. To make your sun, click and hold
the rectangle tool, then select the oval tool. Use it to drag out a medium sized circle in the lower
left portion of the stage. To fill your circle, choose the Paint Bucket tool in the Toolbox. Then click on
the Fill Color button in the Toolbox, and in the color palette than appears, choose an appropriate
color for your sun. Finally, click the Paint Bucket tool inside your sun to fill the sun with your chosen
color.
4. Animate your sun. Select the Pointer Tool (Selection Tool) in the upper left corner of the Drawing
Toolbox. Select all of the sun (the interior and the outline) by drawing a rectangle around the sun.
Next, choose Insert / Classic Tween. Flash converts your sun automatically to a symbol (placing it in
the library).
5. Define the final position of your sun. Click directly under the timeline in frame 40, the final frame of
our animation. We want to use 40 keyframes to make the sun rise from the lower left to the upper
right. This means that in frame 40, the sun will be in its final position, at the upper right of the
screen. Choose Insert / Timeline / Keyframe to make this a keyframe. Notice the solid arrow
between frame 1 and frame 40 signifying a successful motion tween. Now we move the sun to its
position in frame 40. With frame 40 still selected, single click on your sun to select it and drag it to
its final position in the upper right area of the stage.
16
6. Change the color of your sun. Note that unlike a real sunrise, your sun does not change color as it
rises. In this step, you will make your sun change color as it rises. Select frame 1, click on your sun
once to select it. In the Properties Window (to the right of the stage) in the color effect list select
Tint. Click on the color selection square, select a shade of orange, adjust the percentage of the
orange tint and watch your sun change color. Play your animation to see your sun change color as it
rises! Make sure to un-select your sun by clicking anywhere on the canvas outside of the sun. Let's
check our animation. To play your animation, choose Control / Rewind then Control / Play.
7. Adjust the path of the sun. When we played the movie we noticed that the sun is taking a straight
path from the lower left to the upper right. We would like to curve the path a little. Click on the timeline
in frame 20. Flash now shows you the sun in the position in frame 20. Drag the sun a little further up.
Flash now shows a bullet in this frame, meaning that it now designed this frame as a new keyframe.
Control / Rewind and Control / Play your movie again. Add a few more keyframes to make the path
look like a curve.
8. Save your project on your to your COSC109\CompletedLabAssignments folder. To do this,
choose File / Save As, navigate to your COSC109 folder and give your movie the name
Lab06_MyMovie.fla, then click the Save button.
9. Add another object (cloud) to your movie. Since we want to animate our new object we will place
the new object on its own layer. To insert a new layer, choose Insert / Timeline / Layer. Note that
this new layer, called Layer 2, is at the top of the list of layers. (You might have to move your Toolbox
out of the way to see the layer name.) This means that objects in Layer 2 will appear on top of
objects in Layer 1. If necessary, you can rearrange the ordering of the layers (called the stacking
order) in a scene. The name of the currently active layer is indicated in bold face and in this case is
Layer 2. You can change the active layer by clicking on the name of the layer. Try this a few times
but leave Layer 2 as the active layer when you are done.
10. Create a cloud to fly across the sky. Create a new layer for the cloud. Our keyframes for each
layer will be again frame 1 and frame 40. Make sure that layer 2 is the active layer (click on it if
necessary). Draw a cloud on the left, upper side of the stage.
11. Animate your cloud. Select the Pointer Tool (Selection Tool) in the upper left corner of the
Drawing Toolbox. Select all of the cloud (the interior and the outline) by drawing a rectangle around
the cloud. Next, choose Insert / Classic Tween. Flash converts your cloud automatically to a symbol
(placing it in the library).
12. Define the final position of your cloud. Click directly under the timeline in frame 40, the final frame
of our animation. We want to use 40 keyframes to let the cloud fly across the sky. This means that in
frame 40, the cloud will be in its final position. Choose Insert / Timeline / Keyframe to make this a
keyframe. Notice the solid arrow between frame 1 and frame 40 signifying a successful motion
tween. Now we move the cloud to its position in frame 40. With frame 40 still selected, single click
on your cloud to select it and drag it to its final position towards the right portion of the stage.
13. Change the stacking order. Drag the bar labeled Layer 1 up into the position where the bar labeled
Layer 2 is. Again rewind and play your movie and note the changes.
14. Add credits that show the creator of this wonderful movie! Insert a new layer by selecting Insert
/ Timeline / Layer. Layer 3 should now be your active layer. Select frame 20 of layer 3 to be your first
keyframe. Click on frame 20, then select Insert / Timeline / Keyframe. In the Toolbox, choose the
text tool. In the Properties Window, select Font and set the font to Arial. Set the text size to 18 and
the text style to Italics. Make sure the properties box shows static text. Click somewhere in the lower
half of the stage and type three lines of text:
This fantastic movie was created by
Joe Student (replace with your name)
COSC 109.102
17
Now click on frame 40 for layer 3, then select Insert / Timeline / Keyframe. Our text will not move, it
is just required to stay on the screen from frame 20 to frame 40. Rewind and play your movie. Should
you need to delete any frames, you can do so by right-clicking on the frame(s) to remove, then select
Remove Frames.
15. Add one additional object. Improve the movie by adding an additional object, for example, a bird, or
a kite. Insert an additional layer. Place an object of your choice on this layer towards the top of the
screen. The object can be any item of your choice. Make this item move from the top of the screen to
the bottom of the screen. (Refer back to steps 3-5 and adjust those steps for creating your falling
object.)
16. Save your movie to your COSC 109 / Completed Lab Assignments folder. Select File/Save As,
select Save as Type: Flash Document (*.fla). For a file name, type Lab06_anim1.
17. Almost All Done!
18. Before we e-mail our movie to our instructor, let’s take a look at file formats for Flash animation.
Remember the native Flash format are files using the .fla extension. The .fla format is the format
that is needed if you want to make any changes to your file. However, this is not the file format
that we want to post to e-mail. The native .fla format has two disadvantages. The first disadvantage is
that this format would allow anyone to download our animation, manipulate it and use it for their own
purpose. The other disadvantage is that files in .fla format require the full Flash software to be present
on the viewer's computer.
19. File Formats. The easy solution for this dilemma is a conversion from .fla format to a so-called Flash
Player format. This format is called shockwave and has a file extension .swf. Before you convert your
movie make sure to save it in native .fla format. Select Control / Play All Scenes (to show all scenes
of your movie), select Control / Rewind (to make sure your movie starts from the beginning), select
Control / Loop Playback (this option will continuously play your movie). Now we are ready to export
the movie to Flash Player format. Select File / Export Movie. In Save as Type, select Flash Movie
(*.swf), as file name type Lab06_anim1. If a dialog box appears, click the box Protect from Import
and Compress, this will lock your file and prevent other users to copy your file and reduce the file
size of the animation. Accept all other default values.
20. You should now have two files saved, Lab06_anim1.fla and Lab06_anim1.swf. Check your work.
To play your movie, Go to your directory listing and right-click on the Lab06_anim1.swf filename,
and select open. Your movie should now be playing in a loop.
Grading Criteria






Movie must contain 4 layers
Layer 1 contains the sun moving from the lower left to the upper right corner of the screen, sun must
change color
Layer 2 contains the cloud moving from the left area of the screen to the right area of the screen
Layer 3 contains your credits and must start after the cloud has moved some
Layer 4 contains an object of your choice moving from the top of the screen to the bottom of the
screen
Movie must be e-mailed in .swf format
Submitting your file:
Send an e-mail to webster@towson.edu and attach one file: Lab06_anim1.swf
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #6”
18
Lab 07: Flash Animation 2
Overview
In this lab assignment we will create a movie with several scenes. We will also introduce two new features
of Flash: animated masking and shape tweening (morphing).
Masks reveal a portion of an underlying image as the mask moves across the stage or on a path. We will
use a mask with our digital photo to create a spotlight effect, where the spotlight focuses on one part of the
photo.
Shape tweening (morphing) seamlessly transforms one object into another object. To produce the credits,
we will use a technique known as morphing. Morphing is a function which automatically transforms shapes.
The movie will have 2 scenes (3 scenes if you submit work for the additional 5 extra credit points), and the
first scene will have several layers. The first scene uses the masking technique, the second scene uses
shape tweening.
The instructions for this exercise are more "general" than in our first animation lab. If you are looking for
exact directions, please refer to our "Animation 1" lab.
Required Materials:


A standard sized digital photo of yourself;
Macromedia Flash software
Note: If you preview any of the student examples for this assignment over at
http://pages.towson.edu/webster/109/109_Labs/examples/index.htm, you’ll see the animated opaque spotlight that goes
between the dimmed photo image and the undimmed photo image. Be forewarned: as you begin working your way
through the instruction steps below – that spotlight will NOT be opaque – but just a colored round circle. Simply
continue working your way all the way through the assignment – and when the last steps have been completed – the
spotlight will appear opaque – as in the provided student examples.
Procedure:
Note: to access Flash on any of the COSC Lab PC, use . . .
Start / All Programs / Adobe Web Premium CS6 / Adobe Flash Professional CS6
1. Start Flash per above. Select File / New / ActionScript 3.0 / OK. To ensure that all controls are
shown on the screen, select View / Magnification / Show All, and select View/Preview Mode/Full.
The properties window should show to the right of your screen by default. If you don't see this
window, select Window / Properties to open it.
2. Let's look at our first scene, our spotlight using the masking. The first scene will have at least 4 layers.
o Layer 1 (of scene 1) features our digital photograph with dimmed brightness setting
o Layer 2 (of scene 1) contains our digital photograph with regular brightness setting
o Layer 3 (of scene 1) is our mask layer, it contains a circle to function as the spotlight
o Layer 4 (of scene 1) shows text to explain our animated mask
19
The total length of your movie will be appr. 120 frames for the first two scenes.
3. Create background. First, you create layer 1 (of scene 1) which is the background for the movie.
This layer contains the "dimmed" photograph. We will reduce the brightness to a low level. Use File /
Import to Stage to import the photograph. Navigate to the location of the photograph and select it.
You may have to adjust the size of the photograph by using the Modify / Transform / Scale option.
Drag one of the corner handles to adjust the size.
4. Reduce Brightness. To reduce the brightness, the photograph needs to be converted to a symbol.
Use Modify / Convert to Symbol (if you don't see the Convert to Symbol right-click on your image,
then select Convert to Symbol from the shortcut menu) to turn this photo into a symbol and store it
in the movie's library. Save this symbol as a Graphic. In the dialog box that appears, name your
symbol "photograph". Click Ok. Select the drop-down box for the color effect in the properties
window below, and select Brightness. Adjust the slider to the left to a value around -70%. This
adjusts the brightness for this instance of the symbol "photograph".
5. Define length of scene 1. This layer should end at frame 60. Click into frame 60 and Insert /
Timeline / Keyframe.
6. Label layer. Once a scene contains a number of layers it is usually easier when layers are labeled
appropriately. For example, "Background" instead of "layer 1". To label your layer, double-click on the
layer name and enter a name of your choice.
7. Create second layer. The next step will create the second layer (of scene 1) containing the picture
that will show through the spotlight. Insert a new layer using Insert / Timeline / Layer. Label the layer
by double-clicking on the writing "layer 2". You can now replace the default name "layer 2" with your
own description. Name this layer "regular photograph".
8. Use the photograph symbol from the library. This will be a second instance of the the symbol
"photograph" and we won't change the brightness this time. Click in frame 1 of the second layer. Use
Window / Library to bring up the movie's library window. Select the symbol "photograph" by clicking
on it (make sure to select the "graphic" one). Now drag the symbol from the library window directly
onto the stage. This new instance should fit exactly on top of the dimmed photograph. This layer
should also end at frame 60. Click into frame 60 and Insert / Timeline / Keyframe.
9. Create third layer. Insert the third layer using Insert / Timeline / Layer. This is the layer for our
spotlight mask. Label the layer appropriately. Using the circle tool, draw a circle of appr. 1 inch
diameter on the left side of the photograph (not “on” the photo – but to the left of it.) This will be our
spotlight. Make sure that the circle has an actual fill color, don't use an "empty" circle.
10. Animate the spotlight. Click in frame 1 of layer 3 and select Insert / Classic Tween
11. Define final location for spotlight. Left-click once in frame 60 in layer 3, and select Insert /
Timeline / Keyframe. Drag the circle to the particular item of your photo that you want to show in the
spotlight (click on circle and ctrl/drag with mouse). You should now see a solid arrow pointing from
the first keyframe to the last keyframe in layer 3. If you see any part of a dotted line, that indicates an
incomplete or broken motion tween, and your spot light may not work as expected.
12. Enlarge the spotlight. Modify / Transform / Scale. Drag one of the corner handles to enlarge the
circle.
13. Check your movie. Select Control / Play all Scenes, select Control / Rewind, then select Control
/ Play and check the path of your circle. You can adjust the path of your circle now. If you like, have
your spotlight move around the photograph before it zooms in on the object of your choice.
14. Mask Layer. Before you mask the layer, you want to make sure that your spotlight is exactly the way
you want it. After masking the layer, the masked layer and the mask will be locked and you will have
to unlock the layers first to make any changes. To mask the layer, right-click in layer 3 (the layer
containing the spotlight) and choose Mask. Now the masking layer (layer 3) covers (masks)
everything in the underlying layer (layer 2) that is outside of the masking shape.
20
15. If your spotlight does not work as expected: If your motion tween is incomplete or incorrect and/or
your spotlight does not work as expected, it is easiest to re-do the whole process. Unlock the masked
layers, unmask the layers, then delete the spotlight layer and start over by re-inserting the layer.
16. Add Text. Add a fourth layer, (Insert / Timeline / Layer) label it appropriately and write text to illustrate
your animation. The text needs to include your full name. For example, you could write:
Introducing...........Joe Student (replace Joe Student with your own name).
17. Finished with our First Scene!!
18. Create second scene. The next step is our second scene, the credit scene. In this scene we will
use a new technique called morphing. We will show credits as: This movie was produced by: and
have these words then automatically transform into our name. Add a new scene to your movie using
Insert / Scene.
19. Create credits. Use the text tool to write some text on the screen. Text should be similar to: "Movie
produced by:" (don't write your name). In the Properties window, select a large font and any color of
your choice. Switch to editing mode by clicking on the arrow tool. Select Modify / Break Apart.
Select Modify / Break Apart again. (Yes, it's correct, you use the modify / break apart command
twice) The break apart command converts text to a shape by separating your block of text into small
editable objects.
20. Insert a blank keyframe at frame 40 using Insert / Timeline / Blank Keyframe. This inserts a
blank keyframe without any content. Use the text tool to type your name anywhere on the canvas.
Select a large font and any color of your choice. Switch to editing mode by clicking on the arrow tool.
Select Modify / Break Apart. Select Modify / Break Apart again. De-select the text by clicking
anywhere on the canvas.
21. Shape Tween the text. We will now instruct Flash to compute the in-between stages for the
transformation of the two text items that we placed on the screen. Transforming from one shape into
another is called morphing. Click on frame 1, select Insert/Shape Tween. In the Properties
Window, in the Tweening section, select Blend Type: Angular. Blend type: angular is used for
shapes with sharp corners and straight lines. Blend type: distributive is used for smoother and more
irregular shapes. Notice the solid arrow from frame 1 to frame 40 signifying a successful shape
tweening.
22. Insert an additional keyframe at frame 60 using Insert / Timeline / Keyframe. This will display
your name in its final position for a few seconds (this will give me time to read your name).
23. The total length of your movie including the two scenes should be around 120 frames. If you need to
switch between scene 1 and scene 2, or would like to change the order of your scenes, use the
inspector under Window / Other Panels / Scene.
24. For 5 extra credit points (if you like): Add an additional scene containing shape tweening
(morphing). Add a new scene, create an object (make sure that this object is NOT a symbol, shape
tweening works only on objects that are NOT symbols). Please note that, if you tween regular
shapes (for example a rectangle into a circle), you will not have to use the Break Apart feature (it
is only necessary for text).
25. Check your work. Control / Rewind and Control / Play your movie. Save your file in your
COSC109/CompletedAssignments folder using the File / Save As option and name your movie
Lab07_anim2.fla. Remember, you need the movie in native .fla format if you would like to make any
changes at a later time.
26. Export your movie for posting. Select Control / Play All Scenes (to show all scenes of your
movie), select Control / Rewind (to make sure your movie starts from the beginning), select Control
/ Loop Playback (this option will continuously play your movie). Now we are ready to export the
movie to Flash Player format. Select File / Export Movie. In Save as Type, select Flash Movie
(*.swf), as file name type Lab07_anim2.
21
27. You should now have two files saved, Lab07_anim2.fla and Lab07_anim2.swf.
28. Check your work by going to your file directory and double-clicking on filename Lab07_anim2.swf.
Your movie should now be playing in a continuous loop.
Grading Criteria




Movie must contain 2 scenes in total
Scene 1 contains the digital picture with spotlight (using mask layer)
Scene 2 contains your credits (must be shape tweened)
Movie must be saved in .swf format
Submitting your file:
Send an e-mail to webster@towson.edu and attach one file: Lab07_anim2.swf
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #7”
22
Lab 08: Holiday Greeting Card
Overview
The goal will be a Flash greeting card for a special occasion such as Halloween, Thanksgiving, Christmas,
Valentine's Day, Birthday, Wedding Anniversary. The card will feature text, images, and sounds appropriate
to the occasion, and will be personalized as coming from you, the sender, to a specific other person, the
recipient.
Like greeting cards on paper media, this electronic greeting card should have two pages. Each page is
implemented by a separate scene in Flash. The first page should have a greeting or title. The second page
should have material which continues the card, such as a verse or a conclusion to the greeting or title. The
name of the recipient and your name as sender should be on the card, either on the first or second page.
Graphics and sounds, suitable to the occasion should be selected.
Grading Criteria:
To receive full credit for this assignment, your greeting card must include:





sound,
animation (similar to previous labs)
two scenes,
your full name and class section.
Additionally, your Flash Greeting Card will also be graded on aesthetics, effort, and creativity.
Required Material: Headset (if working in COSC Labs).
Procedure
1. On a piece of paper, design your greeting card. Make a rough sketch of the text and images (indicate
the sounds) of what will appear on each screen. Your greeting card should consist of two pages.
2. It is a good idea to get your sound files before you start working on your card. Flash can use
sound files in .mp3 format or .wav (Windows) or .aiff (McIntosh) or. The .mp3 audio format offers
small file size and excellent quality. However, it can be a little challenging to find sound effects in
.mp3 format. Most sound effects are in .wav format. Both formats are easy to use in Flash. Flash
offers some generic sound clips in a library under Window / Common Libraries / Sound (the easiest
way to include sound). However, there is also a wealth of sound files on the web and many search
engines offer to search by file type. It is required for this assignment to use sound.
3. If you would like to import clipart, try the sites http://www.webdeveloper.com/animations/ or
http://www.animfactory.com/. Flash can import several graphics files, but it is probably best to use
one of the more common formats like .gif, .jpg. The .bmp format is not recommended because it
would cause a large file size. Many other resources are available on the web, please feel free to use
any resource of your choice. It is not required for this assignment to import clipart.
4. Importing clipart into Flash can be tricky. It will be easier to create a drawing or a greeting title
than to import clipart, especially when the clipart is already animated.
23
5. If you decide to import clipart, use File / Import to import clipart. It is recommend to use a
separate layer for each clipart object you import. If you want to move imported animated clipart to a
different location on the screen, make sure to move the object in all imported keyframes. A feature
called onion skinning shows outlines of all objects in surrounding keyframes and can be very
helpful when you want to move imported animated objects. Turn onion skinning on by clicking one
of the icons showing overlapping rectangles directly under the timeline.
Here is how you can extend the length of your imported animated clipart by copying frames:
Hold down the control key. Click and hold down the left mouse key in the first keyframe. Drag the
mouse over to the last frame of your animation. Select Edit/Timeline/Copy Frames. Click in the first
available empty frame after your animation. Select Edit/Timeline/Paste Frames. Repeat as desired.
Sometimes Flash is unreliable to import clipart objects and they won't show correctly when playing
your movie (especially when using the clipboard). If this happens, it is best to try a different object
than the one that causes trouble.
6. Copy all files you will be needing to H:\COSC109 folder.
7. Create your greeting card frames. Refer back to the instructions in from Labs 5 – 7. Two separate
scenes will help you to organize your card. The first scene should contain the cover of the card, the
second scene should contain the message you usually see on the inside of the card. Make sure that
the cover and message stay on the screen for some time (means that the objects are visible for a
certain number of frames). Your name is required to show somewhere on the greeting card.
8. Create the 2 scenes now. Save your flash file as filename Lab08_GreetingCard.fla in your
COSC109\CompletedLabAssignments folder.
9. Incorporate sound after you are finished creating the two scenes of your card. If you
downloaded a sound file, you will need to import the sound file into the library of our Flash movie.
Choose File / Import to Library, navigate to your sound file, click on OK. You can now see your
sound file in the library (Window / Library). If you are using a sound clip from the Flash Common
Libraries, you can go directly to Window / Common Libraries / Sound and select a sound clip from
this library.
10. Sound files should have their own layer in Flash. Insert a new layer and name it "sound". Insert the
keyframe using Insert / Timeline / Keyframe at the frame where you want the sound to start.
11. The next step is to play the sound at a specific frame in our movie. The most intuitive method to
incorporate sound into your movie is the drag and drop method.
12. Open the movie's library using Window / Library (or Window/Common Library/Sound). Your
sound files should be listed in the lower half of the library window. Click on the requested sound file,
hold down your left mouse button and drag the file onto the canvas. A wave representing the sound
appears in the sound layer.
13. Select Control / Play all Scenes. Control / Rewind your movie and Control / Play it.
14. If your sound file is very long and you would like to stop playing sound at a particular frame, click this
frame in the sound layer and make it a keyframe. In the Properties window, select the drop down
box to the right of Sound: box and select Stop. Your sound will stop playing in this keyframe.
15. You may have to look back into animation 1 and animation 2 for specific instructions regarding layers,
scenes, rewinding, exporting the movie and so on.
16. Resave your flash file (click on the Save icon). Your greeting card must now be saved in .swf format
for e-mailing.
24
Export your movie for e-mailing. Select Control / Play All Scenes, select Control / Rewind,
select Control / Loop Playback (this option will continuously play your movie). Now we are ready to
export the movie to Flash Player format. Select File / Export Movie. In Save as Type, select Flash
Movie (*.swf), as file name type Lab08_GreetingCard.
Check your work by going to your file directory and double-clicking on filename
Lab08_GreetingCard.swf. Your movie should now be playing in a continuous loop. If it looks OK,
you’re ready to e-mail it.
Submitting your file:
Send an e-mail to webster@towson.edu and attach one file: Lab08_GreetingCard.swf
with the Subject Heading “COSC 109.102: Submitting Lab Assignment #8”
25
Lab09: Scanner Story
Overview
In this project you will use a digital photograph which features you and a personal interest such as




a friend or family member
an activity you enjoy doing
a career or professional interest
a situation that was unique or funny
You will crop and upload the scanned image along with a a narrative or descriptive story which will complete
the story. The story will introduce the use of some HTML tags embedded in your story text.
Required Materials


a photo in digital form
MS-Word Software, or any other application package that allows you to save a file “Single File Web
Page” (*.mht) format.
Note
This step will introduce the use of some basic HTML tags. HTML tags contain formatting instructions for
text placed on the World Wide Web. HTML tags usually come in pairs, a beginning tag and an ending tag.
All tags are enclosed in angled brackets. The ending tag includes a slash / with the tag.
For example, the following would make the text in between the brackets appear BOLD when displayed on
the World Wide Web: <B>This text is bold</B>
Procedure
In this assignment, we will incorporate a digital photo to compose a story about the photograph. The story
must be at least two paragraphs long, and will use HTML tags for formatting.
Reduce the size of the digital image to be around 2in x 3in. Use Irfanview (we used it for the digital
photography lab) to reduce the size.
To begin:
1. Identify the digital photograph you are going to use for this assignment and reduce the size to
approximately 2in x 3in.
2. Star MS-Word at your PC.
3. Insert your digital picture into the document.
4. Enter a descriptive title for your document
5. Enter 2 paragraphs worth of text describing your picture.
26
6. Enter your name, course and section number on the page.
7. Format your document, incorporating the following formatting features:





Colored Text
Different Font sizes
Bold Text
Underlined Text
Italics Text
Save your document to your COSC 109 folder under the filename Lab09 (.docx for MS-Word).
With the file still visible on the screen, save the file again as a Single File Web Page (.mht extension only):
File / Save As / (keep the Lab09 filename) / In the “Save as type” dialogue box, select the file type for Single
File Web Page (*.mht, *.mhtml) / Save
Close the file and close your application software (MS-Word).
Inspect Your Work
1. Using either “My Computer” or “Windows Explorer” Navigate to your COSC109 folder and locate your
Lab09.mht file.
2. Using your mouse, double click on the Lab09.mht filename.
3. Your web browser of choice should open, and your Lab09 file should open as a web page.
4. Select View / Source to see the html code that was used to build your web page.
5. Identify as many codes as possible (Bold, Underline, et.)
6. Close the source window and your web browser.
Submit your file: Send an e-mail to webster@towson.edu and attach one file: Lab09.mht (do not send
Microsoft Word version of the file), with the Subject Heading “COSC 109.102: Submitting Lab
Assignment #9”
(Ex.of Original MS-Word document)
(Ex. of source code after saved as a .mht web page file)
27
Lab 10: Public Web Home Page
Overview
In this exercise you create your public web page. This page will be your opportunity to share something
about yourself, your interests and your creative work with others in the Towson University community and
throughout the web. This exercise requires a TU user account.
This exercise uses MS Expression Web as a Web Page creation tool. MS Expression Web is a WYSIWYG
(what you see is what you get) HTML generator and can display your page exactly the way it will later be
seen on the World Wide Web. MS Expression Web should be used on a Windows-based PC.
To be able to publish material on the World Wide Web, we need space on a web server. At Towson
University, space for your public web page is provided on the Towson University tiger server. MS Expression
Web allows working directly in your account on the tiger server. To use this feature in MS Expression Web
you must be securely logged in to the campus network with your TU user account.
Instructions for this assignment are slightly different depending on how you connect to the Towson
University network.

If you are working on one of the computers in the computer science laboratories, please make
sure to login with your own username and password. Please disregard the instructions in the yellow
boxes.

If you are working on a computer at home, please make sure to follow the steps in the yellow boxes.
If you are working on a computer at home:
You must first establish a secure connection with the campus. You can do this by running
the free Cisco VPN Client available for download from OTS.
To download the free Cisco VPN Client:
1.
2.
3.
4.
5.
Open http://www.towson.edu/scs
Click the Downloads & Forms link, then select the Software Downloads link.
Click the For Faculty, Staff and Students heading.
Log in with your Towson username and password.
Follow the instructions under Cisco VPN Client.
For this and all subsequent web assignments, the public web page you submit is required to reside
on tiger. Web Pages residing on other web servers will not be accepted.
You can download a trial version of MS Expression Web for use on your home computer. Download trial
version here: http://www.microsoft.com/expression/try-it/
28
Required Materials




TU user account
digital photo showing you (and possibly friends and/or family).
one Flash animation in .swf file format
MS Expression Web software
Procedure
If you are working on a computer at home:
Establish a secure connection first. Start the Cisco VPN Client by selecting Start/All
Programs/Cisco/CiscoAnyConnect VPN Client. When prompted at the logon screen, log
on with your TU username and password.
Map a Network Drive to your web folder on Tiger. Right-click on the My Computer icon
and select Map Network Drive. Under folder, type in //tiger/jstude1/WWW (replace jstude1
with your username) and click. De-select the checkbox "reconnect at logon".
When prompted for your username and password, please type your username as follows:
TOWSONU\jstude1 (replace jstude1 with your username), then enter your password.
1. Open your web on tiger. Open Start/Programs/MS Expression Web. In the main menu (on the top of
the page) select Site/Open Site. In the field Site Name at the bottom of the dialog box type in the location of
your web space on tiger: \\tiger\jstude1\WWW (replace jstude1 with your tiger username). After a little while
you should see a logon box asking you to enter your username and password. Type in your TU username
and password.
If you are working on a computer at home:
You will not have to re-enter your username and password
MS Expression Web now displays the contents of your web folder on the tiger server. MS Expression Web
opens a blank page and allows you to compose a web page.
NOTE: MS-Expression Web is installed on all COSC Lab PCs in all COSC Labs. If working at a COSC Lab PC, start
the software by going to
Start / All Programs / Microsoft Expression / Microsoft Expression Web 4
2. Copy additional files you plan to use into our web folder. In our case this will be our digital picture
and one of our Flash Animations. Minimize the screen for MS Expression Web (click on the
underscore in the upper right corner).
i.
Copy your digital image into your web folder. Locate your digital image, right-click on your picture
file and select Copy. Switch to MS Expression Web (click the MS Expression Web application
button on the task bar). In your folder list to the left of the screen, scroll up to the very first line. It
should have the picture of a folder and say something like \\tiger\jstude1\WWW. Right-click on this
29
ii.
line. Select Paste. You should now see your image file listed in the folder list. If you can't see your file
listed in the Folder list, press the F5 button to refresh the display.
Copy your Flash animation into your web folder. Locate your Flash animation, right-click on the
animation that you would like to show on your web page and select Copy. Switch to MS
Expression Web (click the MS Expression Web application button on the task bar). In your folder list
to the left of the screen, scroll up to the very first line. It should have the picture of a folder and say
something like \\tiger\jstude1\WWW. Right-click on this line. Select Paste. You should now see
your flash file listed in the folder list. If you can't see your file listed in the Folder list, press the F5
button to refresh the display.
3. Start developing your page. Please read the following carefully. To make your page the home page
(the default page users will see when they first visit your site) on the tiger server, the page must be
named Welcome.html. When you had your account enabled for MS Expression Web, this page
(Welcome.html) was created by Towson's Computing and Networking Services. It informs any viewers that
your page is under construction and will be changed soon.
4. Change the content of your Welcome.html home page. We want the page to contain personal
information and post some examples of our class work. To open the page, double-click on the file name
Welcome.html. The file opens and you see the content of your home page as it was produced by Computing
and Networking Services.
5. If you already have a home page on tiger: Create a new page using File / New Page and save this
page as cosc.html.
6. First we change the background. Let’s give the page a colored background. Our temporary page as
created by OTS contains a gray background. You can either keep this background or replace with a choice
of your own.
To remove existing background: Choose Format / Background. Under Formatting remove the
checkmark in Background Picture.
To add a colored background of your own choice: Click on the drop-down box next to Background in
the Colors section. Select the last option, More Colors. You now see a color wheel. Choose any color of
your choice for your page's background. Make sure to choose a color that does not take the reader's
attention away from the text.
7. Type a header for your page. Type something like "Home Page of Joe Student" or "Welcome to my
Home Page" (without the quotes and substituting your own name).
8. Change the font of your header. Using the mouse, highlight your heading, format the heading to be bold
and a large font.
9. Center your heading. With your heading still highlighted, in the formatting toolbar, look for the alignment
icons and select the "Center" icon which corresponds to the <CENTER> </CENTER> HTML code. Unselect
any highlighted text.
10. Select a font and color for the rest of your page. Choose a font and font color of your choice. You
find the font color to the right of the formatting tool bar (it's the underlined A). Remember that the visitor of
your page depends on the fonts that are installed on the visitor's PC. It is best to choose a common
30
font, this increases the probability that the font will be displayed as intended. An unusual font that is not
present on the visitor's PC will most likely be replaced by a different font.
11. Introduce yourself. Click below the Heading. Use "Left" justified for your text alignment, and type a
short paragraph introducing yourself.
12. Insert your digital image. Use the file containing your cropped digital photograph (from the digital
photography assignment) or any other digital image of your choice. Choose Insert / Picture / From File.
Your digital image file appears in the file list. Click on the file. Make sure that this URL box contains
ONLY the filename of your image. DELETE all other characters (like file:///a:/. You should see only
the filename, for example: mypict1.jpg. Click O.K. You are now prompted to enter content for the
alternate text and long description attributes for the image. These attributes are necessary for certain
browsers (e.g. screen readers for the visually impaired). Enter a short description of your image in the field
for alternate text and a longer description in the field for long description., then click O.K. You can now
adjust the size of your image. To adjust the size of your image, click anywhere on the image and drag the
handles that appear until your image has the desired size. Center the image.
13. It is important to understand that inserting your image inserts a placeholder into your home page
and not your actual image. Whenever your home page is displayed, your image is inserted at the particular
area where you inserted the place holder. This is why your actual image file has to be present in the
WWW folder.
14. Let's check the "work behind the scenes". While we are using MS Expression Web as a WYSIWYG
tool, MS Expression Web composes our document using HTML code. You can check this HTML code by
selecting the SPLIT tab to the lower right of your editing screen. When clicking this tab, the screen will
split into two parts, showing the actual HTML code generated by MS Expression Web as well as the final
product as it will appear on the web. To get back to regular editing mode, click on the Design tab.
15. Create a table containing information about yourself. Use the "Table" tool to insert a table. In the
menu bar, select Table/Insert Table. Insert a table with 3 rows and 2 columns. Press enter 2 times to start a
new paragraph. Click on the table tool and select "3 by 2 table".
Edit the table until it looks like this:
Email::
jstude1@towson.edu
Year:
Sophomore
Major:
Biology
Notice that the above email address is underlined. Once the page is published and a user clicks on the
email address, the browser will automatically bring up the configured email program and the user can send
an email to this address. To ensure that MS Front Page recognizes an email address and links it properly,
just add a space character (press the spacebar once) after typing the last character of your email address.
16. Adjust the width of your table. Right-click anywhere inside the table and select Table Properties.
Unclick the "Specify width" box. The values should be grayed out. This will adjust the width of your table
to the contents of the cells.
31
17. Save our page. Use File / Save As to save the document again as Welcome.html. A dialog
box informs you that the file already exists. Click OK to replace the already existing file with the new,
updated version.
18. Create a navigation structure (how to do this is described in the following steps, steps 19 and
20). This navigation structure should be located on the top or bottom of your page. A navigation structure
gives users easy access to linked pages or other linked material you want to be accessible from your home
page.
19. Create a link to the Flash Animation we downloaded in the first step. This will be your first link of
several links (to come in later assignments). Type a description for the link. Enter the description
below the table. This description should be something meaningful for the visitor who is looking at your page.
Do NOT use the File Name for your description. Complete the description by typing the vertical bar
character. The vertical bar character will separate this link from others to be added at a later point. An
example description could look like the following:
Flash Greeting Card |
20. Link the description to the actual file that visitors will see when they click on the link. Use the
mouse to highlight the description. Click on the Link tool (the globe with a chain link) in the standard
formatting toolbox. If you can't see the icon showing a globe with a chain link, you may have to extend your
toolbar by clicking on the arrows pointing to the right). Your files appear in the file list. Click on the
appropriate file. Make sure that in this URL box contains ONLY the filename is entered. DELETE any
other characters. You should see only the filename, for example greeting.swf. Your description
should now show in blue color and be underlined. This indicates that your description now is a
hyperlink.
21. It is important to understand that inserting a hyperlink inserts a placeholder into your home page
and not your actual Flash animation. Whenever a visitor clicks on the hyperlink for your animation, your
animation will play. This is why your actual Flash file has to be present in the folder list. (This is why we
copied the two files in the beginning of this exercise :)
22. Save your web pages again using File / Save.
23. Check your page on the World Wide Web. You are now published on the World Wide Web. You can
look at your page using any computer with an Internet connection. To look at your web page, open Internet
Explorer and type: http://tiger.towson.edu/~jstude1 (replace jstude1 with your TU user name) in the address
box of the browser. You can also view your page at: http://tiger.towson.edu/users/jstude1. Check your page.
32
24. File Permission. To ensure all pages and files have the proper permissions and will show correctly,
please use the following procedure:
Please note that any time a file or directory is added to a Tiger web site, the student must use this tool to
reset permissions on the web site so that it is viewable on the Web. Students can use a new self-service tool
that can create or reset their Tiger web site. The link for this tool can be found on the WebDisk logon page
(http://webdisk.towson.edu) in the upper right: “Tiger Quota and Web Tools.”






Click on Tiger Quota and Web Tools
Log in using your username and password
Click the button Create or Reset Tiger Website
View your page in a browser
Click the browser refresh button
Your page(s) should now show correctly
You need to follow the procedure above every time you make any changes to your web pages.
If you are working on a computer at home:
Disconnect your secure connection. Select Start/All Programs/Cisco/CiscoAnyConnect
VPN Client. Click on the Connection tab, then click Disconnect.
Grading Criteria
Home Page must contain




Header and Introduction paragraph
Digital Image
Table containing your academic year, major and email
One hyperlink linking to one of your Flash animations as beginning of navigation bar
Submitting your URL for grading:
Send an e-mail to webster@towson.edu with the Subject Heading “COSC 109.102 Submitting Lab
Assignment #10”
The body of your e-mail should simply contain the URL of the webpage you just created
(example: http://tiger.towson.edu/users/jstude1)
33
Lab 11: Term Project Proposal
Carefully read the task Term Project (Lab 15 Handout). Prepare and submit a term project proposal. You
can discuss your project ideas with the instructor in class or by email.
Grading Criteria
Your grade will depend on the following points.
1. A project proposal submitted via e-mail to your instructor.
2. If two students are working together, only one proposal is needed, but that proposal should clearly
indicate the full names of all students (max 3) working on the term project.
3. The proposal must answer the following questions:
4. What is the title?
5. What coherent message or story will your project deliver?
6. A significant application of the technical elements and skills from the course laboratory assignments
will be required. List some of the technical elements and skills you would expect to use in the
proposed project.
7. Your Term Project for the course will be worth twice the amount of points as a regular weekly lab
assignment. As such, the final project must be bigger, better, and more creative than one of the
weekly assignments. See the handout for Lab 15: Term Project for additional information.
Submitting your Project Proposal for grading and consideration:
Send an e-mail to webster@towson.edu with the Subject Heading “COSC 109.102 Submitting Lab
Assignment #11”.
Your Project Proposal should be in MS-Office Word format and should be an attachment to your email.
34
Lab 12: Web Page Enhancement, Recipe Editing
Overview
This lab will focus on extending our web site by adding an additional page. We will work with ordered and
unordered lists using recipes. You will select a recipe from the http://www.recipe.com/ site, edit the recipe,
and add it to our home page. (You can use a recipe from any site of your choosing, or, it can also be an original
recipe.)
Required Materials:
Completed Assignment Public Web Home Page (Lab 10)
MS Expression Web (MS Expression Web should be used on a Windows-based PC)
Procedure
1. Visit the web and search for a recipe of interest to you. If you have a favorite recipe of your own feel
free to use it for this assignment. A suitable recipe for this project should have a list of all required
ingredients and list of all required cooking steps in sequential order. The recipe also should not be too
long.
2. Minimize the browser window for now, we will need it later for reference.
If you are working on a computer at home or on your own computer on campus
(wireless):
Establish a secure connection first. Start the Cisco VPN Client by selecting Start/All
Programs/Cisco/CiscoAnyConnect VPN Client. When prompted at the logon screen, log
on with your TU username and password.
Map a Network Drive to your web folder on Tiger. Right-click on the My Computer icon
and select Map Network Drive. Under folder, type in //tiger/jstude1/WWW (replace jstude1
with your username) and click. De-select the checkbox "reconnect at logon".
When prompted for your username and password, please type your username as follows:
TOWSONU\jstude1 (replace jstude1 with your username), then enter your password.
3. Open your web on tiger. Open Start/Programs/MS Expression Web. In the main menu (on the
top of the page) select Site/Open Site. In the field Site Name at the bottom of the dialog box type
in the location of your web space on tiger: \\tiger\jstude1\WWW (replace jstude1 with your tiger
username). After a little while you should see a logon box asking you to enter your username and
password. Type in your TU username and password.
35
4.
If you are working on a computer at home or on your own computer on campus
(wireless):
You will not have to re-enter your username and password
5. MS Expression Web now displays the contents of your web folder on the tiger server. MS Expression
Web opens a blank page and allows you to compose a web page.
6. We will now create an additional page for our web site and later link this page to our home
page. Create a new page by selecting File / New / Page. Under the General category select HTML.
7. First, let’s give the page a colored background. Choose Format / Background. Click on the dropdown box next to Background in the Colors section. Select the last option, More Colors. You now
see a color wheel. Choose any color of your choice for your recipe's background. Make sure to
choose a color that does not take the reader's attention away from the text.
8. We also want to modify the text which is displayed in the title bar of the browser. Select File /
Properties to access the page properties and add a title in the Title: text box, for example "Joe
Student's Recipe Page".
9. We are now ready to start typing our recipe. Don't worry too much about formatting at this point, we
will format the recipe when we are finished typing it.
10. Type an appropriate title. Press the enter key 2 times. Type your ingredients list. Please do not
copy and paste from the web, this often includes invisible formatting that will prevent us from using
standard formatting commands. Make sure to type each ingredient on a separate line (press the enter
key at end of each line). When you are finished typing all ingredients, press the enter key 4 times.
11. Now type the list of cooking steps. At the end of each cooking step, make sure to press the enter
key to start each step on a new line. When finished typing all the cooking steps, press the enter key 2
times.
12. Type the URL of your original recipe to give proper credit to the author of your recipe.
13. Put your own name, and date at the bottom of the recipe.
14. We will now format our recipe using the bulleted list and numbered list feature of HTML. Highlight the
title and select any large font of your choice using Format / Font. If you wish, you can also choose a
different text color or special effect for your title.
15. Next, select all ingredients with your mouse so that they appear highlighted. Choose Format /
Bullets and Numbering from the menu. Click on the Plain Bullets tab and select a bullet style of
your choice. Click OK. This will format our ingredients list as a bulleted list.
16. Our next step is to format the cooking steps as a numbered list. Select all cooking steps with your
mouse so that they appear highlighted. Choose Format / Bullets and Numbering from the menu.
Click on the Numbers tab and select a numbered list style of your choice. Click OK. This will format
our cooking steps as a numbered list.
17. To save the document, choose File / Save As under the File menu. Name the file recipe.html and
make sure that the file type shows Web Pages.
18. Continue to work on your recipe. Format the text attractively and experiment with MS Expression
Web's format features (e.g. bold, italics, underline, highlighter).
19. Save your recipe as recipe.html.
20. Check the HTML code that MS Expression Web created. Click on the SPLIT tab at the bottom of your
editing screen. Click on the Design tab to return to editing mode.
21. Link this recipe page to your home page you created in the last assignment. Add a link to the
recipe on your home page next to the link for your flash animation/picture. To link your new
36
page to your Home Page, you will have to access your Home Page and add a link that will take the
user to your new page.
22. Access your Home Page by double-clicking on your Home Page Welcome.html. Type a
description for your new web page, for example: "Cheesecake Recipe". Highlight the
description. Click on the link tool (the globe with the chain) to create a hyperlink. When prompted
for the URL, delete the "http://"- part and write the filename of your page in the URL text box (for
example: recipe.html). The URL should contain only the filename, not the http://..... reference).
My Flash Greeting Card | Cheesecake Recipe |
23. Enhance your page using clipart or other images. Search the web for a suitable animation or
image. Right-click on the animation or image you wish to insert. Select Copy. Switch to MS
Expression Web (click the MS Expression Web application button on the task bar). In your folder list
to the left of the screen, scroll up to the very first line. It should have the picture of a folder and say
something like http://tiger.towson.edu/~jstude1. Right-click on this line. Select Paste. If you can't
see your file listed in the Folder list, press the F5 button to refresh the display. Click to select a
location on the page where you would like to insert your animation or image. Use Insert / Picture /
From File, select your animation or image and insert it.
24. Check your page on the World Wide Web. To look at your web page, open Internet Explorer and
type: http://tiger.towson.edu/~jstude1 (replace jstude1 with your TU user name) in the address box of
the browser.
25. Permission issue as of 1/14/2010. There seems to be a permission issue with the recent tiger
update, and some pictures and/or links require an additional step to show correctly, following is the fix
that will correct this permission issue (sorry to make you go an extra step) :
Please note that any time a file or directory is added to a Tiger web site, the student must use this
tool to reset permissions on the web site so that it is viewable on the Web. Students can use a new
self-service tool that can create or reset their Tiger web site. The link for this tool can be found on the
WebDisk logon page (http://webdisk.towson.edu) in the upper right: “Tiger Quota and Web Tools.”
o
o
o
o
o
o
Click on Tiger Quota and Web Tools
Log in using your username and password
Click the button Create or Reset Tiger Website
View your page in a browser
Click the browser refresh button
Your page(s) should now show correctly
37
If you are working on a computer at home or on your own computer on campus
(wireless):
Disconnect your secure connection. Select Start/All Programs/Cisco/CiscoAnyConnect
VPN Client. Click on the Connection tab, then click Disconnect.
Grading Criteria
Recipe Page must contain





Header for the Recipe
List of ingredients as a bulleted (unordered) list
List of cooking steps as a numbered (ordered) list
One digital image of your choice on the recipe page to illustrate the recipe
Recipe page must be linked to Public Web Home Page
Submitting your URL for grading:
Send an e-mail to webster@towson.edu with the Subject Heading “COSC 109.102: Submitting Lab
Assignment #12”
The body of your e-mail should simply contain the URL of the webpage you just created
(example: http://tiger.towson.edu/users/jstude1)
When I open your webpage with the URL you provide, I should be able to see the original “My Flash
Greeting Card” link, and the new “Cheesecake Recipe” link.
example: My Flash Greeting Card | Cheesecake Recipe |
Lab 13: Term Project Story Board
(Non-graded Lab Assignment)
Because of all the links to other pages, this handout is best viewed on the web at:
http://pages.towson.edu/webster/109/109_Labs/index_new.htm
There is nothing to hand-in or submit for Lab 13. But this activity is required and essential to help you
organize and prepare for your Final Term Project (Lab 15)
38
Lab 15: Term Project
Your final project in this class is required to be more extensive than the weekly lab projects and will be worth
twice as many points as previous lab assignments.
Your project should demonstrate a significant application of technical elements and also demonstrate
originality and creativity. No minimum length is required, but your project will be judged based on the
instructor's assessment of the amount of creative energy required in its production. A famous quote is that:
creativity is 1/3 inspiration and 2/3 perspiration. Students may work individually or in partners on this project.
Choices for projects are:


Development of a Flash movie or
Development of a creative, informative web site (several linked pages produced by yourself). All
web projects (meaning all the pages you produce) must reside on your Towson University
user account. No pages residing on other servers will be accepted. Take a look at how to
implement some advanced web page features (sound, animation, etc.) .
The project should deliver a coherent message or story. The best projects tend to result from a choice that
relates to interests of the students working on the project.
Some ideas for suitable projects
Web Projects
Flash Projects
My home town, city, country
Seasons or changing of seasons
My car, pet, family
Anything that moves, e.g. car chases, air plane
flights
Information pages about your major
Natures scenes, e.g. a day at the beach,
thunderstorms
Information pages about your favorite sports
Sports scenes
Travel brochure about a destination of your choice
Information movie about your major
39
Grading
Area
Grading Criteria
Points Possible
Basic Content
Project shows evidence of understanding of
basic Flash or FrontPage concepts
40
Complexity
Project shows evidence of ability to use
sufficient degree of complex Flash or FrontPage
concepts (check out the advanced concepts
listed above)
40
Multimedia
Project shows sufficient use of multimedia (text,
graphics, animation, video, sound, etc.)
40
Appearance
Project reflects overall theme and is appealing
to the target audience
40
Creativity/Originality
Project is exciting and original
40
Total Points
200
Submitting your project:
Send an e-mail to webster@towson.edu with the Subject Heading “COSC 109.102: Submitting Term
Project, Lab #15.
Attach in MS-Word format, the following file:
1. Message: The following information is required
o
o
o
o
o
Project author(s) - It is required to list all authors
Title of your project
Project Notes which explain several of the following items:
 Why you chose the subject area
 The overall message you were trying to convey
 The artistic effect you were trying to create
 Some choices you made regarding composition and design
 Some choices you made regarding technical (computer) issues
If you created a Web Project
 provide your Home Page URL
 link your project to your home page with a link clearly stating that this is your
term project, for example: click here to see my term project (similar to the recipe page
we created)
If you created a Flash Project

Include your movie as an attachment to the e-mail in .swf format.
40