Give yourself a MAX Unaward
If you follow me on Twitter you probably saw my tweets about a new secret project. Today I can finally reveal it to you.
I actually started this project somewhere mid-June. It all started with working on a widget for the Cannes Lions festival. I realized that it was probably a good idea to start thinking about a new widget for MAX. With close to 1 million views, last year’s MAX widget was a huge success (I was just checking the number before posting this and it actually passed the 1 million mark and is still generating views every day) and I thought it would be cool to try and match that number this year (although I realize that that’s a pretty big target). I knew I wanted to do something with video and more specifically do something with personalized video… and it had to be related to MAX. Once the storyboard was approved we recorded the video in a studio in Hilversum in The Netherlands. That was right before my trip to Japan. When I came back I started building the app and have been working on it for the last 3 or 4 weeks.
So… Without further ado… I present you… The Adobe MAX Unawards!
There are a couple of people I really need to thank for their help.
First and foremost: Wim Vanhenden. I think Wim is one of the most talented Flash developers in Belgium… but I decided not to use his Flash skills for this project. Wim is actually the host of the MAX Unawards show. Don’t ask me why but when I started working on the storyboard for the application, I almost immediately thought of Wim for the role of the host. I think it worked out great and we had a lot of fun recording this!
I also want to thank Klaasjan Tukker and Ton Frederiks for helping out with recording the video in the green key studio.
Big thanks also go to Paul Burnett. Paul worked on the personalized text pieces in Flash CS5.
This project would also not be possible without the help of Influxis. Thank you, Jerry, Grant, and Noe! If you ever need any Flash Media Server hosting you have to try these guys. Their custom admin panel alone makes it worth every penny.
UPDATE: Obviously also a big thank you to all the beta testers who gave me a ton of valuable feedback.
I just realized that this blog post is now starting to sound like an acceptance speech for an award… ;-) I should have just created a video for it! ;-)
I hope you guys enjoy the application. I’m looking forward to seeing what awards you give yourself and the creative acceptance speeches you create for it. Oh… and… Hope to see you at MAX!
Submit your app/site for the MAX Awards
“Aaah… I won’t bother with submitting my app/site… I never win anything…”. I bet some of last year’s winners thought exactly that but they went for it anyway… and won! The Adobe MAX Awards is a global awards program that recognizes the best uses of Adobe software for creating expressive applications that enable people to engage with ideas and information anytime, anywhere and on any device.
You can submit your application/site until August 13th, 2010. The top three finalists in each of six categories will be invited to showcase their work at MAX 2010 in Los Angeles.
There’s really nothing you can lose here. So… Submit your app/site today!
Tutorial: Sexy transitions with Flex 3 (as used in the MAX widget)
When I showed the first versions of the MAX widget to a few colleagues, most were very surprised to hear that this was all built with the Flex 3 framework and that no Flash Catalyst or Flash CS4 was involved in this.
“Including the animations?“, was a question I got a lot. And yes… Even the animations are “programmed” using the Flex framework. And you know what… It’s really not as hard as it sounds. The Flex framework actually has a bunch of effects built in and they are really easy to use.
In this case, I used 2 move effects and specified a “Back.easeOut” easingFunction. This easing function creates that bouncing effect that you see in the widget.
<mx:Move id="moveIn" yFrom="400" duration="350" easingFunction="Back.easeOut"/> <mx:Move id="moveOut" yTo="400" duration="250" easingFunction="Back.easeIn"/>
You can use these types of effects in a number of different ways but the easiest way (I think) is to specify the showEffect and hideEffect on a component.
<mx:Canvas id="page1_back" showEffect="moveIn" hideEffect="moveOut" width="400" height="400"/>
When you set the visible property to false, the hideEffect will trigger and the showEffect gets triggered when you set the visible property to true. I’m sure you can already see how I built this ;-)
In the widget, you see 6 different pieces of graphics slide in to place over time. To do that, I created a timer that triggers my setup function over time.
var setupTimer:Timer = new Timer(150, 3);
setupTimer.addEventListener("timer", doSetupPage1);
setupTimer.start();
This timer will trigger the doSetupPage1 function 3 times with 150 milliseconds in between each call. All my doSetupPage1 function does, is set the visible property to true on the different pieces of graphics I want to show.
private function doSetupPage1(event:TimerEvent):void
{
switch (event.target.currentCount)
{
case 1:
page1_back.visible = true;
break;
case 2:
page1_middle.visible = true;
break
case 3:
page1_front.visible = true;
break;
}
}
To hide them, I’m actually doing exactly the same thing. Instead of setting the visible property to true, I set it to false and when all pieces of artwork are hidden, I trigger the function that reveals the next page.
[flash medium=5 w=400 h=400 mode=1]
To get you started, I created this little Flex project that demonstrates this approach. Now I’m not saying that this is best practice or not but I think it’s just an easy way to create sexy transitions with Flex 3.
Project Quindici = MAXwidget
If you’re following me on Twitter, you may have seen me Tweet about Project Quindici. Quindici is Italian for 15. Project Quindici is actually a widget that (among other things) allows you to record your own testimonial and thus claim your 15 minutes of fame.
I’m happy to announce that the project is now live. The widget is built with Flex Builder 3 and the Flex 3 framework, ColdFusion, Flash Media Server and Photoshop. I’ll do a follow up blog post about how it was built next week. I hope you like it.
Adobe MAX logo in The Matrix?
Ok… ok… I know… This is a “little bit” geeky. Especially because I was able to spot this on a computer screen in the background and it only appears for a couple of frames. But seriously… Is that the MAX logo I see in The Matrix?
Ok… It probably isn’t, but it’s pretty darn close if you ask me!
Now that we are the topic of MAX, I’m actually very excited about this years edition. If you look at the schedule, you should get a pretty good idea of what’s coming at MAX. I’m scheduled to do some exciting sessions… But more on that later.
If you haven’t registered for MAX yet, you may want to do so before August 31st. If you register before August 31st, you get a $200 discount! Also, if you’re in Europe and you’re thinking about going to MAX in Los Angeles, you may want to book your flights now. I’ve seen return tickets to L.A. from mainland Europe for around €400. Sleeping in L.A. can also be as cheap as $75 a night or you can also just grab a sleeping bag and sleep on Santa Monica Beach ;-)
Feel free to follow me on: 
