workbook by liwenting


									                            Workook for NMI 4110 / TELE_4290
                            Developed by Emuel Aldridge

                                                  QuickTime™ and a
                                         TIFF (Uncompressed) decompre ssor
                                            are neede d to see this picture.


Introduction To Local And Internet File Management                             2
Introduction to Dreamweaver.                                                   4
Make a page of your classmates                                                 7
Intro to Nested Tables and Layers                                              8
Intra-document links and image maps. Naming the class.                         9
Using frames to target websites                                                11
Quick and Dirty Website Lesson Using Framesets                                 12
Forms Intro                                                                    13
More Fun with Forms                                                            15
Fireworks Rollover Button Exercise                                             16
CSS (Cascading Stylesheets): Lesson 1                                          19
CSS Background Lesson 2                                                        20
First Photoshop Assignment: Image Editing and Resizing                         22
Second Photoshop Assignment: Image Selection and Cleanup                       23
Third Photoshop Assignment: Making rollover buttons                            25
Flash: Introduction to Tweens                                                  27
Flash: Motion Tweens and Movie Clips                                           29
Flash: Movie Clip Control                                                      32
Working With Scenes To Organize Flash                                          34
Introduction to timeline-based audio (building a jukebox)                      37
Introduction to the Sound Object (advanced jukebox)                            38
Build a face: An intro to draggable movie clips                                41
Building an interactive game with a little help from algebra                   43
Game Enhancements                                                              45
Going Mobile                                                                   47
Building a fully interactive screen                                            48
The training wheels come off. Are you ready?                                   50
Passwords and building a Multiple Choice Exercise                              51
Timing is Everything                                                           52
Introduction to Video                                                          54
Appendix (don't miss it)                                                       55
Introduction To Local And Internet File Management

Almost everything that you produce in this course should ultimately make its way to the Internet
where it will be accessible through a website that you will create. Having everything on the
makes it convenient for me to assess your work and you end up with a portfolio that you can use
to show your work to other people, including prospective employers.

As you proceed through this course you will generate a collection of on a "local" computer (most
likely the one that you are sitting in front of right now). You will move to another computer
known as a web server that is physically located somewhere else (in this case California).

When I first started teaching this course I was surprised to discover that many students were
confused by the distinction between files stored on their computer and files placed somewhere
else on a web server. Finally it dawned on me that today's typical college students came of age
in homes and schools where the computers were connected to the Internet which tends to blur the
distinction between a local and a remote computer. When I started using computers I had never
heard of the Internet so it has always been clear to me that my computer is one thing and the
Internet is something else (except when I was running a web server but that is another story).

In this course you will create several types of files on the local computer that is inches away
from you and link all of the files on a local website that ONLY works on the local computer.
Once everything works well on your local computer you will use a type of program known as an
FTP client to move the local website and all of the files to another computer in California that
functions as a web server, that will make all of your work available to wide wide world. Enough
verbiage, time for an exercise that shows how it works.

Picture yourself: Here and on the web.

1. Turn on the isight camera on top of your computer by twisting the lens so
   that it is open and you can see the lens. Make sure that it is pointing at your

                  2. Open the QuickTime player. The QuickTime player, like
                     most applications, is inside of your applications folder. To
                     get to the applications folder, double click on Macintosh
                     HD. On the left side of your screen you should see the list
                     shown at right. Click on Applications.

Alternatively, you can use Spotlight, apple’s search feature, by
clicking on the magnifying glass in the upper right portion of the
screen. Start typing in QuickTime and click on the QuickTime
player when it appears.

3. Once QuickTime is launched, go to File- New Movie Recording. You should see yourself on
   the screen. If not, move the isight around until you have a clear view of your face.
4. Click the red button and start recording. Play around with your expressions. Smile. Frown.
   Look Serious. Now click the black button to stop.
5. Move the little triangular shaped slider
   (shown below with a rectangle around it)
   until you find the expression that you like
   best. Hate them all? Repeat steps 3-5 till
   you get the picture you deserve.

Once you have the picture you want, go to
File-Export. A box will appear like the one
below. Choose the Movie to Picture option
by clicking the long oval button next to
Export:. Use Photo-JPEG for your picture’s
format by clicking the other long oval button
next to USE:. Name the picture after
yourself (use your full name with an
underscore between first and last as in emuel_aldridge) and be sure to add the .jpg suffix. For
now, save the file to your desktop.

Duck (ftp) your picture to the web.

Earlier I used the intimidating term "ftp client" to describe the class of programs that are used to
move content from your computer to your website. The ftp client we are going to use has the
very un-intimidating name of Cyberduck. In spite of the funny name Cyberduck works as well as
any ftp client I have ever used and it's free, although it will occasionally beg you to donate
money to its creator.

1. Use spotlight to locate cyberduck and start it up. Click "New Connection".
2. Type (a) into the server field; (b) mystudent into the username
field; and (c) jefflunn into the password field.
3. Click Connect.
4. Once you are connected, you should
see a screen that looks like the one at
right. is the domain name that
will hold your website for this class.

      5. Open and inside you will find a folder named student.

      6. Open student and inside there should be 3 additional folders with names that roughly
      correspond to the time of your class: 9am, 10am, and 11am.

      7. Open the folder that corresponds to your class time and create a new folder by either right-
      clicking or by using the file menu. Name the new folder with your first initial and last name (for
      example: ealdridge).

      8. Drag the picture of yourself that you saved onto your desktop into the folder with your name.

      8. Using your web-browser navigate to your new folder, starting with (the rest
      should be obvious). Ultimately you should end up in an empty folder named after you with a
      path name like If everything is working properly
      your picture should be inside. Congratulations you are now on the Internet. Click on the picture
      to see yourself.

      9. Copy the address of your picture from the browser's address bar (something like and send it to your mom.

                                   Introduction to Dreamweaver.
When the WWW first arose back in the mid-nineties most people (including myself) produced content for
the web by producing and editing what are called html-tags (html stands for hypertext markup language).
One of the reasons that the www grew so quickly is that any text editor such as notepad can be used for
html editing and it really isn't that hard to produce a basic webpage. It wasn't long, however, before web
designers began to produce pages with fancy formatting and to tie them together into huge complex
websites that were challenging to maintain and update. As web development became more complex,
software tools were developed to make the job easier and these days there are lots of different ways to
build a website. The most popular, and arguably the best, of these tools is called Dreamweaver, which is
the program that you are about to be introduced to.

                                          Dreamweaver's Site Tool

The first step in building a website is with Dreamweaver is to decide where on the local computer to
build and store it. In this lesson you will create the location on your computer where you will store all
of the work that you will later upload to the Internet. You will also be introduced to Dreamweaver's
site tool and file panel. The purpose of both of these tools is to help you manage the folders and files
that go into making a website.

 1.   Start Dreamweaver

 2.  Use finder (apple key +f) or look inside of the applications folder in the Macromedia Dreamweaver
    8 folder. Open Dreamweaver
 3. If you haven't already create a new folder inside of your Documents folder called mysite.
 4. The third to the last menu at top is named Site. Click on Site and select New Site.
 5. A site definition box will pop up and ask you a series of questions. Answer the questions in the
    following manner:
      a.       Question: What would like to name your site?
      b.       Answer: Name it after yourself, your dog, your little sister, whatever makes sense to
      c.       Question: What is the Http:// address (URL) of your site?
      d.       Answer: Leave this one blank.
      e.       Question: Do you want to work with a server technology such as ColdFusion,
               ASP.NET, ASP, JSP, or PHP?
      f.       Answer: No, I do not want to use a server technology.
      g.       Question: How do you want to work with your files during development?
      h.       Answer: Edit local copies on my machine
      i.       Question: Where on your computer do you want to store your files?
      j.       Answer: Browse to your mysite folder and select it. (this is important to get right, so
               ask for help if you need it).
      k.       Question: How do you connect to your remote server?
      l.       Answer: Select None from the drop down list.

Time to play by starting your homepage.

1. Create a new basic html file (File – New)
and save it into your mysite folder as

2. Go to Dreamweaver- Preferences. Under
Category- General, make sure that the Use
CSS instead of HTML tags is checked. Please
note, just in case you become really interested
in web design and development, that there are
many many other options as well that may be
of interest (and make sense) to you later.

      2. Go to the Window menu and make
         sure that Insert and Properties are
         checked. Next, go to the View menu

         and make sure that document toolbar is also checked. Make sure that you are working in the
         Design View.

         Next, give your document a title (in the document toolbar where it currently says Untitled

          Document). Since you are creating your home page for this course you may want to name it after

4. Click inside of the work area and type your name.

5. Select the text that you typed. Using the property inspector (see below) change the font to something
other than default. Make the same text bold, italic, and change its color and size. Type something else
and repeat the process, using a new font, size, and color. Congratulations, you have created two new
styles. Use the style menu to change the text style from style1 to style2 etc. Create another style if you
want until you find one that you like.

6. You should have a folder full of class pictures on your computer. Put it in your mysite folder if it is not
already there. If you don't have the pictures, ask me.

7. Now use your file browser (shown at right) to drag YOUR picture into the document.
The file browser is a great tool for organizing and utilizing all of the different files that
make up a website. Whenever you add files of any sort to a folder that is designated by
Dreamweaver as part of a website, the file browser finds them and makes them easily
accessible for use.

8. Type a couple of sentences about yourself Drag the picture around on the page,
placing it in the middle of the text. Watch what happens. Click on the picture. Using
the property inspector, experiment with different alignments. Click on the picture
again. Add Vertical space to the picture by typing in 50 (V space). Do the same with
Horizontal space. Now take the vertical and horizantal space away. Play around with
the various picture options until you find settings that you like.

     9.    Once you are happy with the way that your page looks, save the file into the mysite folder as
           index.html. Now preview the file by clicking on the globe on the document toolbar.
           Congratulations, you have created your homepage. You will be making lots of changes to this
           page as the course progresses.

                                   Make a page of your classmates.

1.   Create a new html document. Next, click on the table tool (from the insert toolbar or menu)
                                 and create a table with 4 columns, 8 rows with the following
     characteristics: (1) 100% width (2) 0 cellpadding (3) 0 cell spacing (4) 1 border.

2.   Insert all of the class pictures into alternating rows of the table starting with the second row.
     Use the first row to type in the names of your classmates. Save the document as
     classmates.html and test it.

3.   Finished and still have time? Create an external link from index.html to classmates.html.
     Creating an external link in this case involves
4.   typing in the name of the link (the text that your user will actually see as in "click here to see all
     of the attractive people who share this class with me),
5.   highlighting the text with your mouse.
6.   Using the property inspector to target the file that you are linking to. This can be accomplished
     by clicking on the folder that appears in the property inspector after highlighting text or the


7.   Test it. If it works upload both files to your website. Go to your website and test to see what happens. Did your picture and your classmate's
     pictures show up? No? Did you remember to upload your pictures?

                               Intro to Nested Tables and Layers

A formatting trick that is used often by web designers is known as a "nested table." In spite of
the strange name, a nested table is simply a table that has been created inside of another table.
The purpose of a nested table is to visually break a big table cell into smaller component cells.
To see how a nested table is created complete the following two steps.

   1. Make a new table with at least two cells.
   2. Make a brand new table (with lots of cells so that you see the effect) inside one of the
      existing table cells that you just made. Easy?

Now, on to layers. Like many of the html components that we will learn about in this class,
layers can be a small universe unto themselves and could eat up far more class time than we have
to devote them. The value of layers is that they provide more formatting flexibility than tables.
The downside in my experience is that they do not always display consistently across all
browsers. The purpose of this exercise is to expose you to some basic concepts and techniques
for applying layers that can become part of your personal toolkit in case you have a need for
layers on some future project.

1. Create a new html file and open your insert toolbar to
   the layout menu. Click on the "Draw Layer" tool
   (shown at far right) and draw a layer in your Dreamweaver workspace. Click on the border
   of the layer so that it is selected and looks something like
   the graphic at right. Take a look at your property
   inspector. Note the L (distance from left margin),T
   (distance from top),W(idth), H(eight) settings. Drag your layer to the right and left and up
   and down and see what changes take place in the T and L settings. Next, make your layer
   taller and wider and watch what happens to the H and W settings.
2. Reverse the process. With the layer selected, try entering different numbers into the LTWH
   settings and watch what happens to the layer.
3. Give your layer a color with the BG Color tool. Now, click outside the layer so that it is
   deselected and press the return button a few times. Note that the layer does not move. Type
   in some text and move the layer on top of the text that you just typed. The text should be
   obscured because the layer (unless you tell it otherwise) "floats" around on top of the non-
   layer elements of the page.
4. Select your layer and in your property inspector choose "Vis" hidden. Click on the desktop.
   It's gone? Use apple z to make it come back.
5. Remove the background color and insert a background image of your choice. If the entire
   image does not show, tinker with the W & H settings until you can see it.
6. Remove the background image AND background color. Now, resize your layer to 200W and
   200H. Type or paste enough text into the layer so that it "overflows" and starts stretching.
   Go to the overflow window and experiment with different settings by saving your file and
   previewing it in Safari, Firefox or another browser. Take note of what happens when you
   apply the "scroll" setting.
7. Insert an image into your main document (not the layer) and drag the layer full of text on top
   of the image. The layer should be above the image. Now, change the Z-Index setting to -1.

   Click the image, which should now appear on top of the layer. Now, reset the Z-Index to 1.
   By setting the layer below 0 you are telling the layer that it should be underneath anything
   that is visible in the main document window.

If you find yourself intrigued by or in need of layers at some point, I can loan you a book with an
entire chapter devoted to layers and how to implement them in conjunction with stylesheets
(which we will learn more about later). As mentioned, in
my experience layers do not always look the same in all
browsers. One way to insure that your layers are
"browser-safe" is to use the Modify menu to convert the layers to tables once you are finished
designing the document.

                  Intra-document links and image maps. Naming the class.

This lesson introduces two basic tools- internal links and image maps- that have the attractive
characteristic of being both useful and very easy to learn.

       A. Internal Links: As you know, web pages are full of links. Most times those links take
       you to external documents that may take a few seconds to load into your browser, but you
       can also create internal links within documents that take no time at all to load. To make
       internal links you first must insert a marker (called a named anchor) inside of you’re your
       document so that you have something to link to. Internal links are easy to implement but
       can be challenging to implement effectively, so that it makes sense to you users. The
       biggest issue is that when you link within a small document, it may not be clear to the
       user where the link has taken him or her because the information associated with another
       link is also visible. So that this statement will make sense go to: and test the
       links. Then, go to: and notice
       the difference. You are about to learn what causes this difference

                  Dirty Trick Alert: see step five below.

       B. Image Maps: Image maps are typically useful when you have a complex image, such
       as a group picture or a map, with features that you want to highlight by linking to them.

Enough Talk.

   1. Look on your desktop for a picture called classmembers.jpg and drag it into your
      mysite/images folder.

   2. Create a new html file, name it wholeclass.htm and save it into your mysite folder.
   3. Insert classmembers.jpg into your document.
   4. Insert a table with one row, one column, and a border of 0
      below the classmembers.jpg image.
   5. Click inside the table's cell and give it a height (H) of 966.
      (ask me why if it still doesn't make sense)

   6. Click below the table and insert a named anchor. Name it after one of your class
      members (make sure you have no spaces in this name as in john_smith instead of john
      smith. Next to your anchor, type
      the class member's name.

   7. Now click on the classmembers
      picture. Use the Hotspot tool to
      draw a circle one someone's head.
      Type # next to the name you gave to the anchor in step 6 (as in #john_smith ) into the
      Link window.

Test your file. If it worked, repeat the process with all of the other class members. Be sure to
add tables between each person's name and anchor (remember, you can copy and paste
your table)

                             Using frames to target websites

1. Create a new html document.

2. Use the layout menu of the insert bar to create a Top Frame Frameset.

3. Go to Window – Frames (or press f2) to open the View Frames Panel. Click on the parts
   of the frame inspector and look at the property menu. Note that both parts of the frameset
   have a name.

4. Save these into a new folder called frames (inside of your mysite folder) as
   frameset_for_class_picture.htm, bottom.htm, and top.htm. Now browse to the frames
   folder and look inside. You should see the three files that you just created. The one
   named frameset_for_class_picture.htm is a special file called a (you guessed it) frameset.
   Frameset files provide the structure for a framed webpage by providing a place to display
   more than one html or image file at the same time.

5. Click inside the lower frame and insert the picture of the entire class (this file by now
   should be somewhere inside of your mysite folder. If not, ask me to send you a copy).

6. Click on the class picture and use the Hotspot tool to draw a circle a circle or rectangle
   around someone.

7. Link to the website of each person by typing in theperson's first initial
   and last name as in in Set the target to topframe. It is
   important to set the target. Otherwise the page that you link to will open in the same
   frame as the link which can result in a very weird experience for the visitors to your

8. Save All and test it! If you did it right all of the websites should open in the top frame.
   Chances are though, that they don't display very well because the top frame is too small.
   Go to View - Visual Aids and make sure that Frame Borders is checked. Next, use the
   bar that divides the upper and lower frames to make the top frame larger. Save all and
   test again.

9. Once you have finished create a link from your homepage to
   frameset_for_class_picture.htm. Save your homepage and upload it to your website. Test
   the link. Forget something? Now upload the frames folder and test again.

10. Finished? Try something else. Open up the file that you created earlier called
    bottom.htm. Bottom.htm should contain the class picture with all of the hotspots that you
    just created. Resave bottom.htm as open_in_new_window.htm. Click on each hotspot
    and reset the target to blank. Now save and test. Changing a link to blank tells your
    browser that everytime you click a link a new page should open. If it works properly,
    create a new link from your homepage to open_in_new_window.htm and upload both to
    your website.

                      Quick and Dirty Website Lesson Using Framesets

Although website development is often done in a slow, elegant manner involving multiple
consultations with clients over weeks and months, there are occasions that call for expediency
and speed. After all, how long do you really want to spend setting up a free website for your
friend's Christmas tree farm or your niece's 11th birthday party? Although framesets present
printing and (in some cases) navigational problems that may preclude their use in a big important
project, they may be just the solution you need for that website that you really don't want to
spend a lot of time on. Hence, today's lesson is dedicated to the slacker who lurks somewhere
inside of the best of us.

1. Create your frameset. There are several ways to create a frameset using
   Dreamweaver but remember, we are focusing on expedience, so for
   today's lesson we will use the EASIEST way. Create a new html page,
   set the insert toolbar to the layout menu, and pick out one of those nice
   readymade framesets that Dreamweaver provides. For this lesson let's
   use the Top and Nested Left Frames, the next to the last frameset in the
   menu. The appeal of this particular frameset is that it provides a nice
   upper frame for a title and banner and a left frame for navigation.

2. Once your frameset is complete, quickly choose a background color for
   the upper frame, which will be your banner. Do the same for the left frame, which will be
   your links page.

3. Copy the framelesson folder into your mysite folder. If this folder is not already on your
   desktop download it from . From
   Dreamweaver "Save Frameset" into the framelesson folder as index.htm. Click inside each
   frame and "Save Frame." (FYI: when you create a frameset Dreamweaver automatically
   creates html files for each frame. When you "save frame" what you are really doing is saving
   the individual html files that were created by Dreamweaver to fill the frames.) Give the
   frame files representative names that make sense to you such as left_nav.htm,
   upper_banner.htm, innercontent.htm, etc.

4. Make A WEBSITE! Yes, your mission is to make an instant Christmas Tree farm website.
   The framelesson folder contains a folder called treepix with multiple pictures of several
   different species of Christmas trees. Each tree is represented by photos of different sizes, and
   there is also a twig photo of each species. Your job is to create (a) an intro page that says
   something about your Christmas Tree farm; (b) a navigational page (in the left frame) that
   links to the intro page and seven separate pages for each of the seven types of Christmas
   trees; (c) a banner page in the top frame with the name of your Christmas tree farm; (d) a
   separate page for each of the seven tree types, containing three photos of each tree, a title,
   and any other text that you have time to put in.

5. Remember, when you link from the left frame to one of the html files
   that contain tree pictures, you MUST also use the Target feature of the
   property menu so that the new html file opens in the correct frame

   (probably called the Mainframe).

6. Make it beautiful. Well, do the best you can anyway. Your best strategy for actually pulling
   this assignment off in the ridiculously short amount of time you have to do it, is to "right
   click" on the empty tree1.htm file that is provided for you inside of the framelesson folder
   and copy it. Then paste the tree1.htm file into the same framelesson folder seven times
   (apple v) and rename each file to reflect the species of Christmas tree that it will be
   displaying (spruce.htm, whitepine.htm, etc.- look at the images names inside of the treeepix
   folder to find appropriate names). After renaming, create links in the left side of the frameset
   to each file. Next, insert the pictures into the appropriate files and save them. At this point
   everything should at least work. Test with your browser and find out. Once everything is
   correctly linked, spend the remainder of class time making it all look as good as possible
   (you may find it useful to employ tables for displaying pictures).

                                            Forms Intro

1. This lesson utilizes a cgi script that you will modify to send the contents of a form to your
   email account. What is a cgi script you may ask? A cgi script is a small program that is
   designed to run on a webserver.

2. In order to modify a cgi script you have to open it in a text editor, edit it, and then re-save it
   as ascii text. Fortunately, Dreamweaver is a very functional ascii text editor.

   a. Move the file called nmiclass.cgi to your mysite folder.
   b. Open nmiclass.cgi with Dreamweaver and substitute your email address for mine
   (, being very careful NOT to change anything but the email
   address. Save the file as yourname.cgi (for example: emuelaldridge.cgi).

   This will become your very own cgi mailer that you can use to send form-based info to your
   email address as long as nobody else messes it up for you (you will all be sharing the same

3. Use transmit or cyberduck to log into the website. Username= nmi4110 .
   Password= raindance .

4. Upload the file to the cgi folder. Chmod the file to 755 by
   right-clicking on it and changing the settings to match those
   shown at right.

5. Create a new html document. Save it into your mysite folder
   into a folder named formlesson

6. Open the insert toolbar to the forms menu. Open the property inspector.

7. Familiarize yourself
   with the forms menu
   by moving your mouse slowly over each element in the menu until a box balloon appears
   with the name of the item.

8. The first item on the left is the icon that
   creates the form itself. Click this item
   to insert a form in your document.
   Your property inspector should now be showing form options as at right. Type the following
   URL into the action field: (not literally yourname.cgi,
   but the cgi file that you just created) The URL that you just typed leads to the cgi script that
   you just uploaded.

9. Click inside of the form (indicated by dotted red lines. If you don’t see red lines refer to the
   view “visual aids” menu).

10. Click on the third to the last item in the toolbar to insert a submit button into the field. Make
    sure submit is checked on the property inspector. Save your form and test it with your
    browser. Click the submit button and check your email. If everything worked as planned
    you should receive an email from the form that you just clicked. Sometimes it takes a while
    for the email to come through and some times (especially with UGA accounts) the email
    ends up in the spam bin. If you don't get an email fairly quickly, check the spam bin.

11. Now, create a table inside of the form with 2 columns and 12 rows. On the left
    side of the table in the first row type Name. On the right side insert a one-line
    text field (second element on the tool bar). Refer to your property inspector and
    name the text field “name” (Under the heading Textfield).

12. In the next row type email in the left column and insert a new text field into the right column.
    Name it email. In the third row type the word comments on the left side and insert a multi-
    line text field at right. Name it (are you ready?) comments. Make sure that you select the
    “virtual” setting for wrap, which insures that your user’s long, multi-line reply will be visible
    while he or she is writing it and will also arrive to you in the ideal format.

13. Save the document and test it again by typing information into the various text fields and
    (once again) clicking the submit button. Check your email again to see the output.

14. Now it’s time for some creativity. On the left side of your table, enter some text that reflects
    a simple yes-no choice such as “Fries” or “Would you like a visit from our salesman Bruno?”
    On the right side insert a check box (this one should be obvious). Give the check box a name
    related to the choice that you just created (Fries, Brunovisit) and and a checked value such as
    yes, no, etc. that makes sense in terms of the choice. Save, test, check email (STCE). Did

   the input that you received in the email make sense in terms of the choices that you made for
   check box name and checked value? If not, change the name and checked value, and STCE.

15. Time to create a multiple choice question. On the left side of the table type in a question. On
    the right side insert a radio button. Name the radio button question1 and give it a checked
    value of 1. Click to the right of the radio button to deselect it, press your space bar once and,
    type in the first choice for your question

16. “Shift Return” insert a new line and put in a new radio button. Name IT question1 and give
    it a checked value of 2. Repeat the process until you have four possible answer/choices.
    Only one of the choices should be the correct answer. Click on the radio button that
    corresponds to the correct answer and add text to the checked value to indicate that it is
    correct (as in 3-correct) .

17. Repeat step 11 with a new question answer set, but this time insert a radio group and name
    the set of radio buttons question2. STCE.

                                      More Fun with Forms

Now let's visit two additional form elements. The first, called the jump menu, can be very useful
when you want to have lots of links on a page but still preserve space; the other, the image field,
falls more into the "just for fun" category.

1. Let's begin with the jump menu, which allows you
to insert multiple links into a dropdown menu that
takes only one line of space on your webpage. If it is
not already open, open the forms document that you
created previously. Next, open the forms menu of the
insert toolbar and click      . The Insert Jump menu
will appear. Your task is to use this menu to create 4
links. For the first link, browse to a document in
your work folder, and give the link a representative
name. Next, link to three websites of your choice by clicking on the + button and entering the
appropriate information. Remember, sometimes it is easier to browse to a website, copy the
URL, and paste it into your link than it is to type the URL. Once you have four links, check the
"insert go button after menu" checkbox and click OK. Save it and test it. Neat?

2. Now that your jump menu is working it is time to insert an image field. All an image field
does is provide a colorful alternative to your submit button. Find or create a small image (one of
your rollover buttons, perhaps?) and insert it with the image field button. Save and test.

3. Validate Form. This last form trick will
warm the heart of any "control freak," and is
quite handy when there is one or more text

fields in your form that you feel that it is important that your users should fill out (this feature
only works with text fields). For the next step to work there must be at least one text field inside
of your form so go ahead and insert three new one-line text fields just so that you get the full
effect. Click on your field and open Window- Behaviors. Click the + symbol and select Validate
Form. The window shown at right should appear. Note that there are several options: you can
require that a specific field contain an email address, a number, or a specific number or range of
numbers. Experiment with these options by implementing them on specific fields, saving your
document, and testing it in a your browser.

The first time I taught this course, we did nothing with Fireworks but I have since become
convinced that in many ways it is more suited for web development than Photoshop. Today's
lesson teaches you an efficient way to quickly (way faster than with Photoshop) make a whole
lot of Rollover buttons and also introduces you to the slice tool that allows you to choose specific
sections of a fireworks document to export to html.

1. Open Fireworks and create a new document that is 800 pixels wide and 600 pixels high.

2. Set the canvas color to transparent and the resolution to 72 pixels per inch.

3. Right click on the canvas and "Insert New Button." The
   panel shown at right will appear. Notice that the panel
   has buttons across the top for
   various states of the button.

4. Use the "rounded rectangle tool to
   draw a colored rectangle on the
   canvas. Pick any color that you

5. Use the Filters button             on
   your property inspector to emboss
   the button. Play around until you
   get a button look that you like (or

6. Use the text tool to type Home on top. Center the text and stretch your text box so that it fills
   up your button. Find a text color and font that you like. Make sure that your font is small

              enough so the text does not fill up more than 1/2 of the button (to be able to later
              accommodate long tree names such as loblolly in step 11).

 7. Now click on the Over button to go to the next button state. Click "Copy Up Graphic" to
    bring in the button that you just created in the Up State.

 8. Once the button is in, make some modifications in color, embossment, blurring or whatever
    so that the button will look different when you roll over it.

 9. Check your active area to be sure that your "hotspot" matches the size of the graphic that will
    become your button. If they do not seem to match uncheck "set active area automatically"
    and resize the active area (also called hotspot by me). Click Done.

 10. Drag your button to the left side of the canvas about an inch below the top of the page. Copy
     and paste the button. A new button will appear on top of the old one. Drag the new button to
     below the old one. Repeat this process until you have six buttons altogether.

 11. Click on each button and, in the text box of the property inspector, type in Oak, Holly, etc.
     until you have one button that says home, and five other buttons that has each tree name from
     the Template/Georgia Tree exercise.

 12. Now make a title for your page by importing a tree image of some sort into your
     document. Once the image is in your document, position it near the top of the page
     and use the scale, skew, and distort tools to transform the image into a reasonable
     size for a title. Next, refer to the property inspector and set the transparency of the image to
     50% (or so). Finally, use the text tool to type a title on top of the (by now very funky) tree
          Quic kT ime™ and a
T IF F (Unc ompres sed) decompres s or
   are needed to s ee this pic ture.     13. Use the slice tool to draw a slice over the title. The buttons should already be
                                             sliced automatically.

 14. Now it's time to export your Fireworks document to
     html. Here's the tricky part. You are using Fireworks
     to create both images and html at the same time.
     Therefore you have to save both. Go to File – Export.
     Make sure that your export options are the same as the
     ones shown at right. Browse to the treeid folder and
     create a new folder called navpix and click choose. This folder will contain all of the
     images that Fireworks creates for your buttons (there may be several).

 15. Export the html document as buttons.htm inside of your trieeid folder and click the Export

 16. Save your Fireworks file as a png file named treebuttons inside of your treeid folder and
     close it. The PNG file in this case serves as a template to create or modify web pages and
     images later on. Now, downsize Fireworks and navigate to your treeid folder. You should

   see a new file called buttons.htm and a new folder full of images called navpix.

17. Open buttons.htm with Dreamweaver. You should be looking at an html document that
    looks a lot like the Fireworks document that you were just working on. The difference is that
    now you are working with an html document with buttons and a logo inside of table cells.

18. Test the document out in your browser to see how it works.

19. Return to Dreamweaver. Right click inside of the button table and select Edit with Fireworks

20. Fireworks will open and ask you a question. Choose Use a Png and navigate to the
    treebuttons.png file that you just saved. Make some changes to your buttons (change
    transparency settings or something) and click Done.

21. Go back to Dreamweaver and see if the changes took place. If they did, congratulations on
    negotiating a successful "round trip" between dreamweaver and fireworks.

22. Although the slice and export to html is a cool, quick and dirty way to produce a nice looking
    webpage it does have defects and often introduces "funky code" and formatting that is hard to
    modify with dreamweaver, by hand, or through any other method known to man (or woman).
    One way to utilize Fireworks as "button factory" is to create the buttons and then import
    them into an html document.

23. Open the Georgiatrees template file (that
    you should have already created in a
    previous class) and substitute the
    rollover buttons you just made for your
    textual links. Insert – Image Objects –
    Rollover Image. The box at right should
    appear. Click the "Original Image"
    browse button and look inside of the navpix folder until you find the image that you want to
    appear for the first link. Now do the same with the Rollover Image Browse button and select
    a rollover image. Inside of the When Clicked box, browse to the file that you want to link to.
    When you are finished, Save the template and update.

24. Refer back to step 12. If you liked the title image that you put together, consider importing it
    into the template file so that it appears on all the tree pages.

                                    Stylesheets: Lesson #1

Stylesheets are a powerful formatting tool for web developers with far too many capabilities
to talk about all of them here. One of the best things about stylesheets is the ability to attach
a web document to a pre-existing group of styles that can instantly offer advanced formatting
options. Another nice capability is that once you have applied the same style to multiple
places in a document, all you have to do to change the look of your document is change the
style. At that point, all instances of that style are automatically updated. Confusing? Let's
go styling and find out.

1. Download and unzip it by
   doubleclicking. Once the unzipped stylesheet_example folder appears on your desktop,
   copy it into your mysite folder.

2. Look inside of the stylesheet_example folder and open example_page.htm with
3. Open the CSS Styles Panel (it may already be open)

4. From the CSS Panel, click on the chainlink to attach a
   style sheet, select "link", browse to the
   stylesheet_example folder, and attach the file named stylesheet.css.

5. Make sure that the triangle in the stylesheet panel is pointing
   downward so that all styles are visible. Take a look at the style
   names. Select some text and click on the style menu in your
   property inspector. Compare the names of the styles with the styles in the style panel.
   They should have the same names.

6. Now the fun starts. Select the text "Style 1. Nmix 4110" and (from the property
   inspector), apply Style 1 to it. Do the same with "Style 2. Nmix 4110" etc. until you have
   applied all five styles to a different text block.

7. Now that you have applied the styles, click on the pencil tool at the bottom of the CSS
   window and edit each style by changing colors, sizes, letter spacing, etc.

8. Now create your very own new style by clicking on the plus sign. Create a few more and

9. When you are done be sure and save the stylesheet. Close example_page.htm.

10. Create a new html file and attach the same stylesheet. Add some text and apply the
   different styles to it. Now change each of these styles. Change them radically!

11. Reopen example_page.htm. Does it look different?

   12. Drag the file named stylesheet.css out of the stylesheet_example folder to the desktop.
      Now look at your example page. All of those styles should disappear. Put stylesheet.css
      back into the stylesheet_example folder. Did the styles reappear?

   13. Once you have a truly funky looking document, save it and link it to to your homepage.
       Upload everything to your website so that I can see it. Be sure and upload stylesheet.css
       into the same relative location as example.htm so that web browsers can find it!

                                     CSS Background Lesson

1. By now I should have put a folder called stylesheet_example2 on your desktop. If not, you
   can download it from Once you
   have this folder, copy it into your 4110/mysite folder.

2. Open example_page.htm inside of the stylesheet_example2
   folder, and open the stylesheet panel if it is not already
   open. Click on the plus sign in the stylesheet panel to
   create a new style. Name the style ".background", select
   "This document only", and click OK.

3. A style definition window will open. Select Background as the category.

4. From the Background Image Menu, browse to the pix folder and select background.gif.
   Select Repeat and click OK.

5. Now, type some text in the top left corner of your document. Select the text and use the
   property inspector to select the .background style that you just created. The style should now
   be applied to your entire document. To be sure, click the code button and locate the body tag
   I n your html code. You should see some code that looks like this:
   <body class="background"></body>

6. Return to design view and save example_page.htm.

7. Time for some right brain activity. Open your file inspector (window – files) if it is not
   already open. Use the file inspector to locate the background.gif file inside of
   stylesheet_example2/pix. Doubleclick background.gif. It should open in Fireworks
   automatically and show you a long skinny image. That image forms the background of your
   page. You may want to zoom in some with the magnifying glass in order to see the image


8. Use the paintbrush tool to change the color of the background.gif file. Save the file (as a gif
   if fireworks asks).

9. Reopen example_page.htm and check out the changes. Alter the colors on background.gif
   again, save it and take another look at example_page.htm.

10. Time to turn the artist inside of you loose! Use Fireworks to create a brand new background
    image that is 40 pixels high and 1500 pixels wide. Paint this one with with the colors of your
    choice; as many colors as you want. Along the way, experiment with different brush settings
    to see what effect they have on the image (you will need to have the property inspector open
    and the brush selected). Save this image inside of the pix folder as background2.

11. Return to example_page.htm and create a new style called .background2. Repeat steps 3-5
    with your new background image (background2.gif). Feel free to play and experiment with
    your background for a while.

12. Now let's focus on a new aspect of css styles: lists. Create a new style called .list. Click on
    the list category and select square for the type, outside for the position. Click Ok. Click
    inside of your document and type some text. Press return and type some more text. Now
    select the text that you typed and click the bullets tab in the property inspector. Next apply
    the list style to the same text. You should see the original round bullets change to squares.

13. Edit the .list style and experiment with the other type settings of circle or disc. Each time
    you apply a different setting, the bullets should also change.

14. Edit the .list style one more time and click browse for image. Select the image called eye.gif
    inside of the pix folder. Apply it and watch what happens. Now do the same with the image
    named monkey.gif.

15. Return to Fireworks and create your very own bullet (take a picture of your self with
    quicktime and the isight if you want). Save your new bullet inside of the pix folder and try it
    out by using it as the image for the .list style.

                                First Photoshop Assignment

1. Open Photoshop CS (inside of your applications folder)

2. Download the picture found at: Internet Save it
   to your work folder (if you don't have a work folder, create one inside of your documents

3. Open flower.jpg with Photoshop

4. Crop the flower, using the crop tool shown at right,         to eliminate as much as
   possible of the background.

5. Save the flower as flower1.jpg.

6. Resize the flower so that it is only 600 pixels wide. Make sure that
   the "Constrain Proportions" box is checked so that your image will
   not be distorted. FYI, pixels are a "display-relative" form of
   graphical measurement. For example, if your computer's screen
   were set to 1200 pixels wide, the picture would take up ½ the width
   of the screen if displayed at full resolution.

7. Just for the sake of learning how, lets throw away all of those nice
   colors by changing the image to grayscale (Image- Mode –
   Grayscale). Now, save as flower_gray.jpg at medium resolution
   and close the file.

8. Reopen flower1.jpg and just to see what pixels are really all about, change the image size
   to 23 pixels wide. Now use the zoom tool to zoom in to 1600 percent. See those 23

9. Now, close the file without saving it, reopen flower1.jpg and let's explore some of
   Photoshop's color adjustment tools.

10. From the image-adjustments menu
    (shown at right) open levels. A
    histogram will appear (shown below).
    Move the triangular sliders on the left
                                              and right sides of the histogram (sliders are
                                              indicated by squares) inward so that the highest
                                              points of the histogram are between the sliders
                                              but not the lower points (this is a judgment call,
                                              so play with the settings). Notice how the
                                              colors of the flower change as you move the
                                              sliders. This is a pretty good picture and may

       be hard to improve on, so feel free to click cancel if you prefer the original setting. Keep
       in mind, however, that this tool can be very helpful with a picture that does need help.

   11. Now, from the Image-Adjustments menu, open brightness and contrast. Change the
       brightness and contrast on the flower. Play with the controls to get a feel for them.
       Afterward, change the brightness and contrast back to their original settings.

   12. Once again, resize the flower to 600 pixels wide. Now, click on the      text tool to start
       the process of adding text to the image. Type anything you want, but use a 24 point font
       and change the text color to yellow.

   13. Let's play some now with the Save for Web tool,
       Photoshop's gift to the web development community that
       lets you explore for the right balance between image
       size, image type, and image quality. Used properly,
       Save for Web can insure that your web pages load as
       quickly as possible, while preserving good image quality. Take note of the little tab way
       down in the bottom left corner of the save for web window that says (probably) 100%.
                    Change the percentage to something lower that allows you to see the entire
       picture. Start with JPEG and explore different quality settings (shown at upper right) and
       note (in the bottom left-hand corner of the window) what happens to file
       size. While you are still in save for web, switch to GIF and watch what
       happens to both file size and the image as you explore perceptual,
       selective, adaptive, and web settings. Which image type, gif or jpeg,
       would be the better choice? Which quality? Close the image without
       saving it.

 Image Selection and Cleanup with (for
     some odd reason) a peacock.

The purpose of this lesson is to familiarize
you with some of Photoshop's basic tools.

1. Download the peacock at

2. Open the image with Photoshop. Use
   one of the lasso tools to select the
   peacock’s head (the polygonal tool will
   probably work best). Prior to using the
   lasso tool you may want to use the zoom
   tool (the magnifying glass) to enlarge

   the peacock’s head. Keep in mind that by holding down the option key the zoom tool works
   in reverse and shrinks the image.

                           3. Copy the head and paste it into a new Photoshop document with
                              a white background.

                        4. Look at the layer window. You should see two layers, the
                            background layer and the layer that contains the peacock’s head.
                            From the layer menu, select the command “Flatten Image”. This
                            command combines all of the layers into one. Look at the layer
   window again. Now there is only one layer.

5. Doubleclick on the background layer to unlock it (from the layer window)

          6. Use the eyedropper tool to select the background color (ie. Click on the white

7. Clean up the image using the brush tool to remove any portion of the peacock that is not part
   of his head. You will probably find it helpful to use a small brush size- 15 or less. Be sure
   that 100% opacity is selected.

8. Now, click on the white background with the magic wand tool. Press the delete key to
   remove the white background.

9. Once the white background is removed, , resize the peacock so that it is no more than 600
   pixels wide.

10. Go to the help menu and export a transparent image into the image folder (inside of your
    mysite folder). Choose the gif format. (don’t ask me why this step is in the help menu!)

11. Congratulations. You have created a transparent image. Transparent images have some
    utility in web development but are especially useful in Flash when they are used in

12. Create a new webpage in your mysite folder, insert the image into it, and save it as
    peacock.htm. Open index.htm and link to peacock.htm. Upload everything to your website
    and test it out.

                       Making rollover buttons with Photoshop.

1. Open Photoshop and create a new image. Name it “button”.

2. Set the image size to 125 pixels wide and 25 pixels high (a nice size for buttons).
   Resolution to 72 pixels per inch. Color mode RGB 8 bit. Background contents white.

                               3. Open the layer window (Window- Show Layers). Double
                                  click on the Background Layer tab inside of the layer
                                  window to unlock the layer.

                               4. Use the Paint bucket Tool to fill the layer with a color of
                                  your choice.

                                5. Refer to the layer
                                    menu (top of the
                                    screen) and select
                                    Layer style, Bevel
     Color                          and Emboss. You
                                    many have to move
                                    the Layer style
   menu that appears somewhere on your screen so that you can see the image. Play with all
   of the different settings (in particular, angle and altitude) and watch the changes that take
   place with your image. If you find yourself with a weird looking image and can’t figure
   out how to get back, click cancel and start over.

6. Once you have settled on a look that you like for your button, right-click on the layer,
   select properties and name the layer "bottom". Now duplicate the layer (by right-clicking
   on the layer name or by clicking on the layer menu at top of screen and selecting
   duplicate layer). Name the new layer "top".

7. Hide the top layer by clicking on the eye icon to its left.

8. At this point you are going to change the look of the bottom layer so that it differs from
                                                 the top layer. These layers will become
                                                 the foundation for your upper button (the
                                                 one people see when they open your
                                                 webpage) and for the rollover button (the
                                                 one they see when they mouse crosses
                                                 over the upper button). Open the
                                                 brightness/contrast menu (see at left) and
                                                 change the bottom layer, by making it
   brighter or darker.

9. Give your button a name by clicking on the stage with your text tool and typing Link 1.
   This step will automatically create a new text layer. Make sure that the text layer is above

   the other two layers that contain buttons. Move it up with the mouse if you need to.

10. Save the file (not save for web) as a photoshop document (psd suffix) into a folder named
    images and name it button_template. PSD stands for Photoshop Document. The PSD
    format retains all of the layers that you have created as well as a history of your actions.
    The value of retaining all of this information is that it lays the foundation for a "button
    factory." Simply by changing the text or changing features of the layers, you can easily
    create new buttons with different labels or with a different appearance.

11. Time to make some buttons. First, hide the layer named bottom and reveal the layer
    named top. Save for web (gif format) into the images folder. Name this first image
    up1.gif. Next, hide the layer named top, reveal the layer named bottom, and save for web
    again. Name this image down1.gif. Change the text to link2 and make two more buttons
    by following the same process. Name these images up2.gif and down2.gif.

12. Right click on each button layer and select "Clear layer style." Now repeat the previous
    steps but experiment with some other image adjustments such as hue and saturation,
    curves, etc. or with layer styles. Have fun and if you make a button that you really like,
    be sure and save another psd file so you can utilize it later in a webpage. This time name
    it button_template2.

13. Now that you have buttons, put them into a webpage. Open Dreamweaver and create a
   new html document. Save it as
   buttondemo.htm into your
   mysite folder.

14. From the insert menu, choose
   Rollover Image. The box at
   right should appear. Click the
   "Original Image" browse button
   and find up1.gif. Now do the
   same with the Rollover Image
   Browse button and bring in down1.gif. Inside of the When Clicked box, type (or whatever you want). Click OK and repeat the process with
   up2.gif and down2.gif. When you are finished, save your file and close it.

15. Once you have finished link this lesson to your index.htm page, upload everything to
   your website and test it.

                                  Your Very First Tween

                            This lesson introduces you to Flash's drawing tools and teaches
                            you how to create and publish a simple animation.

                              1. From the applications-Macromedia Flash 8 folder, open Flash
                                 8. Create a new document (file – new- this may happen
                                 automatically). Open property inspector: Window-Properties-

                              2. Click on the oval tool. Next click on the stroke color and
                                  click the square with a red stripe     so that your oval
                                  will not have a border around it. Remember this step. It
                                  will come in handy when you create buttons.

                              3. Select a fill color and draw a small oval on the stage.

                               4. Use your selection
                                   tool to click on
                                   frame 10 on the
                                   timeline and press
                                   the f5 key on your
                                   keyboard to insert
                                   a frame. Next, use
   your selection tool to click on frame 5 in your
   Flash timeline. On your property inspector,
   choose Tween-Shape.

5. Click again on frame 10 and press the f6 key to insert a keyframe (a keyframe has many
   uses; expect to press the f6 key a lot).

6. While you are still on frame 10, modify the shape of your oval. Now click on frame one
   and then press return to see what you have wrought!

7. If your tween actually worked, try making a fancier one. Use the plus key (at bottom left
   on timeline) to create a brand new clean layer. Name the layer face by double clicking on
   the name (probably layer 2). Delete layer 1 (by clicking the trash can on the timeline).
   Draw the silhouette of a person on frame 1. Leave the nose off of the silhouette.

8. Click the padlock symbol on the face layer and create a new layer named nose. Draw a
   nose on this layer so that it matches the silhouette on the face layer.

9. Repeat steps 4-6 and give your drawing a really long nose on frame 10. Test to see if you
   have successfully created a Pinocchio effect.

10. Before we go any farther, save your file into your work folder in a new folder called
    flashstuff (or something like that) and press Apple-Return to test-publish your flash file.
    Notice how it runs in a continuous loop?

11. When you pressed Apple-Return you created what is known as a shockwave flash file with
    the suffix swf. Look inside of your flashstuff folder and you should see this file along with
    another file with a .fla suffix. The swf file is the file that actually runs the animation while
    the fla file is known as the Authoring file.

12. Now open file "publish settings" and click the format tab. You should see
    the list of options shown at right. These are your publishing options.
    Make sure that .swf and .html are checked and click the publish button at
    the bottom of the page. Now look again in your flashstuff folder. You
    should see an html file with the same name as the swf file. This html file
    is a webpage that was automatically generated that displays the swf file.
    Open the html file in your browser and take a look.

13. Return to Flash and close the animation (the part that is moving around
    not the file you are working on) Now it is time to take control of your animation. Click the
    plus sign to insert a new layer. Double click on layer 2 and name it "tween". Double click
    on layer 3 and name it "control".

14. Click on frame 1 on the control layer. Next click the arrow at far right on the property
    inspector (or rightclick and select "actions"). You have just opened the actionscript
    panel, the key to a whole universe of digital options with few limits other than your skill,
    imagination, and (most important) tenacity. Your first task is relatively modest. Type, or
    use Script Assist, to enter the following command: stop(); please not3 the use of bold
    italics. In the future all actionscript commands that I ask you to type will appear this way
    in order to distinguish them from explanatory text. If you type the command in, don't
    forget the semicolon.

15. Press Apple-Return again to see the difference in what happens.

16. Close the animation and click on the control layer. Use the oval tool to draw a
    small red circle on the stage. Right-click on the circle. A menu will appear
    with several options. Choose the option (near the bottom) of Convert to

17. A new, Convert to Symbol, menu will
    appear. Use this menu to create a
    button symbol. Name it my first button
    (or whatever you want).

18. At this point you should have a small red button symbol on the control
    layer. Make SURE that your button is on the control layer. Click one            on (release) {
    time on the button and then type the command in the box at right into           play();

     your actionscript panel (or use script assist).

 19. Apple-Return to test your movie. Click your button to make the animation start.

 20. Note that your animation automatically returns to the first frame. To make it stop in frame
     10 click on the keyframe in frame ten, click inside of the actionscript window, and (as in
     step 9) enter : stop(); . Apple-Return to test.

 21. Time to enhance your button. Double-click on the button that you
     made earlier. The tool shown at right should appear. This tool
     allows you to define four different states for your button, so that when a user interacts with
     the button with his or her mouse, different things happen. The over state appears when the
     mouse rolls over the button, down appears when you click on the button, and hit
     determines the area of the button that is active. This may not make sense now but will once
     you practice a bit.

 22. To test this out, insert keyframes into the Over, Down, and Hit frames. Alter the shape or
     color of your button in each one (do not change the shape of the button in the Hit frame).
     Test your movie with Apple Return. Move your mouse over, hold down, and click the
     button to see what you have accomplished. Time left? Ask me for suggestions!

                                Motion Tweens and Movie Clips

As you would expect, motion tweens are employed when you want a tween that moves
something around. Motion clips can be used to animate letters, graphics, Flash symbols such as
buttons and movie clips, and grouped shapes (anything on the stage can easily be made into part
of a group). About the only thing that you can’t apply a motion tween to is a simple shape (that
is not yet part of a group or symbol).

1. Create a new flash file and save it inside of your
   mysite/flash folder as flash1. Draw an arrow on the stage.
   Click on the arrow to select it, and Apple-G to group it.
   Now click on frame 12 on the timeline and press the f5 key to insert frames. Change the
   name of Layer 1 to “tween”.

2. Click anywhere on the time line between frames 12 and frames 1. On the property inspector,
   select motion tween.

3. Insert a keyframe (f6 key) at frame 12 and move your arrow to a new location on the stage.

4. Click on frame 1 and press Return. Hopefully your arrow floated across the stage. If it did,
   now it’s time to take control with a button.

5. Create a new layer by clicking on the plus symbol at the left side of the timeline and name it
   action, control, or something of the sort.

6. Click on the stage and draw a small round shape without a border. Right-       on (release) {
   click on the shape and turn it into a button. Once you have a button click        play();
   one time on it, and open the actionscript panel (by clicking on the arrow      }
        on the right side of the property
   inspector).     After making sure that the
   button is selected, enter the command shown
   at right. Hint: if you use Script Assist as
   shown at right, you won't have to type.

7. Click on frame one and type stop(); into the
   actionscript panel. Do the same on frame 12.
   Apple-Return to test your movie.

8. Did it work? If so, extend your tween by adding keyframes at frames 24, 36, and 48. Click
   on each keyframe and move the arrow somewhere else. Try to make the arrow circulate
   around the entire page. Before testing, remove the stop (); action from frame 12 by cutting it
   (apple-x) and then paste the same command (stop (); )into the actionscript panel at frame 48.
   Extend your action layer by clicking on frame 48 (on the action layer) and pressing f5.
   Apple-Return to test your movie.

Movie Clips: Happy with your tween? Once you are, it is time to move on to the second part of
this lesson, which involves making your first movie clip. Movie clips add a lot of flexibility to
Flash because, in essence, they allow you to create a movie inside of a movie. . If you are
confused at first don’t worry because movie clips are much easier to understand once you make a
few. So let’s make the first one.

1. Create a new flash file but leave your current document open as well. Save the new file as
   “movie2”. While you are working with movie2, click Insert-Symbol and create a new
   movie clip. Name it movieclip1. Once you create the movie clip you should be looking at its
   timeline (which looks like any other timeline). The only clue that you are
   inside of a movie clip timeline instead of the timeline of the main movie
   appears at the upper left corner of the timeline, where the name of the movie
   clip is listed, as in the image at right.

2. Now it’s time to do something that will probably seem a little awkward, but
   bear with me because it will save you time; now and in the future when you
   apply the same trick again. At the upper left-hand portion of your screen
   you should see two tabs that say movie1 and movie2. This if Flash's way of
   allowing you to navigate easily between multiple files. Click on movie1 to
   return to the movie that you just finished working on. Click on frame 1 of the tween layer,
   hold down the shift key and click on frame 48 (or wherever your put your last key frame).
   Click on Edit-Timeline- Copy Frames. Now click on the movie2 tab again. Click on frame

     one of movieclip1 and right-click to “Paste Frames” (or Edit – Timeline – Paste Frames).
     Your arrow should reappear, along with all of the frames and keyframes from movie1.
     Finally (!), click on frame1 and remove the stop(); action.

3.    Click on Scene 1                         to close movieclip1. Open the library (Apple-L) and
     drag movieclip1 onto the stage. Click on movieclip1 to select it and then click on the free
     transform tool. Shrink movieclip1 to approximately 1/3 its original size (if you have to, you
     can use the W H settings on the property inspector to resize movieclip1) Apple-Return to test
     the movie. At this point you should see the same animation that you made earlier but at 1/3
     of its original size. Reflect for a second on what you have just done. You made a new
     movie, created a new movie clip, and pasted a pre-existing animation into the movie clip.
     Then you shrank the movie clip. Make sense? Let’s try something else. Click on
     movieclip1, copy it (apple-c) and paste it (apple-v) three times. Now you should have 4
     movie clips. Move them around so that all four are visible on the stage and use the free
     transform tool to rotate a couple of them. Test your new movie. Did you see four separate
     animations? Good!

4. When you copied and pasted movieclip1 you actually created three instances of the same
   movie clip. This means that if you open one up and change it internally, you change all other
   instances of the same movie clip (similar to what happens when you update a template in
   Dreamweaver but faster). Try this feature out by opening one of the movie clips and adding
   in a big ugly blob of some sort. Oh no, the blob is reproducing! (can you tell that I wrote
   this late on a Sunday night?)

5. Each individual movie clip has properties that can be modified. Move one of the clips
   around and note how the X and Y coordinates in the property inspector change. With the
   same clip selected, change the X and Y coordinates and watch what happens. Now play
   around with the color settings on the property inspector. Make sure you try out the alpha
   setting. Watch what happens as you slide the alpha setting from 0 to 100 and back.

6. Finished all this and there is still class time left? Time to take the challenge. Use a button to
   change the alpha settings of one of the movie clips dynamically. Hint: You will have to give

     the movie clip an instance name            with the property inspector. Hint Hint: See

                                       Movie Clip Control

By now you probably have noticed that movie clips are a prominent feature of Flash. One of the
most useful features of movie clips is that their properties, such as size, location, color and
transparency, can be manipulated by commands that come from a button, keyframe or another
movie clip. Those commands can also be linked to variables that can be altered by user input.
Today’s lesson is an introduction to some of the things that you can do to movie clips via
external controls. This exercise falls into the “crawl before you can walk” category in that what
you learn how to do today can lead to some really interesting effects and techniques later on.
But it does start by blowing up a car, and later on we will actually be shooting at things (in a
peaceful way of course).

1. Download the movie

2. Once you have the movie, apple return to test it, click the blue button and blow up the car.

3. Close the animation. Now click on the blue button and open your actionscript panel so that
   you can look at the code that commanded the movie to explode.; is not some
   sort of special Flash command that causes things to blow up, but rather a command telling a
   movie clip with the instance name of blowup to play. Click one time on the car and look at
   the property inspector. On the left-hand side of the property inspector, under the word Movie
   Clip you should see the name of the instance “blowup”. This instance name allows you to
   “target” the movie clip and affect it in all sorts of different ways. In this case you made the
   clip play. The “blowup effect” was internal in the sense that the clip played on its own
   timeline, which you will see if you open the clip by double-clicking on the car, and look
   inside. Everything that you will do to the movie clip from this point forward will happen
   “externally” in that you will be changing its external properties rather than making things
   happen inside of the clip.
4. Click on the button. In the actionscript panel, erase           blowup._x = 1;; and add the following two lines of               blowup._y = 1;
   Apple return to test the movie and click the button to see what happens. You just altered the
   x and y coordinates of the car. It should have moved to the upper left hand corner of stage.
   In this case you “hard coded” the number into the button. A more flexible option is available
   for adding numbers dynamically through variables so that your user can control movie clip
   properties. For the remainder of this exercise we will be using variables for clip control that
   can be altered while the movie is playing.

5. Click on the button again. In the actionscript panel,       blowup._x = rightleft;
   change the code so that it reads as shown at right.         blowup._y = updown;

6. Click on your text tool and add an input text field to the stage on layer 2 (you
   may have to use your property inspector as at right). Now use the property
   inspector to give the field a variable name of
   rightleft as shown at right:
   Add another input text field and give it a variable name of updown.

   Make sure that the “show border around text” tab is checked.

7. Now make everything nice, tidy, and (hopefully) understandable by
   placing static text labels above your fields as shown at right.                             -updown

8. Test the movie. This time when you click the button nothing will happen because the x and y
   coordinates are now tied to variables. Put 2 in the two text boxes that you just created and
   click the button. Now 22. Now 222. Play around with different number combinations to see
   the effect.

9. Time now to explore the alpha property (as in transparency). Add the following line of code
   to your button: blowup._alpha = transparency;

10. Create a new input text field and give it a variable name of transparency. Label it alpha.
    Now test again, and experiment with various numbers between 1 and 100 in the alpha input

                                                                       blowup._height = howhigh;
11. Let’s go for broke and enter a bunch of these properties at        blowup._width = howwide;
    the same time Add the following lines of code to your              blowup._rotation=spinit;
    button:                                                            blowup._xscale=scale;
    Add four new input text boxes to the stage and give them
    variable names (in succession) that correspond to the
    variables shown at right (i.e. howhigh, howwide, spinit, scale).

              12. Label the four input text fields as shown at left.
                  Click on the "Show Border Around Text" button (shown at right) to be able to
                  see your text field. Apple return to test. Enter a variety of numbers in all of
                  the text boxes to see the effect. While you are testing you will find it useful at
                  times to close the animation after testing a property such as height, before you
                  explore another property such as x and y scale. The reason for this advice
                  should become clear during the testing phase.

13. Drag a new button      on (release) {
                                                                                      from the
library (Apple-L to open      blowup._rotation = blowup._rotation+Number(spinit);     the library)
and add the following      }                                                          actions to it:
Although this code may                                                                appear
somewhat scary, all it                                                                does is rotate
the blowup movie clip by whatever value is entered into the spinit textfield every time the button
is clicked.

14. I am sure that some of you are feeling a little overwhelmed by this particular piece of
actionscript. Don’t worry, you will never see anything like this on a test. It’s just there for

those of you who really like this kind of stuff. Apple return to test, and experiment by putting a
number less than 10 in the spin textfield and clicking the button you just created several times.
In case you are interested, the way it works is that however far blowup has been rotated so far, is
added to the spinit variable every time the button is clicked. If you REALLY like scripting try
adding the following code to the same button: howrotated = getProperty(blowup,_rotation);
Now add a new dynamic text field and give it a variable name of howrotated. Test your movie
again. As blowup rotates, pay attention to the values that appear in the howrotated text field.

15. Finished all that? Go back all the way back to the beginning and create a new button that
tells blowup to play (and to blow up of course). See if you can improve on my relatively un-
ambitious explosion by doubleclicking on the car movie clip and modifying the tween inside of
it. Replace the picture inside of the movie clip with your picture. Experiment with adding the
effects that you just created and exploding the car simultaneously. If you are really ambitious
download the file at and put the sound inside of the
flash library into your movie clip so that the car "booms" when it explodes.

                           Working With Scenes To Organize Flash

My introduction to Flash came about when I worked on a distance-learning project with features
that were not always understood by its users. My boss, continually on the lookout for ways to
impress our main client, wanted to create an animation that would show users how to interact
successfully with the distance learning system, so we dove in. For two weeks I worked with
Amanda, our graphic artist (a former dial-up psychic- I kid you not), on what turned out to be a
fairly complex animation with multiple layers and zillions of frames. With no Flash experience
and no help from anyone, we never totally knew what we were doing, but ultimately we finished
the animation successfully and moved on to a new one. In the next project we discovered a key
organizational feature in Flash called "Scenes” that made the development process much easier.
The goal of today's lesson is make sure that all of you understand what scenes are and how they
function, so that you will be able to use scenes if you need them. This lesson may seem a bit
tedious at times but keep in mind that, by absorbing it thoroughly, you may sidestep a whole lot
more tedium later.

1. Create a new document and save it as scenelesson. Set the size of scenelesson (apple-j) to
   800 X 600.

                  2.   Take a look at the area just above your timeline
                      where it says Scene 1. Have you ever wondered
   what that word "Scene 1" meant? Let's find out. Open Window-
   Design Panels-Scene. You should see at a panel a panel that looks
   like the one at right. The purpose of this panel is to allow you to
   delete, duplicate, add, rename, and rearrange scenes. But what are scenes??? you must be
   asking by this point. Essentially, each scene contains a unique timeline with layers, similar

   to movie-clips. The big difference is that scenes are at the "root" level of your movie
   whereas movie-clips are always one or more levels "deeper". This means that you can put a
   movie clip into a scene but not vice-versa. Also, as you will soon see, scenes are set up in a
   way that they sort of "flow" automatically into each other (unless you tell them otherwise).

3. Now that you have the scene inspector open, click on the trash can to delete scene 1. Can't
   do it? That's because every movie has to have at least one scene. Try creating a new scene by
   clicking on the plus symbol. You should have a brand new scene called scene 2. Those
   names are not particularly exciting so lets give those scene names a seasonal theme. Double
   click on Scene 1 and rename it Spring. Name Scene 2 Summer. Now create 2 more scenes
   and name them (in order) Fall, and Winter. Make sure that your scenes are ordered Spring,
   Summer, Fall, and Winter from top to bottom.

4. Download the following file: After it unzips
   and creates a folder on your desktop named "scenes", import all four images into your
   library. From the scene inspector click on spring and drag the tornado image from your
   library to the stage. Do not insert any frames or keyframes at this point.

5. Open the scene named summer and drag in the sun, do the same to the fall scene with the leaf
   picture, and (this is an IQ test) do something similar with Winter.

6. Apple return to test your movie. The movie should whip continuously through all 4 scenes
   (and seasons). Now lets slow it down a bit. Click on frame 30 of each scene and use the f5
   key to insert frames. Apple return again to see what has changed. Notice that the movie runs
   more slowly because it must proceed through 30 frames on each scene before it can jump to
   the next scene.

7. Enough anarchy. It's time to take control of these scenes. From the
   scene inspector create a new scene and name it intro. Move intro up to
   the very top, above all of the other scenes. Add a stop (); command to
   frame 1. Drag all four images from the library and control click each one
   to convert them into buttons.

8. Click on the tornado and link it to the spring scene with the
   code shown at right. Keep in mind that Flash is case-sensitive,       on (release) {
   so be sure that your link is capitalized (or not capitalized) the      gotoandStop("spring",1)
   same as the name of your scene. The link "spring,1" has two
   parts. The first part links to the scene "spring". The second
   part, 1, tells the link to go to frame 1.

9. Link all of the other buttons to the appropriate scene and to frame 1.

10. Apple return to test your movie. If everything works properly click on the Spring scene.
    Insert a keyframe at frame 5 and add some content. Any kind of content that you want to add
    (text, shapes, etc.) is fine as long as it looks different from what is already on the frame. Do
    the same (adding more and different content) at frames 10, 15, 20, and 25. Return to the

   intro scene and change the code on the tornado button from gotoandStop("spring",1) to
   gotoandPlay("spring",1). Apple Return to test your movie and click on the tornado button.
   You should see whatever junk you put on the Spring scene fly by and then the movie should
   flow past each successive scene until returning to the intro scene.

11. Ok, just one more silly little scene thing before we move into something (perhaps) more
    interesting. Click on the Spring scene and then click on the keyframe at frame 10. In the
    actionscript panel type in: gotoandStop("intro",1). Apple return to test your movie. Click on
    the tornado button again. After about a 1 second pause the movie should arrive at frame 10
    and, when it encounters the command that you put on frame 10, return to the starting point.

12. OK, on to something a little more inspiring. The
    first scene is often used to create a login screen       on (release) {
                           with a password and/or                     if (groundhog=="noshadow") {
                           username. In this small                            gotoandStop("spring",1);
                           exercise we will only require                      }
                           a password. Click on the                   }
                           Spring button and enter the
                           code shown in the text box at right (note the use of the double equal
    sign = =. You just created an if-then statement which, in this case, sets up an action that
    varies depending on user input.

13. Click on your text tool and then on the upper left of the property inspector choose "Input
    text." Now click on the screen and create a small text box. After the text box is created
    return to the property                                                              inspector
    and click the little square                                                         symbol that
    is next to Var: to create a                                                         border
    around the box. Next, in                                                            the white
    box next to Var: type in "groundhog" so that the textbox that your created is set to a variable
    named "groundhog".

14. Apple return. Try clicking on the spring button. Nothing worked? Now type noshadow into
    the text box and try again.
                                                     on (release) {
15. If that worked it is time to add just one                if (groundhog=="noshadow") {
    more feature. Now test the movie to see                           } else {
    what happens.                                                     gotoAndStop("summer",1);

                                 Making a plain, simple jukebox. Lesson 1
1.    Go to to download a folder with
     five music clips and five associated graphics. Put the music folder into your mysite –
     flashstuff folder.

2. Create a new flash file. Set the size to 800 X 600 and save the file as jukebox1 into
   your flashstuff folder. Import all ten music and graphic files into the library. File-
   Import – Import to Library.

3. Time to build a jukebox double click on layer one and rename it audio. Add a new
   layer and name it fanpix. Add a third layer and name it control. Click on frame 50
   of the control layer and press the f5 key. By extending this layer out to 50 without
   any intervening keyframes any buttons that you place on frame one will be active all
   the way out to frame 50. You will see why this is important as your jukebox

4. Click on the first frame of the fanpix OR audio layer (does not matter which), open
   the actionscript panel (right click or click the little arrow on the property inspector to
   open the actionscript panel) and enter a stop(); command. Click on frame 5 of the
   audio layer, insert a keyframe (f6 key), and (using the property inspector) name the
   frame chubby. Click on frame 5 of the fanpix layer, insert a keyframe, and name it

5. Drag chubby's picture out of the library onto chubbypic.

6. Click on the chubby keyframe and use the property inspector to
   put the Sound named twist onto the keyframe.

           7. Now click on frame one on the control layer . Drag Chubby Checker's
              picture onto the stage again and use the free transform tool to downsize

     chubby approximately 150 pixels wide (use the       on (release) {
     shift key simultaneously to downsize the image      gotoAndStop("chubby");
     proportionally). Now right-click on the little       }
     chubby picture and convert it into a button.
     Click one time on the button and open your actionscript panel. Enter the command
     shown at right into your actionscript panel. Save your file and Apple-Return to test
     it. Did it play? Could you see the big chubby picture? If so, proceed to step 8.

8.    Chubby Checker and twist are now working but who ever heard of a jukebox with
     just one song? Let's do it again with another song. Click on frame 10 on the audio
     layer and insert a new keyframe called abba. Put a new keyframe called abbapix on
     frame 10 of the fanpix layer. Repeat steps 5,6,7 with the abba picture and the

   (unfortunately) immortal Dancing Queen.

9. Contine working until all of the music and pictures are in place. When you are
   finished you should have a functional Jukebox representing five bands and/or
   musicians with buttons that link to each band's song.

10. Take some pride and make everything look as good as possible. By now you may
    have figured out that there is one big problem that needs to be resolved. As bad as
    Abba sounds, it sounds even worse when its music is
                                                                  on (release) {
    mixed with someone elses music. Even Chubby Checker           stopAllSounds();
    and the Beatles don't sound that great as a mix. To stop      gotoAndStop("chubby");
    one song before starting another, add the                      }
    stopAllSounds(); to each button as in:

11. What? You're done? In that case let's add some pizzazz to the jukebox by fading in our
    pictures. Go to the chubbypix keyframe and right click on the picture. "Convert to
    symbol" and select movieclip as the type of symbol. Double
    click on the movie clip and click on the graphic picture again
    and this time convert it to a graphic symbol Now click once on the picture (now a
    graphic symbol) and (on the property bar) select Color- Alpha -0%. While inside
    the movieclip insert a keyframe at frame 7 and put a stop command onto it.

12. Click on the (now invisible) graphic again and set alpha to 100%. Now click once on
    the timeline between frames 1 and seven and insert a motion tween. Note what
    happens as you move up and down the timeline. Apple-return to test the effect.
    Like it? Do the same for all of the other bands and pictures.

                           Using Sounds with Sound Objects
The most effective way to control sounds in a flash movie is with the sound object, which
provides you with control over most aspects of a sound file (balance, volume, etc.) without even
having to drag the sound out of the library. Today’s lesson will introduce to a few of the wonders
of Flash's sound object.

1. The first step in today’s lesson is to open the jukebox1 lesson that you worked on previously
   and save it under a new name, jukebox2 or bestbox for example.
      a. Delete the audio layer and double-check to be sure that none of the remaining
           keyframes on the other layers are calling sounds. The best way to be sure is to click

   all of the buttons and listen. If none of them cause a song to start playing move on to
   the next step. If they do cause a song to start playing, find it and get rid of it.
b. Click on each button and delete all of the actions that you put onto the button in the
   previous jukebox lesson.

2. The second step is to prepare the music files in the library to be controlled by the sound
      a. Right-click on the sound named twist (in the library) and select “Linkage”. The
           linkage properties window will appear. Check the Export for ActionScript box and
           Export in first frame. In the
           Identifier window, type
           “twist”. This step instructs
           Flash to make the sound
           available when you publish
           your movie.
      b. Repeat this process will all five
           sound clips using unique one-
           word identifiers for each sound

3. The third step is to create the sound object. Click on frame 1 of the buttons layer and type
   lesson=new Sound(); into your actionscript window. As you may suspect, you just created
   a new sound object named lesson. [Please keep in mind that there is nothing special about
   the name "lesson". You could create a sound object and name it after your dog (Picasso=new
   Sound();) and it would work just as well]

4. Now it is time to control your sounds. Click on           on (release) {
   the Chubby Checker button and add the actions at                  lesson.stop();
   right to it:                                                      lesson.attachSound("twist");
   The first command, lesson.stop(); stops all                       lesson.start();
   sounds associated with the lesson soundobject;            }
   the second command
   (lesson.attachSound("twist");) attaches the twist sound from the library to the sound
   object, and the third command starts the sound.
       a. Before going further, Apple-return to test your movie.
       b. If it worked, add an additional gotoAndStop command to your button that will take
           you to the keyframe that contains Chubby Checker's picture (probably named
           chubbypix). If you are confused about this step, refer back to the previous lesson or
           ask me.
       c. Time to recycle some code.
                  i. Click on the Chubby Checker button.
                 ii. Select and copy all of the code that appears in the actionscript window.
                iii. Click on another button and paste the code from the Chubby Checker button
                     back into the actionscript window.
                iv. Modify the code so that it attaches to the appropriate sound in the library.
                     Remember, you have to attach to the unique one-word identifier that you
                     created for each sound.
                 v. Modify the button's code so that it links to the correct picture on the timeline.
                vi. Repeat steps i through v for the remaining three buttons.
       d. Test your movie.

5. If you have made it this far and time still remains, go to . Download the file
   and open it. Inside is a movieclip that can be used to give your jukebox a
   volume control. Copy and paste the clip into the control layer of your
   jukebox and test it out. This particular volume control is set up to work
   with a sound object named lesson so unless you did name your soundobject after your dog it
   should work!

                           Sub-lesson. Loading sounds dynamically.

No one likes to wait while a bloated flash file stuffed with audio slowly loads into their browser.
The way to avoid this problem is by loading sounds dynamically; i.e. by linking to the sound
files externally rather than making them part of your actual flash file. This method allows you to
create a sound interface that links to a limitless number of sound files while still maintaining a
small (and fast) initial file size. Here's how.

1. Find the five sound files that you loaded into Flash originally and copy them into a new
   folder somewhere inside of your mysite folder. Name the new folder external_sound_lesson.
2. Save the jukebox that you worked on in the last lesson into the external_sound_lesson folder.
   Name it dynamic or something like that.
3. Return to your jukebox. Open its library and trash all of the sound files. Make sure that there
   are NO sound files left in your library.
4. Test your movie. Now when you click on your buttons you should hear no music. Let's
   bring the music back with a new method.
                                                        on (release) {
5. Take note of what each of your sound files is                lesson.stop();
   named (twist.mp3 etc.). Change the code on the               lesson.loadSound("twist.mp3",true);
   Chubby button to read as shown at right.             }

6. Test your movie. If the Chubby button works,
   modify all of the other buttons to load their sounds dynamically. Test your movie. Once
   everything is working create a new folder called temp inside of the external_sound_lesson
   folder. Drag all of the sounds into the temp folder. There should be no sounds visible at this
   point inside of the external_sound_lesson folder. Now test your jukebox again. No sounds?
   Good. Drag the sounds from the temp folder back into the external_sound folder and test the
   jukebox again. Works? Great! If you still have some time left, ask me about this week's
   homework assignment.

                        Build a face: An intro to draggable movie clips.

1. Create a brand new flash document. Apple-j and set its size as 800 X 600. Save the
   document as faceoff.fla.

2. Draw a circle of some sort in the approximate shape of a face.

3. Refer to the timeline and change the name of the layer that currently exists from layer 1 to
   face. Lock the face layer by clicking on the padlock icon. Create a new layer above the face
   layer and name it features.

4. Draw an eye shape on the features layer. Select the entire eye shape by dragging your cursor
   around it and control-click- convert to symbol – to create a movie clip. Name the movie clip
   eye 1. Click on the movie clip one time and use the property inspector to name the instance
   of eye1, drageye1 (as shown below)

5. Double-click on drageye1 to open it on stage. Select the
   entire eye shape again and this time convert it to a button.
   For now we won't do anything special to this button but later
   you may want to add winks, blinks, tears, or whatever. What
   you do need to do (for this button and any other that you
   make for the next 50 years) is make sure that you have a solid
   shape in your button's hit area so that all parts of the button
   will respond when a cursor rolls over it.
   1. Double click on your button to open it.
   2. You should see the same four part timeline shown at right.
   3. Select the Hit frame and f6 to put a keyframe into it. If your eye has a hole in it like the
   one shown at right, fill it with the flood tool or draw a filled shape that covers it. Whatever
   shape you put into the button's hit frame become's it's "hittable action area" (I just invented
   this term so don’t' expect to find it in a book).

6. Open the actionscript panel and click one time on the            on (press) {
   button (to be sure that the button instead of the keyframe               startDrag(this);
   is selected) and add the following actions to the button:        }
7. If your eye works correctly, click on drageye1, copy and         on (release) {
   paste it. Name the new instance drageye2. Test again.                    stopDrag();
   BTW, if you don't like the look of your eyes, you only
   have to edit one to alter both of them.
8. Follow the steps above to create additional facial features; at a minimum a nose, eyebrows, a
   mouth, ears, moles, warts, etc. Test, test, test. Be sure and give each facial feature a unique
   instance name (use the property inspector).

9. Assuming that everything works, now take the time to add some sound to at least one of the
   facial features. Go to and download a free 30-second (or less)
   MP3 music clip or record something yourself with the isight. Import the music clip into your
   library from file- import- import to library.

10. As we did on Monday, Double-click on the sound in the library, select “Linkage” and check
    the Export for ActionScript box. Name the sound "lyric".

11. On the main timeline, click on frame1, and (in your actionscript panel) create a new sound
    object (we will learn a lot more about sound objects later if we haven't already talked about
    them) using the following code: party= new Sound();

12. Open one of your movie clips. Click once on the button and         on (press) {
    open the actionscript panel. On the line immediately following:    startDrag(this);
    add the following code to the button's actionscript
The finished product should have the syntax shown at left.;
on (press) {                                               ;
                                         Please take note of the use of "_root". This particular term
;           is used to indicate to flash that the sound object is located
on (release) {                           on the main timeline. Without the use of _root or
          stopDrag();                    something similar, the command would not work because
}                                        Flash would not find the sound object. Also note the use
of dots as in This is known as dot syntax and is used to communicate between
different levels and objects in flash. If you are feeling exploratory, alter the code inside of your
"mouth movieclip" to:
                                                                       on (press)
Test your movie now and see what happens.                              { startDrag (_root.drageye1);

13. If you have made it this far and time remains, do some
experiments with placing movie clips containing motion or shape tweens on the over state of one
or more of your buttons (feel free to ask how). Think eyes with tears or ears that bees fly out
of…. Have fun.

14. If you are feeling really venturesome (and competent), you may want to experiment with
feedback by using the hitTest function that we used previously in the cannon exercise.

                               Showdown at the Algebra Corral

Today's lesson contains a small dose of algebra. Remember algebra, that subject that you took
back in the eighth grade and never thought that you would use again? It's back and this time it's
your friend.

This lesson also employs much more actionscript than we have used previously (although still a
very modest amount by programming standards) and probably about as much as we will ever use
in one of these lessons. If you type everything correctly the movie will work but you won't have
learned very much unless you pay attention to the explanations along the way as to why you are
doing what you are doing. Keep in mind that you may soon face an assignment to do something
similar to today's lesson on your own.

1. Create a new movie and set its size (apple – j) to 800 X 600 so that you will have plenty of
    room to work with.
2. Draw a cannon of some sort at the bottom of your screen with the barrel pointing upward.
    Try not to spend more than a couple of minutes on this task because there is lots more to do.
3. Control-Click on the cannon and convert it to a movie clip symbol.
4. Click once on the cannon symbol and give it an instance name (via property inspector) of
5. Now it's time to load your cannon. Double click on the cannon to open the movie clip on
6. Add a stop(); command to frame 1.
7. Add a new layer above the layer that contains the cannon shape.
8. Use f5 to extend both layers out to frame 12.
9. Draw a small cannonball on frame 1 of layer 2 (the layer that does not contain the cannon).
10. Select the cannonball and convert it to a movie clip symbol. Name the symbol instance
11. Add a keyframe at frame 12 on layer2 (the layer that contains the cannonball).
12. Add the following command to the keyframe: gotoAndStop(1);
13. Create a motion tween between frame 1 and frame 12 of the cannonball layer.
    At this point your timeline should look like the graphic at right.
14. With the keyframe on frame 12 selected, move your cannonball off of the stage directly
    vertical to the cannon.
15. Return to frame 1, click one time on the cannon and control-
                                                                         on (release, keyPress
    click- to convert the cannon to a button. Add the code shown at
                                                                         "<Space>" ) {
    right to the cannon button. Note the keyPress command that
    tells the clip to play when the spacebar is pressed.
16. Apple return to test your movie and click the cannon or press the spacebar. The cannonball
    should fire off of the stage.
17. Return to the main timeline and click once on the cannon movieclip. If you are at the
    right place, your property inspector should list cannon as the movieclip instance as
    shown at right.

18. With the movieclip still selected add ALL of the code shown at right into your actionscript
     panel. Please read the following explanations         onClipEvent (load) {
     carefully                                                    spinvar=3;}
a. The first line, onClipEvent (load), is only             onClipEvent (enterFrame) {
activated once, when the movie clip that you added                this._rotation = this._rotation+spinvar;
it to first appears on the timeline.                              if (this._rotation>25) {
b. The command on the second line, spinvar=3;                               spinvar=spinvar*(-1);
creates a new variable named spinvar and sets its                 }
value to 3.                                                                 if (this._rotation<-25) {
c. The third line onClipEvent (enterFrame)                                  spinvar=spinvar*(-1);
reactivates 12 times a second which means that it is
constantly checking on whatever you ask it to do.
d. Line four, this._rotation =
this._rotation+spinvar; has three parts. The first part, this, refers to this particular movie clip.
The second part _rotation, is the rotation property of the movie clip that determines how far the
clip is rotated. The third part, _rotation+spinvar adds the value of the variable spinvar to the
rotation property and tells the movie to rotate 3 degrees. When you combine all four of these
lines you have instructed the movie to rotate 3 degrees every 1/12 second.
e. The if statement on line five (shown again at right) is designed
to keep the cannon from rotating in circles. When the cannon              if (this._rotation>25) {
rotates more than 25 degrees, the spinvar value of 3 is multiplied           spinvar=spinvar*(-1);
by -1 so that the cannon rotates in the opposite direction,                         }
counterclockwise. Once the rotation value reaches -25, spinvar is         if (this._rotation<-25) {
once again multiplied by -1, which (remember your algebra?)
changes -3 to +3 and causes the cannon to rotate clockwise again. Before moving to the next
step, try changing spinvar to another number and test the movie. Change the rotation boundaries
(_rotation>25 or -25) to another number and test again. Now change them back where they were
(or don't, if you like your new values better) and lets move on to building some birds.

13. Now that you have a fancy rotating cannon (which fires cannonballs in an arc by the way) it's
time to produce a target. Quickly draw an ugly bird (or pull in some other target from the
Internet), select the entire bird and convert into a movie clip. Finish that bird fast, select it, and
convert it to a movieclip. Get inside the bird and create a shape tween that dramatically causes it
to blow up. Don't forget to add the stop; command at frame 1 and a gotoandStop(1); command
at the final frame.

14. Return to the main timeline, click on the         onClipEvent (enterFrame) {
                                                              this._x -= 10;
movieclip and add the code shown at right to
                                                        if (this._x<-100) {
its actionscript.                                         this._x=800;
a. Line one instructs whatever happens                                 }
afterward, to happen at the frames per second           if (this.hitTest(_root.cannon.cannonball) == true)
rate of your movie (every 1/12 of a second            {
unless you set your movie's fps rate to             ;
something else). Lines 2-4 do things with the                 _root.score=_root.score+1;
movie clips _x value, the one that controls its               }
horizontal location. Line 2, this._x - = 10;          }

(note the minus sign) tells the clip to move 10 pixels to the left every 1/12 of a second. Line three
contains an if statement, so that once the movieclip reaches -100 and is completely off of the
stage, line 4 instructs it to jump all the way over to 800 pixels and start again.
b. Line 5 if (this.hitTest(_root.cannon.cannonball) == true) uses a function that is built into
flash called hitTest to figure out if the cannonball (once you fire it) has struck the movieclip (sort
of like, I've just been hit by a cannonball!). Once a hit takes place, the next line plays the movie
clip, which causes it to blow up. The final line of code allows you to keep score.

15. Still with me? Return to the main timeline, click one time on the bird movie clip and give it
an instance (with the property inspector) name such as, well, bird. Copy it and paste it
somewhere else on the stage, but still within target range. Paste a third one.

16. Run your movie and shoot those birds. What, they all blow up at once? Go back and give
each bird a separate instance name (something like bird1, bird2, and bird3) and play the movie

17. The birds all move at the same speed? Return to the movie and change the number in the
second line (as in this._x -= 10;) to something different on each bird instance.

19. Add a dynamic text field to the stage and give it a variable name of score to keep up with
your hits. You will also have to initialize the score variable in order for it to work properly.
Initialize it by clicking on frame one of your movie and entering score=0 into the actionscript

18. If you made it this far and there is somehow, magically, still some time left, use it to enhance
the movie. Wings that flap, a cannon that roars, special effects after a successful hit such as
expanding the size of the movieclip.

                                    Cannon Enhancements
As good as your cannon is by now there's always room for improvement.

1. First, delete all of the code that is on the movieclip itself to stop the automatic rotation.

2. Open up the cannon movie clip and click once on the            on (keyPress "<Left>") {
cannon button. Add the code shown at right to the other code              this._rotation-=5;
that is already attached to the button:                           }
What this code does is rotate the cannon five degrees in either   on (keyPress "<Right>"){
direction depending on whether the left arrow or right arrow              this._rotation+=5;
key is pressed. You can control the amount of rotation by         }
changing 5 to another number. Using the same strategy, you
could move your cannon left and right by substituting _x for _rotation. You could also assign
different keys and have a cannon that both rotates and moves left and right, or up and down- a

flying cannon- in fact you could use the arrow (or other) keys to chase things around with your

3. In the also easy category, you can add effects based on Movie-clip properties to your target so
that a hit rotates them, makes them transparent, etc. For example, if you add
this._rotation+=45; after the statement
if (this.hitTest(_root.cannon.cannonball) == true) { to one of your targets, the target will
rotate 45 degrees every time it receives a hit, which can create a nice "got that sucker" effect for
the user. You can also add a sound effect to your targets by using the sound object to activate a
sound when the target is hit or by adding a new layer inside of the target and adding a sound to
frame two.

4. For an even odder effect, try changing the color of a clip  clipcolor=new Color(this);
when it is hit with the code shown at right:
This code activates the color object, sets a new color object
called clipcolor, and then uses the setRGB command to reset the color of the target. The last six
characters (99FF00) control the color. By changing them you can also alter the color choice.

5. Another weakness of the game as it is presently set up is that players are rewarded for firing
indiscriminately, which favors a quick finger more than an accurate finger. One way to remedy
this problem is to add code to the button inside of the cannon movieclip that reduces the score by
1 every time the cannon is fired. To compensate, you can raise the score by two every time a bird
is hit. This means that the score is raised by 2 minus 1 every time a bird is hit. A total miss
reduces the score by 1. If some of your birds are faster and/or smaller than others you may want
to score them more highly than slow, big, easy to hit birds.

6. Yet another problem that you may have              onClipEvent (enterFrame) {
                                                               this._x -= 10;
noticed by now if you have been playing your
                                                         if (this._x<-100) {
game is that sometimes hitting a target results in         this._x=800;
more than one point. This problem comes                                 }
about because of the hittest which checks every          if (this.hitTest(_root.cannon.cannonball) == true)
1/12 of a second to see if your cannonball has        {
made contact with the target. If they are in         ;
contact the score goes up by one. The problem                  _root.score=_root.score+1;
occurs when the cannonball remains in contact                  }
with the target for more than 1/12 of a second        }
and therefore raises the score more than one time. The way around this problem is to remove the
lines that says _root.score=_root.score+1; from the outside of the movie clip and place it on a
keyframe INSIDE the movie clip so that went hittest causes the movieclip to play, the score is
incremented just one time as the clip plays past the keyframe (ask me if this sounds totally confusing; it's
easier than it sounds!).

5. Finally, do keep in mind that we live in the home of the double-barreled cannon and that
cannons usually make noise when fired. A nice boomy sound for your cannon is available at

                                      Mobilizing your Project
In this project you are going to transform (and perhaps deform) your previous work, so begin by saving
your birdcannon movie with a new name so that the old one will still be intact.

1. The first step in mobilization is to change your settings to reflect the screen size of the mobile device.
   Let's assume that your device is 200 X 200. Apple-J to open the movie property panel and change
   the settings from what they currently are to 200 W by 200 H. When you close the panel you will
   notice that the canvas area is much smaller than the area occupied by your birds, cannon, etc.

2. In the upper right corner of your flash window, change the zoom setting to 50% so that you can easily
   see all elements on the screen.

3. Make sure that none of your layers are locked and drag your mouse across everything to select it.

4. Click on the transform tool,         hold down the shift key and shrink everything proportionally until
   it fits the canvas. Change the zoom setting to 200% so that you can see things and rearrange the
   birds, cannon, etc. so that they are wherever they should be (hint: using your arrows while everything
   is still selected can help). If anything looks seriously deformed or undersized, you may want to resize

5. Apple-return to test the movie. Notice anything weird? Do your birds move really fast when they
   appear? That's because they are moving at the same rate of speed as before across a much smaller
   screen area. Slow down your birds by changing the code attached to each of them such as this._x-
   =20; to something smaller such as this._x-=5; that will make them move more slowly.

6. The code that tells your bird when to jump to the other side of the
   screen also needs to be modified to reflect the new dimensions. Right          if(this._x<-100) {
   now it reads something like (at right). Change -100 to to -20 and 800          this._x=800;
   to 220. Test your movie. If you are satisfied with the settings, great.
   If not, keep tinkering until you are.

7. If you still have time, you may want to try try mobilizing one of the jukebox movies as well. (save as
   another name first) The trick to making this one work successfully on a phone is to make the
   graphics as small as possible; not by dragging and resizing from within the movie but by actually
   importing smaller graphics. Here's an easy trick for doing so.

8. Open the jukebox movie and zoom to 50%. Go to the location of the picture of each band or
   musician and "screencapture" it but clicking on the following keys simultaneously: Apple-shift-4.
   Move your mouse around without clicking it. Notice that the cursor has changed to crosshairs.

9. Move the cursor to the corner of the picture that you want to capture. Press and hold the mouse while
   you drag across the picture. Be sure that you only get the picture. When you release the mouse you
   may hear a click. Look on your desktop and you should see a file called Picture 1. Doubleclick on
   Picture 1 to see if you captured the portion of the picture that you wanted. If not, trash Picture 1, and
   try again until you get it right.

10. Once you have captured all of the pictures, import them into your library and use them to replace the
    pictures that are currently on the screen. Set your movie size to 200 X 200 (Apple-j) and resize the
    picture to make it fit if you need to. A little bit of resizing is OK but a lot is bad because although the
    picture looks small to the eye, the cellphone has to work much harder when a big picture has been
    made smaller without reducing its "real" size and may simply give up!

    An intimate and slightly embarrassing exercise in building a fully interactive screen.

Today's exercise is dedicated to Jeff Lunn, a former student who came up with the idea for it.
This exercise is a hybrid in that it begins by using quicktime as a tool for capturing a sequence of
images (while forcing you to take a look at yourself) and then employs Flash to turn the images
into an "eyecatching" interaction. In addition to being embarrassing and fun, this lesson
introduces the concept of a "fully buttoned" interactive screen. You may want to consider this
approach the next time you produce a tour (say as in the final assignment for this course).

1. Start Quicktime and then File- New Movie Recording.

2. Arrange the Isight camera on the top of your computer so that you see yourself in full facial.
   Remove your glasses if you wear them and start recording.

3. While the recorder is running, look up and to the left, only moving your eyes. Look straight
   up. Look up and to the right. Look left, straight ahead, and to the right. Look down to the
   left. Look down to the middle. Look down to the right. Stop the recording.

4. Move the triangle on the quicktime timeline until you see yourself
   looking up and to the left.

5. Like what you see? If not, repeat step 3. If you are satisfied with your images, while you are
   still (on screen) looking up and to the left, File-Export- Movie to Picture. Name your picture
   something like upleft.

6. Repeat step six with each of the remaining eight directions that you looked. Ie, looking
   upper right, left, upper left, etc. Give each "look file" a unique name.

7. Create a new flash file that is 801 X 600 pixels (yes 801) and import all 9 embarrassing face
   shots into your library.

8. Draw a rectangle on stage and convert to symbol – button. Set the size of the button (using
   the property inspector) to W:267 X H:200. Set the location of the button to X:0 Y:0

9. Add a new layer (name it pix or something of the sort) and lock the layer that contains the
   button. Name frame one of the new layer something like middle_straight and place the
   picture in which you are looking straight ahead in the middle of the window. Place the
   picture exactly in the middle of your screen by using your property inspector to set an x value

   of 240.5 and a y value of 180.

10. Insert a new keyframe On frame 2 of the pix layer, name it “left” and insert the appropriate
    picture. Insert a new keyframe on frame 3, name it “right” and insert that picture. Repeat the
    keyframe-naming and picture process all the way to frame 10, giving each keyframe a name
    that reflects a different eye orientation (upperleft, uppermiddle, upperright, etc.). Make sure
    that all of your pictures are exactly centered.

11. Unlock the layer that contains the button and lock the layer that contains the photos. Extend
    the timeline for the button layer all the way out to frame 10 (or wherever the timeline of the
    other layer ended up) by clicking on frame 10 and pressing the f5 key.

12. Put an action on the button so that when the mouse rolls over the button it will take you to the
    keyframe that contains the photo in which you are looking to the upper left. Try to figure
    this out on your own but if you need assistance, the script at the bottom of the page may be of
    some help.

13. Test your movie. If it works properly, moving your mouse over the button will automatically
    take you to the look upper left photo. If it is working, copy and paste the button (making
    sure that it stays on the same layer. Relocate the new button to the right of the first button.
    When it is properly placed, the X: value should be 267 and the Y: value should be 0.

14. Change the code on the new button so that it takes you to the photo in which you are looking
    straight up.

15. Copy and paste another button and move it to the far right. When properly placed, X:534

16. Change the code on this button so that it points to the upper right photo.

17. Repeat this process in the middle and lower rows. You should end up with a total of 9
    buttons that link to 9 separate keyframes; each with a separate photo of eye orientation. Test
    your movie.

                             Code Hint for Button
                             on (rollOver) {



    Biking without training wheels- dragging clips around that make other clips move.

The instructions that I give for Flash exercises are very explicit and in the world outside of class,
you will have to figure out things on you own. People who use flash frequently often refer to a
book or some other set of instructions to help them. Another, very common practice that I also
use is to "borrow" code and ideas from previous projects to employ in new ones. In fact, I often
copy code directly from a previous project directly into a new one. The assignment today draws
upon the "borrowing" technique, and is intended to give you some experience in leveraging your
previous work to create something new. This assignment would be quite easy with the usual
step-by-step instructions, but today the training wheels are off. The instructions are general and
it is up to you to find and implement the steps that will make this happen. Expect to get a little
bruised in the process of figuring out how to do this stuff on your own but don't get discouraged.

To make this exercise easier, open the cannon project and the face lesson project. While you are
working you can access these files via the "Window" menu. If you can't find these files on your
computer for some reason, there are downloadable versions on my website at
ealdridge/lessons/cannon.fla and ealdridge/lessons/drag.fla

What I want you to do is to design a movie (size 800 X 600) that contains one movie clip that is
draggable (refer to the make a face lesson for code and inspiration) and another movie clip that
moves to the right or left and up or down when you drag the first movie clip over it (refer to the
first cannon exercise for the hitTest code) .
Design the movie so that when the clip leaves the stage (i.e. _x >800 and _y>600) it
automatically returns to the upper left hand corner of the stage.

A few hints.

   1. The draggable movie clip will need to have a button inside of it.
   2. The draggable movie clip will also need an instance name in order for the hittest effect to
      work properly.
   3. The path to the movie clip for the hittest will begin with _root. (note the dot)
   4. Help someone else! If you finish these steps, look around for someone with a perplexed
      look on their face who could use your help.
   5. If there is no one left for you to help, add a sound to this interaction. Now the target
      movie-clip should generate a sound when you drag the other clip over it. Use the sound
      object to accomplish this step. For inspiration and code, refer to the final jukebox lesson,
      or the clickable class lesson in which everyone speaks (on my website at
   6. Go back to step four.

                                     Multiple Choice Exercise

This exercise brings me back to a job that I mentioned earlier (remember the graphic
designer/fortune teller) that involved an instructional project for a state agency. My job title was
instructional designer and my first task on the job was to look at the online instructional system
that predated my arrival and come up with ways to improve it. My first, second, and third
impressions were that the material we were teaching and the way we were presenting it was so
boring that any normal human would quickly drift off into other, more interesting, thoughts. For
me, the most engrossing aspect of this material came from the exercises at the end of each
chapter where, at least, I was forced to think about the material and focus on it. My suggestion,
that we add lots more of these exercises- on every instructional webpage, was quickly stifled
because the system was too awkward to support this innovation. Later on, when I discovered
some of the capabilities of Flash, we actually were able to add exercises- multiple choice, fill in
the blank, etc. – wherever it seemed appropriate. I always like to think that I made at least some
progress toward reducing a mountain of statewide boredom. Today's exercise is based on some
of those early techniques. Tests can be taken a lot further with flash; even to the point of
tracking users in a database but today's exercise will introduce you to some relatively easy
techniques that you can use again without too much effort.

1. Create a new movie at 800 X 600. Put a stop command on frame one.

2. On the first screen create an input text field with a border.

3. Give the text field an instance name of password.

4. Below the text field say something (with static text) to the effect of "type password above to

5. Put a button on the stage and enter in the following code shown below:

on (release) { if (password =="emuel") { nextScene();}} (substitute for emuel)

                    6. Insert-Scene

                    7. Insert a stop command on frame 1 of the new scene.

8. Open Window- Components.

9. Open the User Interface components and drag a radio                                      button
    onto the stage
10. Type a question with four possible short answers.
11. Click on the Radio Button and, with the property inspector,                             click on
    Parameters. Your property inspector should look like the graphic at right.

12. Change the groupname to mybuttons.

13. Change the label to reflect one of four possible short answers to your question.

14. Copy and paste the radio button. Change the label again to reflect another short answer.
   Repeat this step two more times.

15. Put a button on stage and make it take the user to frame 5. on (release) { gotoAndStop(5); }

16. Insert a keyframe at frame 5. Draw a circle around the correct answer. Now test your movie.

17. If it works, insert a button at frame five that links to scene 3. on (release) { nextScene(); }

18. Insert-Scene and place a stop command on frame 1.

19. Ask another question and modify the code (copy the same button and text field to make it
   easy) in step five so the user can only progress to frame five if they answer correctly. On
   frame five put a stop command and some positive feedback.

20. If you want a challenge, come up with a way to give negative feedback in case of a wrong
    answer on frame one. You will have to add another if statement to your button that causes an
    action when user input is unequal to the correct            on (release) {
    response. The symbol for inequality is <> . There are       if (password <>"emuel") {
    lots of ways to give negative feedback, such as having a    feedback="wrong!";
    hidden dynamic text field with a variable name. Code           }
    for this one would look something like:
21. Finished already? Try adding some fill in the blank questions that use input text fields and
    similar programming to that shown above to test for the correct input.

                                             Make a clock.

   1. Quickly, draw the hand of a clock on stage. My attempt at this
   drawing is shown at left. Control-click on the shape and convert it to
   a movie clip. During the conversion process, take note of the
   registration options shown at right and select the same one that is shown. You are going to
   rotate the clock hand, and by registering the clip's focal point at bottom middle, the rotation
   will occur from that point.

2. With the movie clip selected, click the
sequence shown at right. The window of
options shown at bottom right should

1. For the first option, select Property: _rotation. This tells your script that you want to set the
   rotation property.

2. Next, for Target: type this to
   instruct your script that
   rotation should be applied to
   this specific movie clip.
3. Check the Expression check box next the to the target window.
4. For Value: enter this._rotation += 1 and click
                                                                   onClipEvent (enterFrame) {
   that expression check box as well.
                                                                             setProperty(this, _rotation,
5. Give some thought to script that you have created               this._rotation+=1);
   (shown at right). What it does is rotate the movie clip         }
   by its current rotation value plus 1 degree every time
   that the movie clip enters its first frame which happens 12 times a second (think of a really
   fast heartbeat). In order for a clock to rotate through an entire circle in one minute it has to
   traverse 360 degrees. At a speed of 12 degrees (360/12) per second, you have a clock that
   goes all the way around every thirty seconds, not what you want (unless you drink lots of
   coffee). To remedy this problem you have two options for slowing down the clocks hand.
   You can Modify-Document (or Apple-J) and set your frame per seconds rate to 6 or you can
   change the rotation figure to .5 (½) of a degree. Either way works.

6. Now that you have a functional minute hand, you may want a second and hour hand as well,
   and numbers to indicate the minutes and hours.

7. Since this is Flash and make believe you may want to design a nasty little time bomb that
   does something awful like playing an Abba tune if the user doesn't come up with the correct
   answer fast enough. Some of the other lessons contain just about everything that you would
   need in order to make this second option take place.

8. Made it to this point and time is left? Ask me about Flash's date object for even more

                                      Introduction to Video

Those of you who have a strong interest in video should consider taking NMI's Rich Media class.
Clate Sanders, who teaches that class, has been producing and editing video since dinosaurs
roamed the earth and knows this topic as well as anybody. I, on the other hand, know the basics
of digitizing video content and utilizing it in different formats such as the web, but make no
claim as either an editor or producer.

Today's lesson is aimed at giving you a brief introduction to the small universe of digital video.
You may to explore digital video more later, say as in your final project or in a future course.

   1. Open the trapeze file on your desktop with imovie.
   2. Shorten the track to only 30 seconds (so that conversion to the QuickTime format will
       happen more quickly, and you won't waste all of your class time waiting for
       compression-a geologic process- to happen).
   3. Add a picture or two to the movie, and play around with the "Ken Burns" effect. See if
       you can zoom in on one portion of the picture and lengthen or shorten the amount of time
       that it takes for the effect to take place. Reverse the effect.
   4. Lower the volume on the current sound in the clip so that you can't hear it and import a
       new sound to the time line.
   5. Export the movie via the share menu to QuickTime for CD-rom.
   6. While the movie is compressing go to and check out the same movie as it
       appears on you tube. Using the information provided by youtube, embed this movie into
       a webpage and test it out. Next, create a link to the same movie and test the link.
   7. After the movie is compressed to QuickTime, open the flash video encoder and convert
       the movie to an flv file. Once this conversion has finished, open Flash and embed the flv
       file into a standard flash file by using the flv player and browsing to the flv file (Window-
       components-flv player).
   8. Find a skin that you like and add it to the movie. Now generate an swf file and embed
       the swf file into a webpage.
   9. Upload the whole thing into a brand new folder on your website. The "whole thing"
       includes the swf file that you generated, the flv file and a special swf file that provides the
   10. Test it out. If time is still left spend the rest of class time learning as much as you can
       about imovie.


Right Clicking.

I frequently give instructions in this course that ask you to "right click." Windows computers
automatically come with right click capability but Macintoshes for some reason are always
amazed that anyone would ever need more than one button on their mouse and have to be coaxed
into providing this capability. Here's how to become a right clicker with a Macintosh.
1. Click on the apple symbol in the upper left hand corner of the screen and choose system
2. In the second row of the window that
appears click on Keyboard and Mouse.
3. A row of buttons near the top of the window
should appear. Click the one that says mouse.
4. Click on the dropdown menu on the right
side that says Primary Button. Select
Secondary Button.
5. That's it. While you are in the mouse menu you may want to take a look at some of the other
options just in case. When you are done click the x in the upper left-hand portion of the window
to close system preferences.

Apple Keyboard Shortcuts

           Keystroke                            Description
           Apple-Shift-3                        Take a picture of the screen
           Apple-Shift-4                        Take a picture of the selection
           Apple-Shift-4, then press            Take a picture of the screen,
           Control while selecting              place in Clipboard
           Apple-Shift-4, then Spacebar         Take a picture of the selected
           Option-Apple-esc                     Force Quit

           Shift-Apple-Q                      Apple Menu
                                                Log out
           Shift-Option-Apple-Q               Apple Menu
                                                Log out immediately
           Shift-Apple-Delete                 Finder Menu
                                                 Empty Trash

             Apple-N                                 File Menu
                                                         New Finder window
             Shift-Apple-N                           File Menu
                                                         New Folder
             Apple-O                                 File Menu
             Apple-S                                 File Menu
             Shift-Apple-S                           File Menu
                                                         Save as
             Apple-P                                 File Menu
             Apple-W                                 File Menu
                                                         Close Window
             Option-Apple-W                          File Menu
                                                         Close all Windows
             Apple-I                                 File Menu
                                                         Get Info

                                     Useful Flash Interface Features

Feature Number 1: Tabbed Document Windows.

9. Open Flash 8 and create two new flash documents.
10. Look at the upper left hand corner of the Flash window, just above
    timeline. Note the tabs saying untitled -1 and untitled-2. Those are two
    separate documents. The tabbed feature allows you to navigate easily
    from one document to another.

Feature 2: Script Assist! Script assist can't do everything but it can make your life easier if you are not a
hard core coder. This example gives a flavor of how it works.

1. Draw a small circle on the stage (did you notice the new drawing feature? If not, ask me) and
   control-click-convert to symbol- button.
2. Control click on the button and select actions from the menu that
   appears (yet another new option).                                        Like This
3. Locate the Script Assist button in the action window. If it is not       Not like this
   "shawdowed", click it.

4. With the button still selected, click
   the + button as shown at right,
   Global Functions -Timeline
                                                                                       on (release) {
                                                                                       }                   57
    Control- Play. The code that resulted from clicking on play should look like the example at right.
    Notice, that you did not have to type anything in (and more importantly, did not have to memorize
    anything) but there is your nice, clean code for telling a button to institute a play action.

5. Click on the upper line of code that says on
   (release) { . The options shown at right should
   now appear in the upper part of the action panel.
   Click on the various options and watch the changes
   that take place in the actionscript code. Now click
   the Key Press option. The cursor should start
   blinking in the box between Key Pres and Drag
   Out. Press one of the letters on your keyboard and
   watch what happens to the actionscript code. Press another letter. And another. The key press
   command gives you the capability of assigning a key to a specific action (as in press the M key to

6. Draw another shape on the stage and turn it into a movie clip. Click on       onClipEvent (load) {
   the shape and, once again, Global Functions -Timeline Control- Play.                  play();
   This time the script should read as shown at right. Click on the upper        }
   part of the script that says onClipEvent (load). Now the options shown at
   right should now appear in the upper part of
   the action panel. Click on the various options
   and watch the changes that take place in the
   actionscript code. These options are movie
   clip events that generate actions, such as the
   EnterFrame event that we used in the cannon
   exercise to rotate the cannon.


To top