Building Blocks you should not target low coupling, instead target appropriate coupling – Mike Labriola (@mlabriola)

I am trying to move the selected image by 1 position instead of moving it to the center of navigator. I am not sure how to do it? Please help me!

Hi,

I have created the xml locally and stored under assets directory but when I run the application I get :
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
When I close the debug message photos work fine but it doesn't work on different machines at all.

Any idea how can I solve the problem?


Thanks.

Hi, Firstly great application looks real good, I loved it so much I wanted to have a slide show in my website too, I Downloaded the source code and the project created nicely.
It compiles and everything is good. I am using Flex Builder 3.

I get an error when I try to run the VESlideshow on my PC I get a windows pop up message which states the following

"File not found: file:/C:/Documents%20and%20Settings/shubht/My%20Documents/Flex%20Builder%203/VESlideshow/bin-debug/VESlideshow.html"

I dont know how this file is generated it was not in the zip file I downloaded.
Any pointers would be great
Thanks
Turlock

how can we show title of image below image,
could we do same vertically image gallery
:)

Great Component!
Couple of questions though, is it possible to add a white border to each thumbnail image and fix the width of the thumbnail, regardless of the actually image height?

Hi Joel,
Thanks for the component and its a great work!!
I have created a link bar with different galleries and based on the gallery selected, I am trying to load the thumbnail. It works fine except for one problem. I am not able to reset the thumbnail images. When I select a different gallery, the thumbnail is getting updated with new images but at the background the previous thumbnail images appears transparent. Can you please help me to fix this issue.
Thanks a lot.
-Shoba c

I will look into this. The demo gallery wasn't written with multiple
galleries in mind, but my production implementation supports it so I
will see if I can fix it easily and put a new version up on Github.

Cheers

Thank you very much Joel.

I think, every time I load a new gallery, a new instance of Navigator component is being created. So I think I have to make sure only one instance of Navigator is created and update it with the new gallery. I am working on it and will update you if I am able to fix it.

Once again,Thanks a lot!!!

I was trying to implement singleton pattern using static initializers to create just one instance of Navigator and using the single instance I was trying to initialize the thumbnails for different galleries but it doesn't seem to work.

I have fixed this problem. All we have to do is when loadGalleryXML (in Imagescroll.mxml) is called I check if nav is null.If its not null then I remove the nav and make it null.

public function loadGalleryXML(xml_base_url:String):void
{
if(nav!=null){
canv.removeChild(nav);
nav=null;
}
var ssp_xml_base_url:String = xml_base_url;
var myXMLURL:URLRequest = new URLRequest(ssp_xml_base_url);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", galleryXmlLoaded);
//addEventListener(Navigator.INIT_COMPLETE, onNavInit);
}

Thank you so much Shoba. I really wanted to get to this, but didn't
have the time. I will apply your patch to the project. Cheers.

Hi there,
This looks great. Any chance that a url can be added to the large image, say, to take you to another site?
Thanks

Much thanks to you for providing such a useful function, I do a lot of photography and I was seeking out an effective solution for showcasing it using flex.

Has anyone solved the flicker when using only a few images between 3-9 images...I changed the "swap" function and that fixed the constant movement after loadup...But now the last image flickers for about 3 seconds then disappears after changing images...I noticed the comment above that talks about this problem...Is there a fix out there?

I am getting a java.lang.NullPointerException any ideas? I am guessing it is not finding the images. I am using Flex 3.0. Thanks George

@Mike - at some point I really want to get in and make this a proper component, but it is a time issue and it works great in my application so the motivation is in short supply ;)

The image display portion is just for representation of what it can do. Without looking at the code I'd say I put a border on the actual Image components just to offset it from the background a bit. Hopefully it is easy to discover and change for your needs :>

This is great. It helps me out quite a bit as a starting point. The are a few problems I see with this code (or it could just be me). I'm trying to fix it all myself, but wanted to point them out in case you were interested:

1) change the background from black to white and you see the canvases. I'm not sure yet why each picture has a smaller frame around it which is not visible when it is black.

2) If I try to restrict this to a boundary like a canvas which is 800 wide, it still renders the images outside of that region when a thumbnail is selected. Again, not sure why, but trying to fix this.

Any plans on posting an update version of this? If not, that's OK, was just curious to see your own progress on this and again, thanks for posting this to begin with!

Thanks Joel, it worked :)

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

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

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.

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 :(

I found a simple fix for this last thumbnail image flickering issue. We calculate the total width of the thumbnails by adding the individual thumbnail widths. This we do it in initializeThumbnails() method in Navigator.as class. We have to increase the total width so that if there are 5 images, the total width should be equal to 6 images. SO at the end of for loop, I have included the following.


for each( var image:ImageVO in album.images )
{
...
...
totalWidth+=navItem.width;
count = count + 1;
}
totalWidth+=navItem.width; // this is the additional line to be added to fix the last
thumbnail flickering issue.


Hope it helps.

Awesome Shoba. I committed it to the repository:

http://github.com/joelhooks/Continuous-Scrolling-Slideshow-/commit/e1ec8edc8cb6dae3f1ac80e8f9f46a7604065ca1

@Mike
var ssp_xml_base_url:String = 'http://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!

@Robert

I pulled it out of a bigger project:

http://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 ;)

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.

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

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()

This was because the source was pointed at an XML datasource that was invalid. It is proper in the current version of the source.

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!

Neat! Love it!

Very cool and very slick.

http://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 :>

Hi Joel,

Thank you so much for that, it really helped me a lot.

http://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.

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.

@Nick

I've never spent any time with Flash Develop.

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

Sorry, full compilation warning was

Error: Could not resolve components:ImageScroll to a component implementation.

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.

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.

Thanks mate this is very nice! I'm going to extend it a bit, and if it turns out to be decent I will shoot you back the source so you can compile and check it out. Thanks again!

I'd love to see what you can improve upon, I know there is a lot of room for improvement. Fork it on Github, that way any beneficial modifications can be moved into the master repository. Cheers.

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!

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

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!

how can i use my xml with it

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

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;

                }

            }

        }

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

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

Hi Marcin,
I am having this problem as well. When I load the thumbnail with different galleries, they do not refresh properly (the old thumbnails remain transparent behind the new thumbnail images).

Please let me know how u fixed this problem.

Thanks a lot.

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.

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 :)!

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.

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

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.

thanks, chen! it can work.

hehe,very good! thank you , 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.

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











well, slideshow working
but there are large pictures that 800x600 . it can work. but can not display whole of the picture. please help me!

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

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

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 85x85. It is hard coded. I plan on making this variable in the future.

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

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.

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... ;)