Homework: Story to Be Illustrated in Flash

Your homework over Winter Break is to come up with an original story which you will illustrate in Flash upon your return.  We will be adding interactivity, sound, etc.  If you are having trouble coming up with an original story, think about a story for children which teachers a moral or a lesson.

Begin with a Story Map:

1. The Setting
1. Characters: Tell who is in the story
2. Place: Tell where the story takes place
3. Time: Tell when the story happens
2.  The Problem
1. One or more of the characters has a difficulty.  What is their difficulty or problem.
3. The Goal
1. One or more of the characters has a goal -- something they need or want to happen.  Usually this goes along with the problem.
4. The Events
1. Event 1, 2, 3 -- Things that happen in the story that tell how the characters get from the problem and goal to the end of the story.
5. The Ending
1. What happened at the end of the story?  Tells how the characters achieved their goal and resolved their problem.

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.

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: Shape Tween

Todays project uses a function of Flash called "Shape Tweening". To begin you draw a picture on a keyframe (1 for example). Next you add a keyframe further out in the movie -- 20, 30, or 40 frames out and draw another picture. Right-click anywhere between those two keyframes and select "Create Shape Tween".

When you play your movie, you will see the shape morph from one image into the other. You can view the video tutorial from a couple days before which includes help on Shape Tweening.

Flash: Animated Movie Clips / Instances

Today we are creating an animated Movie Clip. We will begin just as we did with the Graphic Symbol and the Button -- by drawing a picture and converting it to a Symbol. So draw your picture, go to MODIFY > CONVERT TO SYMBOL > MOVIE CLIP, and click OK.

Now [just as we did with the buttons] double-click your new Symbol. You can now create some sort of animation. When finished, click back on "Scene 1" to return to your stage.

You will notice that even though you have an animation, you are still on the first frame of your movie. This allows you to animate an object (a car, person, alien, etc.) and modify the size or location of the object without having to change every frame. Next we will drag out different "Instances" of your movie clip and resize, reposition, and recolor each one.

Flash: Motion Tween Animation

Okay, today we're going to learn "Motion Tween".  If you draw a picture, select it, then go to MODIFY > CONVERT TO SYMBOL > MOVIE CLIP it will create a symbol in your Library.  Now you can add keyframes, change the position of your new symbol, and add your "Motion Tween".  It's one of the ways you can move things smoothly in Flash without having to draw things frame-by-frame.

I will demonstrate drawing a graphic, converting it to a symbol, opening the graphic, and doing some frame-by-frame animation within it.  Then we will go back to our "stage" and create a Motion Tween.

Assignment Today: Upload to DeviantART

Hi Guys!  Sorry I am out again.  I am going to the doctors for some blood tests to figure this thing out.

Anyway, today I want you to save your animation project and then upload them to your deviantART page.

Instructions:

• With your Flash animation open...
• Save your flash animation
• FILE > SAVE AS... > yourfilename.FLA
• Test your movie
• CTRL+ENTER (this previews your animation and builds an SWF file)
• Find an interesting frame of animation to save as a picture
• FILE > EXPORT IMAGE > something.jpg (in your Thawspace)
• You now have 3 files (a JPG, a FLA and a SWF)
• Open deviantART...
• Go to Submit > Submit Art
• Upload your SWF file
• Click the pencil icon next to the "Preview required:"
• Click "Change preview image"
• Select the JPG you made in the section above.  This will be the picture people click on so they can view your animation.  Some people actually edit their "preview image" by adding an "animated" text label.
• Finally, complete the section with category and labels and such.

Flash: 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

And another example using variable frame rates -- or just flipping the page when you need the next frame.  :)

Flash: Frame by Frame Animation

Creating Frame-by-Frame Animations:

• Create a new Flash document
• Draw a background (if necessary) and name it "Background" (I recommend locking it, but it's your call)
• 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.

Flash: Draw a Picture

Today we will be using the tools in Adobe Flash to draw a picture on different layers.  I would like you to do the following:

• Draw a background:  It might be grass, mountains, and sky... or the inside of a room... or a stage with lights... or a movie theater... or outer space... or whatever.
• Change the name of "Layer 1" to "Background"
• Create a new layer and draw something: It could be a person, a dog, a car, a UFO, etc.
• Rename the new layer to something applicable.
• Save your picture to your Thawspace.
• Go to FILE > PUBLISH SETTINGS and select JPG -- and then click PUBLISH.

Flash: Beginning 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.
If that doesn't work, you can find the file here.

 FlashDrawing.fla looks like this.

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.

Update Portfolios and DeviantART Pages

Use today and tomorrow to make sure all of your projects are uploaded to your Blogger and deviantART pages.  Also use this time to adjust your settings, add labels, and make your portfolios more complete.

Finally, add a new Photoshop project (of your choice).  This IS a required project.  Just title it, "Photoshop: My Choice" in your blog.

Photoshop: Pop Art #2

We will be continuing our exploration of Pop Art today with a 2nd project.  We'll be using the same techniques, but doing it in a different way.

1. Begin with a picture of a person (a woman's face works well)
2. Go to IMAGE > ADJUSTMENTS > THRESHOLD
1. Set your threshold and click "OK"
3. Soften the edges with a FILTER > BLUR > GAUSSIAN BLUR
4. IMAGE > MODE > GRAYSCALE
5. IMAGE > MODE > BITMAP
1. Halftone
2. Frequency: Down to about 20 for larger dots
6. IMAGE > MODE > GRAYSCALE
7. IMAGE > MODE > RGB COLOR
8. Duplicate the graphic layer (Or select all, copy and paste)
9. Insert a blank layer between the graphic layers
10. Fill the blank layer with a bright color (i.e. bright red)
11. Select the top graphic layer
12. Go to SELECT > COLOR RANGE and choose the white color with a "fuzzy" selection area
13. Press DELETE (which should reveal the color underneath)
14. Click the bright color layer, do a CTRL+A (Select All) and delete.  This will reveal a white background
15. Use some colors and a paintbrush with hard edges to paint features (i.e. lipstick or eye color)
16. You can mute the colors a bit with the Opacity tool

Photoshop: Pop Art #1

Today we're going to be creating a Pop Art picture; something that would have been popular on album art in the 80's or on T-shirts from the 2000's.  :)

To begin with, choose a picture with distinct lines to make it easier to erase out the background.

• Make a copy of the picture layer.
• Between the two picture layers, insert a new layer and fill it with a bright color.
• Erase the background (everything but the subject) on the top layer.  You should see the color coming through behind your subject.
• Perform a Threshold: IMAGE > ADJUSTMENTS > THRESHOLD
• FILTER > BLUR > GAUSSIAN BLUR (just smoothing a little)
• Right-click on your top layer (the picture you just blurred) and do a DUPLICATE LAYER and then under "Document" choose "New", giving it a name like "Temp"
• Convert your new document to Gray-Scale: IMAGE > MODE> GRAYSCALE (just to remove any color variation)
• Convert your document to a bitmap: IMAGE > MODE > BITMAP 
• Flatten Layers
• Halftone Screen
• Round
• Frequency (Start with 30 but play with this setting for a better effect)
• Go back to Grayscale: IMAGE > MODE > GRAYSCALE
• Size Ratio: 1
• Back to Color: IMAGE > MODE > RGB COLOR
• Right-Click the Layer then Duplicate Layer 
• Document: Choose the original document
• Go back to your original document where you can see your black & white on top of the other layers.
• Hold the ALT button while hovering between the top two layers and click on the "double bubble" to connect the two layers.
• Try this with a few different pictures to see how the process works.

Done by Adriana French

Here are some interesting Pop Art backgrounds you can try out:

Photoshop: Virtual Makeover / Photo Retouching

Today we are going to explore doing a virtual makeover.  In a previous assignment we took a face with scratches or pimples and retouched it to make it look a little more natural.  Today we are going to go a little further by beautifying someone.  In short, we are going to take a photo of someones face and smooth wrinkles, remove blemishes, adjust colors, brighten teeth and eyes, etc.  We can even try some "virtual makeup".  


Remember that we aren't trying to make anybody into a super model, we're simply trying to bring out their natural beauty.


You can search for "no makeup" on Google Images for some examples.  Click here to see a few: [LINK] or [LINK].


Here are some celebrities [mostly] without makeup: http://www.funzug.com/index.php/celebrities/celebs-without-makeup-portraits.html


Here are some examples of Virtual Makeovers:

If you would like to follow along with a video tutorial, you can check these out:

A Sample Image

Additional Photoshop Functions

Today we will be looking at some different Photoshop functions:

• Brushes
• Actions

We will also be creating some folders in your Thawspace:

•  Resources
• Fonts
• Brushes
• Actions
• Stock Images

Today we will begin experimenting with Photoshop Actions.  Actions are basically macros -- small scripts that do a series of tasks that you would normally need to perform one at a time.

Update: We viewed available Actions, found how to use "hidden" Actions, and how to load external Actions.  We experimented with a few Actions on images and text.

[Note to Self: Update later with examples, links, etc.]

Photoshop: Blogger Title Graphic / Header

Today we're beginning a "title graphic" or "header" for our Blogger page which include the title of your page and some graphic elements.  The following examples demonstrate the concept.

You might want to go into your blogger settings and check a few things before beginning:

• What is the width of your blog?
• What colors or styles will fit with your blog?
• Will a graphic (or maybe your logo) fit on the header?

When finished, either change your header graphic in your portfolio or add the picture to your blog as a project.  Don't forget to give it a description and add keywords (e.g. Photoshop, Logo, Header, Knight).