Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | music | About

Archive for April, 2009

AIGIA Portfolio Review 09

Tuesday, April 21st, 2009

Last Friday I was asked to participate in with a panel with other local designers to evaluate student (college level) portfolios for AIGA Pittsburgh. I was very flattered by the inattention and humbled by participation of designers. There was representation from many leading agencies as well as top level freelancers. It was interesting to see how similar we all were. Despite our backgrounds, our career paths, and our training we are all very passionate about design and wish we could help others benefit from our mistakes coming up in the industry.

What was Missing

Working at a college I’ve seen my fair share of portfolio shows and everyone seems to have a theme. This one was really no different. Most of these students have never met one another. They were from schools across the State, but they all shared very similar approaches, concepts, practices, and deficiencies.

The students for the most part displayed adequate skills with software, basic layout, and design. But the one thing that seemed to be missing was thought. Outside of one student, the others showed their books and only final pieces. As a talent evaluator I’m more interested in how a designer arrives at their solution then I am the solution. Looking at finished work only gives you one part of the puzzle. The photograph could have made the design; maybe the designer go lucky; possibly a fluke logo etc…

The thought shows intent as well as the purpose of their ideas. It is my opinion that over time most designers can be trained to make adequate layouts and to stay within a certain comfort zone of colors and type. Repetition and coaching to most designers to that level, but good ideas and concepts can take a composition from plain layout to a masterfully communicated message.

Portfolio Do’s and Don’ts

  • Do show your thought processes
  • Don’t harp on your negatives when showing your book
  • Do display passion in your work
  • Don’t relay on class activities as portfolio pieces
  • Do take the initiative to look out into the world and solve a
    design problem
  • Don’t compare yourself to your classmates look outward
  • Do know what type of work the agency you’re applying to does and send them that kind of work when considered for a position
  • Don’t create a blanket portfolio and send it everywhere
  • Do continue to make more works after college
  • Don’t think you’re done learning

Where’s the MovieClip in Flex?

Saturday, April 11th, 2009

The Transition

Making the transition from AS 3.0 Developer to Flex Developer has been a bumpy ride. I can best describe it like moving to another country that’s similar but different enough to feel not at home. My go-to tricks that were oh so reliable don’t exist. Common items have different names. Routine tasks have an extra wrinkle. From the outside it appears like it’s all the same, but the details are quite different. Similar results, but very different paths are traveled.

MovieCilp Love Story

One of the hardest things for me was adjusting to life without MovieClips. When I first started Flex development I liked the idea of components. I was drawn to the Horizontal and Vertical layout schemes that are oh so (wait for it…) very FLEXible. But I missed the MovieClip. It was my first love and it had it all. It had frames, it could be instantiated, and it was click-able. What more could you want? But now we’ve both graduated and have moved on to other things. I’m doing more development while she’s concentrating on time lines and animations.

Reunion

Well I’ve recently had a breakthrough and I can thank Joey Lott and Chafic Kazoun for helping me get there. I’ve been looking at Flex Development through the eyes of Flash instead of embracing the Flex way of life. My first steps was to let go of the name MovieClip and look for it’s functionality in other places.

At it’s core the Application tag is really just a 2 frame MovieClip with sub clips containing assets that can do all sorts of things. Frames are really similar to states. Instantiation of components is done much the same way. I was getting along okay, but I was still hung up on a few stupid little details.

Can I Draw In Flex?

Although I’m embarrassed to share this, I’ve been trying like hell just to draw a simple circle and add it to the display list in Flex for longer than it should have taken me. I thought I’ve tried everything, but my problem was that I was following the AS 3.0 diagram. I started at MovieClip. Ennnnnnnttttttt! Wrong answer. Then I progressed up the tree to Sprite. Sarrrrr-reeeey! Then up to DisplayObjectContainer… ummm graphics aren’t available here. DAMN! WTF? How can something built on top of AS 3.0 not allow me to create something simple like a circle?

Potaeyto Potahhto

Then I found it. Flex uses a different structure. Instead of MovieClip it’s called Container. See for yourself.

  1.  
  2.  
  3.         <![CDATA[
  4.         import mx.core.Container;
  5.         private var mc:Container = new Container();
  6.  
  7.         private function createCircle():void{
  8.                 this.addChild(btn);
  9.  
  10.                 mc.graphics.beginFill(0xFF0000)
  11.                 mc.graphics.drawCircle(0,0,40);
  12.                 mc.x=75
  13.                 mc.y=100
  14.                 this.addChild(mc)
  15.         }
  16.  
  17.         ]]>

Container is built on a similar structure that roots in something called a FlexSprite. The big differences stem from the fact that most objects in Flex generally have some sort of chrome. Flex is geared for prototyping functionality very quickly, not necessarily graphics and animation. Although you do have the ability to create graphics and animation… sort of. Flash is still best suited for that sort of thing. Flex’s makes it’s living on functionality though panels, widgets, components, and states. Container is one of the building blocks used to create anything from a Box, to a Canvas to even an Application.

Finding container was a big key piece to bridging my AS 3.0 and Flex development together.

### AMENDMENT ####
I’ve just recently found out about custom component development which bring Flex and AS 3.0 much closer together. You can have access to Object and instantiate it. I’ll post about it as soon as I can.

The Flash IDE Under the Hood

Saturday, April 11th, 2009

Reflection

In what seems like a lifetime ago I made the jump to AS 3.0, and along the way I’ve had all sorts of questions as to why things happen and what’s really going on behind the scenes.  Recently I’ve discovered something very interesting to me that has helped me better understand some how’s and why’s.

Flash From the IDE Perspective

So you’ve got a project. You open up your trusty version of Flash and create a new AS 3.0 document. You create a button, load some xml, toss some images in and pretty much do your thing.

ActionScript 3.0 From a Class Perspective

So you progressed with AS 3.0 and plunged into class development. Now all the xml, button, and event functionality you’ve taken for granted must be imported. If you’re like me you probably said to yourself “mmmm ookay, whatever…” and you moved on.  Well I’ve always wanted to know more about the default AS 3.0 .fla.

On a few occasions I got the crazy idea of tracing out it’s parent by opening up a default file and placing this code on the first frame.

  1. trace(root)
  2. // outputs [object MainTimeline]

What is this MainTimeline and more importantly what does it contain? Well just recently I came across some code that tells me.

  1.  
  2. trace(flash.utils.describeType(root))
  3.  

You get an xml output of extended classes and parameters.

Some interesting elements

  1.  
  2.   <extendsClass type="flash.display::MovieClip"/>
  3.   <extendsClass type="flash.display::Sprite"/>
  4.   <extendsClass type="flash.display::DisplayObjectContainer"/>
  5.   <extendsClass type="flash.display::InteractiveObject"/>
  6.   <extendsClass type="flash.display::DisplayObject"/>
  7.   <extendsClass type="flash.events::EventDispatcher"/>
  8.   <extendsClass type="Object"/>
  9.  

As I started to dig deeper I went above the Main Timeline to the Stage and rain the similar trace.

  1.  
  2. trace(flash.utils.describeType(parent))
  3.  

Conclusions

  1. Flash runs on xml… at least for preferences
  2. It’s pretty cool to see what the IDE is doing by default
  3. describeType can give me better insight into my objects

Pittsburgh Web Design Day 09: Redux

Sunday, April 5th, 2009

I’ve got only one word to explain the experience.  WOW!

What is Pittsburgh Web Design Day?

Pittsburgh Web Design was a one day conference organized by Jason and Val Head of Refresh Pittsburgh and On The Fridge.

My Impressions

This was a top notch one day conference. Jason and Val really out did themselves. The speakers were fantastic, the space was wonderful, and Franktuary + perogies = awesome!

The Speakers featured local and regional web guru’s with some sort of tie to Pittsburgh. I was really amazed at how each session referenced, echoed, and built on prior sessions reinforcing concepts, philosophies, and techniques. It was like a symphony of awesome information.

I am truly honored to have been apart of it. The speakers were Geoff Barnes, Chris Cashdollar, Val Head, Whitney Hess, Jason Robb, myself, and Samantha Warren.

The entire day was chalked full of great conversations, new friendships, stimulating debates, and all around good times. Did I mention Happy Cog was there (Chris and Kevin Hoffman)

The Story of a Web Project

I was floored by the positive reaction to my session. When I was putting it together I had my doubts. Thank you all for your positive feedback, suggestions, and conversations.

As promised I’m posting my slides accompanied with a few other documents to help you establish your own processes.

I am releasing all of the following documents under a Creative Commons Attribution 3.0 License

Slides
Client Questionnaire
The Why of Web Design
Process Chart

Once again I want to thank all everyone for the great time and especially Jason and Val for the opportunity.