© Emuel Aldridge, January 2008
Contents

 

Introduction To Local And Internet File Management	4
Introduction to Dreamweaver.	8
Introduction to Tables with Dreamweaver	11
More Tablework. Table your classmates	11
Intra-document links and image maps.  Naming the class.	14
Using frames to target websites	16
Quick and Dirty Website Lesson Using Framesets	18
Forms Intro	20
More Fun with Forms	22
CSS (Cascading Stylesheets):  Lesson 1	24
CSS Background Lesson 2	25
Css. Lists	26
CSS: Changing the look of text-based links. Rollover effects	27
Laying out a website with Div tags and CSS	28
Introduction to The Template Tool	31
Fireworks Rollover Button Exercise	33
Audacious Audio Effects	36
Creating and Tweaking a Blog	37
First Photoshop Lesson: Image Editing and Resizing	41
Second Photoshop Lesson: Image Selection and Cleanup	42
Third Photoshop Lesson: Making rollover buttons	43
Flash: Introduction to Tweens	46
Flash: Motion Tweens and Movie Clips	48
Flash: Movie Clip Control	51
Working With Scenes To Organize Flash	53
Introduction to timeline-based audio (building a jukebox)	56
Introduction to the Sound Object (advanced jukebox)	57
Build a face: An intro to draggable movie clips	60
Building an interactive game with a little help from algebra	62
Game Enhancements	65
Going Mobile	67
Building a fully interactive screen	68
The training wheels come off. Are you ready?	70
Passwords and building a Multiple Choice Exercise	71
Timing is Everything	73
Video Lite: getting on to your computer; onto the web; editing with imovie	74
Appendix (don't miss it)	75

 

 

 

 

Introduction To Local And Internet File Management: Part 1

 

Concept 1. Web pages (html files) are made up of text and nothing else!

 

Although they sometimes look like large impressive documents, web pages actually are nothing more than text files. In addition to the text that you read when you view a web page, there is other, hidden, text that tells your web browser (Internet Explorer, Safari, Firefox or whatever) how to display the page, where to find pictures, video, and other media files that may make up the webpage. The pictures and media files are totally separate from the web page itself and are stored in folders. This concept can feel a little strange at first but for you to become a competent web developer you must understand and come to terms with it.

 

Concept 2. The web server is not your computer.

Another important concept is the distinction between the webserver that shares your website with the world and the computer that you use to develop your website. In this class you will develop web pages and ultimately websites on the computer in front of you. Once you have developed a web page or site that you are ready to share with the world, you will move the content to another computer known as a web server that, in this case, is physically located in California.

 

Concept 3. Send your content to California via an FTP client

The way that you move the content to the web server in California is through the use of a program called an ftp client. All an ftp client does is provide a connection between your computer and the web server so that you can move content back and forth.

 

Learn these concepts or we all suffer.

Based on my experience, the way that students screw up most frequently in this class is by not understanding these three concepts.  The purpose of this lesson is to help you get past this little barrier (which really is a little barrier) so that we can concentrate on things that are more fun and rewarding. 

 

1. Download the file http://www.mynmi.net/ealdridge/concept.zip and decompress it. A new folder called concept should appear. Open concept and double click the file called fixme.html so that it opens in your browser (most likely it will open in Safari).  Fixme.html used to display a lot of images as well as a video file but all have now been moved from their original folders and the original image folders have been thrown away.  Your job is to fix the fixeme file by re-creating the folders that it is looking for and moving the correct images into them. Here’s how to do it.

 

2. From the view menu of your web browser select “View Source" and read down until you see a line of code that says

<img src="pic1/climbing.jpg" width="199" height="300" border="2" />

This line of code tells the web browser to load a picture called climbing.jpg this is located inside of a folder called called pic1 .  It also instructs the browser to display the picture with a width of 199 pixels, a height of 300 and a border of 2. 

 

3. Look inside of the concept folder and find the climbing.jpg picture. See it?  Create a new folder inside of concept called pic1 and drag climbing.jpg into it.

 

4. Return to the browser window that displays fixme.html (not the window that displays the source code but the other one) Click the refresh button. At this point the climbing.jpg picture should appear.

 

5. Return to the browser window that displays the source code and each segment of code that looks for a picture. You should find a total of nine pictures and four separate folders that they will need to be placed into. Where necessary, create folders, and place the appropriate pictures into the folders.

 

6. Return to the browser and hit refresh/reload. Do  you see all nine pictures?  If so, congratulations you are  done.  

 

 

 

 

Introduction To Local And Internet File Management: Part 2

 

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 web 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 a student who is taking this course in the 21^st century, you live in an era when most computers are always connected to the Internet. Being constantly connected tends to blur the distinction between a local and a remote computer, and you may not be clear about the distinction between files stored on your computer and files placed somewhere else on a web server

 

Here is how it works.

·      In this course you will create files and folders on the local computer that is inches away from you and link them together into a local "website" that ONLY exists on  YOUR computer. 

·      Once everything works well on your local computer you will use a type of program known as an FTP client to move the files and folders to another computer in California that functions as a web server, that will make all of your work available to the wide wide world. 

·      When you move files and folders to the web YOU HAVE TO CREATE THE SAME FILE AND FOLDER STRUCTURE THAT EXISTS ON YOUR LOCAL COMPUTER OR IT WILL NOT WORK!

 

Enough verbiage, let's get started.

 

Picture yourself: Here and on the web.

 

1.     Turn on the isight camera on top of your computer by twisting the metal rim around the lens so that it is open and you can see the lens.  Make sure that it is pointing at your face. (if the program Ichat launches, Apple q to make it go away.

2.     Open the Photo Booth.  Photo Booth, 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 Photo Booth and click on it when it appears.

3.     Once Photo Booth is launched you should see yourself on the screen.  If not, move the isight around until you have a clear view of your face. 

4.     You can take a picture of yourself now or click effects to if you want to shoot something funky. I don’t care how funky as long as the picture is recognizable as you. Be advised however, that you and other students may use this picture several times during the semester!

5.     To find your picture go to the Photo Booth folder inside of your images folder (hint: use spotlight to find the folder by typing Photo Booth again and this time click on the Photo Booth folder)

6.     If you like the picture rename it 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.

 

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 about as well as any other ftp client and it's free, although it will occasionally quack and ask you to donate money to its creator.

 

1. Use spotlight to locate cyberduck and start it up. Click "New Connection".

2. Type (a) mynmi.net into the server field; 

(b) mystudent (or whatever your instructor tells you to) into the username field; and 

(c) jefflunn (or whatever your instructor tells you to) into the password field. 

3. Click Connect.

 

4. Welcome to California.  Once you are connected, you should see a screen that looks like the one at right. mynmi.net is the domain name that will hold your website for this class.  Since mynmi.net is hosted on a webserver in California, anything you put there literally crosses the continent.

 

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

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

7. Open the folder that corresponds to your class time and drag the picture of yourself that you saved onto your desktop into it.  

8. Using your web-browser navigate to your new folder, starting with mynmi.net/student (the rest should be obvious). Ultimately you should end up in a folder with a path name like http://www.mynmi.net/student/10am/.  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 http://www.mynmi.net/student/10am/emuel.jpg) 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 you.

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 index.html.

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. 

 

3.         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.

4.         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 yourself.

 

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. Once you have a style you can apply it elsewhere without  having to re-enter all of the font information such as bold, color, size, etc.

a.     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 called class_images.  Put class_images 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 it (it should already be named 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.

 

 

 

10.    If your web account is already set up (it may not be) upload the index.html file and the class_images folder into your website location. To do this, open Cyberduck and click "New Connection."
(a) Type mynmi.net into the server field; 
(b) your username into the username field; and 
(c) your new password into the password field. 

11. Click Connect.

 

12. Once you are connected, you should see a screen that looks like the one at right. mynmi.net is the domain name that will hold your website for this class. 

 

13. Open mynmi.net and inside you will find a folder with your username such as ealdridge.  This folder is web active and anything you put in there is open to the world so use discretion.

 

14. Drag the index.html file and the class_images folder into the folder with your username and then check it out with your web browser.  The url will be something like http://mynmi.net/student/ealdridge

Introduction to Tables with Dreamweaver

 

1. Start Dreamweaver and open the Insert Toolbar.  Choose the Common view. 

 

2. Click on the table tool and create a table with 4 columns, 4 rows with the following characteristics:  (1) 80% width  (2) 0 cellpadding  (3) 0 cell spacing  (4) 0 border

 

3. Type some gibberish into each of the 16 cells just to have something there to play with. Select the entire table by clicking on the outside edge.  Three little squares should appear on the table border when it is successfully selected. 
4. Once the table is selected, look at the property inspector and take note of ALL the information that is presented there about your table, especially width (W) and height (H).   
   
   
5. Use your mouse to make your table wider and taller.  Now look at the property inspector and see if anything has changed. 
6.  Now, type 15 into the cellpad window and press enter.  Your cells are now padded and the text should be much further inward.  Type 0 into the cellpad window and 15 into the Cellspace window and note the effect.  Experiment with all of the other features in the property inspector by changing the numbers and colors and noting the effect until you are thoroughly bored. USE APPLE Z (undo) if anything scary happens.  Don’t quit before adding a background image to your table (feel free to ask for help)  Once you are done, delete the table and repeat step 2 to make a new, unaltered table.  
7. Click inside of each cell and select a different color.  Type some more gibberish into the cells, click inside one of the cells and press enter several times. Experiment with Horz and Vert. on individual cells. Not how text jumps to the top or to the bottom or middle depending on the settings.
8. Practice merging cells by selecting two or more cells and using the cell tool to join them together. 
9. Now use the cell tool to split some cells.

10. Introduce screen capture as a way to get the badge

    Now for the challenge (or who knows, maybe it will be easy?).  Create a table that looks as much as possible like the one below.  NOTE: You will have to navigate to
    http://mynmi.net/ealdridge/table.jpg to see the table in its full splendor.   Be sure that you insert an image into the bottom middle cell.  It doesn't have to be a badge.

More Tablework. 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.    

Introduce Batch processing as a way to get the right size of pictures.

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.  When you are finished, your table should look something like the one below.  Save the document as classmates.html and test it. 

3.     Create an internal link from index.html to classmates.html.

a.     Creating an internal link in this case involves 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)

b.     highlighting the text with your mouse.

c.     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 by using the the pointer (shown at right).

4.     Test it.  If it works upload both files to your website. Go to your website http://mynmi.net/student/yourname and test to see what happens. Did your picture and your classmate's pictures show up? No? Did you remember to upload your pictures?

5.     More time? Try making a nested table. Nested tables are sometimes used by web designers to have greater control over placement of pictures and text.  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 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. Set the border of this second table to 0.
3. Type some text into each cell of the table.  Preview the document to see how it looks in the browser.  This lesson is oversimplified but don't forget the nested table technique.  It may come in handy later.

 

6.     Still more time?  Go back to the classmates.html document and create links from your classmate's names to their websites. Almost all websites will have a url similar to http://mynmi.net/student/ealdridge with the first letter of the first name combined with the last name.

 

 

 

 

 

 

 

 

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:

http://normaltown.net/resources/Internal_demo1.htm  and test the links.  Then, go to:

http://normaltown.net/resources/Internal_demo2.htm 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. (make the images folder if you don't have it)  If you don't have a picture called classmembers.jpg let me know. We may need to take a class picture!
   
   
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 (from the Insert menu).  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, which will look like this graphic symbol, type the class member's name as in:  John Smith
   
   
7. Now click on the classmembers picture.  Use the Hotspot tool to draw a circle on 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)

 

Link to this project from your hompage and upload everything to your website, including the picture and  your updated homepage.  Test it. Does it work? Keep trying till it does. 

 

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. Click Save All.   Save All will prompt you to save three separate files. The first file will be your 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.  Name this first file frameset_for_class_picture.htm and save it into a new folder called frames.

 

5. The second prompt will give you a visual reference in your document that will indicate which portion of the frame you are saving. If the bottom portion of your document is highlighted name it bottom.html and save it into the frames folder, otherwise name it top.html. Repeat the process with the other file. Now browse to the frames folder and look inside.  You should see the three files that you just created.

 

6. 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).
   
   
7. Click on the class picture and use the Hotspot tool to draw a circle a circle or rectangle around someone.

 

8. Link to the website of each person by typing in http://mynmi.net/student// theperson's first initial and last name as in in http://mynmi.net/student/ealdridge.  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 weird experience for the visitors to your website. 

 

9. 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.

 

10. Still can't see everything? From the frames panel click on the topframe and set scroll to yes. Test again.
    
    
11. 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.
    
    
12. 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 11^th 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 http://mynmi.net/ealdridge/framelesson.zip .  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.

a.     Move the file called nmiclass.cgi to your mysite folder. 

3.     Open nmiclass.cgi with textedit and make the following modifications being very careful not to change anything such as quotations marks that could affect the coding.  

a.     substitute your email address for mine, Do NOT use your university email address or yahoo mail unless you have LOTS of patience. Cgi email works better with Google or Hotmail.

b.     Modify the $backurl so that it points to your homepage.

c.     Modify the Follow Up html at the bottom of the page to whatever you want it to say.  

d.     Save the file as yourname.cgi (for example: emuelaldridge.cgi).

4.     This will become your very own cgi mailer that you can use to send form-based info to your email address.

5.     Send the file to your instructor. Ask him or her for instructions  on how to send the file. 

6.     Your instructor will move your cgi file to a location on the WWW where it should work.  One of the things your instructor will have to do is to "chmod" your file by using cyberduck to set the files permissions to execute.  To chmod a file with Cyberduck, right click it and change the settings to match those shown at right.  Although YOU don't have to complete this step at this point, it is worth knowing how just in case you want to set up your own cgi file sometime.

 

7.     Now your instructor will provide you with the URL to test your file. Test the file by clicking on it to see if you get an email.  No email?  Check your spam/junkmail folder to see if it got screened out.

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

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

10.  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.

11.  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: http://emuel.com/cgi/yourname.cgi (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.

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

13.  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. 

 

14.  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).

15.  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. 

16.  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. 

17.   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.

18.  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

19.   “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) .
 

20.  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 some 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. 

 

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 http://mynmi.net/ealdridge/stylesheet_example.zip 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 Dreamweaver.
   
   
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 experiment. 

 

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 may have put a folder called stylesheet_example2 on your desktop.  If not, you can download it from http://mynmi.net/ealdridge/stylesheet_example2.zip.  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 better.

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. 

More Css. Lists

1.     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. 

2.     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. 

3.     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.

4.     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.

 

More CSS: Changing the look of text-based links. Rollover effects.

 

Later on we will learn how to use image substitution for fancy rollover effects with graphics. This particular lesson shows how to use CSS to add rollover effects directly to text.

 

1.     Create a brand new html document named css_rollover.html.

2.     For starters let’s take a look at the easiest, but necessarily the best, way to create textual rollover links. Go to modify Page Properties and select Links. A menu will appear with several options for controlling the appearance of your page’s links including changing the color of a link when the user’s mouse rolls over it. This menu works and actually generates CSS code, but only works for the individual document. Another limitation is that this menu is limited and does not offer additional options such as changing the font of your links.

3.     These limitations do not exist when you create the CSS styles yourself. Here’s how.

a.     Create a new style by clicking on the plus sign.

b.     When the New CSS Rule window appears select Advanced as shown at right.

c.     Use the Selector to choose a:link. Click OK and save the stylesheet as  rollovers.css.

4.     Once you save rollovers.css the window shown at left should appear. Choose the Font, Size, and Weight that you want to apply to all of your links. This will set the look of your links before anyone clicks on them. Note that you have LOTS of options such as color, ALL CAPS, blink, underline, none, etc. 

5.     Repeat steps 2 and 3 to create new styles for a:visited, a:hover, and a:active. (a:visited defines how a link appears after it has  been clicked, and a:hover sets the rollover effect, and a:active defines the look while the link is being clicked! 

 

***CSS can be very picky and IT IS VERY IMPORTANT TO DO THESE STEPS IN THE PROPER ORDER OF (1) a:link (2) a:visited (3) a:hover and (4) a:active. 

6.     Create some links and test it out.  Did it work?  If so, change it and experiment with different fonts, sizes and effects. Once you have the look that you like be sure that the rollover.css stylesheet is saved. 

7.     Congratulations, you have created a set of rollover effects that you can use in any future  webpage just by attaching rollover.css (or by pasting the styles from rollover.css into another css document and attaching it). 

Laying out a website with Div tags and CSS.

 

In the early days of web design the options for making a website look the way you wanted it to were limited. Most developers, including me, became very familiar with the table tool but there has always been a demand among “designer types” for more flexible options. Over time, css used in conjunction with div tags has become an increasingly common way to lay out websites. Even though I find that I can do almost anything I want with tables, you as future web developers are going to encounter css and div tags a lot so you need to become familiar with how they work. 

 

1.     Download div_layout.zip from http://mynmi.net/ealdridge. Unzip it an drag the div_layout folder into your mysite folder

2.     Create a new web page and save it inside div_layout as layout.html.

3.     Find the rollovers.css file that you created in the previous lesson and copy it into div_layout.

4.     Create a new style by clicking on the plus sign. When the New CSS Rule window appears select Advanced and create a new style called #allcontent. This style, as its name suggests, will define the div tag that contains all of your content.

a.     Be sure and add the # sign to the style name. The purpose of adding # to the style name is to create a style than can only be used one time per document.

b.     Click OK and save the stylesheet as  div_layout.css.

5.     Once the stylesheet is saved click on the box category and set the characteristics shown at right.  In case you are wondering, setting the right and left margins to auto centers the div tag.

6.     Click on the background category and set the background image to pix/bkg.gif.
 

7.     Now that you have made this style it is time to apply it to a div tag and find out what it does. Using the insert toolbar click “insert div tag” (from either the common or layout view). When the Insert Div Tag menu appears select ID- allcontent, and click OK.  If everything worked properly you should have a totally new two-columned look in the middle of your page. FYI, the “columns” are actually made up of a tiled image called bkg.gif that you set as the background image in the previous step. Later you may want to change the look of background by opening bkg.gif in fireworks or photoshop and change its colors.

a.     Click on "Split "  so that you can see your page's source and take a look at the code that you created by inserting the div tag and attaching it to the all content style. It should look like the code shown below.

·      The part that says <div id="allcontent"> is the starting point for the div tag.

·      </div> is the ending point of the div tag.

·      Content for id "allcontent". Goes Here is nothing but placeholder text that makes it easy for you to place your cursor between the div tags so that you can add something else.

8.     Now create a new Advanced (as in step 4) css style for your banner named #banner. Set your background color to whatever you like, height to 92 pixels, width to 100%, and Top to auto (click the positioning tab to find Top).  Highlight the text that says " Content for id "allcontent" Goes Here " and Insert a new div tag into the allcontent div tag.  Apply the banner style to the new div tag. The banner should appear at top of your page.

9.     Create an Advanced Css Styles for the links called #leftlinks with the box characteristics shown at right.  Insert a div tag  below the banner and attach leftlinks to it.

10.  Create an Advanced style called #right_side_content with the box characteristics shown at right. Insert a div tag to the right of leftlinks and attach right_side_content to it.

11.   Type a title into your banner. Now create a new class style called bannertext. From the Type category put in some initial values for your banner. Now highlight the banner text and use the property inspector to apply the bannertext style to it. Chances are you don’t like it. If so, doubleclick on .bannertext in the css styles menu and modify it. While you are at it click on the Block category (as shown at right) and experiment with the letter spacing, vertical alignment and any other values that you want to play with.

12.  Create a Css tag to modify body. Choose a color for your body. This is the same thing that you have done in the past through “Modify Page” but this time we are wrapping it into a css style sheet so you can automatically define a new page background color for any document that you attach the div_layout.css stylesheet to.

13.  Almost ready for some action.  Click the chain link in the css panel and attach rollovers.css.

14.  Save layout.html.  Congratulations.  You have created a reasonably attractive web page using css and div tags. 



Save layout.html.  Save it again as brand new file called birds_and_bananas.html.

15.  Now, insert one of the three bird and banana pictures into the right side content div tag (the main part of your page. Click on the picture and use the property inspector to determine its width and height. (w 400 H300 for example).

a.     Create a new css class that will contain the image and give it a name that reflects the image width  such as .img400.  Be sure and add a period to the name and  do not start the name of the css tag with a number. You can use a number in the name but a number can’t be the first character unless you want web browsers to hate you!

b.     Set the box width so that it is ten pixels wider than the image.

c.     Give it a border of some sort so that you can see the div tag that you attach the style to. You may want to remove the border later but it may be useful during the development.

d.     Decide where you want the image to display. Choose float left if you want it to appear on the left side; float right to make it appear on the right side. To center it choose auto for both the left and right margins.

e.     To move the picture a set distance from the left choose a pixel value for the left margin.

16.  Delete the picture but take careful note of its name.

a.     Insert a new div tag where the picture was and attach the style that you just created.

b.     Insert the same picture inside of the newly created div tag.

c.     Add some descriptive text above or below the picture.

17.  Insert a new picture either to the right or below the div tag that you just created. Repeat the steps in 15 to create a new css style for this image.

18.  Repeat step 16 for this new image.

19.  Add another image if you want to (2 may be enough) and follow the same steps. Please keep in mind that you can re-use css classes so at some point you may have as many variations as you need.

20.  Save the file.

21.  Open layout.html and resave it as monkeys.html.

22.  Repeat steps 15 through 20 with the four monkey pictures. Don’t forget, you may be able to re-use some of the div tags that you already created for the birds and banana pictures.

23.  Open layout.html and resave it as waterfall.html

24.  Repeat steps 15 through 20 with the four monkey pictures.

25.  Link them all together. Starting with waterfall.html, create links to the other two files (monkeys.html and birds_and_bananas.html).  Link birds_and_bananas.html and and monkeys.html to each other and to waterfall.html. 

26.  If you are feeling ambitious and still have time, add “thumb_pictures” to your navigation (such as thumb_munkee.jpg)

 

Introduction to The Template Tool

 

Definition of Template: The template tool offers an easy way to create a big website with a consistent look that is easy to update.  Think of a template as parent document that is used to create "children documents".  First you create a template and then you create additional, nearly identical, children documents from the template. 

 

Editable Regions: When you create a "child document" from a template it will contain one or more "editable regions" where new content can be added and modified with Dreamweaver, and a non-editable region that can't be modified, except by modifying the template. Non-editable regions usually contain links to all of the documents of your website, titles, graphics, and text that you want to see on all documents.

 

Magic! Updating multiple documents instantaneously:  The only way to change the non-editable portion of the children documents is to change the template (the parent document) and then update the children. The cool thing about the update feature is that it changes all of the children at once; even if there are hundreds of children.  The ability to update multiple documents with one stroke can be a tremendous timesaver on large websites. 

 

1.    Create a new html Template page.   File -  New  -  Template page- Html template.

2.    Build a webpage using the div_layout.css file that you created in the previous lesson.

a.     Attach div_layout.css to your document and start by inserting a div tag and applying the #allcontent style to it.

b.    Next insert a div tag and apply the banner style to it.

c.     Insert a div tag after the banner and apply the #leftlinks style and

d.    Insert yet another div tag after this one and apply #rightcontent to it.

3.    Click inside of the rightcontent div tag. Go to the Insert menu and select Template Objects – Editable Region.  The New Editable Region box (shown above) should appear.  Name your Editable Region "Edit Here" and click OK.

4.    You should see highlighted text that says .  Before moving your mouse cursor, press return three times.  The larger highlighted Edit Here should disappear.  Save your template as georgiatrees. 

5.     Time to put all of this to work.  Drag the treeid folder from your desktop into your mysite folder.  If the treeid folder is not on your desktop download it from http://mynmi.net/ealdridge/treeid.zip .

6.    From Dreamweaver, create a  new document from the georgiatrees template that you just created.  File – New and click the Templates tab.  Make sure that the update page when template changes tab is checked. 

7.    Save the new file inside of the treeid folder inside of the American Holly folder as holly.htm.  Once you have saved holly.htm insert the pictures from the American Holly folder.  Open the file inside the American Holly folder called text.doc and use the text inside to tell us something about the American Holly. 

8.    Repeat this process with all of the other four tree folders.  Create one more file from the template and save it inside of the treeid folder.  Name it treeindex.htm or something of the sort.   

9.    Now close all of your documents and return to the georgiatrees template (georgiatrees.dwt).  Create links on the left side of georgiatrees.dwt to the five tree documents that you just created.  Save georgiatrees.dwt.  Say yes when it asks you if you want to update documents. 

10. Close georgiatrees.dwt and re-open treeindex.htm.  Did links magically appear on the left side?  Test this document to be sure that all of your links work. 

11. Still have time?  Check with me. 

 

 

 

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 want.

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 not).

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 image. 

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 button. 

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 8. 

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. 

Audio Effects.  Dedicated to Kelly Tribble

 

Sometimes you get lucky and have the opportunity to collaborate with someone who is a real pleasure to work with.  Such was my working relationship with Kelly Tribble.  In addition to being a hardworking, talented guy, Kelly was a human multimedia machine who could generate a seemingly limitless variety of sounds for the projects that we worked on together.  By smacking his lips, clicking his tongue, thumping his cheek, etc.  Kelly could convincingly mimic the sound of a soccer ball being kicked, a fish splashing in water, or seemingly anything he wanted to imitate. I could never hope to match Kelly's talents as a producer of sounds but I did pick up on one of his tricks: amplification.  A seemingly soft sound can become something very different when it is magnified. 

 

1.     To explore the "Kelly Effect", find and open a program called Audacity. 

2.     Click the record button, position your mouth approximately 8 inches away from the isight on top of your computer and embarrass yourself by making a puffing sound, clicking your tongue and anything else that occurs to you.  When finished, stop the recording.

3.     Play the recording and watch the graphic sound display as you listen to your recording. 

4.     Select a portion of one of your sounds (one thump for example) and amplify it (Effect-amplify)

5.     Listen to the sound.  Loud enough?  If not, Effect- Repeat Amplify - until you are satisfied. 

6.     Once you have a sound that you like, you can easily export it for use in flash or some other application.  With the sound selected, File – Export as Wav. 

7.     Now try File – Export as MP3.  Can't do it (you may be able to)?  If not, follow Audacity's cues to find LameLib in the applications folder where one of my previous students downloaded and put it there for you.  (If you run into this problem at home, go to http://spaghetticode.org/lame/ and download LameLib-Carbon.sit .  Once the file is uncompressed, drag the result (named LameLib) into the applications folder)

8.     Export as MP3 again and this time Play around with some of the other "kellysounds" and re-record if you like. 

9.      Find the sound that you like the best, select, copy, and paste it somewhere further down the Audacity timeline.  This is how sounds are pieced together.

 

Sound Exercise Two

 

A common problem in voice recording comes from the dreaded P sound which often becomes exaggerated when it hits the sensitive diaphragm of a microphone.  The P-Problem is why you sometimes see stockings, socks, and other ad-hoc coverings placed over microphones.  The best way to eliminate this problem is to avoid it by having a good mike, maintaining an adequate distance during recording, and (most likely) some other tricks that I don't know (speak up if you know some).  Fortunately, electronic massaging can reduce this problem this exercise is about to demonstrate.

1. Download http://mynmi.net/ealdridge/p.mp3.  The file will most likely open in Quicktime inside of your browser window. To download, choose “File – Save As.” Once the file is downloaded and saved, open it with Audacity and  listen to the sound.  Note the sharp spike where the P sounds.

2. Select the spike and use the magnifying glass to zoom in on the specific segment that needs to be subdued. 

3. With the segment still selected, use the amplify tool to lower the volume on the segment.   Listen the recording again and continue de-amplifying until you are as satisfied as you can be with the effect.

 

Sound Exercise Three:  The awful mixing exercise (or NMI Acid Test).

1.     Download three short songs from freeplaymusic.com and open all three with Audacity.

2.     Inside one of the songs create two new stereo tracks.  Project- New Stereo Track.

3.     Copy and paste the tracks from the other two songs into the new tracks. 

4.     Test it.  If it wasn’t quite weird enough, try out some amplification.

Sound Exercise Four: Normalization

 

Recording often happens at a less than optimum volume.  Voice recordings, in particular (in my experience), often seem not to be as loud as they should be.  When I record my students, the volume always varies a lot.  To compensate, I use the “normalize” tool, a very handy way to generate a consistent volume for sound files.  What the normalize tool does (based on my limited understanding) is make a best estimate (think Educated guess) of the ideal volume for a given file and then sets the volume as high as possible without introducing distortion.  Try it out.,

 

1. Make a 10 second voice recording.  Feel free to mumble. 
2. Select your recording and Effect- Normalize it.  Chances are, the volume increased quite a bit. 

Sound Exercise Five:  Flash it.

 

By now, you have at least some idea of what Audacity can do. If you make it to this point and still have some time, your reward for fast work is the opportunity to strain your brain (especially since we have not yet used flash!) by putting your sounds to work in a Flash environment.  Download the file http://mynmi.net/ealdridge/audio.fla and open it in Flash.  Import five sound files into the Flash library (File- Import to Library).  On layer 1 of the flash timeline you will see a series of keyframes labeled sound1, sound2, etc.  Click on one of these keyframes and, using Flash's property inspector (shown below) click on the sound tab to select your first sound (the one that will be played by the button labeled 1). Do the same with the rest of your sounds and then press Apple-Return to test your (truly) funky jukebox!. If you finish this exercise before class ends go back to Sound Exercise 3 and take it even further.

Creating and tweaking a blog

Do you know how lucky you are to be learning about web-related stuff in the Web 2.0 so many things are free era?  Trust me, it's pretty nice that so many powerful tools are now both free and (relatively) easy to use.  One such tool is called blogger. We all know about blogs, those web-based programs that allow even the most technically challenged to post poorly formed thoughts to the Internet.  In today's lesson we are going to set up a blog with Google's blogging tool (called blogger) and learn how to modify it so that it shows up on our own website and looks like we want it to.  Why, you may ask, would I use such a tool?  Imagine that you have a client who wants to be able to easily post information to his or her website but wants to learn nothing about web development.  By implementing the process in today's lesson and changing some settings in blogger you could provide that client with a nicely customized webpage that he or she could update simply by sending an email.  Here we go. 

1.     Use cyberduck or transmit to create a new folder inside of the folder that holds your website (the one named after you such as ealdridge).  Name the folder blog.

2.     Log into your gmail account and then go to blogger.com (go to gmail.com and create a gmail account if you don't have one).  At blogger click on the Create a blog link.

3.     Choose a Template (you may have to change the template later so don't spend much time on this step.

4.     Click Start Blogging but don't post anything yet.

5.     Click Settings and then on Publishing.  Notice the fine print that says Hint: If you want to publish to an external FTP server, you will need to Set 'Blog Readers' to 'Anybody' and use a Classic Template.
Click on use a Classic Template. At the bottom of the new page that appears, click on Revert to Classic Template. When the little box pops up and asks you a question click OK. Note: as of Sept. 14, 2009 (this could always change), Blog readers is set to anybody by default so no need to change that setting.
 

6.     Once again, click Settings and then on Publishing.  Now click on FTP (publishing on your ISP Server).

7.     Fill in the server details as shown below (probably on the next page). 

a. Please note that the FTP username should be your username, not the actual word username. In the FTP path replace username and password with the same username and password that you use for cyberduck.
b. Select FTP protocol.
c. Enter index.html for the filename. (if it is not already there).
d. Fill in the same FTP username and password as you use for your mynmi account.
f. Do the word verfication and click continue.

Post something and check it out. Your url will be something like http://mynmi.net/student/lepperly/blog

8.     Use transmit or cyberduck to peek inside of your
 blog folder and try to figure out what is going on in there.

9.     Now you can click on Template to pick a new one.

10.  Once you have a new template, try tweaking it. Click the Template tab again to begin this process. 

11.  You should be looking at a similar page to the one at right. Click inside of the template window (that begins with the words <!DOCTYPE html PUBLIC) and Apple-a to select all of the text. 

12.  Start dreamweaver and create a new html file. Switch to code view so that you are seeing html code instead of the wysiwyg view.  Select all (apple-a) and paste the html code from the template into your new dreamweaver document. 

13.  Go back to design view and take a look at your document.   Take out that ugly little I Power Blogger graphic and also change your background color.  Now return to code view, select and copy all.  If you are feeling ambitious you can even go so far as to use a background graphic although this step is more tricky.  If you are interested ask me and I'll (try to) show you.

 

14.  Return the the blogger template page.  Select all the template text and replace it with the text that you copied from dreamweaver.  Save template changes, REPUBLISH, and take a look at your blog to see what has changed.  Make other changes to the template if you wish.

15.  Now return to the blogger menu.  Click settings and then email.  Set up an email address so that you can mail posts to your blog. Now test this feature (you will have to use your gmail account) until it works.  Also check out the process of submitting to your blog directly from the blogger menu.

16.  Go to the formatting page and set your time zone correctly.  Take note as well that you can limit the number of posts to your site and lots more.  Explore, experiment and play and create a monster!  After all you can always delete it.

 

Want more?  Want an even easier way to make a blog, any blog (doesn't even have to be yours) appear on your website.  Download http://mynmi.net/ealdridge/frameblog.zip and look inside the index.html file. This file loads a blog hosted at http://emuel.com/update/ and will even load it on your computer.  Find another blog url and substitute it for http://emuel.com/update/ . Test it and see what happens. 

 

The reason this works is because you are working with a frameset which will load anything that you tell it to. The topframe loads a file called top.html but its dimensions are set to only one pixel high which effectively makes it invisible. 

 

 

First Photoshop Assignment

1. Open Photoshop 0(inside of your applications folder)
   
   
2. Download the picture found at: Internet http://www.davidlynn.org/em/flower.jpg Save it to your work folder (if you don't have a work folder, create one inside of your documents folder).
   
   
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 pixels? 
   
   
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 http://mynmi.net/ealdridge/peacock.jpg.

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 background.

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 animations. 

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 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 http://www.cnn.com (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-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 symbol. 

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 time on the button and then type the command in the box at right into 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-click on the shape and turn it into a button.  Once you have a button click 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 namewith the property inspector.  Hint Hint:  See below:

 

 

 

 

 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 http://mynmi.net/ealdridge/clipcontrol.fla

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. blowup.play(); 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.play(); and add the following two lines of code:
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, change the code so that it reads as shown at right.

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.

 

-rightleft     -updown

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

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 box. 

11.  Let’s go for broke and enter a bunch of these properties at the same time   Add the following lines of code to your button:
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 from the library (Apple-L to open 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. 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 http://mynmi.net/ealdridge/sound.fla 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: http://mynmi.net/ealdridge/scenes.zip 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, so be sure that your link is capitalized (or not capitalized) the 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 with a password and/or username.  In this small 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. 

15.  If that worked it is time to add just one more feature.  Now test the movie to see what happens. 

 

 

 

 

1.      Go to http://mynmi.net/ealdridge/music.zip to download a folder with five music clips and five associated graphics. Put the music folder into your mysite – flashstuff folder. 

2.    

Making a plain, simple jukebox. Lesson 1

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 develops.  

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 chubbypic. 

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 shift key simultaneously to downsize the image 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 mixed with someone elses music.  Even Chubby Checker and the Beatles don't sound that great as a mix.  To stop 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 object. 

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 file. 

 

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 the Chubby Checker button and add the actions at right to it: 
The first command, lesson.stop();  stops all 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, lesson.start(), starts the sound (the .start command also gives you the opportunity to loop the sound and to change the starting point of the sound- ask if you are curious)

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 http://mynmi.net/ealdridge/volumecontrol.fla .  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! 

 

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.  Yes, throw them away. 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. 

5.     Take note of what each of your sound files is named (twist.mp3 etc.).  Change the code on the 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! This is the technique that you will use in this class to build your own jukebox with YOUR choice of music.

 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.     Open the actionscript panel and click one time on the drageye movie clip and add the following actions: 
Make sure that you add the actions to the movie clip and not to the key frame by looking at the property inspector beforehand.

6.     If your eye works correctly, click on drageye1, copy and paste it.  Name the new instance drageye2.  Test again.  BTW, if you don't like the look of your eyes, you only have to edit one to alter both of them.

7.     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).

8.     Assuming that everything works, now take the time to add some sound to at least one of the facial features.  Go to http://freeplaymusic.com/ 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. 

9.     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".

10.  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();

11.  Click on one of your movie clips and open the actionscript panel.  On the line immediately following:
add the following code to the button's actionscript 

_root.party.stop(); _root.party.attachSound("lyric") _root.party.start();

The finished product should have the syntax shown at left.

 

Please take note of the use of "_root".  This particular term is used to indicate to flash that the sound object is located on the main timeline.  Without the use of _root or something similar, the command would not work because Flash would not find the sound object.  Also note the use of dots as in _root.party.stop().  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:

Test your movie now and see what happens. 

 

 

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 or find a graphic of something that you would like to serve as a cannon. Let your imagination run wild if you want. 

3.     Right-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 cannon.

5.     Now it's time to load your cannon.  Double click on the cannon to open the movie clip on stage. 

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 (or find a graphic) 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 cannonball. 

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 right-click- to convert the cannon to a button.  Add the code shown at right to the cannon button.  By the way, this code is very easy to add if you do it with script assist.  Don’t forget to add 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 carefully

a. The first line, onClipEvent (load),   is only activated once, when the movie clip that you added it to first appears on the timeline.  

b. The command on the second line, spinvar=3;  creates a new variable named spinvar and sets its value to 3.     

c. The third line onClipEvent (enterFrame) 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 rotates more than 25 degrees, the spinvar value of 3 is multiplied by -1 so that the cannon rotates in the opposite direction, counterclockwise.  Once the rotation value reaches -25, spinvar is 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.

 

12.  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. 

a.     Get inside the bird and add a stop(); command at frame 1.

b.     Click on frame 2 and add a keyframe. If you downloaded a graphic right click the graphic and select “break apart.”  Breaking a graphic apart turns it into a shape that you can manipulate.  If you drew your own shape instead of adding a graphic there is no need to break it apart; it is already broken.

c.     Click on frame 10 and add a keyframe. Now tear your target into pieces with the lasso tool.

d.     Insert a shape tween between frames 2 and 10.

e.     Add a new keyframe on frame 15 and insert a gotoandStop(1); command that will reset the movie clip once the user has seen the blowup effect.

14.  Return to the main timeline, click on the bird movieclip and add the code shown at right to its actionscript. 

a.  Line one instructs whatever happens afterward, to happen at the frames per second 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 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 again. 

 

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 panel.

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 cannon button.  Add the code shown at right to the other code that is already attached to the button:

(once again, script assist will be helpful)

What this code does is rotate the cannon five degrees in either direction depending on whether the left arrow or right arrow 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 cannon!

 

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 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 noticed by now if you have been playing your game is that sometimes hitting a target results in more than one point.  This problem comes about because of the hittest which checks every 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 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 each target movie clip and place it on a keyframe INSIDE ONE of the movie clips (when you get inside one of the clips you are editing the symbol which means that all clips are changed at once).  Now when hittest causes the movieclip to play, the score is incremented just one time as the clip plays past the keyframe that says _root.score=_root.score+1 (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 http://mynmi.net/ealdridge/sound.fla. 

Mobilizing your Project

 

Want to see how your cannon game would look on a cellphone?  Here’s how.

 

1.     Download   http://mynmi.net/ealdridge/nokia_phone.zip  .  Unzip nokia_phone.zip and copy the contents into a new folder called mobile_cannon. 

2.     Open the nokia.html file in your browser.  You should see Renee’s project from several semesters back.

3.     Open the nokia.html file in dreamweaver.  Click on the embedded flash file. Note that the code instructs Renee’s flash file (cannon.swf) to display at 240 Width by 320 height.  Your job now is to substitute your cannon file for Renee’s and see how it looks.

4.     Simple!  Substitute your cannon file for Renee’s. 

a.     Delete Renee’s cannon.swf file.

b.    Copy and paste your cannon file (the one that ends with .swf) into the mobile_cannon folder and make sure that it is named cannon.swf.  This way your cannon.swf file will inherit the size settings of the old one (240X320)

c.     change the name if you need to.

d.    Open nokia.html again and hit refresh.

5.    At this point you may have noticed that your cannon doesn’t fill up all of the space inside of the Nokia Phone window. That is because the window is sized to 240 X 320 which is a 3 to 4 ratio (as in 3 wide by 4 high).  Your file was originally sized at 800 X 600 which is a 4 to 3 ration (4 wide by 3 high).  By default, the browser is displaying your file at 240 wide but it reduces the height based on the original ratio. Is your head aching yet?

6.     Here is how to fix the ratio.  Resize your original flash file to 801 X 1068. This will leave your with a lot of unused vertical space. Now stretch and move everything around until it fits all of the new space. Generate a new swf file and replace the previous cannon.swf file with it. 

 

 

 

 

 

 

 

Eyecatcher. 

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 right 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 Y:0

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.

18.  Notice anything odd? Did your movie race through all of the various face pictures until you moved your mouse? Now why would that be?  Duhhh. You need a stop command on the first frame so that the movie will automatically stop until you tell it otherwise. 

 

 

 

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 ealdridge/lessons/classtalk.fla)
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 enter".

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 response.  The symbol for inequality is <>  .  There are lots of ways to give negative feedback, such as having a 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 appear. 

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 that expression check box as well. 

5.    Give some thought to script that you have created (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 options.  

 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 http://www.youtube.com/watch?v=TEVFN8oOZtY 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 "skin". 
10. Test it out.  If time is still left spend the rest of class time learning as much as you can about imovie. 

Appendix

 

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 preferences.

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

  

 

 

 

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).

3.     Locate the Script Assist button in the action window.  If it is not "shawdowed", click it.

4.     With the button still selected, click the + button as shown at right, Global Functions -Timeline 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 play).

6.    Draw another shape on the stage and turn it into a movie clip.  Click on the shape and, once again, Global Functions -Timeline Control- 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.