Andrew Deem GrC 452 – Fall 08 Final Paper

Preface:

Tom – I mixed a couple of the topics you gave us. This is something I feel pretty strongly about so I tried to convey both why utilizing the web is in the best interest of our department and the industry as a whole, as well as some ways that we can integrate new media into our existing programs. I'm glad that through your class you have generated interest in this topic, both in students and professors. It's something that has been needed and will hopefully pay off in the long run. I had a great time in this class, I had no idea I would enjoy it as much as I did. Best of luck at UCSD, I'm jealous :) Hopefully our paths will cross again sometime, I've pondered with wanting to teach (ideally at Cal Poly) and being in a class like this has encouraged me in that after getting in some time out in the working world so maybe we'll both be back sometime. Thanks again, Andrew PS – That wasn't supposed to butter you up before reading my paper, there just wasn't a lot of time to talk at Taco Bell.

GrC 452 – Fall 08 Final Paper

Cal Poly GrC has been a flagship program for years, and will likely continue to do so, but only if some re-evaluations are made of the program's desired breadth. The topics that are taught here are taught extremely well, we have amazing professors who are both knowledgeable and friendly and high-end equipment to be taught with. However, there is a whole subset of graphic communication that our program, and most other programs at other institutions, are only just starting to glance towards.

The development of interactive media and the means to deliver it to the masses represent one of the biggest developments in our industry to date. Using the internet as a means of delivery has only recently matured and the advent of technologies such as Flash and Silverlight, streaming video, interactive websites and web applications allow us to finally capture the full potential of the online medium. People are able to receive increasingly large amounts of bandwidth at home, cell phones are able to connect to broadband while away and, as a result, less of our time and money is devoted to more traditional forms of media.

The only problem is that even though the technology has grown, best practices have been developed and texts have been written there is still little being taught to current undergraduates. Companies are starved for professionals who can deliver this new type of content but it's still surprisingly difficult to learn these skills while earning a B.S. at the same time. Programs such as our own only stand to benefit from introducing these topics to the core curriculum but have been, for various reasons, somewhat slow to do so.

I understand that we can't have our print trained professors teach flexo one quarter and advance Javascript the next, nor do we have a limitless budget to bring new professors every quarter. However, there may be alternative opportunities in our program to start integrating web publishing into then coursework of classes that may not be otherwise based on web technology. For a lot of students there may not be a need to understand how to design a validating stylesheet or knowing how to utilize a Javascript library like Prototype to generate simple interactivity but being able to at least publish themselves to the web can be a tremendous help when being part of any modern workplace while being primed in other aspects of Web technology provides additional job skills that increase appeal to employers.

Opportunities to develop these skills may exist like they do in our class, where written work is submitted electronically through FTP as opposed to as a hard copy hand in. Other venues may exist in adapting different design techniques both to print and web simultaneously. Prepress classes that cover preparing work for sheetfed publication and managing color profiles for a particular press should augment with preparation of the piece for web publication on the web, using appropriate quality conversions, resolution and color space. Typography classes that focus on using inline styles in InDesign to achieve a desired look should augment that with how to achieve similar results using font styles in CSS. Any class that has portfolio development should have students develop Flash or video versions of their portfolio, creating demo reels that can be shown to potential employers online or during interviews. In all of these circumstances work should be published to the web in a way that allows student and teachers to collaborate openly and leverage the different skill sets of individuals to the benefit of the class as a whole.

This system of small augmentations allows instructors to implement incremental changes that don't require broad curriculum changes but offers students a more up-to-date curriculum that more accurately prepares them for work in this industry. By starting with small changes we can best utilize the professors and resources that we have now without significant delay, making changes quarter to quarter as students and professors both make progress in new techniques.

It also helps us to make best use of the resources we have until we reach a point that we are able to hire additional professors that have industry experience in web design and new media development or change our concentration structure to offer more specialized classes. It also helps students in the long run because being able to multipurpose assets for publication in multiple mediums provides huge financial benefits to companies. Understanding how to contribute to that type of multi-use workflow improves performance in any aspect of design and publication. Students that intend to pursue web design and interactive media specifically would obviously benefit from more in-depth analysis of these topics but by making the internet at least a minor part of every other class we eliminate the need for a “Web publishing 101” type course, allowing professors who are qualified to focus on more advanced topics or for students to feel qualified enough to take web classes from other departments.

It also, and perhaps most importantly, teaches students that there is a relationship between print and web, not a competition. The solution for our industry is not to eliminate print in favor of web but to know how to leverage the strengths of both in the way the gives our future customers the best value and user experience. If our graduates can understand the benefits of both mediums they can both communicate more effectively in their workplace with specialist co-workers but can also contribute more directly through capable job skills. Graduates need to understand how the two can relate, what works in both and what works in neither, as well as how the two can supplement each other when used together.

To achieve of these changes the first step is to establish a supportive faculty that embraces new media. In our program we are lucky to have a faculty that is so supportive of student growth and in this regard our department should be able to grow rather quickly. Even though our program has a lot of print and business focus currently we are small enough that we can adapt rather quickly. The second is make sure that the web become a more integrated part of the major, not a separate entity that only one concentration pays any attention to. The final component is the students being open minded and responding to changes in a way that is responsible and constructive, making effective use of collaboration and looking ahead to new uses of technology and the development process behind them.


Andrew's GrC 452 Blog- Updated 11/16/08

Graphics in Motion Blog enteries will be posted as course progresses.

UGS Promo


Purpose:

To produce a 30 second spot for University Graphic Systems, highlighting their new business practices and new managerial staff. We were given footage of several manager interviews, footage of staff at work, a backing music track and a PNG of the UGS logo.



GrC 452 - Sample Promo for UGS from Andrew Deem on Vimeo.

Procedure:

My first step was to go through the manager interviews and determine how to break down several minutes of interviews, full of both good information as well as hesitations, microphone-shirt rubbing, etc., into sections that could be combined into a 30 second montage. This took some experimentation until a relevant, cohesive message could be formed using quality content from several different people.


As each manager talked mainly on a different aspect of UGS the next goal was try to find relevant footage of the staff at work that supported what they discussed in their interview. This led to more rearranging of the interview footage in order to faciliate logical transitions in subject manner while also being able to overlap footage of the press, for example, with two managers talking about the press in the background. I was careful to keep all the manager interviews linked to their audio while removing all press/work footage from its audio.


At this point I had 30 seconds of video, layered with managers at the bottom and working footage laid over at different pointed throughout. Logically the video made sense but was a little unrefined. The first step to clean things up was to add audio crossfades between each manager interview, helping the audio to flow more naturally. Where manager videos overlapped I added video crossfades, as well. The working footage that laid over the interviews was not given transitions, quick cuts looked fine on their own and would have resulted in near constant effects when combined with the managers.


Lastly I balanced the audio. I had turned the music down initially so I could hear the the interviews but had not really done a careful mixing. Some interviews were loud/boomy so they were equalized using the three band EQ. Volume seemed consistent between them afterwards. I then adjusted the music a little more, making sure everything was -12 dB or below.


Significance:

This type of video is common among companies and can be a very useful advertising tool. With the advent of video on the web it can be very easy for a company to personalize itself a little bit and make customers feel more comfortable, improving customer relations.


Closing thoughts:

It was fun to work with multiple video sets and combine them into a relevant messgae, despite being shot at different times, of different people and perhaps with different intent. It forced me to look at the content a little more closely, not just on a visual level.

:::Project 5 – WiHire Splash Intro

Objectives
Using assets from WiHire.com, we were to make a splash intro screen for their online videos.  A splash intro is a short clip, typically less than 10 seconds long that precedes a branded video. The end result was open ended, based on how we chose to utilize the WiHire logo and any additional art and music that we wanted to use.

Procedure
My first step was to separate the WiHire logo into separate elements so I could utilize the logo in sections. The three text boxes for the WiHire slogan could have been replicated as text objects in Final Cut but since we had high resolution source images I chose to make PNGs and be sure to maintain consistent color with the rest of the logo.
After I had my individual elements of the logo I started looking for background music so that I could plan out a look and feel for the clip. After finding a rock/hip-hop track I loaded it into Final Cut and started experimenting with the logo elements. I knew I wanted a somewhat simple clip and wanted to synchronize things on the beat. With each piece of the logo in my bin I experimented adding elements in different orders on the timeline without using any transitions or effects. Once I established that base structure according to the song I started to add effects and filters.
I tried several 3D transitions with the main WiHire component until I was able to make it turn in from a black screen, adding a little bit of depth. The text components I tried the ripple effect to give the text a little bit of pulse as the main beat dropped. Getting the waves to glow/pulse was the most difficult. I found filters that were close to what I wanted but had to spend lots of time doing small tweaks and waiting for renders to see if it worked.

Video:

http://www.andrew.grc452.com/452_adeem_wiHireSplash.mov

Summary & Conclusions/Project Significance
This project was one of the most fun, both for being so open-ended but also for the professional challenge of making a product that we could hopefully have used by a real business. It was also a good test of our Final Cut skills, forcing us to take what we had learned in previous projects and call on it when appropriate. Luckily everything I wanted to do I was able to do in some way, perhaps not in the most efficient way, but the final product was what I had imagined.

Closing thought
Being able to work through the process of just a mental concept to a finished video project is probably the most important part of this class. To use these skills professionally that is a necessary component as excessive Final Cut skills are useless if you can’t turn them into what the client wants to pay for.


:::Project 4 - ATT animated advertisement:::

Objectives
The main objective of this lab was to use a Photoshop PSD as a template for an animated ad made in Flash. The PSD contained static representations of everything that was going to be used in the ad. By separating the elements we needed into individual graphic elements that is easily done.

Procedure
The first step was to use the supplied PSD to create our individual graphic elements. Because the PSD was layered we were able to separate the graphics for a button, including its hover state, an ATT logo and a stylized background. The body text of the ad was a standard font without any extra effects and so we created new versions of all the text directly in Flash. All the graphic elements were saved as PNGs so that transparency would be preserved.
I imported all the individual elements into Flash, selected them all and from the right-click menu chose ‘Distribute to Layers’ to give each element its own named layer.  I had to reorder some of them to recreate the ad accurately. I also used the Text tool at this point to add in the body text, placing each line its own layer.
Using keyframes and motion tweens I set up animations first for the 4 lines of text. Each had one keyframe on frame 1 and a second further down the time line. At the first keyframe I moved the objects off the stage and created the motion tween, causing them to move onto the stage and into place. Some experimenting was required to place the initial keyframes to delay each text boxes entry as I intended.
The next step was the button. The graphic for the non-hover state was placed and tweened into place the same way the text was. That graphic was turned into a movie clip, giving it its own timeline. The hover state was placed on the second frame of the movie clip timeline. In the main timeline I added a frame of ActionScript that then listened for mouse over events on the movie clip, switching to frame 2 during a mouse over and switching back to frame 1 when the mouse rolled off. There was also a command to stop the animation at the end, keeping the movie from looping.


Summary & Conclusions/Project Significance
This project was a good follow up to last week’s Flash introduction. I’ve had some Flash experience but never with an external PSD and using imported elements. It provided a practical way to pull together the skills from the video skin project to create something that was easily practical in a professional situation.


Closing thought
I enjoyed this project, as well as the two Flash tutorials together. They augmented each other well and are a good supplement to our Final Cut projects by allowing new ways to publish our work.

:::Project 3:::

:::Project 3 – Skin/Flash video player
Objectives
Our main objective for this project was to create a custom Flash player for the video done during last week’s green screen project. We started the project with an existing player template in Flash and then customized it to create a custom skin for our video. This gave a chance to become oriented with the design tools offered in Flash as well as some of the uses of Flash video as a tool for the web.

Procedure
We started by preparing the video before importing into Flash. Using Final Cut we were able to adjust the size, quality and resolution to make sure we had a high quality video to import into Flash. By not compressing the video before the initial import into Flash we avoided compressing the data twice and thusly a high loss of quality.
The video was then imported into Flash as an object. At this point we could compile our FLA and watch our video play without any control. Using built-in skinning tools in Flash we loaded components for a skin included in Flash. This added a set of components that we could edit within Flash and then drag and drop onto the stage containing our video clip.
The components were editable from the library. By adjusting colors, fills and gradients to give the skin a more custom looks. After adjusting and dragging the components onto the stage we wrote a simple ActionScript to link our video object to the button components.
These consisted of play, pause, forward and rewind buttons. This offers a full set of controls to the viewer, as well as a seek bar and loading bar so they viewer would know if the movie had loaded and how long it was. We finished the project by publishing to HTML and using the <object> information from the HTML page to place the object on our blog page. After changing the HTML for our blog we also had to upload both the SWF and FLV to the server to maintain the integrity of the link within our SWF.

Video

 
Summary & Conclusions
This project provided a good introduction into Flash. Flash video is becoming more commonplace on the web and this was a useful way to learn some basic skills both for designing with Flash and using Flash video.
Project Significance
This project could easily be augmented with additional logos or buttons, allowing us to easily make a custom product for a client or our own branded site.
Closing thought
Flash is almost essential now as a skill for web development so learning these skills are crucial. Any exposure to the technology gives us a professional advantage.

 

:::Project 2 – Green screen – iPod/dancing commercial
Objectives
Our goal for this project was to use footage of dancers shot in front of a green screen and create a 30-second spot similar to recent iPod commercials. We used footage of people dancing to a particular song and set the spot to an MP3 of that song so that we could learn to edit while preserving the beat and the overall relevance of their movements. The project also taught us the basics of extracting video from a green screen shoot that can be used for a wide variety of special effect shots and expanded on our overall Final Cut skill set started with our first project.

Procedure
The first step, since the footage was already shot, was to eliminate the green background. This required use of the Chroma Keyer and some experimentation with its parameters. The end result was not completely perfect but it did a very good job of selecting only the background without having to experiment too much. With more work and experience I may be able to improve the accuracy of the selection.
With the green screen selection done the rest of the project was composition. I started the same way I did with the first project, by experimenting. I removed the audio from our master dancers clip and loaded an MP3 of the same song so that the only audio was the song. From there I trimmed, arranged and transitioned until I had a rough idea of how to fill my 30 seconds.
I (unintentionally) started over (after a computer failure) and began trimming clips into 2-8 second sections, adjusting the start and end points to try and keep each dancer on beat. I used layers of solid color underneath each dancer to try and replicate the effect used by Apple in the iPod commercials. Each video of the dancer also used the Sepia filter, allowing me to adjust the color of the dancer in each clip, resulting in the whole dancer being a solid color. After I had 30 seconds of dancers with colors I started using transitions to add more interesting changes from clip to clip.
With transitions in place and a better idea of the clip, I began to layer instances of dancers and experiment with the motion filter to create clips with multiple dancers. The last step was adding in my text and creating motion tweens. After making a motion tween, I split the clip at the apex of the tween and put the first half in a layer behind the dancer, the second half above the dancer. This added a sense of depth to the text, as if it entered the movie from behind the dancer.

Video


Week 2 - iPod commercial from Andrew Deem on Vimeo.

 

Summary & Conclusions
Overall this project was more difficult than the Creek Day project. I edited much more intentionally once I experimented and gained a feel for the video. The use of chroma key, solid colors, sepia and motion made for a much richer movie.

Project Significance
This project is significant because of the versatility of this effect. Being able to shoot in front or a green screen is a must have for any editor and is the basis for most of today’s special effects.

Closing thought
This project greatly expanded my understanding of Final Cut. The chroma key got me to be more deeply involved in the project from the outset and forced me to think more about what I was doing. We used more advanced tools and definitely created a product that required more technical effort than our last.

:::Project 1 - Sample PSA for SLO Creek Day:::

Objectives
                Our main objective for this was project was to use existing footage of the creek near the San Luis Obispo Mission and a prerecorded voiceover to create a 30 second public service announcement for the San Luis Obispo Creek Cleanup Day. Our main tool was Final Cut Express, though we also made some use of Live Type to create a segment of animated text.

Procedure
                We started by familiarizing ourselves with the bins in Final Cut Express (FCE) and making sure we had access to the video footage and sample audio. From there the project was mostly a creative process as we practiced pulling clips from the bin, removing the attached audio if need be, and trimming them to desired length. Rearranging and revising was pretty extensive due to the abundance of clips and background music available. I tended to preview a clip, pull it onto the timeline, trim to size and then place it after the previous clip in the intended order. Only once I had my full 30 second PSA did I start adjusting length, pulling clips in and out, experimenting with transitions and adjusting voiceover and music levels, usually in that order. I would then carefully watch the clip, either in whole or sections, and then do more rearranging, new transitions, etc and start the whole process over again. By poring over the clips extensively I was able to finally produce an arrangement I was happy with.
               
Video


Sample PSA for Creek Day from Andrew Deem on Vimeo.

Summary & Conclusions
                Overall I was happy with my project. I felt a little intimidated by FCE at the outset but soon became more comfortable as I worked. The menus and controls, though visually different, felt somewhat similar in principal to Adobe Flash when working towards the goals of this project. Luckily nothing became frustrating and the work became more enjoyable as I progressed. After watching some other people’s videos in class I realized some other effects and transitions I could have used to slightly improve my project and noticed some other techniques that I hadn’t thought of.

Project Significance
                The significance of this project is that every video we make from here on out, rather for a class or for a feature film, relies on both these technical and creative techniques. Being able to logically and artistically arrange clips, even with one music track and no flashy transitions can be done very well or very poorly. By getting some experience learning this process without having been taught the full extent of FCE I was able to focus more on being tasteful and effectively communicating the message of the video and feel more confident to create a more ambitious film.

Closing thoughts
                This was a good way to start to our lab work. Even though we all had the same starting place it was fun to see what else could be done and watch some different ideas up on screen. Even though FCE is completely new to me, as is video editing in general, I feel much more confident and look forward to using more of the program.

 


© Copyright 2007-2008 www.grc452.com All Rights Reserved.