So you’re getting further into Actionscript for your interactive projects and you dip your toe into the pool of programmatic animations. It seems like a good idea. All of your transitions can be managed from a few lines of code in one central place. You happily travel down the road of the Tween Class. You do a few tests, it’s easy to use, the results look great, and set off to implement it into your larger project.

You soon find out that the tween class chokes. It chokes hard and fails at unusual times in spectacular fashion. What do you do? You’ve spent all of this time setting up the Tween Class, and you love the idea of centralized transition control. Don’t worry there’s a great alternative, Tween lite.

Comparison

Here are some examples of the Tween Class and Tween Lite in a typical scenario. There are three buttons that when clicked will transition in 4 “products” of a similar color.

• interface-tweenclass-4
• interface-tweenlite-4

Tween Class Results

Inconsistent. With only a few shapes some of the transition pop in an out. At times the transitions will “stick” before they complete their animations. Even at this very basic level the Tween Class is Shaky at best.

Tween Lite Results

Not bad. Everything is where I expect it to be. Although I’m still a little gun shy from the Tween Class, this appears to be doing everything I need it to. Not to mention installing Tween Lite in place of the Tween Class was really easy.

Turn It Up

Okay now it was time to take Tween Lite to task a bit. To simulate a larger project I increased the number of “products” to 200 per each button click. Although the transition selected may not be appropriate for that amount of products it worked like a champ. Meanwhile the Tween Class couldn’t get more than a few products to animate.

Don’t take my work for it see it for yourself.

• interface-tweenclass-200
• interface-tweenlite-200

How Easy is it Really?

It’s super easy. Just download the Tween Lite framework, import it, and start using it.

Code Comparison

Very comparable. My favorite thing is you can add an event listener right in the decoration.

Now that’s really easy to use. There are sorts of other great features. Make sure to read the documentation. Greensock did a great job on putting it together.

So if are looking to up your game with programmed transitions or animation, I would check out Tween Lite. It may save you a big head ache in the long run.

Source Files

Just in case you want to poke around and create your own benchmarks I’ve provided my source code for this basic interface.
tweening-benchmark

Today’s Agenda for working in Flash.

Our Goals

• Explore the interface
• Create Basic Animations
• Create Basic Interactions though ActionSctipt

More info about my session below.

Creative Interactions: Flash Experiments

This session will explore using everyday ActionScript along with common interaction metaphors but through the use of external devices and media server technologies. Josh will focus on sharing demos, experiments, tidbits, pitfalls, and the source code behind these creative solutions. It’s intent is to inspire participants to start experimenting and create their own creative interactions.

Josh will cover using Red 5 Server, basic MIDI interaction, the Color Management System he’s developed, and more.

Working Smarter, Not Harder – Josh Sager
Get a bigger bang for your buck. Learn Flash IDE and ActionScript tips to save time on your next project. Less copy and paste, fewer projects with 10,000 frames and more centralized content speeding up client changes and routine maintenance. This is a beginner to intermediate developer topic.

Betwixt Or Between? – Val Head
When it comes to timeline tweens, we have so many options. This presentation will focus on the two options we have for tweening motion on the timline: Motion Tween and Classic Tween. We’ll look at how to use the new Motion Tween introduced with CS4 and how it compares to the Classic Tween we’ve all grown to love. This is a beginner design topic.

Please RSVP via email or on facebook .

PittMFUG February Meeting
Thursday February 18th
6:30pm
at New Perspective
google maps ]]> http://www.joshsagermedia.com/blog/articles/pittmfug-meeting-feb-2010/feed/ http://www.joshsagermedia.com/blog/articles/assembling-a-portfolio/ http://www.joshsagermedia.com/blog/articles/assembling-a-portfolio/#comments Fri, 12 Feb 2010 18:43:53 +0000 Josh Sager http://www.joshsagermedia.com/blog/?p=816 Finally

It’s time to organize and update my online portfolio. It took snowmageddon 2010 clearing my schedule,  but it happened. I’m proud to announce the launch re-launch of my online portfolio.

Portfolio’s Are Tough

I’ve struggled with assembling my portfolio for far too long.  I constantly second guess myself revisiting the same questions over and over like…

• Should I show everything I’ve ever done?
• What about some of my sketches and flat artwork?
• Should I make it Flash or HTML?
• What about an intense interface with sound, transitions, and crazy crazy crazy?
• I wrote some amazing code one time, should I show code samples?
• What will people think?  It’s the high school lunch table all over again!
• What about teaching demos? I have a ton of them.
• Do I need a case study for every project?
• Why am I doing this again?

Re-Re-inventing the Wheel

Reworking my portfolio is an annual event.  I come up with crazy concepts and attempt to develop some sort of  miracle in under a week.  A few days go by and all is well. Three or four days later it starts to fall apart.  Life gets in the way, I lose interest, I lose focus, and the project gets abandoned. Another idea lost on the depths of my hard drive.

Despite my many attempts I’ve nothing to show for it.  Yet clients ask me for samples all the time.  It’s so embarrassing. I’m a web developer I should have this done already.

My Own Worst Enemy?

I’m not sure about you, but when I think about making a portfolio I immediately want to make the coolest thing the internet has ever seen.  I also want it done tomorrow, and I want to spend almost no time on it. Does that sound familiar? It did to me, I’ve become my own worst nightmare. An unreasonable client. Noooo!

I’ve become the guy constantly changing my mind, shifting deadlines, pushing back concepts, and nothing is ever good enough. How did this happen? I thought I knew better. Frustration sets in and I get angry… with myself.  Then the project dies a slow and painful death. Ahh the life cycle of internal projects.

The Awakening

Last year I spoke at a wonderful event, Pittsburgh Web Design Day, organized by Refresh Pittsburgh. There I met a Web Developer, Rahmat Dornbrook, who was also assembling an online portfolio.  We exchanged our stories of struggle as well as a few laughs. Then he said something the struck me.  He said  “I used to design my portfolio to impress my peers, but now I design it for my potential customers.”  It was dumbstruck. What an obvious but brilliant solution! How could I have missed it?  A rookie mistake.  Focusing on the cool rather than the communication.

The Aftermath

Although It’s nearly a year later, I’ve held on to that idea and finally put it into practice. I stopped worrying about what people would think and took my own advice.  I thought about the problem, removed myself as a client, and trusted my training.

Problem Solved

The goal of my online portfolio is to curate works that represent what I can and would like to do for other clients.  It’s not a laundry list of software, it’s not a history of my design and development career. But it is an example of work that I feel comfortable doing and wouldn’t mind doing again. A greatest hits album if you will.

My Advice

1. Take a step back
2. Solve the problem
3. Trust your skills
4. Don’t list everything
5. Advertise what you want to do, not  what you’ve done.  Many times they’re different.
6. Revise often

Thank you Rahmat for helping me listen to myself.

That could spell bad news for Mozilla, who’s backing the .ogg format for the video tag in HTML5. They are in favor of an open standard like the .ogg format.

For those who are counting. Here are where the current players stand.

• Opera -.ogg (on the way)
• Mozilla - .ogg
• Google - H.264
• Apple - H.264
• Microsoft - nothing

Just another bump in the road on the web to ubiquitous web standards where video is concerned.  It appears, at least for the time being that Flash is still the best way to delivery video content on the web. I guess sometimes it pays to have a 3rd party plug-in.

Instructor: Joshua Sager

Course meets March 6, 13, 20 and 27

Time: 9:00am - 1:00pm

Each Saturday will cover a new technology starting with Web Standards, moving on to JavaScript, then ActionScript 3.0, and finally Flex. Each session will be jam packed so bring your notebook and a way to save your work!

RSVP for the Web Overview (PTI Alumni only)

Four trips to AIR, 10 transparencies, and one month later I’ve finally done it.  My first two color screen printed poster.  The final count of “good” prints are still being tallied. Honestly I’m not too concerned.  It was a great learning experience and that was worth all of the mistakes, redos, and spilled ink.  There’s just something great about producing something tangible.  A big thanks to Hannah and Jen over at AIR. You ladies are the BEST!

• Interactive Storytelling and Emotional Communiction
• Flash is not static

Say It Ain’t So Steve

It was recently rumored that Steve Jobs held a town hall style meeting to discuss plans for Apple. In this meeting he allegedly said:

Apple does not support Flash because it is so buggy. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5. - Steve Jobs

One’s and Zero’s Are Not the Problem

HTML5 will be a much needed upgrade. And i’m really excited for continued standardization especially when it comes to audio and video.  However, Steve if you’re reading this, Flash is a proprietary technology and it may not be optimized for your devices but it’s popularity can not be tossed aside.  Why not?  Well, it offers something that no other technology provides. Interactive storytelling that appeals to human emotion.  Read that again and really take it in.

Interactive Story Telling and Emotional Communication

No one can dispute that video is a great way to tell a story.  Although you can do it with words the old adage does say a picture tells a thousand words. And at 24 frames per second, that’s a lot of words.  Despite video being a great way to communicate on an emotional level it’s locked into to a specific sequence.  Plainly video lacks interactivity.

Flash is not static

You see Flash fits nicely between the emotional response of video and the interactive capabilities of HTML5.  Despite both of these technologies being great at what they do HTML5 and video are static.

static

a : characterized by a lack of movement, animation, or progression b : producing an effect of repose or quiescence <a static design>

Video lacks dynamic user driven controls and HTML5 via javascript can animate content but it lacks storytelling.

This isn’t about key frames and it’s not about file formats. Really think about that. It’s about sequentially dynamic communication. Their combined weaknesses of HTML5 and Video are the strengths of Flash platform.

Would you ever create a movie with JQuery? No. It’s a great technology for transitions, but it falls short as a visual story telling technology.

Would you ever film 100 pages of content and pop in and out of each “page” accepting that the video won’t line and the lack of transitions from jumping around the play head of a video file? Maybe, but the experince suffers.

Flash is a great blend animation and content for interactive storytelling. Until another technology can do this to the satisfaction of both designers, videographers, and end users stop hating. Accept it.

One more thing…

Oh yeah. Steve, don’t filter my options. Let me decided if Flash runs too slow.