Josh Sager Media: Creative Technologies Blog

The Problem

A few weeks ago a co-worker of mine was grading video projects and wanted a way to see the time code of the FLV. He needed a way to communicate with his students so they understood where in the video the feedback applies  I told him, hey that’s not a problem sat down to write some code thinking it would be just an easy text box thing.

After a few more conversations I thought about the problem a little further and determined there were more things to consider.

1. The video students aren’t too savvy with code or the actions panel
2. The time code should display relatively in the same place depending on the selected skin
3. They really needed something that had as few clicks, and prompts as possible

This was a perfect opportunity to mess around with JSFL.  JSFL stands for Java Script Flash and it allows a developer to create utilities that can interface with the Flash IDE and in this case I needed to place a FLVPLayback component on the stage as well as some actions in the actions panel.  I needed this to be as transparent to the intended user as possible.

I started by adding the component

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

Then I created a test to add actions to the actions panel

fl.actionsPanel.setText("code");

Then I transformed my original time code actions so they would pass as the argument. Now I’m sure there’s an easier way to do what I did, but it totally works.

The Solution

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

fl.componentsPanel.addItemToDocument({x:0, y:0},"Video","FLVPlayback")

var code

code ="import fl.video.VideoEvent;\n"
code +="import fl.video.FLVPlayback;\n"

code +="var bob:*\n"

code +="for (var j:int = 0; j<numChildren; j++){"
code +=	"if(getChildAt(j).toString()=='[object FLVPlayback]'){	\n"
code +=		"bob = getChildAt(j)\n"
code +=		"break;\n"
code +=	"}\n"
code += "}\n"

code += "\n"
code += "\n"
code += "var timeCodeBox:TextField = new TextField()\n"
code += "timeCodeBox.text =''\n"
code += "timeCodeBox.background=true\n"
code += "timeCodeBox.autoSize = TextFieldAutoSize.LEFT\n"
code += "addChild(timeCodeBox)\n"

code += "bob.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onUpdatePlay)\n"

code += "function onUpdatePlay(e:VideoEvent){\n"
	code += "timeCodeBox.text = getTime(e.target)\n"
	code += "for(var i:int=0; i<e.target.getChildAt(1).numChildren; i++){\n"
	code += "if(e.target.getChildAt(1).getChildAt(i)=='[object SeekBarHandle]'){\n"
		code += "//trace(e.target.getChildAt(1).getChildAt(i).x)\n"
		code += "timeCodeBox.x = e.target.getChildAt(1).getChildAt(i).x+ e.target.x - (timeCodeBox.width/2)\n"
		code += "timeCodeBox.y = e.target.getChildAt(1).getChildAt(i).y + e.target.y-28\n"
		code += "}\n"
	code += "}\n"
code += "}\n"

code += "function getTime(obj:*):String{\n"
    code += "var tempS:Number = Math.floor(obj.playheadTime)\n"
	code += "var tempM:Number = Math.floor(obj.playheadTime/60)\n"
	code += "var tempH:Number = Math.floor(obj.playheadTime/3600)\n"
	code += "var seconds:String\n"
	code += "var minutes:String\n"
	code += "var hours:String\n"
	code += "tempS %= 60\n"
	code += "tempS<10?seconds = '0'+tempS:seconds=tempS.toString()\n"
	code += "tempM<10?minutes = '0'+tempM:minutes=tempM.toString()\n"
	code += "tempM<10?hours = '0'+tempH:hours=tempH.toString()\n"
	code += "//trace(hours+':'+minutes+':'+seconds)\n"
	code += "return hours+':'+minutes+':'+seconds\n"
code += "}\n"

fl.actionsPanel.setText(code);

Final Thoughts

Feel free to use this and modify it. It’s not designed to be pretty right now, just to allow our students to communicate about time code. If you have any questions let me know. Otherwise enjoy

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

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.

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.

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.

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

You get an xml output of extended classes and parameters.

Some interesting elements

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

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

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.

Have you ever been on a code mission? You know one of those stubborn solution quest where nothing else matters.  Time passes around you in slow mo like Zack Braff in Garden Sate.  And the one thing that keeps you going is you know in your heart that there’s an answer and that you refuse to let roadblocks, errors, and ignorance stop you from getting something accomplished.

I Don’t know about your but for me they always sneak up out of nowhere.  Like at 4:59pm on a Friday somebody asks you for something that you think is a piece of cake, then Sunday rolls around and you’re still plugging away only to blink you eyes and realize you just missed Family Guy.

Well I just got back from one of these pilgrimages. Afterwards I typically come out of them feeling triumphant, disappointed with the amount of effort I just gave, and yet little more wise.  Usually because I missed something small in the beginning and along the way I discover a neat technique that changes my outlook on development in some way.

Every now and again I get on these little missions. Code journeys where I’m determined to find a way to make something work regardless of what other options might exist. Sometimes these missions are created by my environment and sometimes they are created by me.

This particular code mission was basically the development of a faux shopping cart system.  Just a demo to add and remove products.  Pretty easy right?  Well that’s what I thought. To add a little more fun to the situation I wanted to avoid used components.  I know I know I know it would have been easier, but this is a proof of concept for a much larger piece and compoents were not an option.  If your curious why DM me sometime and I’ll give you the low down.

Anyway it’s not perfect but I’ve got the proof of concept working

• Multidimensional arrays
• MovieClips as my receipt placeholders
• Methods to add, remove, display the cart as well as the total

As the infinitely wise Colin Mook says if it works it’s not wrong.

So have it folks

flashcart.fla
flashcart.swf

Thanks for a great brush up guys and gals!

I’m very pleased at how well all of you did and I hope it was helpful and can lead you toward your next actionscripting goals. We covered a lot of material and did almost everything exclusively with code!

If you’re still hungry for more actionscript Pittsburgh has a great Flash Users Group that meets the 3rd Thursday of every month.

Keep flashing and drop me a link of your work every now and again.

Drag and Drop has popped its head into my work week about a half dozen times this week which inspired me to post some code of a basic object oriented drag system.  It’s not perfect and hitTestPoint would give me a more accurate collision detecation against the circle, but I thought it would be nice to see a simple example.

Here’s a quick rundown

• Array and Loop for setting up the listeners
• Always set the dragging item on top
• Check for the correct detection (Here’s a hint it’s the third box)
• React to the detection

Using the MouseEvent reference defined as e, you can avoid calling the movie clip or button by their original instance name.  This gives you, the developer, a more flexible framework to add and delete drag-able items at will.

Source Code
dragdemoquestion
dragdemoquestion

Every now and again I get asked questions about ActionScript 2.0.  Although I would much rather give that person a hug and tell them that AS 3.0 will set them free I know that not everyone can make the jump instantly.

Today I was asked how to swap depths in AS 2.0.  No problem right? Wrong! It seemed like everything I tried was jut not working. After I stepped away for a bit I was able to solve the problem but for the life of me I don’t know what was initially wrong. Nevertheless here is the answer.

This will place a movieClip at the top of the display order.
Demo Files
ActionScript 2.0 Swap Depths Demo - Project File
ActionScript 2.0 Swap Depths Demo

This Thursday is our Monthly Adobe Flash Users Group meeting.  This month I’ll be presenting on the use of SWC files in rapid prototyping strategy.  It’s a great way to build out functionalty quickly while still allowing for the flexibily of last minute changes.

Ben Pritchard will demo the FLARToolkit as seen on the GE site. Personally I’m really looking forward to this presentation.  Ben’s a great speaker and he’s the MacGyver of actionscript.

The meeting starts at 6:30 be there or be square.