Continuous scrolling image thumbnail and slideshow component for Flex.

I’ve updated this to a proper component implementation that can be found here.

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 Continuous scrolling image thumbnail and slideshow component for Flex. by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.

Matt Platte

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…
Joel

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.
John

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..
Joel

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.
Pingback: Flex做的连续滚动的相册缩略图组件（附源代码） - 全文检索博客
Pingback: Flex做的连续滚动的相册缩略图组件（附源代码） - 懒猪学IT
jet chen

hello,how do add this function of Keyboard Control, Next and Previous?
jet chen

hello, this function of Keyboard Control, Next and Previous has completed?
a_liang

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!
Joel

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.
Pingback: Updated: Continuous scrolling image thumbnail and slideshow component for Flex. at building blocks
jet chen

hehe,very good! thank you , Joel !
a_liang

thanks, chen! it can work.
Joel

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.
Tim

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
Joel

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.
Paul

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 !
https://joelhooks.com/ Joel

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.
Marcin Dzaman

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
Sriks

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

Paul

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;
                }
            }
        }

Pingback: ActionScript 3.0 Image Galleries « Bauhouse
Raghavendra

Hi joel,

I just wanted to develop this type for my own website.If you can help me out please because in your example everything is taking from the server so please if u r interested mail please
abhishek

how can i use my xml with it
Pingback: Continuous scrolling image thumbnail component for Flex. | building blocks
Mikey

Can the component also be resized ?
And maybe seperately (scroller and big image)
I want to use this as a small component, maybe with some text below the big image…

Thanks!
xatriyas

I dont know why your script no error in my flex, but when i try to run in my browser too many errors…please send your script with the .XML to my mail.. thanks
Noedel

Hi,

Can this component also be used as a small control that just automatically & manually slides some images and puts the image explanation below the navigator or anywhere I want ?

Example:

——————————-
| | | | | | –> Navigator
——————————-

XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXX –> text that fits with the image (comes
from an attribute out of the XML)

And can the Navigator/Slider also be dynamic in size (for example a function or something where to put how much images will be shown?

Let me know please!

Thx!
Joel

That is an interesting use, and yes, I would think you could use this in that way. Obviously I built it to be navigation, but it could function easily as the slideshow itself.
Pingback: ImageSwap (crossfade) Flex Component | building blocks
Nick

Hi Joel,

This looks like an excellent application, but could you please explain why it won’t compile within FlashDevelop and instead generates the following warning ?

Error: Could not resolve to a component

I guess I must be missing a path setting or something somewhere.
Nick

Sorry, full compilation warning was

Error: Could not resolve components:ImageScroll to a component implementation.
https://joelhooks.com Joel Hooks

@Nick

I’ve never spent any time with Flash Develop.

ImageScroll is in com.visualempathy.slideshow.view.components
Nick

Hi Joel,

Thanks for your reply.

I finally managed to get it to compile and it now displays the full sized images but it also uses the the full sized images for the thumbnails.

Could you please explain and provide an example XML file to show how to reference the thumbnail images ?

Thanks again for your help.
Joel

https://www.visualempathy.com/ssp_director/xml_cache/images_album_145.xml?3cb3fd

here is the link to the XML that is currently loading in the slideshow.

There is a loadGalleryXML() function on ImageScroll. It probably needs to be loadGalleryXML(url:string) or something similar to be more flexible. The way I use it is completely different from the example in that I have it inside of a larger PureMVC application. I don’t actually load XML at all.
Nick

Hi Joel,

Thank you so much for that, it really helped me a lot.
https://joelhooks.com Joel Hooks

https://joelhooks.com/2008/12/06/imageswap-crossfade-flex-component/

I wrote a better component for the transition of the full size image. One of these weekends I am going to sit down and tighten up the whole thing into a decent component. It is pretty loose right now.

I’m glad I could help :>
Nick

Very cool and very slick.
Seppe

Neat! Love it!
marco

Hi Joel,
i’m analyzing your good work. I have noticed that in the swf published in this page you are able to manage the width and the height of the images. You have already helped Liang with the percentWidht and percentualHeight, but it seems to not work. Can you publish the last version of the source code, please? Otherwise, can you help me with my problem??
Thanks a lot!!

ps. Good work!
Mike

Importing the project into Flex 3 and running, I receive the error:

TypeError: Error #1010: A term is undefined and has no properties.
at com.visualempathy.slideshow.view.components::Navigator/selectFirstThumbnail()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:189]
at com.visualempathy.slideshow.view.components::Navigator/initializeThumbnails()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:123]
at com.visualempathy.slideshow.view.components::Navigator()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:101]
at com.visualempathy.slideshow.view.components::ImageScroll/galleryXmlLoaded()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\ImageScroll.mxml:140]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
Joel

@mike

Unfortunately I can’t track it down. Report back if you zero in on what is causing your error if you get it figured out.

Cheers.
Robert T

I’m trying to understand the code a bit more. Can you explain what the canvas mask is used for? I’m not seeing why it is there.
https://joelhooks.com Joel Hooks

@Robert

I pulled it out of a bigger project:

https://session.visualempathy.com
u/p == demo_client

I suspect that is a hold-over. It has been awhile and I don’t remember specifically why that is there. It could also be that I wasn’t scaling images when I first put it up. heh, sorry for being vague
ippo

@Mike
var ssp_xml_base_url:String = ‘https://www.visualempathy.com/ssp_director/xml_cache/images_album_145.xml?3cb3fd‘

replaced the original ssp_xml_base_url in ImageScroll.mxml file will working fine. nice work,thx!
https://www.androidreed.com Jerry

Great component and nice work!

Concerning with the issue of the thumbnails acting weird when there are only a few images. I replaced that swap function that was posted up earlier but the thumbnails still kind of act weird when they are only a few images. Especially the last one which flickers.

I might have an idea which might help u but I don’t know how to program this fix. I noticed that if i make the Canvas width smaller it works perfectly.If i leave it at 100% that’s when it acts up. Maybe you can fix the width according to how many images you have. So if you have 5 images the width of the canvas can be set at 85 X 5 = 425px.

Unless there is a fix for this… I hope
Ahmed Malik

Hi Joel,

Thanks for sharing it. Worked for my project with few modifications.

But right now i am stuck, is there a way we can Drag and Drop Loader Object onto a Canvas. Referring to Thumbnail.as

Dude looking to hear from you soon.
aktell

Hi there,

I just LOVE your SlideShow component BUT I’m unable to make it work at all. I do have the version with the XML file but have maiyor problems with the Php file to get that right. I’m concentrating on Image galleries at the moment and the only type which is missing is this component SlideShow. Please help me !!! regards aktell
Joel

@Ahmed Malik
You can drag and drop, I can’t remember if the basics of that code is in there or not, but I did at one point have it working.

@aktell
You are having trouble creating xml on the PHP side? This was made for use with SlideshowProDirector, which has a very nice API for that sort of thing.
Ahmed Malik

Thanks Joel, it worked