Video Tutorials / Demos

I created the following tutorials using SnagIt and posting them on YouTube.

Video Feedback

Sample Student Assignment Evaluations / Feedback

Hi [Student],

I try to go through everything here and point you towards what needs updating/revision. You have the entire course to get things fixed up for the final and get your work in the best possible shape. It can be a busy course, but is a good way to get your work ready for prime time. You are missing two vector/raster pieces, one web site, and a banner ad. If you don't have these, you will need to create some additional work.

--Vector Raster--

I don't think the goldfish thumbnail is a good smaller representation of that particular piece, as the goldfish is only a very small part of that design. The merged parts of that cat looks good.

Overall, your work in this section is creative and a bit abstract. I often like to see visuals in this section that have more of a business use. This would appeal more to firms to see things like logo designs or graphic design type projects. This is the kind of thing small businesses will want to see.

--Web Sites--

Family Reunion- The thumbnail of the logo is quite grainy. Everything on here is a bit boxy. I think you could take the same grid format here, but maybe not necessarily define everything be in a box. I think the logo/header could be made bigger/sharper. I would recommend reducing the width of your paragraphs a little bit as they are a bit wide (harder to read). The photos on the home page look a bit skewed to me. The checklist page looks incomplete. The maps on several of the pages are skewed. It is important to keep photos or maps in proportion. Overall, the site could use more photos. Finally, take off the color changes on the navigation. Anymore people keep navigation buttons colors the same regardless if they had been on the pages or not.

Sew What- Again you have a very blocky site here. I'd add some rounded corners, or just use the space as a grid rather than having border lines on everything. There is a huge header on this site that is wasting valuable space at the top of the screen. This site breaks down if you shrink the browser width down below 900 pixels or so. A static, non fluid layout would help this look better. The home page content on this is minimal, and there could be a lot more images off the home page. The form page elements could be aligned better for a neater look.

Overall your web sites are lacking modern design styling. I would do some research on recent design trends (Google 2015/2016 web design trends) and get some ideas on how you can make your sites look more modern.

--Multimedia-- For your video, you will want to put this on YouTube/Vimeo so that we can stream it without having to download the entire file. Similiarly, you will want to put your SWF within an HTML holder file. You should not link directly to a SWF.

For the cooking site, you could clean up some of the images. Some of the edges (like the salt) are a bit rough. Also a lot of these images show up large and look a bit blurry at that size. I would possibly take out that large zoomed in view because the images don't look that good large. So the image quality could be improved throughout.

Hi [Student],

Although filling the frame can be a useful technique, is that the only way to do it? I recently found myself trying to shoot using more negative space. I was inspired by a wedding photographer I know that has a handful of shots that look like this.

When it comes to lines, there are a lot of natural lines out there in nature. But how do you actually use them to make your composition better?

Hi [Student],

I would agree that going black and white can help you focus more on the composition. I wish we had time in here for everyone to go out and do black and white to focus on that. Also, since the author's name was Gibson, it reminded me of a famous photographer named Ralph Gibson, who does a lot of black and white.

Hi [Student],

You are making some great strides. It is really nice to see the new site compared to the old. Your new design is much more together, contained, and cohesive. There is a better visual hierarchy as different sections are grouped together a little better. Getting rid of the 3 column body content is a big improvement as well. 

I like the colors, although the grays in particular looks a little flat to me. I would recommend adding some ever so subtle texture to the body background, light gray, and maybe even the orange or navigation backgrounds. I would try to find textures like the bumpy texture of the rolled up mats you see in your main photo. You could also add subtle gradients just to give elements a little depth, or sometimes little drop shadows or highlights can have a nice effect. 

That ball on the home page image still looks more oval. Can that image have the height stretched a bit? It looks a bit stretched too far width-wise. 

I find the health effects quote to be harder to read. I think the line spacing is a bit too much. I'd tighten it up a bit, and perhaps throw an icon or image in that sidebar.

The original state of the main navigation text is a bit too dark in my opinion. I'd brighten it just a hair. I like the rollover effect there, and love that it is HTML text and CSS styling.

Beyond the home page, the pages are a bit short and could use more content, including text and good photos. For your main page headers, be consistent with your use of capitalization. That header text might be a bit big. It looked good on the home page, but the info page for instance has 3 lines worth of header text, which seems a bit much.

It's not really covered in this class I don't think, but you might do some research on adding a few form elements to your contact page. You don't have to worry about the backend to make it functional (you'll do that in later classes), but it would be a good start. Typically it is a good idea to not put email addresses within HTML, because there are bots out there that just go hunting for email addresses in web sites so that spam can be sent to them. That's why you usually see forms out there for company contact pages. 

I think the effects on the header text are a bit too strong. I'd like to see you try to do this with HTML text and CSS3 styling to achieve a similar, but maybe slightly toned down look. I think you could also possibly put a good photo on the right side of that header. 

Within the code, the only thing I'd like to see is more HTML5 and code commenting. Also be a little more descriptive with your ALT tag text. Remember ,this text gets read aloud to users who have visual impairments. So help them know what they should be seeing. It shouldn't be super long, but  a little more than what you have. Say "Fitness Health Logo" for instance instead of just fh. 

You are making great progress. Keep up the good work.



Hi [Student]

I'll run down the grading criteria to review this:


There are some issues with me viewing this, particularly the opening video. You embedded the FLV in a way that requires the external FLV file to be available. You didn't include it, and even if you did it is set to a path on your desktop instead of a local path. So I don't see any video, just a gray screen and I can hear bubbles. I snagged your FLV from week5 just to make it work in that case if I adjust the path of the FLV playback component. A better route would have been to embed it to the timeline when importing, that way it doesn't have to rely on an external file.

The button appears on it's own without the background because it is a frame past where the movie ends. The movie stops where the stop() command is in the ActionScript, so all that has to sync up to where you want things to stop. Now your animation at the very end keyframe needs some script to jump back to frame 195, that will loop the movie back to the right place.

I would have liked to see the title animation in it's own scene. I demo this in a video in Problem/Solutions for week6 if you want to go back and look.


For the opening, the button placement is a little odd in the upper right corner. The graphics and background of the animation are looking pretty good. If you look closely you can see a bit of tiling with the rocks background, but that's probably the biggest thing I'm noticing. The sky background is a bit drab. If this is indeed an aquarium... a couple things. In the background we might see the back wall of a house or something kind of blurry or obscured. Also, the water probably wouldn't have quite so big waves. Overall, the design is pretty nice though. 

Technical Animation Skills:

I'm not sure the 3d tools is really needed for the fins. 2D scaling could have done the trick. I can see the back fin moving, but if the others are moving it's not very noticeable. I see the crab leg movement now, but it isn't what I would expect of a crab. Usually all those little crab legs are scurrying a lot quicker. The motion isn't believable enough. The antenna movement is pretty good. The background animation has a pretty major blip when it repeats. The key to avoiding that is having the same graphics in the same position at the end as in the beginning. You kind of have to picture at the end how it is going to continue when it restarts at the beginning

Animation Principles:

You definitely could use more animation principles. The movements of all the characters are fairly slow and monotonous. The seahorse in particular could probably pulse with some squash and stretch to go along with his tail movement. The sea horse getting snagged at the end could be developed further, and the animation ends a bit too quickly after that happens. You need to let the audience register it for a moment. The seaweed movement is good outside of the blip.

Hi [Student],

This is looking great. It looks like you have all the requirements here. 

For the most part you have really nailed it. I'm going to go in to super nitpicky mode to find any thing you need to work on. Your Photoshop file shows advanced image work, and you have nailed all the various coding techniques we have discussed in the class on the web side. 

I wouldn't suggest redoing this, but the site as a whole is a bit taller than wide. I think for some people with a smaller browser height, you'll have your footer cut off some. You could rearrange the site elements some to be wider than tall. Like I said, I would not redo this though, but something to think about for next time.

For a knock-em dead portfolio piece, I would go ahead and add error checking to your form, and some kind of thank you message after you submit. It won't matter if you set up the backend php to actually send the message somewhere, but I would make it look like it is working. It would be cool to see the working google map in there also. I'd link up your directions also.

Your social media icons (FB and LI) have a tiny bit of white haloing going on around them. It looks to me like your top navigation could be centered a little better as well. I'd like to see cupcakes right under the cupcake, and that block center aligned with the page title below it.

I love you worked in a PHP include for your header and footer content - that is smart design. Great use of @font-face, and your CSS image sprites. I like how you endcapped your masthead with graphics,but just created a colored div box for the middle. 

For perfect code - I think you could have some commenting in there. 

For your cupcake gallery images, I would center and lower the font size for your copyright text. 

Really standout job here [Student].

Hi [Student],

This definitely has some good potential. I agree that the timing needs some work. Everything is a bit slow and robotic at this point. There are two ways to speed things up: 1) A faster frame rate 2) Or using less frames in whatever action you are doing. 

For your hero, I don't think you are animating him effectively yet. I would recommend a different way of doing this. Right now, you have all of his nested animation happening within the symbol. You could do it this way, but there is quite a bit of repetition. 

Instead, I would make a symbol that is him just kicking/moving along. It looks like that would be about 20-30 frames. You could have another symbol using mostly the same graphics that just have him standing/cruising. Then you would create another symbol that is just the jump part of the motion. Then you just drop these different symbols of the same character in the main timeline where they need to be. So you might start off with the kicking/moving symbol and tween that on the main timeline up to the ramp. Then you put in a new keyframe of the start of the jumping move. Make sense? I think this method avoids repetition of similar movements, and can be easier because it's not one big thing - it is broken up into more manageable parts. 

I think your sitting characters could be sized up a little Their movements are very small, and almost not noticeable. I think you will also want to exaggerate those movements more - which is a principle of animation we will be studying in week3. 

Also for you girl and other skating guy. They have the same, monotonous pace that the hero has. Instead of moving them all at once, vary their starting times and speeds. Create purpose to their directions instead of having them just appear to be a bit aimless.

Background is more week3. You should probably show some of the ramp top as you have a top down view and you'll be looking partially at the top of it (like the wall).