Vivisecting Media

Adobe MAX 2008: Monday - The Fundamentals of Motion Graphics

The session featured Justin Cone of Motionographer.com and talking about what Motion Graphics are and how they are evolving in the industry and being adopted by advertising and branding. The session started with an introduction about what Motion Graphics and they are very hard to define. They are made up of three main areas:

• Visual Effects
• Animation
• Graphic design

Justin feels that if the 20th century was the century of graphic design, the 21st century is the century of motion graphics. Everything around us is moving. Go to an airport and you will see LCD screens with motion everywhere. In Dubi, they are building the Podium building which has a 33 story LCD screen. Look at Time square, it is all motion… There is a reason for this, if the ad stands still, it is lost in the motion, it can not stand out. Adoption of motion in thw world is due to the fact that the eye tracks movement, and having static advertising does not attract the eye.

Motion Graphics in projects often attempted to be bolted on at the end of a cycle instead of instead of starting as the core of the project. Adobe is now considering motion as the heart of their new marketing strategy because motion is playing such an important part in attracting attention. Motion Graphics can help create and define a brand.

Examples And Points To Focus On

Contrast

• Girl Effect - Man vs. Magnet: Contrast can be very important. Black white orange, yet powerful. The text itself is moving but without the motion the impact is lost. The pacing of the text breaks the old standard of showing text by moving changing it quickly, yet we don’t lose the message due to the contrast and pacing.
• Sundance - Write Light: shows content by using light to create motion. The contrast between light and dark… it can be text or in this case people. It can be synthetic or live action. In this case the video uses live action as graphics.
• Peter Saville - Optical Illusions: Simple animation with dark and light yet creates a powerful motion. The key to this is the dimension of time and how the fourth dimension changes content

Typography

• Simon Robsin - Taking Liberties: The example uses text and layout to make points of the audio narration.
• Telavisa - Des Madrugadus: The ability to set tone and pacing can be achieved using type, fonts and color.

Repetition

• Flicker Mood: Rhythm and repetition can strengthen a statement.
• Shake Out: The video was essentially a powerpoint video (bullet points) yet used motion graphics to hit home the points.
• Cost Of War - Good Magazine: The video is based around numbers and how much the Iraq war is costing us. Elements of the video are used over and over to tie in each point and repeat the message. Both of these examples could be boring presentations, driving home points yet the message is stronger by leveraging motion.

Continuity / Discontinuity

• Rob Chu - The Ronin: The piece uses sound and editing to blend the imagery together and make a statement.
• Freelances Union - Life Long Friendship Society: All done with still images in place of live action, yet the statement still works to the humor and proper stitching/editing.

2.5D - Flat Images in 3D space & 3D

• Rob Chu - Black Day: The idea of taking still images that are familiar and then sliced into layers and the placed on a z order depth then animated creates a rich sense of motion and spatial experience.
• Shilo - Burma Emergency: Using matte painting mixed with true 3D which creates a huge sense of depth without having to create a huge complex 3D space.

Adobe MAX 2008: Tuesday - Keynote

The second day keynote at MAX is always a more laid back, humors look at what Adobe is doing. This year’s focus is much more on designer / developer workflow and enabling much stronger cross-application and cross-discipline integration. I am took notes on the fly and I will post the highlights here and the full notes after the jump.

Highlights

• Flash Catalyst’s (codenamed Thermo) ability to directly import PSD, AI, PNG files, maintain their complete layout structure and content yet the output is a Flex App. Aaron and I will blog a lot more about Catalyst, its current feature set for the public preview and how we see it changing workflows within a project and the community.
• Flash Alchemy, an Adobe Lab technology that translates C/C++ code into ActionScript 3. Alchemy demo’s included the classic Quake port example shown last year, a NES ROM emulator, OGG file reading / playback and encryption functionality using standard open source libraries.
• Dreamweaver CS4’s ability to “freeze” an Ajax application in Live View and the inspect the current state of the application’s JavaScript and the CSS/HTML layout.

• RMFTP - A new video / audio protocol within Flash Player 10 that supports the ability to enable peer-to-peer communication without the requirement of FLash Media Server as a single point of contact / distribution.

  Read the rest of this entry »

Adobe MAX 2008: Monday - Keynote

Hey all… Aaron and I are sitting at the MAX keynote. They just announced that they have over 5,000 attendees this year, the largest conference yet. I am going to jot down notes that are interesting as they speak. I won’t be adding too much detail just to keep myself sane (and able to pay attention). The notes are getting pretty long so I will put in a cut. Here are some highlights and the complete notes are after the jump.

• NYT is working on an amazing AIR app to deliver news content in a very slick and intuitive UI.
• Adobe is working on Flash Player 10 for the iPhone. Its not ready yet, but they are officially working on it.
• AIR 1.5 is now live and supports Flash Player 10 content, it also is the first production application to use Webkit enabled with SquirrelFish Read the rest of this entry »

Adobe Max 2008: First Comments

Where am I…. a rock show? If that’s the case shouldn’t I be a rock-star since I am a speaker and have a cool extra sticker at the bottom of my badge? Well, I feel more like a groupie around all of these crazy artists and brain-ee-acks.

We are currently at the keynote which is filled with 5,000+ screaming fans with a crazy slideshow is being mixed live with techno music. The big announcement so far, Thermo is now Flash Catalyst! James and I have had the priviledge to work with early builds of Thermo and will be talking about our impressions and our suggestions for  designer and developer best practices using Catalyst in Flex application development and design. Dont miss the sessions.

I need to focus on the keynote so thats all for now

James’ and my goal is to post as much as we can through out the conference both as attendees and as speakers.  Stay tune for more…

Adobe MAX 2008: Sunday - Day One (Intro)

Its that time, Adobe MAX has begun. Today was the first day of the conference which was mainly all-day labs / training sessions, registration and meet & greets. Aaron and I headed over for the speaker reception to catch up with some peeps, have a few drinks and get a feel for this years event.

Before we headed over to the meet and greet, Aaron and I put the finishing touches on our session presentations and got a look at our brand new business cards. We are proud to announce our new firm, DevelopmentArc. We will be working hard on the new site (its very much a placeholder) but we have some interesting plans and announcements once we get the site live. Keep an ear and eye out for it.

If any of you are planning on attending MAX, look me up and please say hi. I am always looking forward to a good tech conversation. I am hoping to blog a fair bit from the conference, when time allows and I will be taking notes as usual. I will try to convert the notes to posts over the coming weeks when ever I can sneak in some tim. An interesting point I just read about is that all the MAX sessions will be posted on AdobeTV a few weeks after the conference is complete. I have been throughly enjoying the 360|Flex and Ajax Experience video posts they have been sharing. Lots of amazing content. So I am sure there will be a TON of new content once MAX is done.

MAX 2008 Europe and a quick update

First off, Aaron and I have been invited to give our session at the 2008 MAX Europe in Milan, Italy this year. We will be joining the likes of Ted Patrick, Ryan Stewart and many other amazing speakers for the four day conference. I have heard great things about the European MAX and to say I am excited is probably an understatement. Aaron and I are really happy with our session planning so far and we look forward to sharing our research and thoughts on the topic of best practices for things like Flex 4, Thermo and CS4 integration.

So, where have I been all this time and why has this blog gotten so quiet? Well, first there was the session planning, then their is client work, oh and I am in the middle of starting a company with Aaron and moving all our clients to the new firm (more details to come), its also wedding season so I have been traveling around a lot for those and planning my own (well, Xina is really planning it I just help where I can). I am just a bit underwater and trying to take a few minutes to motivate me to write the blog has kind of been tough. Oh, and I just got Fable 2, Fallout 3 and LittleBigPlanet… there just isn’t enough time to do it all!

I will try to blog a bit more in the coming months, especially once we get our company fully launched and hopefully reports from MAX. Until next then!

Speaking At MAX 2008

For the few of you that read this blog and have already looked at the Adobe MAX 2008 schedule, you may have noticed that Aaron Pedersen and I are doing two sessions: “Developer Best Practices with Flex” and “Designer Best Practices with Flex“. These sessions are not just about current practices but future practices leveraging Flex 4 (aka Gumbo), Creative Suite 4, Flash Player 10 and Thermo.

As you can imagine, these kinds of forward looking sessions require a ton of research and theoretical process conceptualization since none of the above mentioned products are finalized or released yet. Our goal with this research is two-fold: build a kick ass presentation and post about interesting tidbits that Aaron and I discover along the way. This research is what lead to the Flex 4 source in Flex Builder 3 post and as Aaron and I dig deeper into the session I will continue to add more posts.

Binding Source for Flex 4 in Flex Builder 3

Yesterday, I sat down and started playing around with trying to get the daily build of the Flex 4 SDK inside Flex Builder 3. After a bit of digging I finally got it all running and compiling as expected. I started off using Multimediacollege’s blog post on getting the SDK in place and I also used Sherif Abdou’s post to help troubleshoot a runtime error in the player.

My goal was to take these two posts, summarize them and show how to get the current source and check it in. Just as I sat down to write this all up, Mike Chambers comes in and scoops me. Figures. Anyway, I yelled at Mike via IM for stealing my thoughts and then mentioned that I figured out how to bind the Flex 4 source to the SWC in Flex Builder so that you can F3 / CTRL+Click you way to the code. So, I am going to post that aspect of the process and refer back to Mike’s straightforward post on how to get the SDK compiling and running.

Check Out The Source
The first step of linking the Flex 4 source to Flex Builder, is to download the code from Adobe’s Open Source website. Adobe and the Flex team are using Subversion to manage the code base so you will need to use SVN to checkout the source. I already had Subversion installed so I was able to jump right in and checkout the code. If you don’t have Subversion, or want to learn more about how Adobe has the SVN configured, then make sure to read how to check out from Adobe’s code base. If you have Subversion installed, then here is the short and sweet version.

First, I didn’t want to download the entire SDK SVN trunk, so I found the direct path the Flex 4 Framework code using their web browser interface:

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/

Next, I picked a location to keep the source. I personally chose to put it inside the flex 4 SDK folder under a new subfolder called src. You can put this folder anywhere you want, I just chose this location on a whim. To get the source, I opened up my terminal, cd‘d to the new src folder and then ran the following command to download the source:

svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/ ./

You don’t technically have to cd to the new folder but I hate having to fit it all in one command line. Whatever, I can do what I want! Once you run this command, Subversion will download all the ActionScript source for the framework into your new directory. The last step is to inform Flex Builder that you have source for it.

Get Flex Builder Into The Know
To do this, right click (CMD+Click) on your project in Flex Builder and choose Properties > Flex Build Path > Library Path. Expand the Flex 4 SDK tree and then expand Flex4.SWC so that you see the Source Attachment: option. Double click Source Attachment: and then browse to the folder that holds the source you just downloaded. Choose Okay, and there you have it, source is now bound to your SDK and you can F3 to your hearts content.

One thing to note, if you only use the default namespace, then hinting will not follow through in FB3. I recommend binding the gumbo library for this to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library:adobe/flex/halo" 
	xmlns:gumbo="library:adobe/flex/gumbo"
	layout="vertical">
 
	<gumbo:Button label="hello world" />
	<gumbo:Group>
		<gumbo:content>
			<gumbo:Ellipse width="30" height="30">
				<gumbo:fill>
					<mx:SolidColor color="#FF0000" />
				</gumbo:fill>
			</gumbo:Ellipse>
		</gumbo:content>
	</gumbo:Group>
</mx:Application>

This tells FB where to start looking for the source and enables it to open properly. If you know of a way to bind the namespace to the source, please let me know!

VivMedia Code Library: Version 0.03 released

I pushed a new version of the library yesterday to Google Code. This is a relatively small release, which was not really my intention for version 0.03. Originally, I was planning on adding the first of a series of really powerful features but due to unit testing the new Queue (48 new tests), this kind of slowed down progress. Oh, that and a TON of client deadlines. Anyway, there are two updates in this version: The Queue and new source code licensing.

I read a great analysis article by Grant Skinner, talking about the different Open Source licenses and how they can affect you and your client. I originally licensed the code library under the Mozilla Public License (MPL) due to its popularity, its freedom to allow developers to build on top of the code base for any purpose (free or for charge) and only requires code modification submission if the developer changed the original code in the library. My goal with VivMedia is to help developers build great applications, and the last thing I wanted to do is limit them, yet I do want to encourage people to submit changes and updates. That is why I went with MPL at first.

The issue with MPL (as Grant points out) is that when you use MPL code there are certain steps you need to take to release your project. In most cases this is not a big deal and it very rarely impacts the project but it may cause some developers or their clients a bit of grief. In all honesty, I just want to create a library that myself and others can use without having to jump through hoops with our clients. This lead me to change all the code license to MIT, which is very permissive of all forms of development. All you need to do is keep the MIT license headers in the source. You don’t have to submit changes (all thought I would be very happy if you did) and you don’t have to jump through any other legal hoops when deploying. So, if you are using the library already, update to the new version and know that the door is now wide open and you don’t have to fret about how you or your clients release the work.

The other addition to this version is the new Queue data structure. The Queue allows you to add and remove items is in a linear fashion. You can define the Queue as either Last in First Out (LIFO) or First in First Out (FIFO). What that means is when you add() item A and item B to the Queue and then call next(), the item returned is dependent if the queue is set to LIFO or FIFO. A LIFO Queue returns item B, since it was the last item added. A FIFO Queue returns item A since it was the first item added. As always, a full tutorial will be posted soon on how to use the Queue in your code.

The Queue is a building block for a lot of new functionality that I am starting to plan out. There will probably be variations of the Queue going forward too. For example a version that is designed to help solve Asynchronous issues in a Synchronous fashion, without you having to write a lot of logic around the actions. Right now, its all about what time permits… and as I said in the last post, vacation is nearly here! So, update/download the library, check out the ASDocs in the source (I always update them for each release) and let me know what you all think.

Posting slowing down for a bit…

Hi All, its been a while since I wrote a “fireside chat” post and this is a good as time as any. Some of you may have noticed my posting has slowed down a bit over the last month or so. This is due to a ton of client work and paying work always takes precedent over blogging, sorry peeps. The good news is I have a lot of client work, the bad new is I have a lot of client work. On top of that, I am currently in a frantic push to get things wrapped up before I head out for a nice long vacation.

Hopefully, when I get back and settled in I will have a few more cycles to sit down and write, although looking at my calender and what is planned this may be tough. There are some big plans for this fall and I can’t wait to start talking about them but for now its heads down and work, work, work.