Monday, April 20, 2009

FinalCut - Technical Instructions

Photographs/images
Import your jpeg images into the browser
Drag each image into the viewer window
To adjust the size of the image (to zoom in or zoom out), go to ‘view’ in toolbar and click on ‘image+wireframe’
Adjust the size proportionately with the shift key
Go back to ‘view’ and click on ‘image’ after you have adjusted all the image frames

Adding transition effects to the images
After positioning your images in the timeline
In the browser window click on the effects tab
Locate the video transitions folder
Click on the arrow and choose from different transitions. e.g., Cross dissolve, fade in fade out etc.
Drag any one transition to the front and back of each image
Extend the transition in the timeline as per your choice
Render files and view the sequence in the canvas window

Adding other effects to images
Try: Video Transitions>3D Simulation>Cross Zoom

(You may try others, but note that most are too disruptive to the message and ultimately unusable)

Adding text
Use Video Generators>Text> Crawl / Scrolling. Use the controls in the Controls tab in the Viewer to set size, color, etc.


Adding audio to the timeline
Import and drag the audio file into the timeline and adjust the music according to your 5-7 sec time frame


Moving around an image
- Set the Duration of the image to 10 second or whatever length you want to be.

- Double click the image to open it in the Viewer.

- Set the playhead at the beginning

- Click on the Motion tab at the top of Viewer.

- Click on the diamond button right to Scale to create a keyframe

- Go back to Viewer tab and change Scale

- Set the playhead to the frame where you want to create another keyframe

- Click the diamond button to green to create another keyframe

- Scale the image in the Viewer tab again

- To move/pan the image, you also need to click the keyframe button by Center/

- In the Viewer tab to move the image while the playhead in on that keyframe.

- Drag the image clip to a channel and render

Monday, April 13, 2009

Assignment 5 / Social Media / Facebook

MEDIA: FACEBOOK

1. Begin a Facebook group based on the proposed product or service.

2. Name your group "Friends of (the name of your product or service)"

3. Write a 15-40 words for the "Common Interest - Beliefs & Causes" statement which describes the purpose of the Facebook group and your proposed product or service.

4. Create an appropriate visual for the group, based on a still from your animatic video. The visual should be graphically appropriate for the small display size used in Facebook.

5. Post the stop-motion and the animatic video on the group's page.

6. Get at least 5 people to join the group and have them give their opinion as to the usefulness and desirability of the proposed product or service, as well as suggestions for the features, users, product or brand extensions.

Saturday, April 11, 2009

Zooming and moving around an image in Flash. (Ken Burns Effect)

1. Import an image to the stage and convert it to a movie clip. (see last week's instructions.)

2. Create a keyframe on frame 25.

3. Click on frame 25 and on your image on the stage. Using the Free Transform Tool, on the toolbar, enlarge the image. (So, now is you click on frame 1, the image is small and on frame 25 is enlarged.)


4. On the timeline select / click any frame between keyframes 1 and 25. On the properties panel, go to the "tween" pull down menu and select "motion". (If you have Flash CS4, go to "Insert" and select "Classic Tween".)

5. Save, and go to "Control" > "Test Movie". The image must zoom in.

6. Create a keyframe on frame 70. 
With that keyframe selected, select the zoomed image on the stage and change its position by dragging. (So, now the image on the stage is on a different position in frame 25 and frame 70.)

7. On he timeline select / click any frame between keyframes 25 and 70. On the properties panel, go to the "tween" pull down menu and select "motion". (In Flash CS4, go to "Insert" > "Classic Tween".)

8. Save, and go to "Control" > "Test Movie"

Monday, March 30, 2009

Flash Animation!

1. Creating a new Flash file.
Launch Flash CS3 Go to File > New.
In the “New Document” window, select “Flash File (ActionScript 2.0)”, then hit OK.
Save the file.



2. Setting the stage.

In the Properties box, click “Size” to open “Document Properties” Set Dimensions as 720x480, background color as Black, frame rate as 30 fps.



3. Inserting layers in the time line and name them.

On the layer palette (next to the time line), create new layers and name them according to your images. Each one of your images will be imported on a seperate layer. So if you have 3 still images, your flash will have 3 layers.



4. Importing images and converting them to a movie clip symbol.

Select first frame on your first layer, go to File > Import > Import to stage on the menu bar: Select your first image and hit OK. (Flash will ask whether you want to import all of the images in the sequence. Hit “No”). Your image will be placed on the stage. Then, select the image (by clicking on it on the stage) and go to Modify > Convert to Symbol on the menu bar. Name it, and select the type as “Movie Clip”. Then, hit OK. Select your movie clip on the stage and align it properly on the stage.

Select first frame on your second layer, go to File > Import > Import to Stage on the menu bar: Select your second image and hit OK. Flash will ask whether you want to import all of the images in the sequence. Hit “No”. Tour image will be placed on the stage. Then, select the image and go to Modify > Convert to Symbol on the menu bar. Name it, and select the type as “Movie Clip”. Then, hit OK. Select your movie clip on the stage and align it properly.

Select first frame on your third layer, go to File > Import > Import to stage on the menu bar: Select your third image and hit OK. (Flash will ask whether you want to import all of the images in the sequence. Hit “No”). Your image will be placed on the stage. Then, select the image and go to Modify > Convert to Symbol on the menu bar. Name it, and select the type as “Movie Clip”. Then, hit OK. Select your movie clip on the stage and align it properly.



5. Working with timeline.

On your first layer, go to the “frame 10” and add a key frame (go to Insert > Timeline > Key Frame). And go to “frame 40” and add a frame (go to Insert > Timeline > Frame).

On your second layer, move the first key frame to the “frame 21” by dragging. Then, add a key frame on the “frame 41” (go to Insert > Timeline > Key Frame). And go to the “frame 75” and add another frame (go to Insert > Timeline > Frame).

On your third layer, move the first key frame to the “frame 55” by dragging. Then, add a key frame on the “frame 75” (go to Insert > Timeline > Key Frame). Go to the “frame 87” and add another key frame. Add keyframes on “frame 94” and on "frame 105" as well.



6. Working with “tween” animation.

Select “Frame 1” on your first layer (and select the movie clip). On the property panel, go to the “color” pull down menu and select “Alpha” and set the value as “0”. Then, click a frame in between key frames 1 and 10 and on the property panel, go to the “tween” pull down menu and select “motion”.

Select “Frame 21” on your second layer (and select the movie clip). On the property panel, go to the “color” pull down menu and select “Alpha” and set the value as “0”. Then, click a frame in between key frames 21 and 41 and on the property panel, go to the “tween” pull down menu and select “motion”.

Select “Frame 55” on yout third layer, (and select the movie clip). On the property panel, go to the “color” pull down menu and select “Alpha” and set the value as “0”. Then, click a frame in between key frames 55 and 75 and on the property panel, go to the “tween” pull down menu and select “motion”. Then go to the “frame 94” (select the movie clip”) and on the property panel, go to the “color” pull down menu and select “Alpha” and set the value as “0”. Then, click a frame in between the key frames 87 and 94 and on the property panel, go to the “tween” pull down menu and select “motion”.



7. Exporting your movie as a QuickTime Movie.

Save and do “test movie” (on the menu bar: Control > Test Movie). If everything looks good, you can export the movie as a QuickTime movie. On the menu bar: File > Export > Export Movie… In the QuickTime Export dialog box, click “QuickTime Setting…” and set the proper setting (MPEG-4 Video) and hit “OK.
Now, you can view the movie in QuickTime.

Monday, February 16, 2009

Assignment 4: Stop Motion Video

Media: digital camera, FinalCut

-Make a stop motion video using a digital still camera and FinalCut,
suggesting the purpose and how a product or service arising out of your
brand platform theme might function.

This is “denotative” (what it does, its purpose) rather than “connotative”
(its essence, its marketing message, etc.).

-The entire video is one scene. See http://leo.media.mit.edu/?p=89 for
similar examples.

-Start by planning the stop motion video with a simple storyboard using
the provided template.

-Make your stop motion video, then post the video on YouTube and
make a link from your blog.

FINAL CUT / STOP MOTION INSTRUCTIONS


There are 4 palletes in Final cut
1. The Browser (where the jpeg files that make the stop motion video are imported)
2. The Viewer (where you can see each file individually)
3. The Canvas (where you can preview your video)
4. The Timeline (where the files are set up to make the animation)
(They are in different windows, so If accidentally you close or loose one them, go to
Window > Arrange > Standard, and you will get the default view again.)

A) Set the duration of each jpeg file.
The movie has to have an animation effect so the duration of each jpeg on the timeline, has to be very small. Go to: Final Cut Pro (on the top left) > User Preferences > Editing (window). Set the Still/Freeze Duration
to 00:00:00:04. (Now every file imported in the browser will have that duration.)

B) Import your files in the browser.
Go to File > Import > Files. Choose your files. (for a 5 second stop motion video you need about 50 jpeg files).
Make sure that they are in the correct order. To be sure, select all of the files in the browser, go to View > Arrange > by Name.

C) Select All your files from the browser (apart from the "Sequence" icon) and drag them to first slot of the timeline below. Select them on the timeline and go to Sequence > Render All > Video.

D) Play your video on the Canvas (on the top right side).

E) Save the project in Final Cut (File > Save Project)
Then go to File > Export > Using QuickTime Conversion.
Save it as a QuickTime movie.

Upload the video on YouTube, and embed it on your blog.

Monday, February 9, 2009

AUDACITY


1. The controllers are on the top left side.


2. You can record a track or a sound by using the "RECORD" button, or import a track.


3. To import a track:
Go to Project > Import Audio OR go to File > Import Audio (depending on the version of Audacity you have). Select a file from your computer (mp3, aiff, or wav) and hit Open.

  
If your track or sound is too long, you can "cut" it. Select part of it with selector tool (above). Click on the "scissors" button, or hit Delete.


4. You can zoom in or out, to see your tracks better:
Zoom In > command 1 / Zoom Out > command 3


5. Select the first seconds of a track. Go to Effect (> Utility) > Fade In.
(The same with the last seconds, only Effect (> Utility) > Fade Out).


6. Import more sounds or tracks and fade them in and out, like before.

  
Depending on when you want them to be heard, you can drag each track on the timeline with the double sided arrow (above). By fading them in and out, and positioning them on the timeline, they will be mixed more successfully.

7. Once you have imported and arranged your sounds, you can control their volume from their info boxes on the left OR from: Effect > Amplifier > Amplify (depending on the version of Audacity you have). "Mute"(on the left of the bars) makes them silent.

  
If you want to change the volume of one part of your track or sound, select the "star" tool on the top left. Click on the beginning and the end of your selected part, and adjust.


8. When you are finished, save the track as an Audacity file, (File > Save Project). Then export it as wav, aiff or mp3 (File > Export as....).

Sunday, February 1, 2009

SOUND ASSIGNMENT

Digital Design, Des 680
Tom Klinkowstein

Klinkows@mediaa.com

Assignment Two, Mixed Soundscape for the Brand Platform
Media: Found and self-recorded sounds

-Using sounds found on the internet and sounds you record, create a mixed “soundscape” – evoking (but not documenting or simulating) the service, product or organization which might be associated with the theme you derived from your book quote.

Also keep in mind the colors or textures you have generated from the first assignment.


-Collect these sounds using the Internet:
*Two selections of “compatible” music, one folkloric; one contemporary; no words; the simpler the better.
*One sound effect
*One Animal Sound

-Collect “live” with your own recording device:
*One Mechanical Sound
*One Electronic Sound


Mix these sounds using Audacity, so they seamlessly make one appropriate mixed sound which helps evoke your short theme and coincidentally starts to suggest the service, product or organization which may evolve from that theme.

Also, keep in mind the results from the Color / Texture Mood Board and have that influence the sound source selections as well as the mix.

-Total length = 5-8 seconds.

Tuesday, January 27, 2009

Digital Design - DES 622

Tom Klinkowstein
Klinkows@mediaa.com

Purpose
The purpose of this course is to introduce students to the core ideas and technologies surrounding contemporary approaches to New Media, including a sampling of at least three of the following (depending on time available), Image Design, Sound Design, Motion Design, Social Media Design and Interactive Design. “Design Thinking”- the methodology of contemporary communications design - will also play an important role in this course.

Projects (subject to change)
There will be 3-5 project modules, each taking 2-3- weeks.
In addition to technological and design challenges, assignments
have conceptual themes, including:
Descriptive / Suggestive
Storytelling
Drama

While working on the assignments, try to understand both the "why" as well as the "what". In other words, try to figure out the big idea behind each project; don't just focus on the tool being employed to solve the given assignment. Try to learn how to think, perceive and judge differently and translate these perceptions into engaging results.

Required Materials
- Digital camera (use your own or borrow the department’s)
- (Possibly) video camera or still camera with video capabilities (use your own or borrow the department’s)
- External storage media such as a Firewire drive

Grading
Based on the successful completion of all assignments and their sub-sections, as well as vigorous class participation, presentations in front of the class and the quality of the content
of your blog.

Class Structure
A short lecture or discussion; students showing work and presenting reviews from their blogs; individual or group critiques, followed by time to work on the assignment.

Blog
Set up a free blog at blogspot.com and make it accessible to everyone. Customize the appearance in a manner appropriate to a graduate design student. In this blog, you should keep all your blog reviews, notes, planning materials, PowerPoints, audio and video files.

(Note: the following instructions may vary somewhat as the Blogger software is updated.)
-Go to Blogger.com website (https://www.blogger.com)
-Click “Create Your Blog Now”
-If you have a Google account already (like gmail account), click “sign in first”. If not, fill in the information and create your own Google account.
-Name Your Blog
-Choose a template
-You will get an email from Blogger to verify your email address and to activate your blog account.
-Click the link in the email, you will be able activate your account.
-When you go to your Dashboard in your own blog account (image below)
-Go to “+New Post” when you want to post a new blog entry.
-Go to “View Blog” when you want to see your past entries.
-Go to “Posts” when you want to edit your past entries.
-Go to “Settings” when you want to change the basic settings for publishing and formats.
-Go to “Layout” when you want to change the template, color and fonts.

Making a post:
When you post a new blog entry, click in dashboard.
Start by giving your post a title (optional), then enter the post itself by clicking “Embed”.
When you're done, click the "Preview" link to make sure it's ready to go:
Once you're satisfied with your post, click the "Publish" button. This will publish your new post: When you want to upload an image, click the button with photo (add image) and select the image from your files.

Use this blog to document all of your written, data, photographic, sound and video research as well as (to the largest extent possible), the sketches, and the prototypes and final files for the projects in this course.

On your blog, you must also review and comment (20-50 words each) on at least three posts every week (approximately 60 short commentaries over the course of the semester). Read and comment on posts in the list below of design and innovation blogs/sites. Also comment on design, innovation and media related posts from the New York Times.

You will be called upon periodically to give a presentation to the class using your blog entries.







Networking
Meet 5 new people at locations likely to deliver professionally useful encounters: design, technology, idea-oriented lectures and conferences.

Post the following on your blog:
The new peoples’ names, a sketch or photo, link to the work they do, answer to the question: what is the future of design and how will it be different than it is currently practiced?


Premise and “Premise Assignment”
Read the statement below as to the current state of design and the importance of Design Thinking / Design Methodology. Then order Tomorrow Now: Envisioning the Next 50 Years by Bruce Sterling (you can order this from Amazon or similar–specify next day delivery, or get it locally at Barnes and Nobel-check first that they have it in stock). Finally you will using an idea from the book as the basis to build brand platform elements (the assignments in this course).

Statement on the Current State of Design
Procter and Gamble, Nike, Kraft, Sony, Samsung, Tata and other large international companies, faced with fierce competition from lower-cost competitors look to move beyond mere efficiency to innovation (imaginative activity fashioned so as to produce outcomes that are both original and of pragmatic social and/or commercial value).

To paraphrase what Roger Martin, former director of the Boston business consultancy Monitor and current Dean of the University of Toronto's Rotman School of Management, said in a Fast Company business magazine blog, …the world’s economy is radically transforming. As the production of goods and services increasingly becomes routinized, the cost advantages across a growing array of industries accrue to low-cost manufacturing based economies. Scale alone is not enough to thrive in a world where markets are rapidly globalizing; incremental improvement won't deliver a decent ROI. Our companies will continue to prosper only if they push to the higher ground of innovating and creating elegant, refined products and services.

“The upshot, says Martin, is nothing less than the emergence of the design economy -- the successor to the information economy, and, before it, the service and manufacturing economies. And that shift, he argues, has profound implications for every business leader and manager among us: "Businesspeople don't just need to understand designers better -- they need to become designers." Martin further says that companies usually "reward two types of logic: inductive (proving that something actually operates) and deductive (proving that something must be)." Designers combine inductive and deductive reasoning to create a fresh approach -- abductive thinking -- which Martin defines as "suggesting that something may be and reaching out to explore it." Instead of acting on what's certain, designers bet on what's probable. Companies such as Apple act like design shops by saying, "If everything must be proven, we'll never make the likes of an iPod."

David Kelley, Chairman of the IDEO design studio and founder of Stanford University’s Institute of Design (“DSchool”), says that businesses need to employ people with the “T-shaped” skills designers possess. "That means combining analytical thinking -- the vertical leg of the T -- with horizontal thinking: intuitive, experimental, and empathetic."

Book
Read Tomorrow Now: Envisioning the Next 50 Years by Bruce Sterling. Pick a short quote (one sentence to one paragraph) from the book about a theme regarding the future. Shorten it as necessary into a 3-9 word theme. You can read the chapters out of order, so please pick a quote based on reading or at least skimming the later as well as the earlier chapters so that we don’t just get ideas from the beginning of the book.

Example quote: “Bits, for instance, are not immaterial. Bits in motion are physical things, electrons and photons. Bits sitting still are little patches of magnetized metal flakes, or little pits of molten plastic. They’re real objects, bits of atoms. They seem immaterial compared with wood pulps or tombstones. but if you visit a modern Internet backbone router, you will find yourself in a very large, extremely material info factory…”

Short theme derived from this quote:
Bits will become the next “hot” material for products, fashion, etc.

Brand Platform
You will use this theme as the basis to create a “brand platform”. A brand platform is the context (in images, sounds, animations, interactions, etc.) from which a product or service’s later, more specific stage of development and / or marketing may evolve.

See: http://www.nytimes.com/2008/08/31/realestate/commercial/31sqft.html

Nature of the Assignments
The assignments in this class are meant as short introductory exercises tied together thematically by the above detailed research (Assignment Premise).
In general, the desired result is suggestive and experimental rather than overly specific, illustrative or tightly specific or worked out.

Before doing the first assignment, we will (as a class), listen to everyone’s theme derived from the book quote and determine what (in general) kind of service or product might be associated with the theme they each came up with.

Assignment One, Brand Platform Color and Texture Mood Board from
Abstracted Images

Media: Digital Photography and PowerPoint file.

Part A
-Photograph three common objects and / or living things in an abstract manner using close-ups (in focus and out of focus), a moving camera, a moving object and combinations of the two.
Choose the objects so they will produce files showing the three colors and/or monochromes of your brand platform. They may also show intended “atmospheric” textures. The abstract images should not be literal representations of the photographed object, in fact the original object should NOT be recognizable in the abstracted images.

For documentative purposes, make three photos of the common objects on plain white, gray or black backgrounds that show the whole, unaltered, object.

Make a PowerPoint file with these components and in this order:
-Three equally sized parts of the selected photos on one slide, filling the
entire slide (three equal sized vertical slices).
-One slide each (for documentative purposes) of equally sized realistic images showing the three chosen objects before blurring, etc. on a white, gray or black background (with no edges of the background showing).

Your Powerpoint presentation has to be uploaded on www.slideshare.net (you have to create an account), and then to your blog.