Porting Flash to Flex – Elastic Cords

Recently, Eric Dolecki published a Flash 8 version of a very cool Elastic Cords flash application. I am sure he was – as I am – inspired by the works of Andre Michelle. This application, of course, does nothing commercially practical but does demonstrate great features of the FP8 API. I, of course, decided to continue that tradition. I wanted to create a Flex, object-oriented, component version…

All too often I find great visual applications with great experiences… are more often created in Flash not Flex. And unfortunately, their code (if published) is usually procedural and timeline-based instead of the component-based approaches that come so easily in Flex.

Porting such RIA applications from Flash 8 to Flex 2 – where the concepts of timelines are deprecated – presents challenges. When you consider that most Flex projects are business-oriented applications that do not require dynamic stage-drawing interactions (like the Elastic Cords), then this project was the perfect impetus for me to explore and understand some major conceptual differences between Flash and Flex; differences such UI interactions, tweenings, component coupling, etc..

Figure 1: Elastic Cords Demo (click to launch)

I knew the effort would prove to be quite fun and challenging. In fact, I first became obsessed with the development efforts and solutions. Then I became obsessed the playing with the demo and dragging those ridiculous cords around.[So be forewarned ]

Click on the sockets on the left to create new cords. Watch the new cords elastically bounced out and fall to the ground in a simulation of elasticity and gravity. You can click and drag the loose end(s) of the cords around. Watch the cords bounce and sway as you move the endpoint. Then you can release the end-point near the “drop” sockets and watch them snap into the dock sockets.

The source code is available! Simply right-click on the running application and View Source.

Enjoy.