Continuous scrolling image thumbnail and slideshow component for Flex. at building blocks

Continuous scrolling image thumbnail and slideshow component for Flex.

Published on May 11, 2008 in actionscript, components and flex.

I've been working on improvements for this thumbnail/slideshow component. The way the continuous scroll flows is very nice. It provides a very fluid feel. I have it reading XML from SlideShowPro director. SSPD simply gives a structure of albums and images, so the component should work from essentially any XML source as long as it follows the same schema:

<gallery>
     <album id="0" description="DESCRIPTION" title="TITLE" tn="PATH" lgpath="PATH" tnpath="PATH">
          <img src="FILENAME" />
          ...
     </album>
</gallery>

There is still a good bit of work to do. Right now the slideshow is coupled with the thumbnail container. I think that should be seperated, because I can see various uses for thumbnails outside of a slideshow. It needs style and event metadata so that it will function as a proper Flex component. I am also going to roll it into mediated PureMVC components for inclusion in VE:Session.

The source is here.

21 Responses to “Continuous scrolling image thumbnail and slideshow component for Flex.”

Feed for this Entry Trackback Address

1 Matt Platte
May 11th, 2008 at 8:07 am

I’m kinda interested in the Flex component but I am spellbound by the photos. I watched the show once and will probably go through the entire set again, after posting this. If they’re your photos, perhaps you should forget about Flex and take more pictures…
2 Joel
May 11th, 2008 at 9:35 am

Matt,

Thanks! The photos are from our photography studio. I am developing a client ordering/viewing/management application. This is a component of a broader application.
3 John
May 11th, 2008 at 10:15 am

nice job..

but i can’t find xml file. where is it. i downloaded source but it oesn’t work. ı have an error about TweenLite. please help..
4 Joel
May 11th, 2008 at 10:32 am

John,

I didn’t include the TweenLite classes. Let me update it. The XML is loaded dynamically from our gallery management software, SlideShowPro Director. Unfortunately, the developer of SSPD has removed this capability from the current version, but I am using an oleder version to achieve this. You can still hack the PHP of the current version, but I’m sure that violates his license. At some point I will be creating gallery management components as well. For now I suggest writing your own XML following the schema structure I outlined above.

Thumbnails need to be 85×85. It is hard coded. I plan on making this variable in the future.
5 jet chen
May 17th, 2008 at 6:03 am

hello,how do add this function of Keyboard Control, Next and Previous?
6 jet chen
May 21st, 2008 at 10:06 am

hello, this function of Keyboard Control, Next and Previous has completed?
7 a_liang
May 22nd, 2008 at 8:04 pm

hello, thanks for your component, it is great . i creat

well, slideshow working
but there are large pictures that 800×600 . it can work. but can not display whole of the picture. please help me!
8 Joel
May 24th, 2008 at 10:53 am

I’ve updated this component to utilize keypress (left and right) for navigation.

@a_liang -> If you set the image in changeImage() to:

image.percentWidth = 100; image.percentHeight = 100;

it should handle images of various sizes.
9 jet chen
May 26th, 2008 at 10:54 pm

hehe,very good! thank you , Joel !
10 a_liang
May 27th, 2008 at 5:16 am

thanks, chen! it can work.
11 Joel
May 27th, 2008 at 6:57 pm

I hope it works out for you guys. Let me know if you’d like to see any additional features. It works now for my needs, but I am happy to update for others as time permits.
12 Tim
Jun 4th, 2008 at 5:44 pm

Hello Joel,

This component is freaking awesome!!! I’ve spent the past few hours today, and various other days trying to get it to work. I am using Flex 2. I created a new project with my canvas, added the component and class files keep the same directory structure of your component and assets.

Am I forgetting something?

I get Error:1046, Type was not found or was not a compile time contstant. This is in the ImageScroll.mxml file. These 4 errors all are on the same pieces of code below.

Thanks for any help!

———————————- [Embed(source=”assets/control_play_blue.png”)]
[Bindable]
private var playOnImgCls:Class

[Embed(source=”assets/control_play.png”)]
[Bindable]
private var playOffImgCls:Class

[Embed(source=”assets/control_stop_blue.png”)]
[Bindable]
private var stopOnImgCls:Class

[Embed(source=”assets/control_stop.png”)]
[Bindable]
private var stopOffImgCls:Class
13 Joel
Jun 4th, 2008 at 7:33 pm

Those files are the images I use for the slideshow buttons. They need to be in ../src/assets.

Alternatively you could remove those embeds and delete the buttons.
14 Paul
Jun 9th, 2008 at 4:58 pm

I tried plugging in the application and it looks great with the default image set, but for some reason when I have only a few images (I tried 1-3 images), the navigator goes crazy. The images continually push towards the right real fast and re-loop on the left to push right over again. Is there a certain image limit that must be maintained? Thanks :)!
15 Joel
Jun 9th, 2008 at 5:02 pm

Hi Paul,

I noticed this too. It didn’t come up in my tests because my image sets are generally big.

I’m working on a real solution for this, right now it’s just a hack that I have for my use. I will let you know.
16 Marcin Dzaman
Jun 13th, 2008 at 5:51 pm

Its great work I have small question if I want to load different gallery in same place how to do that. I want to make different galleries in different states or after clicking buttons I don’t know how to reset data so I have thumbnails above thumbnails those are transparent so its looks weird Thank you for help
17 Sriks
Jun 15th, 2008 at 11:50 pm

I’m working on a real solution for this, right now it’s just a hack that I have for my use. I will let you know.

Hi Joel, Paul

Do you guys have any fix for this issue? My application has very few images to show.

Thanks
Sriks

18 Paul

Jun 16th, 2008 at 12:12 pm

Hi Sriks,

This is what Joel sent me via email for a fix to that issue. Message copied and pasted below:

This is my fix for this. I’m not very happy with how it functions with under 20 or so images, so I will be updating with a real fix at some point in the near future. I will let you know.

        /**
         * Shifts the images to keep the continuous scroll continuous
         * @private
         */
        private function swap():void {
            alignThumbnails();
            var left:Thumbnail = _navArray[0];
            var right:Thumbnail = _navArray[_navArray.length-1];

            for (var i:int = 0; i<_navarray .length; i++) {

                if (left.x<0-left.width && right != selectedItem) {
                    // moves clips from first to last
                    _navArray.push(_navArray.shift());
                    left.x = right.x+right.width;
                }

                if (right.x>totalWidth-right.width && right != selectedItem) {
                    // moves clips from last to first
                    _navArray.unshift(_navArray.pop());
                    right.x = left.x-right.width;
                }
            }
        }

Search

Offloading images through a PHP webservice is painfully slow. There has to be a better way. Hopefully blazeds and java fit in the solution. 1 week ago
Got BlazeDS running on Amazon's ec2. Linux still baffles me, but I'm happy with the result. Now to figure out how to apply it. 1 week ago
@Lethain You made my Reddit front page today 1 week ago
VE:Session is coming along nicely. Still got a lot of work to do. http://joelhooks.com/session/ user/pass is demo_client 2 weeks ago
@Lethain The part that is 'sticking' me is managing image uploads and pushing the resulting files around on the server. 3 weeks ago
More updates...

Posting tweet...

building blocks