[page]: http://www.quietlyscheming.com/blog/components/landscape-zoomer/

A whole bunch of beautifully built flash content recently inspired me to think a bit about how zoom and scale could be used in useful interface patterns. As a relatively new tool for most developers, I think we’re only just starting to scratch the surface of how best to take advantage of it.

As an experiement, I tried to imagine what a component that made zoomable interfaces drop dead easy to create in flex would look like.

The result — the Landscape component — is [posted for your enjoyment here.][page].

Go take a look, then come back here with any comments and feedback.

30 Responses to “Flex Component Sample: Landscape Zoomer”

  1. deng Says:

    very useful! thanks very much!

  2. jay araujo Says:

    Ely, I simply love your components.
    These actually remind us that all you demostrate here can actually be made and delivered TODAY with Flash 8 , and the only big the diference ( other than authoring methodology, there is ) would be that the Flash 8 player doesn’t render the animation as smoothly.

  3. JabbyPanda Says:

    I am watching you!
    I like the innovation ideas in UI that you implement in Flex.

    Flex UI framework is shipped with Datagrid and Tree components which are valuable for data analysts :), no doubt.

    But DataGrid and Tree are not sexy, and animation effects more hurt then help when applied towards those components.

    You had implemented a new bunch of components in AS3 where animation effects help! Great and new approach and let’s see what end-users will say about this innovation.

  4. Tariq Ahmed Says:

    Ely, you’re a true asset to the community.

  5. Ely Greenfield Says:

    Thanks for the kind words, everyone.

    Jay, you’re absolutely right. Most of the component’s I’ve posted could be replicated using AS2 and the features found in Flash Player 8. Flex, in my mind, makes it much easier to both build and use full featured components, but the core functionality is available in the player (there’s one or two that I think use FP9 specific features).

  6. Michael Schmalle Says:

    Ely,

    Do I get to meet you next week?

    Man you are inspirational and I havn’t even got back to my components.

    If you are going to be there I would love to get a minute of your time to hash some ideas I have.

    Kepp it up leader, you just get us other component devs running right behind! That is what a good leader does, inspires and you are doing it to a T!~~

    Peace, Mike

  7. Michael Schmalle Says:

    Ely,

    My son said you should have called the component the;

    (A) graph Zoomer from Jax3 ;-) PS3 (you fly around on it, hoover)

    I laughed so hard! He is only 7!

    Peace, Mike

    Peace, Mike

  8. teo.flex2.components.blog() » Blog Archive » Flex2 :: Ely the majician ::Zoomer Says:

    [...] Ely’s Landscape Zoomer [...]

  9. Waldo Smeets Says:

    Ely, isn’t qs.utils.InstanceCache missing from the source? FlexBuilder tells me it’s missing this class.

  10. Ely Greenfield Says:

    Whoops! I’ll update it, but in the meantime I’ve got all the source I published checked into a subversion repository that you can browse at http://www.quietlyscheming.com/svn/public/ . You can grab any missing files from there.

  11. Ben Lucyk Says:

    Wow. Very, very smooth. Good work.

  12. Dan Sorensen Says:

    The Constitution application is really cool. :-) It could use a method of manually panning across the image, but that shouldn’t be too hard to add.

    Is this available for modification and use? I happen to be learning Flex, and working with a grant program based on the History of the Constitution so this is really exciting.

    The flickr app is works pretty well too. Overall, good work. :-)

  13. Dan Sorensen Says:

    note, I meant, ‘Declaration app’, but I’d like to use it for the Constitution.

  14. Guillermo Pared Says:

    Muy buenos, gracias por compartir tus proyectos de Flex, son una buena base para aprender y desarrollarse :-)

  15. gnat Says:

    isnt most of this inaccessible to people.. ?
    i mean getting a plugin for each website

  16. Ash Says:

    Hi…this looks great. I think I have downloaded all the needed files..but getting “1118: Implicit coercion of a value with static type mx.core:UIComponent to a possibly unrelated type LightSlide.” in LightTable_code.as at line 7. Any suggestion?

    Thank you

  17. Ash Says:

    sorry..that should be line 77:

    var target:LightSlide = (targetObj as UIComponent);

  18. Ely Greenfield Says:

    Ah, yeah, sorry about that. That line should read:

    var target:LightSlide = (targetObj as LightSlide);

    Not sure why the code as posted is incorrect, but I’m on sabbatical right now, so I’m trying to stay away from the computer ;)

  19. Ash Says:

    Thanks, Ely. No worries. Enjoy your sabbatical.

  20. u.mat Says:

    u.mat

  21. Cody K. Says:

    Thanks… by the way your new baby is beautiful, and makes my llife much easier…

  22. thijs Says:

    Great stuff! Wanted to let you know that Flickr changed the location of their API so the app doesn’t work anymore.. you can find more info on api.flickr.com

  23. wepe Says:

    hello
    your landscape zoomer is absolutely fantastic and i like to experiment with it. however im complete greenhorn in flex and i cant figure it out, how to load your source files into flex. please can you email me short description how to do it? ill be gratefull for that. thank you…

  24. Adam Says:

    I’m getting an error when trying to compile this – ‘could not find source for class Hilight’, can anyone help me out?

  25. Phil Says:

    Hi Ely. Very useful component indeed. Have you ever experienced any redraw problems though? I’m trying to implement Landscape with some item renderers that have text in them but only some of my items get rendered and i see strange behaviour on the screen. i’ve narrowed it down to a Label component in the itemRenderer, but I can’t figure out why this would be a problem. Any ideas? (can put together a test file if you want). Thanks – phil

  26. c.moore Says:

    Sorry to bother Ely, but would this work with latest Flex 3 Beta?

    I am looking to make it touch enabled :)

  27. Jane Says:

    Not a web developer but I LOVE your site. My profession is trying to make complicated information easily understandable to public policy-makers (currently, for the U.S. Congress), primarily through writing and simple charts on paper. With the passive agreement of my senior managers, I’m looking for better use of visualization techniques, including using the web interactively. Your site is a wonderful window into what we COULD be doing (but aren’t). I’m not even sure where to begin convincing our graphics and communications people to support innovation. Please keep it up!

  28. Rafael Says:

    Hey great webSite….. I got some problems with landScape with the search and stuff 1st example I got no qs.controls.BitMapTile on line 8 at lightSlide_code.as…. and I cannot run the app because of that error… do you have any idea??? I’m working on flex 3 beta thanks…. great work!!!!

  29. Larry Says:

    Hi Ely:
    First let me say excuse my ignorance. I am so impressed with this site and would very much like to use some of these components in my own Flex 2 projects. Again, I like this one and for the life of me cannot see how to use it. Can you send me a small flex mxml application file that calls this component? I would be eternally grateful. Keep up the good work.
    Larry

  30. Larry Says:

    Ely:

    Thank you so very much. These missing components were just what I needed to make the landscape application work on my development machine inside Flex builder 2 on a Windows xp machine. However, I have IIS installed on this machine and when I created a test website on this machine the application page looks like it loads, that is the main screen is displayed but nothing else happens. I don’t think the Httpservice is connecting to flickr. So I thought, let me upload the application to one of my hosting accounts. Same problem, the page loads but it just sits there and does nothing. I beleived that all that was needed for the app to work was to upload the .html and .swf files. Is there something I’m missig when delpoying a flex 2 app? I want to use more of your components but this problem has gotten by me and I can’t even find any mention of this in any of the many books I have on Flex2. Any help you can provide would again be greatly apprecieated.

    Thanks

    Larry

Leave a Reply