Will & Grace from Pentagram on Vimeo.
Interactive Media
Jun Bum Shin
Art, Design & Art History, James Madison University
Tuesday, January 31, 2012
Motion [Shop installation]
Aldo Rise Video 1 from Pentagram on Vimeo.
Aldo Rise Video 2 from Pentagram on Vimeo.
Aldo Rise Project
Letterpress & Offset Beauty
A short film about letterpress and one of the few remaining movable-type printing workshops in the UK, situated at Plymouth University, featuring Paul Collier. plymouth.ac.uk
Subtitles available here: goo.gl/iuaKY
A film by Danny Cooke dannycooke.co.uk
Soundtrack by Tony Higgins tonyhiggins.org
(Available to download here: goo.gl/exGL1)
Production of Raven’s Wing, the fall edition of COLORS limited-edition Field Notes notebooks. Incredible footage.
More info at fieldnotesbrand.com/ravens-wing/
Bleisatz Werkstatt Tutorial, a brilliant film based on a seminar from The University of Applied Sciences in Düsseldorf called “Hot Type – Hand and Work.”
Video Production: Lukas Loss & Roman Tönjes
Sound Design: Roman Tönjes
Via Coudal.
Source from TypeforYou.org
Sunday, January 29, 2012
Flash: Video Exporting (H.264)
> Sound Settings

What is H.264 format:
H.264 is a new video codec standard which can achieve high quality video in relatively low bitrates. You can think it as the “successor” of the existing formats (MPEG2, MPEG4, DivX, XviD, etc.) as it aims in offering similar video quality in half the size of the formats mentioned before. Also known as AVC (Advanced Video Coding, MPEG-4 Part 10), H.264 is actually defined in an identical pair of standards maintained by different organizations, together known as the Joint Video Team (JVT). While MPEG-4 Part 10 is an ISO/IEC standard, it was developed in cooperation with the ITU, an organization heavily involved in broadcast television standards. Since the ITU designation for the standard is H.264, you may see MPEG-4 Part 10 video referred to as either AVC or H.264. Both are valid, and refer to the same standard.
The latest version of ffdshow supports H264 playback. Pleaseremember, ffdshow is a DirectShow filter so after you install it you'll be able to play H264 in most video players you already have installed, including Windows Media Player. Alternatively you can download VLC player. It can play H.264 without need of any codec or DirectShow filter. Apple QuickTime players support H264 too, but their support is not so great for all formats, so don't use them for general H264 playback. Generally most players or codec packs nowadays include H264 support so you shouldn't have any problems. You may also watch your H.264 files on your Xbox 360 and PS3 with smooth playback.
You may come across all kind of file extensions and still the codec can be H.264:
*.avi - People also use .avi for H264 videos too!
*.mp4 - QuickTime use this format. Better than AVI as you can store AAC audio as well.
*.m4v - The standard file format for videos for iPods developed by Apple.
*.mkv - Matroska container - can support many video and audio formats.
- Source from: http://www.winxdvd.com/resource/h264.htm
- Additional Source (wikipedia): http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC
Saturday, January 28, 2012
Friday, January 27, 2012
inspiration: Ursonate
http://www.flong.com/projects/ursonography/
Jaap Blonk
http://www.jaapblonk.com/
From Wikipedia, the free encyclopedia
Jaap Blonk (born 1953, Woerden) is a Dutch avant-garde composer and performance artist.
Blonk is primarily self-taught both as a sound artist and as a visual/stage performer.[1] He studied physics, mathematics, and musicology for a time, but did not complete his studies.[2] One of his early influences was Kurt Schwitters, whose Ursonate he first heard in 1979; he memorized the entire work, and it became one of the cornerstones of his repertory; he has recited portions of the piece hundreds of times in various public places.
from Wikipedia
Wednesday, January 25, 2012
Monday, January 23, 2012
Project Resources: Motion Graphics (Kinetic Typogaphy)
Heebok Lee. / >>
20th Century Speech / university of kansas
Alexandra Avila / >>
Jordan Jacobson / >>
Jarrad Kolar / >>
Kimberly Patton / >>
Motion Graphics / movie titles:
Roxie Hart / Chicago Typography Ani. / >>
Saul Bass title sequences:
http://annyas.com/screenshots/saul-bass-title-sequences/
The Man with the Golden Arm, 1955 / >>
http://annyas.com/screenshots/updates/saul-bass-man-with-the-golden-arm-title-sequence/
Useful Resources:
ARCHIVE.ORG / >>
Movie Title Collection / >>
Great Speech of 20 Century / >>
Top 100 Speeches / >>
Editing Music:
Audacity / >>
Sunday, January 22, 2012
iPad: iBook2
http://video.foxnews.com/v/1401412872001/apples-digital-textbook-project/?playlist_id=86861
iBooks Textbooks for iPad.
http://www.apple.com/education/#video-textbooks
Saturday, January 21, 2012
reading: The Future of Print Begins with the iPad
http://www.79nm.com/2012/01/the-future-of-print-begins-with-the-ipad/
Bruce Bell of Adobe leads the way with Wired…and Martha Stewart
What happens when Wired, the most recognized magazine in the digital world, comes together with today’s most revolutionary device — the iPad? And what happens when Martha Stewart Living goes digital? We asked Bruce Bell. He is the consummate designer, strategic thinker, and visionary whose team has headed the collaboration on the creation and launch of the world’s most talked about digital magazines. Bell’s work for these iconic brands is a story of collaboration, about breakthrough design and about technical virtuosity — an Academy alum who is working way beyond the leading edge and redefining our world.
AAU: Is this the beginning of the end for the printed page?
Bell: In the past couple of years we’ve hear a lot of rumors that print is dying. I’m not sure anybody really believes that, and I don’t believe it either. But I think what people are realizing is that there are new opportunities to present content.
AAU: How is Adobe changing the world of publication design?
Bell: Adobe is enabling print designers to create digital magazines and applications without having to write a line of code. That was our biggest win. Our ultimate goal was to get magazine publishers to go digital without having to create new workflows for what they do because of staffing and budgetary concerns. For the first time, print designers can create interactive publications without having to bring in web designers or developers.
AAU: What impact is all of this having on Adobe’s Creative Suite?
Bell: The biggest changes are happening with InDesign, and the interactive capabilities being built into it. The most significant thing happening is that Adobe is embracing HTML and viewing it as another viable platform to publish to from our creative tools. HTML is incorporated into Adobe’s new file format, .folio, which was born from the magazine effort.
AAU: How else are these publishing tools being used?
Bell: Other organizations, like TED Conferences, for one, are using our platform for their conference programs. The advantage is that anybody can download the program for free, and it’s cheaper for the conference organizers to produce and it can also act as a widely-distributed marketing piece. It also opens up many possibilities, such as with social networking and note taking.
Catalogs are another medium that are quickly going digital. With one tap, the customer can access your point of purchase. It’s a huge advantage.
AAU: Is the Adobe platform the same for the iPad and all other tablets?
Bell: Our platform can deploy to any device. We think of the iPad first, of course, because it’s superior in user experience and the most widely adopted tablet by the market segment, but we feel it’s very important to support Android, PlayBook, and other tablet devices because the adoption trajectory shows healthy competition. Right now, Android has actually surpassed the iPhone in terms of market penetration for smartphones. Samsung and other companies are just as important.
AAU: What is your role in leading this development process at Adobe?
Bell: I’m an experience designer and the managing design lead of the Customer Engagements team at Adobe. Adobe has about 120 people working in XD (the experience design group) around the world – working on established consumer products like Photoshop and Illustrator, and seeding new 1.0 products as demand arises. Customer Engagements is a unique team of 16 people, both designers and developers, within the XD group. We’re out in the field working with customers and defining new products. We spent a year of our time working with Wired on the pilot for the launch of their digital magazine. At launch, we were well on our way to having a real product for the market and we handed it off to another team within Adobe for further development. We also worked on the digital launch of Martha Stewart Living and The New Yorker during the initial development process.
AAU: What was it about those three launches – Wired, Martha Stewart Living, and The New Yorker – that brought these new tools out the testing stage?
Bell: I think of it in terms of the design fidelity spectrum. On the far left, you have feed-based publishing which is a basic presentation of text and images. At the right of the spectrum, you are trying to achieve things that cannot yet be done in feed-based design.
The projects we worked on were all on the right side of the design spectrum – all of them highly designed, but in different ways.
By the time we worked with these and other clients, we felt that we had gained insight into the problems that most publishers would face. At least 80/20, you know.
AAU: What was it like to work with Wired magazine?
Bell: Working with Scott Dadich on Wired was an amazing experience; he is one of the true visionaries of publishing. We worked together for nine months crafting various kinds of authoring tools. It was because of Scott that we were able to succeed.
AAU: How did Martha Stewart Living differ from Wired, in terms of the design and production process?
Bell: We worked directly with Martha Stewart and Gael Towey, the Chief Creative and Editorial Director for Martha Stewart Living Omnimedia. We also worked closely with Eric Pike, creative director of Martha Stewart Living magazine. They were all thinking about their content network as a whole, and all the other types of media they use beside magazines. One thing that was really important to Martha Stewart was the format of the recipes. She wanted the recipes to appear within one panel, with only one scroll required, so people wouldn’t get their iPads messy while working in the kitchen. The end result ended up being the base template for the entire Everyday Food digital edition.
AAU: Are there any other clients you’ve worked with that you’d like to mention?
We consulted for TED conferences on the launch of their digital program guide. TED is an awesome organization – at this point what they do is a service to the world. I’ve also worked with the New York Times, MTV, and Major League Baseball. We’ve created a lot of strong partnerships. In every case, we’ve worked with them to see what end user problem needs to be solved.
AAU: Now that hundreds of publishers are using the Adobe platform, what’s happening in the industry as a whole?
Bell: The lines between media are getting blurry. We need to think about how to design around the content: what are people consuming, how are they consuming it, and how to best deliver content to them. As content evolves, the real question is: what do these networks look like?
About Bruce Bell:
Bell is a multidisciplinary designer living in New York City. He is currently leading design for the Customer Engagements team at Adobe Systems, which works with strategic partners in the creation of 1.0, next-generation, multi-platform digital solutions. His work in the field validates real world use-cases and informs product definition and features for future and current point releases.
Prior to joining Adobe, Bell was Design Director at Method, Inc., a brand experience and digital design firm in San Francisco, New York, and London. Bell joined Method’s creative team in 2003, and while at Method designed business-critical interactive applications, global branding and packaging systems, and data-rich print collateral for organizations ranging from startups to Fortune 500 companies. Bruce’s background includes environmental, experiential, and stage lighting design, brand and corporate identity design, and digital product development. He has worked in markets across the United States, Asia, and Europe, and has spoken at design and technology conferences around the world.
Bruce holds a BFA in Graphic Design From the Academy of Art University and has received numerous awards: a Clio for a product and packaging program for Knoll; a One Show Golden Pencil for an interactive educational kiosk for the San Francisco Museum of Modern Art, multiple Webby awards including Best Page-Level Information Architecture and Best Visual Design in Function for TED.com, and recognition from numerous publications such as Communication Arts, How Magazine, ID Magazine and Print Magazine. He is a contributing artist and a contributing technologist to Wired magazine and has been published by the Typography Directors Club.
Story written by Mindy Smart for AJournal Issue Eight, Summer 2011
Monday, January 16, 2012
Posting videos
If you have a video on your computer, you can upload it to your blog as follows:
1. Click the film strip icon on the post editor toolbar.
2. In the popup window, click "Browse" to find the video on your computer.
3. Enter a title for your video.
4. Agree to the Terms and Conditions (if this is your first video upload).
5. Click "Upload Video."
Wednesday, January 11, 2012
Flash Lesson 1: Intro, File Type, Drawing
1. Understudying Flash File Types:
2. Setting up Workspaces:
3. Using the drawing tools:
4. Object and Merge drawing:
5. Working with bitmap graphics:
http://tv.adobe.com/
Reading: Types of animation, About frame rates, Identifying Timeline
Types of animation
Flash supports the following types of animation:
- Motion tweens:
- Use motion tweens to set properties for an object, such as position and alpha transparency in one frame and again in another frame. Flash then interpolates the property values of the frames in between. Motion tweens are useful for animation that consists of continuous motion or transformation of an object. Motion tweens appear in the Timeline as a contiguous span of frames that can be selected as a single object by default. Motion tweens are powerful and simple to create.
- Classic tweens:
- Classic tweens are like motion tweens, but are more complex to create. Classic tweens allow for some specific animated effects not possible with span-based tweens.
- Shape tweens:
- In shape tweening, you draw a shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Pro then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.
- Frame-by-frame animation:
- This animation technique lets you specify different art for each frame in the Timeline. Use this technique to create an effect that is like the frames of a film being played in rapid succession. This technique is useful for complex animation where the graphic elements of each frame must be different.
About frame rates
The complexity of the animation and the speed of the computer playing the animation affect the smoothness of the playback. To determine optimum frame rates, test your animations on a variety of computers.
Because you specify only one frame rate for the entire Flash Pro document, set this rate before you begin creating animation.
Identifying animations in the Timeline
The following frame content indicators appear in the Timeline:
- A span of frames with a blue background indicates a motion tween. A black dot in the first frame of the span indicates that the tween span has a target object assigned to it. Black diamonds indicate the last frame and any other property keyframes. Property keyframes are frames that contain property changes explicitly defined by you. You can choose which types of property keyframes to display by right-clicking (Windows) or Command-clicking (Macintosh) the motion tween span and choosing View Keyframes > type from the context menu. Flash displays all types of property keyframes by default. All other frames in the span contain interpolated values for the tweened properties of the target object.
- A hollow dot in the first frame indicates that the target object of the motion tween has been removed. The tween span still contains its property keyframes and can have a new target object applied to it.
- A span of frames with a green background indicates an inverse kinematics (IK) pose layer. Pose layers contain IK armatures and poses. Each pose appears in the Timeline as a black diamond. Flash interpolates the positions of the armature in the frames in between poses.
- A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.
- A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
- A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
- A black dot indicates a single keyframe. Light gray frames after a single keyframe contain the same content with no changes. These frames have a vertical black line and a hollow rectangle at the last frame of the span.
- A small a indicates that the frame is assigned a frame action with the Actions panel.
- A red flag indicates that the frame contains a label.
- A green double slash indicates that the frame contains a comment.
- A gold anchor indicates that the frame is a named anchor.
Reading: Frame rate
Reading: about Symbols
About symbols
A symbol is a graphic, button, or movie clip that you create once in the Flash Pro authoring environment or by using the Button (AS 2.0), SimpleButton (AS 3.0), and MovieClip classes. You can then reuse the symbol throughout your document or in other documents.
- Adobe TV: Understanding symbols (2:28)
- Adobe Video Workshop: Creating and using symbols and instances (CS3) (7:12) (This video focuses on Flash Professional CS3, but the information is still relevant.)
- Flash Professional Design Center article: Using Flash for the first time – Part 1: Building a banner
Types of symbols
- Use graphic symbols
for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.
- Use button symbols
to create interactive buttons that respond to mouse clicks, rollovers, or other actions. You define the graphics associated with various button states, and then assign actions to a button instance. For more information, see Handling events in Learning ActionScript 2.0 in Adobe Flash or Handling events in the ActionScript 3.0 Developer’s Guide.
- Use movie clip symbols
to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline—think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript®.
- Note: To preview animation in component instances and scaling of 9-slice-scaled movie clips in the Flash Pro authoring environment, select Control > Enable Live Preview.
Create symbols
Convert selected elements to a symbol
- Select an element or several elements on the Stage. Do one of the following:
- Select Modify > Convert To Symbol.
- Drag the selection to the Library panel.
- Right-click (Windows) or Control-click (Macintosh) and select Convert To Symbol from the context menu.
- In the Convert To Symbol dialog box, type the name of the symbol and select the behavior.
- Click in the registration grid to position the registration point for the symbol.
- Click OK.Flash Pro adds the symbol to the library. The selection on the Stage becomes an instance of the symbol. Once you have created a symbol, you can edit it in symbol edit mode by choosing Edit > Edit Symbols, or you can edit it in the context of the Stage by choosing Edit > Edit In Place. You can also change the registration point of a symbol.
- On the main Timeline, select every frame in every layer of the animation on the Stage that you want to use. For information on selecting frames, see Insert frames in the Timeline.
- Do one of the following to copy the frames:
- Right-click (Windows) or Control-click (Macintosh) any selected frame, and select Copy Frames from the context menu. To delete the sequence after converting it to a movie clip, select Cut.
- Select Edit > Timeline > Copy Frames. To delete the sequence after converting it to a movie clip, select Cut Frames.
- Deselect your selection and make sure nothing on the Stage is selected. Select Insert > New Symbol.
- Name the symbol. For Type, select Movie Clip, then click OK.
- On the Timeline, click Frame 1 on Layer 1, and select Edit > Timeline > Paste Frames.This action pastes the frames (and any layers and layer names) you copied from the main Timeline to the Timeline of this movie clip symbol. Any animation, buttons, or interactivity from the frames you copied now becomes an independent animation (a movie clip symbol) that you can reuse.
- To return to document-editing mode, do one of the following:
- Click the Back button.
- Select Edit > Edit Document.
- Click the scene name in the Edit bar above the Stage.
Duplicate symbols
Edit symbols
- In context with the other objects on the Stage by using the Edit In Place command. Other objects are dimmed to distinguish them from the symbol you are editing. The name of the symbol you are editing appears in an Edit bar at the top of the Stage, to the right of the current scene name.
- In a separate window, using the Edit In New Window command. Editing a symbol in a separate window lets you see the symbol and the main Timeline at the same time. The name of the symbol you are editing appears in the Edit bar at the top of the Stage.You edit the symbol by changing the window from the Stage view to a view of only the symbol, using symbol-editing mode. The name of the symbol you are editing appears in the Edit bar at the top of the Stage, to the right of the current scene name.When you edit a symbol, Flash Pro updates all instances of the symbol throughout the document to reflect your edits. While editing a symbol, use any of the drawing tools, import media, or create instances of other symbols.
- Change the registration point of a symbol (the point identified by the coordinates 0, 0) by using any symbol-editing method.
Edit a symbol in place
- Do one of the following:
- Double-click an instance of the symbol on the Stage.
- Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit in Place.
- Select an instance of the symbol on the Stage, and select Edit > Edit In Place.
- Edit the symbol.
- To change the registration point, drag the symbol on the Stage. A cross hair indicates the location of the registration point.
- To exit edit-in-place mode and return to document-editing mode, do one of the following:
- Click the Back button.
- Select the current scene name from the Scene menu in the Edit bar.
- Select Edit > Edit Document.
- Double-click outside the symbol content.
Edit a symbol in a new window
- Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit In New Window.
- Edit the symbol.
- To change the registration point, drag the symbol on the Stage. A cross hair indicates the location of the registration point.
- Click the Close box in the upper-right corner (Windows) or upper-left corner (Macintosh) to close the new window, and click in the main document window to return to editing the main document.
Edit a symbol in symbol-editing mode
- Do one of the following to select the symbol:
- Double-click the symbol’s icon in the Library panel.
- Select an instance of the symbol on the Stage, and right-click (Windows) or Control-click (Macintosh), and select Edit from the context menu.
- Select an instance of the symbol on the Stage and select Edit > Edit Symbols.
- Select the symbol in the Library panel and select Edit from the Library Panel menu, or right-click (Windows) or Control-click (Macintosh) the symbol in the Library panel and select Edit.
- Edit the symbol.
- To exit symbol-editing mode and return to editing the document, do one of the following:
- Click the Back button at the left of the Edit bar at the top of the Stage.
- Select Edit > Edit Document.
- Click the scene name in the Edit bar at the top of the Stage.
- Double-click outside the symbol content.