Student Portfolios

Today we are focusing on these tasks:

1. Check your portfolio address below to make sure it's working
2. If you are missing any projects, get them on your portfolio ASAP
3. If you would like to add additional pieces on your portfolio, please do.  They could be drawings, paintings, sculptures, creative writing assignments, welding, woodworking, or anything else you would like to show off.
4. Edit your posts to include "Keywords" (there is a box at the bottom of your post) such as "Photoshop" or "Drawing" or "Collage".  This will make it possible later to add additional menus to your portfolio for your final presentation.
5. Check out some of your classmates portfolios and see how they measure up.
6. If they have "commenting" open, comment on some of their projects.  [Be professional, constructive, and polite.]

STUDENT PORTFOLIOS
Burnett, Ashley	http://ham-bubbles.blogspot.com	[-]
Dibble, Jake	http://allaboutslamminandbaggin.blogspot.com	[-]
Erevia-Rowe, Alexandria	http://b-munny-khs.blogspot.com	[-]
Gibson, Avery	http://averysprojects.blogspot.com	[DA]
Greenwood, Amber	http://kingklik999.blogspot.com	[DA]
Harms, Raven	http://akumaraven.blogspot.com	[DA]
Hildebrand, Logan	http://707thesavage707.blogspot.com	[-]
Holt, Zach	http://zach-ziggysblog.blogspot.com	[-]
Kurth, Lisa	http://kurthlisa.blogspot.com	[DA]
Laws, Graham	http://kilograham.blogspot.com	[DA]
Lee, Ray	http://ray97062.blogspot.com	[DA]
Marcuson, Timothy	http://tim1marcuson.blogspot.com [old]	[DA]
Marshall, Trever	http://trever-portfolio.blogspot.com	[DA]
Martinez, Destiny	http://destinysportfolio.blogspot.com	[-]
Meese, Victoria	http://khs-victoria.blogspot.com	[DA]
Moore, Ian	http://shera4life-ian.blogspot.com	[DA]
Mueller, Austin	http://abiggidy.blogspot.com	[DA]
Navarro, Esteban	http://estebanlnavarro.blogspot.com	[DA]
Ortiz, Alexis	http://ipostnpnp.blogspot.com	[DA]
Pagan, Nicole	http://nicolepagan79.blogspot.com	[DA]
Pfannmuller, Sarah	http://sarahpfannmuller12.blogspot.com	[DA]
Roper, Emily	http://emilylovessanfrancisco.blogspot.com	[-]
Rough, April	http://aprilrough.blogspot.com	[-]
Russell, Jay	http://idonthavecrabs.blogspot.com	[-]
Sheckells, Austin	http://ujhyyyyyyyyyyrt.blogspot.com/	[DA]
Sherman, Nathan	http://natesblog7.blogspot.com/	[DA]
Solgat, Justine	http://justinesolgat.blogspot.com	[DA]
Tapia, Emanuel	http://theblog12121.blogspot.com/	[DA]
Timm, Jordan	http://wolfsportfolio.blogspot.com	[DA]
Totorica, Lisa	http://lisatotorica.blogspot.com	[DA]
Umbrello, Nic	http://ladylightneenmoochofasto.blogspot.com	[-]
Walker, Rayna	http://bikinibabe613.blogspot.com	[DA]
Wilkerson, Kayla	http://kaylawilkerson.blogspot.com	[DA]

Posted on:
10/4/11, 10/10/11, 10/18/11, 11/3/11, 12/7/11, 1/2/12, 1/21/12, 2/6/12, 2/27, 3/19, 4/3, 4/13, 5/15

Welcome to Advanced Projects in Computer Technology

Projects in Computers is a course I have been teaching for many years.  Obviously it has evolved over time, but the goal has always been the same: to offer a course allowing high school students the chance to explore a variety of technologies and tools.  My hope is that students will discover skills they didn't know they had, and to find interests in technologies that can assist them in college, give them a source of income, or turn into a career.

A technology like Photoshop may seem like it has limited uses, but the skills learned can be used for personal projects (restoring damaged photos, retouching photos, working as a graphic designer, editing pictures for reports, an advertising specialist, a fashion designer, etc.).  One of my former students obtained a job developing graphical interfaces for sound equipment.  Another works designing cover plates for gaming machines in casinos.  Still another creates textures for 3d models in the NASA nanotechnology lab.

I truly believe in this classes and in the skills I teach.  I often have students graduating from my courses and starting out in industry at more money than I make after years in the classroom.  But even more important to me is to see students find something that they are truly passionate about.

If you are wondering about course specifics, you will receive a class syllabus on the first day -- or you can click on one of those little thumbnails over to the left to view the PDF.

I look forward to working with all of you this year.

Final Grade Request

All projects are due on Friday, June 8th.  I try to take your opinions into consideration when giving you a grade.  I would like you to provide me with the following feedback for consideration in your final grade:

Open Microsoft Word and create a new document called, "Advanced Computers Final Grade Request" -- and add your name to the top of the page, obviously.  Then answer the following questions:

1. If you had to design an "Advanced Computers" class next year, describe how you would set the class up.  What sorts of projects or technologies would you use?  How would you assign grades?  What would you do [or NOT do]?
2. What was your favorite project this year... and why?
3. What was your least favorite project this year... and why?
4. What general recommendations do you have for me in doing Projects in Computers classes next year?
5. Honestly assess yourself on how you spent your time in this class this year.
6. If you were to honestly assign yourself a grade this quarter, what grade do you believe you deserve?  Why?

Extra Credit:

1. What are some original projects that we could do in Photoshop [which we didn't do this year]?  For example, a student recommended that we do a Photoshop paper doll in Photoshop and then use it for when we get to the Flash paper doll assignment.  Another student this year recommended the Facebook Cover Picture project.
2. What are some original projects that we could [but didn't already] do in Rhino?
3. What are some original projects that we could [bud didn't already] do in Bryce?
4. What are some original projects that we could [bud didn't already] do in Flash?
5. What are some original projects that we could [bud didn't already] do in Sculptris?
6. What are some original projects that we could [bud didn't already] do in Video Editing?  For example, students have recommended that we should make a commercial or do a team project creating a short film.

Note: Sophomores, Juniors and Freshmen may turn in their video projects on the Finals day.

Finish How-To Projects

I would like you to spend today finishing up your video How-To projects.  When I return tomorrow I will pass around a USB drive for you to copy your videos to.

The schedule for this week:

• Tuesday (Today): Complete How-To Video [Substitute]
• Wednesday: Begin Music Montage Video
• Thursday: Work on Music Montage Video
• Friday: Work on Music Montage Video [Substitute / Senior Trip]

Remember:  Stay on task.  If you have completed everything, find something useful or educational to work on.  Don't waste class time with games.

NOTE:  Tonight is Freshman Orientation and the computer lab will be open for parents to check out.  PLEASE take the last 5 minutes of class to pick up trash, straighten computers, put chairs back in order, etc.

Video Tutorial / How-To

TUTORIAL VIDEO SUBMISSION

Final Videos Must:

• Include Title
• Include Edited Video Clips
• Include Step-by-Step Instructions or Guidance
• Include End Credits (who did what?)
• Be useful / informative
• Be 10 minutes or less

Videos Must NOT Include:

• Commercial Music (i.e. Lady Gaga, Metallica, etc.)
• Inappropriate Material (words, gestures, images, gangs, etc.)
• Illegal Material (drugs, alcohol, nudity, etc.)

Suggestions / Ideas for Tutorial Videos:

• How to change the oil on a VW Beetle
• How to hang drywall
• How to bake and frost a chocolate cake
• How to play scales on an alto saxophone
• How to clean a fish tank
• How to sew a pillow by hand
• How to make a cherry pie
• How to buy a car (what to look out for)
• How to mix a song in Virtual DJ
• How to Dougie, Spongebob, or some other dance
• How to French Braid hair
• How to draw anime characters
• How to get your deviantART works seen by more people
• How to do a flower arrangement
• How to build an automatic cactus harvester in Minecraft
• How to build a raised vegetable bed

Photo Story 3: A Portfolio Slideshow

Today we're going to begin using a free program (you can download it here) called Photo Story 3.  Photo Story 3 is a free presentation tool for creating digital stories with photos, text, transitions, audio narration and background music. It is a modern day version of show and tell or story telling.

You can select numerous photographs [in order if you prefer], add background music, narrate your slideshow, etc.  If you don't have music of your own, Photo Story has a build in "music creator" which will fit a variety of "moods".

Today we are going to create a slideshow using pictures of our projects from our portfolio's.  These include Photoshop, Bryce, Rhino, Sweet Home 3D, etc.  You can also include screen shots of HTML or Flash, or even your other creations (welding, woodwork, paintings, etc.).

To create a Photo Story 3 project:

• Launch the Photo Story 3 application
• Check "Begin a new story" and click "Next"
• Click "Import Pictures"
• Select the pictures you would like to use in your project and click "Ok"
• Click "Next"
• If you don't wish to add titles/comments to your pictures, click "Next"
• If you don't want to record narration, click "Next"
• Click "Select Music" and choose the MP3 file you want to use for your background music
• Click "Next"
• Select the folder you want to save your work to (I suggest Thawspace) and click "Next"
• Photo Story 3 will now build your movie file

Sweet Home 3D: Design a House

Yesterday we began exploring features of Sweet Home 3D -- a free 3D home design program which does rendering, animation, etc. The program has an active developer community and a lot of extra models you can download for free.

Sweet Home 3D: http://www.sweethome3d.com
Sweet Home 3D Models: http://www.sweethome3d.com/importModels.jsp

Our goal over the next couple of days is to design a house with at least one bedroom, a kitchen, a living room, and a bathroom.  You are welcome to create additional bedrooms, a family room, a garage, a workshop, or whatever.  Just have fun with it.

When you are finished, take some "photos" (renderings) of different rooms and/or angles to put on your portfolio.

Other web sites with 3D models

The following sites offer also some 3D models at OBJ, DAE, 3DS or LWS formats supported by the furniture import wizard of Sweet Home 3D:

		Google 3D Warehouse (a big choice of models at DAE/Collada format)
		Resources.blogscopia (free well designed models shown also here)
		ArchiBit Generation (various well designed models)
		Flying architecture (various models with regular updates)
		Kinnarps (office furniture)
		Free the models (furniture tested in Sweet Home 3D)
		Kolo (bathroom furniture)
		Creative-3D.net (a lot of importable furniture, but monochrome)
		Klicker (a few chairs and trees)
		Model3D.biz (various models, but a few models can't be imported)
		Baumgarten Enterprises (a few interesting models, generally for industrial purpose)
		3DPlants.com (a lot of plants but without colors, except for the Plant of the month)

OTHER USEFUL DOCUMENTATION:

Create Multi-Story Homes:   http://www.sweethome3d.com/multiLevelHouseGuide.pdf

Creating Sloped Roofs/Ceilings/Etc:   http://www.sweethome3d.com/slopingCeilingGuide.pdf

Plug-Ins & Extentions (Haven't checked yet):    http://www.sweethome3d.com/pluginsUserGuide.pdf


This video tutorial does a pretty good job of showcasing the tools in Sweet Home 3D -- although it's a much earlier version:

Flash: Screen Saver (Programming I)

We will be using these actions for the project today:

/* ------------ Actions for Frame #1 ------------ */

/* Set Speed */
speed = 1.5;
movex = speed;
movey = speed;

/* Set Borders */
left = 110;
top = 130;
right = 904;
bottom = 648;

/* Randomly place object -- sw & sh are stage width & height */
sw = 1024;
sh = 768;
xpos = random(sw)+1;
ypos = random(sh)+1;

/* ------------ Actions for Frame #2  ------------ */

/* Place ball on the screen at x1,y1 */
setProperty ("ball", _x, xpos);
setProperty ("ball", _y, ypos);

/* Move object by adding/subtracting xm,ym */
xpos = xpos + movex;
ypos = ypos + movey;

/* Adjust direction if we hit an edge */
if (xpos > right){ movex = speed * -1 }
if (xpos < left) { movex = speed  }
if (ypos > bottom){ movey = speed * -1 }
if (ypos < top) { movey = speed  }

/* ------------ Actions for Frame #3 ------------ */
gotoAndPlay(2);

Flash: Virtual Paper Doll

Today we are going to be building "draggable" movie clips that will make a "Paper Doll" or "Mr. Potato Head" sort of thing.  The ActionScript isn't that difficult, but it is very time-consuming so I am putting up a template that we can use to get started.

• Flash Paper Doll

I am also attaching a paper doll that I built from the template above.  It has a background music track, three extra models, and more.  Download the source file here.  You can also play with the SWF file here. To get the model and begin the clothing, I Googled "Fashion Paper Dolls" and clicked on images.  I chose to use this image:

Here are some paper dolls which match so you can share clothing and accessories:

 Here is an example of another set of paper dolls which let you share most clothing/accessories:

Also, this is another example of a more more complex "Paper Doll": [Click]

Once you have the template downloaded, either create your own model and clothing or look for good examples of paper dolls online.

Here are some other examples of paper dolls with different looks, styles and themes:

Note:  You might be surprised to find that there are paper dolls for specific genres or subjects as well.  For example, a search (for something like Edward Scissorhands, Harry Potter, Thor, True Blood, Star Trek, Star Wars, Arrested Development, etc.) will yield results such as the following:

If you can't find the right paper doll, you can always make some of your own design.  For example, these [Doctor Who and Monster High] were drawn by hand and scanned:

Have fun!

Flash: Multimedia Story Book

Today we are going to begin putting all of the different techniques together into an Interactive Story Book (similar to the Multimedia Greeting Card but with additional "scenes").  You can come up with an original story or find one that is in the public domain or retell an old fairy tale story in your own words.  Each "scene" will have words, images, and interactivity (mousing over and/or clicking to make something happen).

You should include the following:

• A custom mouse pointer
• An opening "scene" which stops at a specific keyframe or loops back to the beginning.
• A button which will advance the viewer to the next "scene"
• A "stop" on the next scene so users can view everything
• A button which will allow users to move to the next scene(s) and a "stop" button 
• On the last frame of the last scene, a button which will allow users to start over from the first scene
• Sound and/or music

Some of the ActionScript you will need includes:

/*  Custom Mouse Pointer Code  */
  onClipEvent (load) {
  Mouse.hide();
  startDrag(this, true);
}
onClipEvent(mouseMove){
  updateAfterEvent();
}

/*  Stop Code  */
stop();

/*  Button 'Go To' Code  */
on (release) {
  gotoAndPlay(10);
}

Here are some Step by Step Instructions:

1. Open Adobe Flash
2. Create a new document: FILE > NEW > Flash File (ActionScript 2.0)
3. Create 3 Layers:  Pointer, Buttons, and Background
4. On the background layer, draw a background
5. On the pointer layer, draw a pointer
6. Select the pointer background layer (it will select the pointer)
7. Click Modify > Convert to Symbol > Movie Clip (name it Pointer)
8. Right-click the pointer symbol and select "Actions"
9. Enter the following ActionScript:
   onClipEvent (load) {
     Mouse.hide();
     startDrag(this, true);
   }
   onClipEvent(mouseMove){
        updateAfterEvent();
   }
10. Press CTRL+ENTER to test your movie
11. Draw a button
12. Convert the button to a symbol (a button, obviously)
13. Go out to Frame 10 (for example) and add a keyframe for each layer.
14. Draw a new "scene" on Frame 10
15. Right-click the first keyframe on any layer (black dot) and choose Actions
16. Enter the following ActionScript:  stop();
17. Right-click any layers last keyframe and choose Actions
18. Enter the following ActionScript:  stop();
19. Right-click the button and enter the following ActionScript (if you set the next scenes keyframe at 10):
    on (release) {
            gotoAndPlay(10);
    }
20. Test your movie (CTRL+ENTER)

Once your movie is working (i.e. It opens and stays until you click the button -- and then it goes to the next section and stays) you can begin adding some flair.  Add sound effects, improve your mouse pointer, insert some music, insert pictures, etc.

For Today:

First: NO food, drink or games in the lab.  Don't lie to the sub.

1. Check the Student Portfolio page below for your name.  If there is a [DA] next to your name, I have your Deviant Art address.  If you have a [-] next to your name, email me (rgriffith@kusd.lake.k12.ca.us) and give me your DeviantART address (__________.deviantart.com).
2. Make sure I have your correct Blogger address.  A couple students have not yet given me their Blogger address (___________.blogspot.com).  If you are one of those, please email them to me ASAP.
3. Upload your Flash projects (the SWF files with a JPG thumbnail) to your DeviantART page.  If you don't get them uploaded, I can't grade them.
4. I will NOT be going through everybody's grades before I submit the final grades in the morning.  If you have added new projects to your portfolio and/or your DeviantART page, email me to let me know and I will look them over.
5. Use the rest of the period to work on any missing assignments [if any] or experiment with other projects.

Flash: Eyes That Follow the Mouse

Today we are going to be drawing an eye (facing left), converting it to a movie clip, dragging an instance to the desktop, naming your instances, adding some ActionScript, and testing it.  The result?  Eyes that follow the mouse pointer, obviously.  :)

• Create a Flash ActionScript 2.0 file.
• Create three layers (Actions, Eyes, and Content).
• Add the following ActionScript to the Frame 1 of the Actions layer:

a = eye1._y-_ymouse;

b = eye1._x-_xmouse;

angleA = Math.atan2(a, b);

degrees = angleA/(Math.PI/180);

setProperty("eye1", _rotation, degrees);

a2 = eye2._y-_ymouse;

b2 = eye2._x-_xmouse;

angleA2 = Math.atan2(a2, b2);

degrees2 = angleA2/(Math.PI/180);

setProperty("eye2", _rotation, degrees2);

• Click on Frame 1 of the "Eyes" layer
• Draw a large circle (usually a black line and a white fill) [holding shift while dragging the circle helps it stay circular]
• Draw a smaller circle on the inside-left of the larger circle (about 9:00) which will serve as the pupil
• Select the entire eye [you can drag around the eyeball or click CTRL+A]
• Go to MODIFY > CONVERT TO SYMBOL
• Select "Movie clip" and call the clip something like "eyeball".
• Drag the eyeball over so that the "+" is directly in the center
• Go back to "Scene 1"
• Press "Delete" to remove the eyeball from the Stage
• Drag two "instances" of the "eyeball" on to the stage [a left and right eye]
• Click on the left eye and give it the "instance name" of "eye1"
• Click on the right eye and give it the "instance name" of "eye2"
•  Test your movie (CTRL+ENTER) -- the eyes should "look at" your mouse pointer.
• Add a background picture and resize the eyes accordingly to fit.
• Optionally you can add a custom mouse pointer to give the eyes something interesting to look at.

Below is a Video Tutorial which doesn't follow our project exactly, but should help explain the process:

Custom Mouse Pointer

To create a custom mouse pointer in one of your Flash movies, we just need to add a short snippet of ActionScript to a movie clip.

• Create a new Layer on top of all other layers.
• Draw a "mouse pointer" of any shape, color, etc.
• Select the pointer (I click on the keyframe to select everything)
• Convert your pointer to a symbol (movie clip) and call it "Pointer"
• Right-Click the new symbol and Select Actions
• Paste the following code in the Actions

onClipEvent (load) {
Mouse.hide();
startDrag(this, true);
}
onClipEvent(mouseMove){
updateAfterEvent();
}
______________


Test your movie (CTRL+Enter)

You may need to adjust where the "point" is on your pointer:

• Double-click the pointer to open the clip
• Adjust the "point" to be right on the + sign
• You can also add animation if you would like

Multimedia Greeting Card Template

If you are having serious difficulty getting your Flash "Multimedia Greeting Card" working properly -- or you need to start over... or the computer crashed... or any number of other reasons -- try downloading this Multimedia Greeting Card Template, opening it up in Flash, and customizing it to be your own.  In the "spirit of the holidays" I have even added the ActionScript in for you.  :)

We will be working on this project through Thursday.  On Friday, we're going to be creating a "Custom Mouse Pointer"; you may want to create yours in your Greeting Card.

The following is an example of the "Multimedia Greeting Card":

Guest Speaker: The Art Institutes

Today we have a guest speaker from The Art Institutes in San Francisco.

As always, I expect respect, attention, and valid, appropriate questions for our guest speakers.

Flash: Using Trace Bitmap

[Trace Bitmap Instructions]

Flash: Continue Working

Hi Folks,

Unfortunately I need to be out today with my wife as she goes through a medical procedure.  Please use your time to work on your Flash projects and get them uploaded to your DeviantArt page.  Next week we will be learning some more complex Flash projects.

Thank you,

Griff

Flash: Shape Tween

[Direct Instruction Day]

Flash: Frame by Frame Animation

Creating Frame-by-Frame Animations:

• Create a new Flash document
• Draw a background (if necessary) and name it "Background"
• Create a new layer for your animated object(s)
• Draw an object that you want to animate
• Notice that there's a • in the framer where you drew your picture.  This indicates a "Keyframe"
• If you Right-Click on the box directly to the right of your Keyframe, you can do "Insert Keyframe" -- or "Insert Blank Keyframe" if you would like to start with a blank frame.
• You may notice that you no longer see a background on your "movie" -- this is okay because it's easy to fix at the end.  You simply right-click in the very last frame on the "Background" layer and choose "Insert Frame".
• Next, save your movie to your Thawspace [as an FLA] and do a CTRL+ENTER to test your movie.

What is Animation?

Traditional animation (Disney cartoons, Spongebob, anime and manga) is an illusion of movement.  You don't actually see things moving -- you see a series of drawings placed one after another [around 24-30 images per second] which makes your brain believe it sees movement.  That phenomenon is called Persistence of Vision.  Traditionally an artist draws/paints 24-30 drawings for every 1 second of animation.  With computers as tools, artists have the luxury of having computers complete the "in-between" frames automatically.  For example, you draw two shapes: a circle in one corner of the screen on frame 1 and then in the opposite corner around 10 seconds later -- and then you tell the computer to figure out the "in-between" (or "tween").

The nice thing about computerized "tweens" is that image one can be a tiny red circle and image 2 can be a large green square, and the computer will gradually morph them from frame to frame.

Here is a sample video:

Over 100 years ago "arcades" were full of machines that people would put coins in and look through the viewfinder as they turned a crank which would flip through a series of photographs on a big spool.  More modern examples of this technology is a "flip book".  Typically these are done by rapidly flipping through images to create the illusion of motion.

Here's a great example of using Post-It notes to create a flip book movie:

Here's an example of animation using a MUCH slower "frame rate": http://www.youtube.com/watch?v=783uWoSqdX0

Guest Speaker: Empire College

Today we have a guest speaker from Empire College in Santa Rosa.  Gay Kimmel has visited us before, and I am happy that she is coming all the way over to Kelseyville for another visit.  I expect everybody to be respectful and polite, and to pay attention to the presentation.

Flash: 3D Buttons

Use the instructions below to create a few different 3D buttons.  They should either be different colors or change to different colors when being "moused over".  You might want to try round *and* square buttons using the same technique.

Do a search for "Sound Effects" and "WAV files" so you can add some sound to your buttons.  Here are some examples:

• http://www.wavsource.com/sfx/sfx.htm 
• http://www.wavsource.com/ 
• http://www.audiosparx.com/sa/links/sound-effects.cfm 

If you want to do some 3D-like shapes, you can do so with a gradient fill and ovals [or rectangles].

First we create a basic shape.

Next we Fill the shape with a gradient in the top-left corner.  Notice how it appears rounded or concave.

Then we create a smaller circle and fill it with a gradient in the bottom-right corner.  Notice the way it looks "inverted concave" now.

Create another circle (smaller than the second) and fill it with a gradient in the top-left again.  Now it appears to be a rounded button with a "frame".

Adding a color gradient (green for example)...

and then painting on a little white for reflection makes it a little more "glassy".

Next you select the entire shape and Convert To Symbol, choosing "Button" as your symbol type.

Your button will appear as a single piece with a bright blue border around it.

Double-click your new symbol and you will see the "button instances".

Here you can see the Up, Over, Down, and Hit instances.

The full screen appears like this.

You can right-click on each of the instances (Over, Down and Hit) to INSERT KEYFRAME.  This will copy the Up keyframe so you can start with the same shape and placement. 

Change each "instance" to reflect a different look.

When you do a CTRL+ENTER it creates an SWF wherever you have your file saved and previews the "movie" on top of your Flash window.

Flash: Buttons

Making buttons in flash isn't as difficult as you might think.  You can make a drawing (or even just a circle, square, or other shape) and convert it to a button.

1. Draw the shape(s) that you would like to become the button.
2. Select the shape(s) either by clicking/shift-clicking on them or drag a box around them.
3. Select MODIFY > CONVERT TO SYMBOL (or right-click the selected shapes and choose Convert to Symbol)
4. Select the "Button" option.
5. Notice that the "timeline" has been replaced with 4 squares -- or "button states".  
1. Up: This is what your button will look like when untouched.
2. Over: This is what your button will look like when you move your mouse over it.
3. Down: This is what your button will look like when you click it.
4. Hit: This is the area of the button that is "encounterable".  
6. Adjust your button states to set how your button will appear to users.
7. Do a CTRL+ENTER to test your movie and see how your button works.

Flash: Trace an Image

The "Trace an Image" project really helps build skills with the drawing tools and gives us a good baseline for future projects.  Here are the steps I recommend for getting started:

1. Open Flash and create new document (either ActionScript 2.0 or 3.0)
2. Open an Internet browser and find a picture that you would like to copy.
   Although cartoons and line art drawings are easier, I recommend starting with a photo and seeing what effects you can get.
3. Copy the picture (Right-Click and select Copy)
4. Open Flash and Paste your image (Right-Click and select Paste)
5. Go to Modify > Document
6. Click on "Contents" and click "OK"
7. Press CTRL+2 to fill the screen with the largest size possible
8. Create a new layer (the little square "folded corner" icon under your layers
9. Begin tracing your image
10. When completely finished tracing your project, delete your original photo layer.
    Note: You can temporarily "hide" your original photo by clicking to dot under the eyeball on the layer holding the original photo.
11. Save your completed file to your Thawspace
12. Press CTRL+ENTER to test your finished project (this also creates an SWF file)

I would like you to spend today and tomorrow creating these traced images.  If you complete one quickly, do another one.  You can use these in another project in a few days.

Examples of Traced Images:

 

Flash: Begin Exploring Adobe Flash

Today we begin Adobe Flash -- a program designed to create graphics, animation and interactivity for the Web.  After exploring the basic tools and menu options, we will be drawing a simple Flash picture.  The finished picture will be saved to Thawspace as an FLA file (Flash Source File) and then we will do a CTRL+ENTER to "Test Movie" -- a step which creates an SWF file (Shockwave Format) with the same name as the FLA file.

FLA files are Flash "editable" files -- really, the only way to open one is to use Flash.  The SWF files are able to be opened without another program, embedded on a web page, etc.  You can also save projects as Animated GIF files, but any interactivity is lost.

There is a folder on your desktop called "Drop Box" which should have a Flash file in it.  Open that file in Adobe Flash.  We will be using that file to learn some basic manipulation with Flash tools.