Flex/Flash/Actionscript

The making of TileUI

I’ve posted a video that shows the progress that I made during the first 12 days of working on TileUI. For about the first 2 weeks I saved a snapshot of the progress I had made (I tried to save a snapshot each day, but I missed a few). The video below is a combined video of each of these, it starts at day 1 and goes through day 12.

I stopped taking daily snapshots (and I stopped making much progress) after the first two weeks because I started working on a contracting gig. I’ve gotten much further with the software now (as the previous AIR demo video shows). But I’m not making the day to day advances like I did the first few days (man, if only I could be unemployed forever).

Here’s a quick breakdown of how things went:

Day 1: Learn Actionscript Physics Engine. By the end of the day I had a decent physics simulation running that allowed me to throw around particles. Prior to this project I had never worked with APE, it’s a solid physics engine (my only complaint is how CPU intensive it is).

Day 2: Learn PaperVision 3D. Combine PaperVision with APE. Prior to this I hadn’t played with PV3D and I figured it was about time I learn. By the end of the day I had figured out the basics of PV3D and managed to map APE particles to 3D tiles in PV3D. Damn, these libraries are good.

Day 3: I got the tiles to display images. And I got the basic selection system working where you can lasso a set of tiles and they get grouped. The group was just a messy group of tiles, but it was a start.

Day 4: Added Flickr support to load tiles straight from Flickr. Added dynamic sizing of tiles.

Day 6: Made grouping tiles put them into 3D stacks. Added double clicking tiles to do something based on the tile content, ie open larger Flickr image. (I don’t remember why I don’t have a day 5 or 8 snapshot)

Day 7: Improved Flickr support, ability to page through results, load multiple search results, etc. Added spiral stack.

Day 9: Added the menu system. Added the twist menu item to twist a stacked pile. Allowed breaking piles you made.

Day 10: Added the fan layout method.

Day 11: Added the grid layout method.

Day 12
: Added the leafing layout method.

So what?
I thought this was cool because it shows a) how awesome and fast developing in Flex/AS3 is and b) how badass open source community libraries for Flex are. I was able to grab these open source libraries and within a few days have something pretty sweet to show for it. A big thanks to everyone behind the PaperVision project, and to Alec Cove for the APE engine. You guys make this stuff easy.

At last count I am using 10 different open source libraries in the TileUI project in one way or another.



Related:

  • I'll be at Adobe this Friday for the FlexCamp event. If you're there then find me and say hi (sadly no mohawk at the moment, so I'm not as easy to spot). I'll probably be one of the people drinking in the back. I don't know how the whole sessions…
    Tags: flex, tiles, tileui, air
  • For various reasons, which I may or may not discuss in the future, I will not be entering TileUI into the AirDerby contest. Good luck to everyone entering the contest. My AIR app would've kicked your AIR app's ass :P Anyone want to just give me $100,000 so I can…
    Tags: air, tileui
  • Here's a demo video of tileUI Desktop running as an AIR app. The video shows drag and drop of local files into tileUI, drag and drop photos from iPhoto, using motion detection on a webcam to take pictures, extracting contents of a zip archive and removing a subset of tiles…
    Tags: tileui, tiles, air
Standard

29 thoughts on “The making of TileUI

  1. Pingback: GFX Complex

  2. mike says:

    You sir, are fucking awsome, damn i hope to one day beable to do stuff like that in 2 freakin weeks! Cant wait to see more.

  3. Very very cool, and fast dev, really great job on the execution. You should come work for BLITZ, we could put your talents to really good use – check out our blog.

  4. Yeah, big credit to Anand and his work on BumpTop. I guess I haven’t explicitly talked much about BumpTop because I thought the link was so obvious. I mean, I copied everything down to the background colors for christ sake 🙂 So yes, I am outright copying everything I saw in the BumpTop video. No question about it. I started the project after having seen that video and suddenly it occurred to me that the stars had aligned in such a way with the Flex component libraries (PaperVision and APE) so I could pretty easily do it in Flex.

    So I hope Anand doesn’t mind me getting “inspired” by his idea, don’t they say that’s the biggest form of flattery?

  5. Sweet!

    Well done. It is amazing to see this all progress so quickly. I am here in Seattle and know that friends at Adobe want to meet and support the Papervision network of talent. Cheers, Tim

  6. Chris says:

    “At last count I am using 10 different open source libraries in the TileUI project in one way or another.” Does that mean you will be releasing this as open source?

    🙂 Looks great so far.

  7. Pingback: Code is Lyric » Blog Archive » Cooles Flex/AIR Projekt

  8. Rick says:

    Great work —

    I did a little playing around with APE — but I couldn’t get RectangleParticles to rotate when they bump into each other without breaking each tile out into multiple particles and connecting them with springs, which really slows things down. Is that what you did?

  9. Pingback: dabu’s blog » Blog Archive » a new user interface - tileui prototype

  10. It’s interesting to see the last 12 days of working on this advanced application.

    However, it is not always easy to detect the last 12 days of project’s work 🙂

  11. Pingback: Would you like to know more? » Blog Archive » 3d Flash

  12. Pingback: Fabien Deshayes

  13. Pingback: Rags to Riches » Blog Archive » onAIR Camp in DC: Wrap up

  14. Pingback: ScaleNine Blog » Blog Archive » A Day at WIRED NextFest

  15. Mark says:

    Very, very cool work! I’m soooo burned out on all the usual component stuff… Are your plans to release the component to the world or sell it and try and make a few bucks? When do we get to play?!?!

  16. Pingback: computers should be less friendly » Blog Archive » Synthesizers

  17. Pingback: a canadian startup » Blog Archive » How to Get to an Interview at a Web 2.0 Startup

  18. Devo says:

    Doug,

    Can you give us a little hint on how you mapped the 3DTiles onto the ape particles? I’ve tried everything to get this working…even working “backwards” and mapping my particle engine onto a movieMaterial on a pv3d plane – still a no-go. Just a small hint would be greatly appreciated.

Comments are closed.