I was originally scheduled to speak about Making Bling with Flex at the 360Flex conference here in Atlanta. I then got the flu, learned I needed to have an organ removed at the emergency room, and missed the entire conference. Doug & Juan filled in for me. Days later after the surgery, upon regaining some semblance of consciousness, I received “get well” cards signed by the Flex community from the conference (thanks for mailing, Leif!).

I was so bummed about missing the conference; I always get to meet new people and some I’ve known for years online, just never met in person. So, those cards sure made me feel a ton better. Yall seriously are awesome!

2 weeks later, I started getting emails from people, specifically over seas, asking for transcripts. First was a bloke from South Africa, then Spain, and on and on. I felt really bad telling people that I didn’t actually get to do my speech, and my slides were meant as talking points for me, not for distribution. So mad in fact that I couldn’t change the past, I was determined to mold the future.

At the time, I worked for a dope internet video company called Multicast Media Technologies. They have a video studio that they use for a lot of custom live broadcasts, so I sweet talked my way into using it for 3 hours. The result of that recording session is now online for you to view at your leisure, WHEREVER in the world you are.

Some erratta & Citations:

• I am now back in the consulting game, doing independent consulting & contracting, as well as working with ESRIA.
• Regarding not pursuing legal action, I’ve heard some contractors who have had good luck (in a bad luck situation) utilizing signed contracts combined with their lawyer to good effect in getting paid. If you’re lawyer truly thinks you can recoup money owed, you can afford him/her, and you feel it’ll end quickly, go for it. Regardless, an ounce of prevention is worth 10 billion pounds of cure: if you get a bad vibe from a client, find another one.
• Aral Balkan’s Online Conference – Singularity
• Doug McCune
• Juan Sanchez, aka, Scale Nine
• Grant Skinner
• Regarding CPA’s, they can help you identify what you’re expenses are. Meaning, things you purchase towards your business that you are not taxed on, or are taxed less on. Laws vary by state, country, etc.
• Calculating your contractor rate is usually based off a huge number of criteria; I’ve GREATLY simplified it for this presentation. You can search on Google and find a bunch of great blog entries by anal retentive people who make these insanely long lists identifying your expenses; your costs, things you need to pay for. Excel helps here. You can identify how much money you need to make to afford your standard of living, and add additional expenses and profit desires from there. Sometimes, how much you make is driven by the client and their budgets. You need to factor this in too.
• Talking about your rate with others to get a general idea of what the market and certain client jobs can bear is fine. However, if you are bidding on a project, it’s illegal to talk to your competition about what you are planning to charge (federal law in the USA; consult a lawyer for facts).
• Adjusting your rate may be out of your hands. Sometimes your rates are dictated by the client or the firm you are working through, and there is no negotiation allowed.
• “The W2 Talk” – when an employer gets yelled at by their boss or CPA about your high rates, and does their best to bring you on as W2 (fulltime salary) instead of 1099 (contractor hourly). This usually occurs after a project is completed.
• If you ever get frustrated with clients negotiating price, go back to your expenses sheet (you DID save this, right?) and look at all the bills and expenses you have. That usually reminds me I CAN’T negotiate price, hehe.
• Remember, fix bid projects that have a high amount of money still have risk, but may be attainable. Sometimes, you just REALLY want to work for that particular client. Maybe they have a frikin’ awesome project, you just really like the client a lot, or the project would be great marketing for you once complete. If you clearly identify things you can gurentee can be on-time and on-budget, and then clearly point out the things that are risky and thus flexible, a lot of clients are cool with that. They can potentially compensate you for those risky areas with more money than is allocated to the budget. I’ve never done this hybrid approach recommended to me by John Howard @ Multicast Media, but I’ve ALWAYS seen clients say they have “X budget” and then a few thousand dollars magically appears later when they need more.
• Original Personal Branding Checklist
• David Samuel, the gent who taught me about Personal Branding.
• Ryan Stewart – Care Bear Stare of the Flex Community
  
• Personal Branding #5: An online presence massively improves your findability; potential clients can find you when they have work for someone with your talents.
• Aphex Twin
• Nectarine
• A practical use of an “alias” is a shortened, 1 word version of your name. Useful for IM accounts, email, and user names for online services.
• Acrobat Connect – online webcasting
  
• Slideshare – web ready slideshows
• Passion can be contagious
• 30onair.com for “Why Flex?”. Best Why Flex video ever.
• User Experience, or “UX” is more in demand than I let on; more in demand than Flex & Flash Developers. There are firms that specialize specifically in User Experience (design, user persona’s, etc.). Places like Enablus and others employ Flex Developers. Working with UX people is SOOO much nicer than not because they ensure the application functionality makes sense, usually have valid research proven UI models work (this is NOT a replacement for user testing however), and create good designs. If you are into UX, you SHOULD be making tons of bling right now. If you are into Flex, seek these people out; they are fun to work with and more demanding of quality. A lot of existing Enterprise to mid-size software shops already have existing back-end talent, but not a lot of front end, client side specialists. They look to Flex Developers, wrongly so, to help with both facets of providing a good Flex GUI and a good user experience.
• Good looking consumer facing Flex: Scrapblog, Buzzword
• Keep in mind for the bigger jobs, you cannot start the work without a signed contract. More incentive to get a lawyer to write one for you, get the client and you to mutually agree to the terms, and have peace of mind once you start.

First, let’s take a look at the FLA in CS3 on my MacBook. Notice, nothing on the root timeline / stage.

Going into the BackgroundPanel symbol in the library, notice no code on frames. You can see the bottom layer is where I put my bounding box. This is a convention used since Flash 5 (before my time, hehe) which gives the MovieClip a “default width and height”. Now, for Flash components, this was typically used for the size methods written in ActionScript. In Flex, it does a whole lot more. Flex has a layout engine that measures MovieClip’s, and that way “knows” when to show scrollbars. By default UIMovieClip measures every frame so if your Flash animation increases in size, so too will your content in Flex. When you are playing inside of containers inside of Flex, this is VERY important. Here, though, I actually WANT to remain square. Therefore, I make a 800 x 600 MovieClip with an instance name of “boundingBox”.

Now, the contract you have to abide by as a Flash Designer when creating assets for Flex is 2 things: states and transitions. You create different “states” that your component / animation exists in. In my panel’s case, these are: hidden, intro, main, and spin. Flash Developers typically would use either the timeline or different redraw methods. A Flex Developer uses the state tags. These 2 will now be combined. The Flash component will “represent” the state tags in Flex via frame labels on the MovieClip symbol’s timeline. This way, a Flex Developer can use the familiar syntax on your component:

panel.currentState = “spin”;

The second is transitions. Transitions are the changes that happen form one state to the next. For example, in my Login Form example, I show how you can change from one state to the other and give visual feedback to the user you’ve changed state. You represent transitions in Flash via specifically named frame labels.

For good or ill, transitions are (at least with the version I have) all or nothing. Most Flash Designers who are timeline junkies will read that and laugh. That’s the attitude. I’ve found the component acts weird if you only define transitions for some states, and not others. Best to do at least the default transition to each state.

One quirky thing is that the UIMovieClip will go to your state frame label when it’s done playing the transition, if any. I didn’t really like this. The compromise Adobe came up with is to put your state frame label on the same frame as your ending transition frame label. Now, most of us Flash Purists think putting 2 frame labels on the same frame is blasphemy… madness!

…however, it actually works out well here (thanks Glenn Ruehle!). It makes it easier for as an animator to have my ending transition “end” on the state. However, for more complex animations, like the one Grant Skinner showed at 360Flex, it actually behooves you to animate unique transitions for each state change.

For example, if I were animating a human character, he could have 3 states: stand, run, and sit. If I were to set the current state from sit to run, I wouldn’t want him to immediately start running; I’d have to animate him to stand first. For non-animators, this can seem like a lot of work. For those of us in the know, it’s necessary for a good looking component.

So, again, you may find another frame label timeline convention you dig; no worries.

The syntax for states are “my state”; basically whatever you want. The syntax for transitions is a little more complex. It follows the way transitions in Flex work. They have a “fromState” property and a “toState” property. Transitions are always bound to a state change. You can choose a state name as a string OR a *. A * means “any state”. So, if you write fromState=”*” toState=”spin”, that means anytime the state changes to spin, play this transition.

Frame labels in Flash use a “from-to:state” syntax. Dissecting this, the from is your from state, and can be the name of the state, OR *. Same goes for the to; the to state name or a *. The state is the name of the state, and must be a state name. Always put a start and end set of transition frame labels. If you misspell the frame label, currently there is no JSFL to help you out, and the Flex Dev will most likely get an error dialogue that isn’t easily debug-able. He’ll probably blame you so just make sure for every “start” you see an “end”. Keep in mind too that for some transitions, it’ll use the end frame to play them backwards depending on what state you are changing too, so animate accordingly.

You’ll notice for my simple example, I’ve been slack and just put the state frame labels at the end of the transition animations.

For example, if the Flex Developer were to use this component, and set the currentState = “intro”, then it would do a gotoAndPlay for the “*-intro:start” frame.

Same goes for the spin, regardless of what state you were on previously:

Notice that the main state doesn’t really have any transition; it’s just the main state where you mainly are, and thus it is plain Jane, reflective a main type of state. Word. Yes, it does have an event sound, though.

Now, when creating this component, you do what you typically do in Flash. Create a new MovieClip symbol, name it, and hit ok. You’ll notice the Linkage dialogue in Flash CS3 has a new field: All Your Base Class are Belong to Adobe. When you create a MovieClip in Flash CS3, it’ll default to flash.display.MovieClip. Good, leave it be, let it create your symbol.

Later, you can run the Flex Kit JSFL command, and it’ll put the needed SWC in the Library, and then convert your symbol for you to have the correct base class (mx.flash.UIMovieClip); all you have to do is select it in the Library. It’ll tweak your FLA settings (in a good way) too.

Poof; it’s exported as an SWC where your SWF usually is. Done!

Few more quirks. Flex states are based around the Flash Player 9 DisplayList model. DisplayObjectContainers are basically MovieClip like things. Except, instead of createEmptyMovie, attachMovie, duplicateMovieClip, unloadMovie, and removeMovieClip, we have a brand new API. This API allows us to create MovieClips, but NOT have them draw. In the past, we’d stop it’s animations, turn it invisible, move it off stage, and pray. This didn’t work so well with a ton of MovieClips. Now, we can just go:

var a:MovieClip = new MovieClip();

And call methods on it, but not actually have it automatically have to be drawn in some depth. Now, we go:

addChild(a);

And THEN it’ll draw. Cool, right? You can even re-parent it, and remove it without killing all the code on it. Dope.

Problem? Flex states are built atop this. When you go to a state, things are removed from the DisplayList and others are added. What happens to those that are removed? Flash Player does what it was built to do; it removes them from memory as needed.

Great for application developers, suck for designers. From the day I got into this industry, I’ve made it my mission to ensure my stuff plays hot, and if it means taking all of your CPU and RAM to do so, so be it; it’s there for the taking Blackbeard style.

The hack I showed at 360Flex has been modified slightly. Basically, I’d put all of the frames on a MovieClip, since those have to be preloaded before drawn, and then put it before the animation. Now, I’ve found better results doing the same thing, but having it last he entire tween. Notice the spin and intro preloader layers in the above pictures below the animations. You can see what’s inside of those MovieClips here. Technically, you should just put them all on one frame, but I ran out of time. I then just made them alpha 0. If you move the off-stage, the measuring code will think your Flash component got really really big, and then you’ll see scrollbars in Flex, and go wtf?

So, what do you do with your SWC? You give to the Flex Dev, and smoke ’em if ya got ’em. The Flex Dev then, if he’s a purist, he’ll throws it in a lib directory. For this example, I just throw it in the root project. You then link it to your Flex Project via adding it to the Flex Build path as a Library via Project > Properties, and then Flex Build Path, Library Path tab, and then Add SWC button.

You’ll notice a sample implementation here with Buttons setting the current state of the panel. Notice the lack of strong-typing; I’m such a rebel (-es=true -as3=false -strict=false 4 uber h@X!!!).

Now, I think I broke something, but the convention is “boundingBox”… or it’s ilk. You name your MovieClip that, and that’ll define your component’s rect. In MXML (or AS if you were so inclined) you can set the bounding box instance name to use. I don’t recommend this, but hey, freedom’s rad, choose what you want.

This’ll compile to something like this. If you’d like to play, click the image. WARNING: Has sound – she’s loud.

To give you a visual example of what this would look like in Flex (uber simplified btw), here’s the states defined in MXML instead.

And the corresponding (optional) transitions that match those states.

Some dig MXML, some dig Timelines, I dig both.

Few final tips. Every time you recompile a new SWC (Test Movie / Publish, whateva’), don’t forget to Refresh the Flex Project, or you’ll get the cached version. I usually use an Ant script to just copy the new .SWC from the assets directory (or however you setup your Flex projects). Also, not sure if it’s fixed, but if you’re Flex Dev starts getting code hints for “frame31():Object”, don’t be alarmed. If you put code on the timeline, I’m the only guy I know that fires people for that (except stops of course… I’m not THAT mean). These methods are merely created from code you have on that specific frame (thanks Robert Penner!).

One thing to notice in some of the above images of Flash’s timeline is the Flex friendly layer vs. the Flash friendly. You un-guide the Flex friendly one for development and testing. That way, Flex Builder doesn’t chug loading all of those uncompressed PNG’s into memory, thus making Flex Builder compiling really slow. When ready, you just un-guide the Flash friendly one, and re-guide the Flex friendly one, and finally recompile. Naturally, most people are using video nowadays or hand animated bitmaps & vectors which are immensely less RAM intensive. Then again, good to know.

Also, this whole example didn’t use any ActionScript. There is no reason I couldn’t make an ActionScript 3 class for my component. If you don’t write a class, Flash CS3 will make one for you. So, I didn’t have to make a “BackgroundPanel2.as” file. If I wanted to, I could of written an AS3 class to maybe play some other scripted animations, or play sounds… video, whatever.

Finally, don’t forget to remind the Flex Dev to up his framerate via the Application tag (or compiler… either or)!

This is not the only way to do this.

I’ve had a designer export all PNG’s for me from Photoshop.

I’ve had a designer export all graphics as GIF’s with per-screen printouts to tape inside of my cube for visual reference.

I’ve had a designer give me a PSD with no fonts. When I got the fonts, they were the Mac fonts, not the PC fonts.

So, I’ve had a full gamut of situations on how this went down. Typically, most designers do not know, or just don’t care to export PNG’s out of Photoshop. GIF’s are sometimes ok . Thus, these are the measures us Flash & budding Flex developers have to go through to get the design into our world. I’m not saying it’s the right way, but without a designer capable of exporting PNG’s, we have no choice.

Maybe if every designer capable of doing this wasn’t always busy when I asked them to do contract work, I wouldn’t be posting this. Unfortunately, there is still a shortage of talent, or that talent in house doesn’t get effectively communicated to, and it’s just faster to do this yourself.

I’ll be speaking about this as well as Flash integration at the 360Flex Conference March 5-7, 2007 at Ebay in San Jose, California, USA. [pending topic approval]

Anyway, I say “denote” at least 7 times. Also, apologies for Flex Builder’s non-real-time typing. Eclipse is stealing the key presses from Captivate. It catches up when I click though, so just wait patiently, and you’ll see the code.

If you are a Designer, you can safely stop on “Contents Layout”, the 9th section. If you are curious to see how to animate & implement image assets in Flex, feel free to watch the whole thing. I covered states & transitions by accident. All 30 sections counted, the whole tutorial is about 58 minutes. Took about 7 hours to create & edit since it was improv. Uploaded all 150 megs of it all of last night. BTW, I had to update my CaptivatePlayer to work with Captivate 2 skin SWF’s, so any problems viewing, just let me know and I’ll just link to the files directly.

Hope it helps!

Getting a Photoshop Design into Flex 2 – A Video Tutorial using Photoshop CS2, Fireworks 8, and Flex Builder 2.

…the problem is, there are a LOT of classes in there, each with their own intracacies. Describing each would take a book of documentation (which Flash MX 2004 now has). Not to mention the fact, I’ll have to do it again in Januray of 2006 for the 8ball framework (assuming there is one) since I figure if one does in fact come out later this year, that’ll be how long I need to feel confident in my ability to describe it to others effectively.

However, a quick run-down, verbally spoken with some of the functions shown while spoken too, helps me understand what is going on under the covers. When I read the classes to learn them, say mx.managers.DepthManager for instance, I’ll read some of the properties and functions aloud to myself to garner a better understanding of what it’s doing, and how it plays with the rest of the framework.

In practice, this UIObject tutorial is taking way to long to complete. I did these last Sunday night, and just now realized I’m not even 25% of the way done with the class. I guess I’m really trying to guage what people want to know about the framework, without sacrificing important details.

For example, I think a complete rundown of the entire framework is needed, not just certain classes. I know that’s a little non-pragmatic, but the framework has a lot of tightly, inter-woven functionality, and it’s important to understand those connections to get the most out of the framework AND to keep yourself out of trouble when using it.

So, doing Captivate tutorials for each class will not work, I don’t have the time to do them all. I’m not opposed to a Podcast, but I really think the lack of visually showing the class will sacrifice a lot the understanding and retention.

Maybe talking about each class in 2 minutes or less? Curious what the community thinks is best.

Example of Overkill for mx.core.UIObject

Also works good for Blog Aggregators, like Fullasagoog.com for instance. You can pick entries you wish to read, and then when your done picking, go through each tab.

Quicker than Right Click + Open in New Tab.