Hi everyone. My name is Serge and I’m an addict.
Admitting you have a problem is the first important step. And yes, I admit :D But every once in a while, I do try to unplug so I’m guessing that I’m not doing that bad… Or is that denial? What I mean to say is that I’m going to try and unplug for the next 2 weeks. I already know that it’s not going to work since there’s so much cool stuff going on at Adobe (in preparation for MAX) that I just have to keep up with the latest news. That means I will be traveling with my laptop, will probably Tweet every once in a while and will probably try to keep up with email.
Ok… I really am an addict… I guess it’s time to join the Social Media Addicts Association.
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.
Multi-screen development sessions: Help wanted!
With Flash On The Beach and MAX fast approaching, it’s about time to start prepping my multi-screen development session and lab for both events.
Before I can get started though, I need to come up with a good idea for a multi-screen application and I need your help in deciding which direction I should go.
So… What type of application would you like me to build for this session and lab? Entertainment? Food? Travel? Video? Photo? It can basically be anything as long as it has an in-the-browser version, a desktop version and a mobile version. I do have some ideas in my head but can’t decide on which one to use… That’s why I’m asking for your help!
Now, I’m not asking you to come up with a complete concept (but you can if you want to ;-) ). I’m just asking you to tell me what type of app you would like to build in the BYOL-lab at MAX and have me explain/show in my session at FOTB. I’ll reward the best idea with a goodie bag ;-)
Feel free to post your thoughts as a comment or use the contact form.
Midsummer giveaway winners
2 weeks ago, I opened up the “Future of Flash Midsummer Giveaway”. I asked you guys to look in to your crystal balls and tell us where you see the Flash Platform in 5, 10 or even 20 years from now. I must say that some of you have a very vivid imagination ;-)
To be totally fair, I asked my colleagues Enrique Duvos and Andrew Shorten to pick the winners. Congrats!
Win a ticket for FOTB:
Wins a copy of Flex Builder:
And you know what… I’m in a good mood today so I’m going to send a cool T-shirt and Flex book to everyone who submitted an entry! ;-)
All winners will receive an email from me.
Feel free to follow me on: 
