Using the Graphics API for richer Flex: The DisplayShelf Component (from my MAX talk).
November 1st, 2006
I’ve been getting a lot of requests for the source for the DisplayShelf and TiltingPane components I used as the basis for my MAX 2006 talk. So I’m making the components and source available for anyone to try out, download, hopefully learn from, and maybe even use in your own work.
Even if you didn’t attend my session, or missed out on MAX this year, go on over and take a look. It’s a good example of how to use the flash display object and graphics API to build rich content in flex, as well as how to take advantage of some of the core architectural concepts of the framwork and MXML to build more advanced components.
The demo, source browser, and zip file are available here. Take a look, then come back and leave me a comment, tell me what you think.
November 1st, 2006 at 2:15 pm
I can only think of one word to discribe this. Awesome! Looks fantastic. Great work.
November 1st, 2006 at 2:22 pm
Sweet! Thanks for the great example.
November 1st, 2006 at 2:52 pm
wooooow Really Cool!
thanks for sharing it :)
November 1st, 2006 at 3:22 pm
Nice!… one suggestion to make it more realistic, is to prevent overlap of the reflected image.
November 1st, 2006 at 3:47 pm
chirp chirp chirp ;)
Thanks again Ely…
November 1st, 2006 at 6:11 pm
Together your presentation, Joe Berkovitz, and Alex Harui were the highlights of Max2006.
Thanks Ely for all your years at Macromedia and Adobe, you continue to enable us to focus real world business problems for our users. We are just building on top of your hard work and excellent toolsets.
November 2nd, 2006 at 12:16 am
Muy Coll !!!!!!!!!!!!!!
gracias por compartirlo, es Excelente !!!! :-)
November 2nd, 2006 at 3:23 am
Thanks, wonderful example and excellent documented :)
November 2nd, 2006 at 6:40 am
Ely,
As always, your work is amazing.
This could be an appealing way to show music albums if added to Mike Chambers’ Ascension App.
Hope your little one is doing well. Thanks for posting
November 2nd, 2006 at 7:54 am
The presentation was one of the best I saw at Max, and the component is sweet.
November 2nd, 2006 at 2:33 pm
Thank you for the sample and source.
This is so cool!!
BTW, we can’t still download your presentation of “Flex Under the Hood: A Tour through the Flex Architecture” from presantation library.
When can we??
November 3rd, 2006 at 7:43 pm
HI! Your component is awesome!! Excellent.!
Can I use in a project??
One question:”or I must said I looking for help here”.
I´m having problems trying lo load the images from youtube. list videos services.
Locally works good but if I browse in a web-server like.
localhost. the bitmap effect doesn’t apply and the app throw me an error of security sandbox violation.
/**security error: Error #2122: Security sandbox violation: BitmapData.draw cannot access http://localhost/myapp.swf to youtube.com/sdfaf/the_image.jpg **/
Did you know any solution for that.?
Best! And thanks for share your knowledge.!!
November 6th, 2006 at 12:37 pm
[...] I almost forgot to post this awsome application. The people who are using the new iTunes know it als CoverFlow. Quietly Scheming posted their DisplayShelf Component with the source. Great to see these possibilities in Flex 2. [...]
November 6th, 2006 at 4:09 pm
[...] This morning I had the opportunity to present at the WidgetsLive! Conference about Flex and widgets. I showed a few examples using Ely Greenfield’s DisplayShelf component. One example pulled in images from Flickr. Check out the demo and the code. I also was thinking it would be cool to throw some YouTube videos into the DisplayShelf component. After a few minutes I was able to make it work with the exception that I couldn’t get the reflection to not flicker during video playback. I’ll need to get help from Ely to fix that, so for now I’ve disabled the real-time reflector. You can see the demo of the YouTube DisplayShelf widget and get the code. I also quickly turned one of the Display Shelf apps into an desktop widget using Apollo. I hope all the attendees enjoyed the session and for those who weren’t there, enjoy the demos! These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
November 7th, 2006 at 8:01 pm
Just something I noticed…..
Is there a way to get the reflection to show the border/matting of the image as well? Or would you have to remove the border style and add the matting to each image, using Photoshop or something?
– All your work is amazing and so inspiring! Take Care…
November 7th, 2006 at 8:22 pm
Is there any chance I can get you to set up a tutorial for implementing this? I am baffled….. ;)
November 8th, 2006 at 7:56 am
[...] Finally. I’ve been really out of the loop or I would have noticed earlier. These are, imho, an exemplar of proper Flex/as3 coding practices and an excellent resource. QuietlyScheming [...]
November 20th, 2006 at 1:44 pm
Very nice work!
Where do you set the size for the images? Is it always 400×400?…I’m cornfused!
November 22nd, 2006 at 10:53 pm
thanks
November 29th, 2006 at 7:13 am
[...] How does it work you ask. Well there is a proxy file that takes your photos and displays them on your server to avoid cross browser security issues. The Flex app uses Ely’s DisplayShelf and TiltingPane from his 2006 MAX talk to make for a really nice twisted gallery effect. [...]
December 12th, 2006 at 9:54 am
this is great, thanks a lot
just one thing:
i have an error when i slide to the last slection item
December 13th, 2006 at 3:42 am
really really really cool Ely very nice work……. no words
December 13th, 2006 at 1:04 pm
excellent! Is there a way to put the viewer in a container like Panel or Canvas? Thanks!
December 16th, 2006 at 11:29 pm
Thanks so much for sharing your code. I’m a n00b Flex developer and this is great help. I’m trying to modify your code to have it implement “true 3d” instead of the faux 3d
using Alex Uhlmann’s Distortion Effects (http://weblogs.macromedia.com/auhlmann/) but I’m having trouble trying to get your 2 libraries to talk. Apparently, the Distortion Effects stuff doesn’t like your UIComponent subclass and I’ve no clue what to do
January 3rd, 2007 at 9:50 pm
Many thanks for the code and for your insights. I listened to your talk at Max and then used the source to generate my annual Christmas video, using keyed vp6 flv for the video portion, an external xml file for timing and sync’ing and displayShelf for the slides. Cheers, Will.
January 8th, 2007 at 11:30 pm
Ely,
I think this work is extraordinary. I am trying my darndest (is this really a word??) to learn Actionscript - especially 3.0. Here’s the catch, I have no previous experience and I am the kind of person that likes to jump in head first in a big way!
This is a bad thing, because I sometimes miss out on fundamentals until I get lost, frustrated and need to buy a new monitor because I threw it off my desk in a fit of rage, of course it’s always my fault.
This is a terrible way of giving you some history before I ask you for some help or direction ;)
How can I take your DisplayShelf AS3 classes and put them to work in a Flash 9 Beta movie?? I have made an MP3 player in Flash 9 and would love to incorporate the DisplayShelf classes to navigate album art. How could I modify the classes to pull the images from an XML file, and then call it to the stage.
If you get me to that point, I can struggle through the rest and learn, learn, learn. I am currently trying my “darndest” to figure it out right now with no luck yet.
Any help would be appreciated. Guys like you don’t get paid enough for your contributions to society. Do you accept PayPal donations??
-Les
January 9th, 2007 at 10:57 am
It’s great but there’s a little bug: the perpective of images inside the covers is wrong (use any geometrical picture as source and you’ll see).
Any idea about how to fix it?
January 23rd, 2007 at 2:07 am
Awesome job Ely!
On a Side note, the reason for the out of bounds error in the sample is that the max property on the hslider should be set to the array length - 1, instead of the array length. (Judging by your work, I’m sure you know this :) but it’ll answer one of the other comments posted.)
January 28th, 2007 at 12:44 pm
just noticed a little bug: (with a fix :)
The selection drag bar is maxed out at the length of your array. You have to subtract one, or you get a out of bounds.
Also, in my app, i am using this component in a tabnavigator, and the sides move over the border of the container. When i resize the window, under a certain size it “snaps” back in?
Any idea what this could be?
cheers
February 15th, 2007 at 6:02 am
I guess the “off by one” error in the selection slider was there to inspire us to look at the source code. :-) I am trying to figure out how to get a larger photo to scale into a reasonable size. Any ideas?
February 16th, 2007 at 12:28 pm
This is really neat, and very well done!
I’d be particularly interested in hearing how the perspective distort is being done. After staring at the code, it looks like you are only using a transform matrix, somehow. Any insight into that portion of the code?
February 21st, 2007 at 2:52 am
Awsome!!!
March 2nd, 2007 at 1:32 pm
Could you post a .fla or an example of how to implement these classes in Flash? This is EXACTLY what I was looking for for my next project, but I don’t quite grasp how to get started.
Thanks!
B
March 16th, 2007 at 2:19 am
Looks great!
Would you know if this works with dynamicly using PHP/MYSQL? where an images could be added and loaded with say a 256kb preload buffer as the user navigates? im just trying to find out how we would get this working with searching and navigating similar to a search results page.
March 19th, 2007 at 1:27 pm
Hey that script is cool as u know from all the other comments lol Is there anyway to make the script so that there is just a swf that is linked to images to view so that the images can be changed easy? Thanx
March 19th, 2007 at 9:35 pm
Hey
Thanks a ton for putting the source out there for people like to learn from. Truly appreciated.
March 28th, 2007 at 10:10 am
I’m looking to build a version of your display shelf in flash mx. Is that possible? You say flex is basically the same as flash…Is that true for this application? Have any source code?
March 28th, 2007 at 1:52 pm
I ran into problems with the TiltingPane children going over the border of of the DisplayShelf component and sitting above other components in my app. In a rush to creat a fix, I added the following code to the TiltingPane class :
public function TiltingPane()
{
super();
this.addEventListener(”move”, onMove);
}
I am sure there is a more elegant approach, but this did the trick.
March 30th, 2007 at 5:22 am
Hi!
I just tried to use SANDY to properly distort the image instead of just sheering it. But I couldn’t get it to work. I had strange import errors for the packages and it somehow seemed like SANDY is not importable for Flex.
Do you have any other idea how I could properly distort the image?
April 4th, 2007 at 9:43 am
Can anybody help us newbies to incroporate this in a Flash movie !!! Please somebody!
Thanks !
April 5th, 2007 at 5:11 pm
Thank you for posting this project - it looks great and is exactly what I’ve been thinking about doing for a personal project. I have never used Flex before and am not sure where to begin or how to incorporate it into my Flash projects. Is it possible to load this project externally from a published swf directly into another swf?
Thanks!
April 11th, 2007 at 5:15 am
hi!
does anybody know how to add videos (swf or flv) to this flex-application instead of images? if it s possible? any ideas? that would be great!!! thanks a lot!
April 14th, 2007 at 8:17 am
daniel:
Just change the file extensions in the img/photos400/ to end in .swf.
Now, can you tell me how to open this project in Flex?
April 15th, 2007 at 12:28 am
Hi,
i’m new to flex. How can i laod that stuff into flex and create a swf with own images please?
April 21st, 2007 at 9:43 am
What an awesome introduction to Flex controls this was exactly what I have been looking for and I have learnt a lot working through this source - thank you.
I am however having a little bit of problem trying to load another class within TiltingPane apart from Image.
At the moment I am creating a class that extends UIComponent and implements IFactory (returning an instance of itself) as well as IDataRenderer to provide an access point for the data.
The class works fine when embedded within a standard MXML page but when I apply it to the TiltingPane through the itemRenderer mxml property. I find the custom objects exists and are tracing but they dont appear on the screen.
Any ideas??
April 27th, 2007 at 10:37 am
I looked at display shelf with covetous eyes.
Darned impressive work. Love it totally.
I was thinking about being able to do something similar in a slightly different context, and wanted to get some wisdom of the crowds on it.
Suppose that instead of a photo album of jpgs what I wanted to model was a good old fashioned “Dear Diary” style spiral notebook. When a given page was front and centered, the user could treat it as a text area and when they hit the save button or as they transitioned between pages, they got the cover flow effect as well.
The visual effect would be like thumbing through the pages of a magazine, and it might be a really handy visual metaphor for a blog growing over time. Instead of a long linear trail going down page from most recent article to older, the user would experience the passage of time throughout the course of the blog’s life by “flipping through the pages”
I think the technology hurdle is that in the cover flow demo you created, the child component has to be an image type of some sort, and that in order to have even a remote chance of pulling this off, We would have to have some method of converting the text area element into an image type for visual representation.
I am just a nOOb in working with FleX, but even a dummy such as myself can see thaat it’s totally the future of Rich Internet Applications.
If you or some of your readers could suggest a method for doing what I am suggesting, it would be a really great Cheese Shop contribution.
Cheers,
Dana Moore
Division Scientist
BBN Technologies
W: 703-284-1228
YM: dana_virtual
GMail: dana.virtual at gmail dot com
May 6th, 2007 at 10:10 pm
Hey back again,
Do you provide a service where you can help me customise this to some specifications and create the hooks for images to preload and for functions etc through PHP/MySQL. Do you provide this service or do you know of somone who can help me out?
Thankyou.
May 24th, 2007 at 12:52 pm
hi,
I like this animation, I noticed the picture seems to scale up and crop a little when it’s tweened.
Thanks,
Patrick
May 27th, 2007 at 10:00 pm
hello.
First off,k i would just like to say that this design is STUNNING. I am, however, totally green as grass when it comes to flex. i just copied/pasted the codes into flex and i keep getting this error: “1046: Type was not found or was not a compile-time constant: DisplayShelf.” Any help or tips would be greatly appreciated!
June 6th, 2007 at 8:06 am
I modified the DisplayShelf control so that you can turn on and off the reflection bitmap with the
reflectionboolean property.Download the updated code here:
http://www.houseofinkwells.com/flex/DisplayShelf.zip
NOTE: ZIP only includes the two AS files needed for the control. The sample code still works with the new code, you just now have the ability to turn on/off the reflection with:
DisplayShelfObject.reflection = “true|false”
happy coding!
June 13th, 2007 at 7:05 am
Ely,
I love the DisplayShelf. Question? How can you constrain the “background” photos so they stay “inside” a container? I’m placing this widget inside a TabNavigator with allot of slides. The background slides extend past the TabNavigator. I want these to remain inside the container either some hidden or compressed?
Can this be done?
June 13th, 2007 at 9:46 pm
Yes!My English not well.But I wan to say that,the work is the numberone!Great!Thank you.I want to use this component in my application.Maybe I can remove sliders.I read the description,but I couldn’t understsnd everything,because my English not well.Can I use this component?good luck!..
June 24th, 2007 at 8:01 am
I would like to use your component for a portfolio gallery. I am not familar with mxml. Can you give me a quick tutorial on how to customize your component. I really appreciate it. I have been trying to figure it out for a few days now. Anything you can do to help, I would greatly appreciate it. I will credit your source when I upload my portfolio.
Thanks in advance
June 27th, 2007 at 11:25 am
The documentation/source comments are fantastic. Learning alot.
June 29th, 2007 at 7:39 am
Does anyone know why it might be ignoring updates to an Array collection? (Created by and updated using an AS loop).
July 3rd, 2007 at 12:29 pm
Hello,
Great component you got there.
I was wondering, how to add an extra variable, like a caption, below the picture in the middle. Then added to that, make the picture in the middle clickable so I can lauch something else from it.
Off course this data should come from xml or a db.
Thanks in advance.
Kurt
July 4th, 2007 at 7:01 am
Sweet! Thanks for the great example.
^^ i have on question
how can i use under canvas or titlewindow
need example, how can i use it
please.~ ^^
July 26th, 2007 at 9:13 pm
Cool stuff. I have been having a number of issues though. I’m trying to constrain this component to a particular part of my UI, but it keeps rendering spread across the width of the application. Anybody experimented with using this in like a HDividedBox or similar?
August 5th, 2007 at 10:43 pm
This app and tutorial is awesome. You could go a step further and try to emulate something similar to http://www.mstudio.com. I have been trying to get that app together for a while and seem to run into a wall at each stage!
August 10th, 2007 at 10:34 am
This surely is a great flex component! But as some people stated misses some functionality like resizing images.
I extended the component with this functionality. It can be found at: http://dev.krabbelen.com/
August 11th, 2007 at 7:10 pm
hi this thing is great but how do i make it so you can click on the images so they send you to anothe page.
August 12th, 2007 at 1:11 pm
I turned DisplayShelf into FlickrShow, a slideshow for flickr photos. You can see the result here: http://1stein.org/2007/08/12/flickrflow/
August 20th, 2007 at 3:00 am
This is a cool Flex app and the ideas behind it are super, thanks for your hard work and sharing it with all of us.
I need a simple assistance I am constantly getting this error when trying to run this app as a Flex application in Flex builder, any ideas?
SecurityError: Error #2148: SWF file file:///E:/flex 2/Flex Project/DisplayShelf/bin/Final.swf cannot access local resource file:///E:/flex 2/Flex Project/DisplayShelf/bin/img/photos400/photo02.jpg. Only local-with-filesystem and trusted local SWF files may access local resources.
at flash.display::BitmapData/draw()
at TiltingPane/::createReflectionBitmap()
at TiltingPane/TiltingPane::updateDisplayList()
at mx.core::UIComponent/validateDisplayList()
at mx.managers::LayoutManager/::validateDisplayList()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
at mx.core::UIComponent/::callLaterDispatcher()
your suppoer is highly appreciated.
September 15th, 2007 at 1:41 pm
Hello,
I searched the site for an email address to contact you, but i couldn’t find any. So i will just contact you through these comments.
I have been recently contracted to modify the DisplayShelf component and the client has agreed to share the modifications. So in the spirit of open source, i will point you to the modifications if you would like to make use of them.
-The project page is at http://www.codedemigod.com/my-projects/display_shelf
-And a direct link to the source code is at http://www.codedemigod.com/projects/modifieddisplayshelf.tar.bz2
If you’d like a copy of the bzr repo, or a bundle of the modifications, let me know and i will provide that.
Regards,
Alaa Salman
September 23rd, 2007 at 11:21 pm
Bug: if you move the selection-slider all the way to the right the movie will hang, the sliders can be moved but nothing happens.
September 24th, 2007 at 7:24 am
hi, after fully reviewing your coverflow experiment I’m sorry to say it but it just failed the coverflow requirements. first of all the the example stalls due to a known programming error which you dont seem to worry about. but what is even worse is your coverflow is not “real” at all, the images are not being distored. the coverflow effect is really bad because your version just manipulates the frame around the image and cuts parts of the image off, thus deleting information, which renders the images behind the current images into something different - but definitely not a depiction of a cover! if you want to see a good example of coverflow done with flash please check this out: http://www.weberdesignlabs.com/blog/?p=10 there are some errors but the approach appears to be more focused than the flex version.
September 24th, 2007 at 7:26 am
hi, after fully reviewing your coverflow experiment I’m sorry to say it but your coverflow experiment jut failed. what’s really bad is your coverflow effect isn’t “real” at all, the images are not being distorted. your version just manipulates the frame around the image and cuts parts of the image off, thus deleting information, which renders the images behind the current image into something different - but definitely not a depiction of a cover! if you want to see a good example of coverflow done with flash please check this out: http://www.weberdesignlabs.com/blog/?p=10 there are some errors but the approach appears to be more focused than the flex version.
September 25th, 2007 at 5:50 am
Hello,
I want add alpha parameter in Displayshelf.
For example :
The selected index > alpha = 1
The adjacent of selected index > alpha = 0.8
The adjacent of adjacent > alpha = 0.4
I would be calculated with distanceFromItemSelected
More the element is far from the selected element, more the value alpha decreases
Thanks for your help
Brice Gervais
September 28th, 2007 at 11:45 am
how to right compile ?
i use flex builder2..create basic project and compile *.as & *.mxml files in dirrectory, and final.swf work only at project dirrectory =( i need to copy a galler to CD..how i can ? how to compile? please to e-mail if yoг can
and question how a create no basic flex project..
flex data service project i cant create, because flexbuilder need a root folder patch..and “The root folder must contain a WEB-INF/flex folder” where this folder ? or trouble not in this ?
beforehand thanks
September 28th, 2007 at 11:54 pm
SecurityError: Error #2148: SWF file file:///E|/1/displayshelf/bin/Final.swf cannot access local resource file:///E|/1/displayshelf/bin/img/photos400/photo01.jpg. Only local-with-filesystem and trusted local SWF files may access local resources.
this error if “final.swf” not in project folder =(
October 6th, 2007 at 5:19 pm
Off by one error: a zero-offset range terminates at length-1, not length. Thus, the maximum value for the position slider is incorrect, which when played with causes application hang.
Also, this would look a lot more realistic if the borders were in the reflection.
October 9th, 2007 at 11:35 pm
DisplayShelf + Flickr support + Picasa support = guckn.com
The beta version is online now. Go to Guckn.com and watch random Flickr photos. Or watch your own Picasa or Flickr albums. The integrated help (click the “?”) will tell you how. It couldn’t be simpler!
December 3rd, 2007 at 9:01 am
Hi,
very nice piece. Anyway I wasn’t able to change the background color of the shelf itself. any idea?
January 3rd, 2008 at 4:29 pm
There seems to be quite some talk about this component. I myself have been hacking at it with little success. You really need to be a hard core flex coder to get your head around some of the concepts and how FLASH actually creates and destroys objects etc. I made a few attempts to add functionality but keep bumping into erros I don’t understand.
Its too bad Ely does not appear to look back. A man with his telent, I am sure everyone wants a bit of him.
Still, it wouldn;t be a bad idea if a group of hard core Flex coders, and I know your reading this, took this into an open source project and added all the requested features.
I myslef have been wanting,
1. size control on loaded JPG, Ie max or min for with or height.
2. Distance between images control.
3. dynamic creation/deletion of items. (I have one pet project where I load many 1000’s of items into a list. Kills the app and the CPU.)
4. Better sizing crontol and placement.
5. Alpha fade off on images each side of the main one.
6. making it into a loadable component for the Flash lovers out there.
7. better 3D effect.
Thats a good start hay.
James
February 10th, 2008 at 10:10 am
The coolest thing I’ve seen yet!!