These forums are provided for community interactions only. For official support please submit a support ticket.
You are not logged in.
Hello, I am having some difficulties and wonder if someone could help. I am new to thumbgrid and having some problems getting thumbgrid 2 and slide show pro to talk to each other. I read through the documentation, but find it a bit thin, plus I'm new to AS 3.0.
What I'm trying to accomplish is an implementation very similar to the user example Hello Delta (http://hellodelta.net/portfolio.htm). I'd like to start with the gallery, then on click move to the thumbgrid. Another click opens that photo, and another click goes back to the thumbgrid. So far I don't even know where to begin. Can anyone point me in the direction of some sample code?
Thanks a lot!
Offline
When you get SlideshowPro and Thumbgrid on the stage, set Thumbgrid's options as follows:
LAYOUT
Startup screen: Gallery
SCREEN: GALLERY
Click action: Display Album
This makes it so that Thumbgrid starts with the gallery screen, and switches to album view when a user clicks a gallery thumbnail. You can customize everything else to your heart's delight.
To make it disappear, you need to create a function that detects when an image has been requested, and subsequently makes the Thumbgrid disappear.
function onSlideShowData(event:SSPDataEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);
function onImageLoading(event:SSPPreloadEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPPreloadEvent.PRELOAD_INIT, onImageLoading);
This makes it so that when an image is requested, or when an image begins loading, Thumbgrid will instantly become transparent (I would suggest adding a tween so it looks a little nicer), and the mouseEnabled and mouseChildren will make it so that Thumbgrid doesn't respond to the mouse anymore (otherwise, you won't be able to click "through" it to the slideshow).
To bring it back, set the following options in SlideshowPro:
CONTENT AREA
Interactivity: Action Area (or "Action Area and Navigation" if you want to be able to move from photo to photo by clicking the right or left sides)
Action: Event
This tells SSP to simply broadcast an event when the center of an image is clicked, and to do nothing else. Set Thumbgrid to look for that event and become visible when it occurs:
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
my_tg.alpha = 1;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
That reverses what happened earlier. Now you have a complete loop set up--grid to image to grid again. You can embellish as needed. You'll probably need another separate button to take users back to the gallery, that documentation is in the Wiki. Sorry if there are typos in here, I'm just typing it out now without testing it. Good luck!
Offline
Hi adaml1313,
Thank you so much for taking the time! You're very kind, and I much appreciate it. I will try what you suggest. Thanks again!
Offline
a575606 , Did you ever got going ? I have been trying to do the same thing ............Let me know.........
Offline
Is that not working for you?
Offline
@ adaml1313
Hi,
Thanks a lot for helping with this but I would need further help. I have no experience in flash and I would appreciate a lot if you could help me with step by step "for dummies" instructions on how to set the functions you mentioned in your instructions.. where do I have to do this? how?
Where to paste the code you mention?
Basicly I am desperately looking for a easy and detailed guide to achieve something similar to this:
http://www.genesmirnov.com/
When I bought all slideshow pro packages I thought quite easier to use... please help
thanks
Ivan
Last edited by ivanbeg (2010-06-18 21:51:07)
Offline
Hi,
Whoo!!! I made it!!
thanks anyway!
Offline
When I try the code above, I'm getting this error:
Scene 1, Layer 'Layer 1', Frame 1, Line 1 1046: Type was not found or was not a compile-time constant: SSPDataEvent.
I also get the same thing for the SSPPreloadEvent
And the SSPImageEvent
I put the code in the main Actions window of my movie. Wrong place? Do tell...where does it go then?
I am also trying to exactly duplicate the hellodelta.net functionality.
Thanx for taking the time to reply!
Offline
I think there's some other settings missing here, or there's something basic I'm not doing. I put ssp and thumb grid on the same layer in the same frame. They're communicating just fine.
The issue is this:
1) it goes to the gallery first when the whole thing opens, however, it is NOT showing me the thumbgrid version of the gallery. I have this set:
LAYOUT/Gallery
I must need to have something else set as well to make the thumbgrid take control of showing the gallery?
2) The gallery that it's showing, as I said, is the SSP gallery. When I click on the gallery, it goes to the slideshow. What hellodelta.net does when you click on a gallery is go to the thumbnails, NOT the slideshow. You have to click on the thumbnail to get to the slideshow. That's the behavior I also want, but to make that happen, I need to get a) The thumbgrid to show the gallery thumbnails, and b) the thumbnail grid to show up first, not 2nd (the SSP gallery currently shows up first)
3) The slideshow, once I'm on it, cycles through pictures automatically. If I click on one of them, sometimes it pops up the thumbgrid, but sometimes it goes to the next picture.
Can someone help me with some clarification on the proper settings so I get the exact behavior sequence correct?
Thanx!
CJ
Offline
This has been a very informative post. I have been curious how to have Thumbgrid & then sequentially SSP fill the full stage.
My question is:
Is it possible to have SSP open in Gallery view, so that the banner Album previews come up, as in ~
http://www.oddiyansgate.com/alpha/tibet/
Then as a visitor clicks on one of the albums, it opens Thumbgrid, as in this Delta site example, where Thumbgrid images fill the screen with large thumbs...
That then open in SSP as the full image filling the stage again.
??
This would create a digging down sequence from Gallery view Album previews, to Album thumbs in TG, to Album images.
Then with interactivity so that a click on an image brings back to Thumbgrid. And somehow an outside nav element that could bring one back from thumbs to Album previews in Gallery view.
This would be my ideal gallery. And it seems possible.. I am not sure how.
Any assistance is greatly appreciated. Thx!!!
~ Michael
www.oddiyansgate.com
Offline
wildwood wrote:
When I try the code above, I'm getting this error:
Scene 1, Layer 'Layer 1', Frame 1, Line 1 1046: Type was not found or was not a compile-time constant: SSPDataEvent.
I also get the same thing for the SSPPreloadEvent
And the SSPImageEvent
I put the code in the main Actions window of my movie. Wrong place? Do tell...where does it go then?
I am also trying to exactly duplicate the hellodelta.net functionality.
Thanx for taking the time to reply!
Try adding these two lines of code to the beginning of your ActionScript. It imports the libraries that are referenced by the errors.
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;
Todd Temple
Offline
thankyou thankyou thankyou!!!
Offline
wildwood wrote:
I think there's some other settings missing here, or there's something basic I'm not doing. I put ssp and thumb grid on the same layer in the same frame. They're communicating just fine.
The issue is this:
1) it goes to the gallery first when the whole thing opens, however, it is NOT showing me the thumbgrid version of the gallery. I have this set:
LAYOUT/Gallery
I must need to have something else set as well to make the thumbgrid take control of showing the gallery?
2) The gallery that it's showing, as I said, is the SSP gallery. When I click on the gallery, it goes to the slideshow. What hellodelta.net does when you click on a gallery is go to the thumbnails, NOT the slideshow. You have to click on the thumbnail to get to the slideshow. That's the behavior I also want, but to make that happen, I need to get a) The thumbgrid to show the gallery thumbnails, and b) the thumbnail grid to show up first, not 2nd (the SSP gallery currently shows up first)
3) The slideshow, once I'm on it, cycles through pictures automatically. If I click on one of them, sometimes it pops up the thumbgrid, but sometimes it goes to the next picture.
Can someone help me with some clarification on the proper settings so I get the exact behavior sequence correct?
Thanx!
CJ
Hi... did you ever get it to work... i'm stuck at the same place you are!!
Offline
adaml1313 wrote:
When you get SlideshowPro and Thumbgrid on the stage, set Thumbgrid's options as follows:
LAYOUT
Startup screen: Gallery
SCREEN: GALLERY
Click action: Display Album
This makes it so that Thumbgrid starts with the gallery screen, and switches to album view when a user clicks a gallery thumbnail. You can customize everything else to your heart's delight.
To make it disappear, you need to create a function that detects when an image has been requested, and subsequently makes the Thumbgrid disappear.
function onSlideShowData(event:SSPDataEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);
function onImageLoading(event:SSPPreloadEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPPreloadEvent.PRELOAD_INIT, onImageLoading);
This makes it so that when an image is requested, or when an image begins loading, Thumbgrid will instantly become transparent (I would suggest adding a tween so it looks a little nicer), and the mouseEnabled and mouseChildren will make it so that Thumbgrid doesn't respond to the mouse anymore (otherwise, you won't be able to click "through" it to the slideshow).
To bring it back, set the following options in SlideshowPro:
CONTENT AREA
Interactivity: Action Area (or "Action Area and Navigation" if you want to be able to move from photo to photo by clicking the right or left sides)
Action: Event
This tells SSP to simply broadcast an event when the center of an image is clicked, and to do nothing else. Set Thumbgrid to look for that event and become visible when it occurs:
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
my_tg.alpha = 1;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
That reverses what happened earlier. Now you have a complete loop set up--grid to image to grid again. You can embellish as needed. You'll probably need another separate button to take users back to the gallery, that documentation is in the Wiki. Sorry if there are typos in here, I'm just typing it out now without testing it. Good luck!
IT work for me thanks.... but how do you load the thumbgrid thumbnail view instead of the image itself when you hit the SSP album button? i've tried all day to make it work, can't find any solutions like hellodelta.net
Offline
I have a working beta that resembles what user 'elementals' requested.
Starting view of TG (Gallery view)
with click -> TG(thumbs view)
with click -> SSP(image big) -external buttons at bottom for prev next image, thumb view or thumb gallery view
with click (anywhere but those thumbs mentioned)-> TG(thumbs view)
http://www.squidfist.com/dev/trio/
Offline
Hi,
I am stuck. I want to start with Thumbgrid in gallery mode, on click on an album to TG album mode and after click on image go to image in SSP and after click in SSP back to TG album mode.
Using this code below It works fine EXCEPT ssp is showing at first and not TG, how to fix this?
Thanks for your help!
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;
function onSlideShowData(event:SSPDataEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);
function onImageLoading(event:SSPPreloadEvent) {
my_tg.alpha = 0;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
my_ssp.addEventListener(SSPPreloadEvent.PRELOAD_INIT, onImageLoading);
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
my_tg.alpha = 1;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
Offline
Make sure ssp is set to "Load then Wait" in the component inspector panel. I don't think with AS loading everything it matters, but I have tg on top of ssp as separate layer in my timeline. Here is my code (loads gallery view tg first, then grid of tg, then ssp. On click back to tg grid view.
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;
function onSlideShowData(event:SSPDataEvent) {
if (event.type=="imageData") {
my_tg.visible = false;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
}
prev_btn.addEventListener("click",prev);
function prev(e:MouseEvent):void {
my_ssp.previousImage();
}
next_btn.addEventListener("click",next_one);
function next_one(e:MouseEvent):void {
my_ssp.nextImage();
}
gallery_btn.addEventListener("click",afterGalleryClick);
function afterGalleryClick(e:MouseEvent):void {
my_tg.displayGallery();
my_tg.visible = true;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
other_btn.addEventListener("click",otherClick);
function otherClick(e:MouseEvent):void {
my_tg.visible = true;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
my_tg.visible = true;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
Offline
thanks, after omitting your button listeners it worked.
Offline
good deal, I played today and have some versions up, since my old links were killed
http://www.beretphoto.com/dev/versions/
Offline
FYI: I am using the code that has been thrown around this thread.
For some reason once my movie loads, the thumb grid pops up for a second and then goes transparent as soon as an image is loaded in SSP. Can't seem to get around this. When I set SSP to Load and Wait, I can't move past thumb grid (nothing triggers the listeners?)
Any help will be appreciated.
Offline
I exported the xml settings for both the ssp and the tg. There is a screen capture of the layers order, and the library. Also a working swf in this folder. Text file of my actionscript. No fla, due to the rules. Hope it helps.
http://www.beretphoto.com/dev/trio/
Here: http://www.squidfist.com/dev/ssp/chew.p … 3&s=14 is my newest version that defaults into the ssp view and has more styling. Virtually the same guts though. Will try to post a walkthrough of this one soon. A lot better due to the ability to call any gallery or album on my director with one single swf file, just adding a few characters to the link (3rd gallery and 14th album in the example below).
Last edited by brandonguy (2011-02-02 05:20:59)
Offline
Thanks, i followed the steps above, but the TG is not automaticly displayed i need to click one time in the ssp,
what can i do to auto start TG, that is viewing the Gallery?
Offline
did you pay attention to the ordering of the layers? Also included the xml files for all the elements, as you might have a button in the wrong position on ssp or one of the tg instances. If you don't know how to here is the wiki listing on importing settings.
http://wiki.slideshowpro.net/SSPfl/AC-FlashCommands
Offline
I am trying to implement this also. What about some code for the labels and buttons for:
1) Gallery Screen - "Page 1 of 1"
2) Album Screen - "Page 1 of 2" & "Return to Categories" button
3) Image Screen - "Photo 13 of 40" & "Return to Thumbnails" button
Thanks
Offline
Similar situation:
So upon loading the site if I just want images with a left and right arrow button I would just indicate tg to be invisible? I will also have a portfolio section where I click on a section in a nav in flash and add the AS to the button that makes it visible correct?
M
Thanks in advance.
Offline
That will work
mikecu wrote:
Similar situation:
So upon loading the site if I just want images with a left and right arrow button I would just indicate tg to be invisible? I will also have a portfolio section where I click on a section in a nav in flash and add the AS to the button that makes it visible correct?
M
Thanks in advance.
Offline
So in the Hello Delta example, what parameters do I need to check to determine if it is the Categories screen or the Thumbnails screen or the photo screen so that I can toggle buttons properly?
Offline
use the btnName.addEventListener(MouseEvent.CLICK, functionName);
for each button to toggle visiblity
Offline
Yes, I know how to toggle visibility I just don't know how to determine which screen I am on so that I can toggle the buttons appropriately.
Offline
you use 2 instances of tg one for gallery and one for album together with the clickThumb event.
Last edited by zippie (2011-04-29 17:35:03)
Offline
Creating two separate instances seems kludgy. Is there no parameters that I can check?
Offline
Getting very frustrated on why previousThumbGroup() and nextThumbGroup() do not work and support is not responding back... Is this a bug in their software?
Offline
So I am at a point where I have or know how to make just about everything work except for one thing:
Once I've loaded the TG Gallery and clicked on an album, how can I associate the visibility of the "return to categories" button with either the click on the album, or the loading of album thumbnails?
For example, my TG instance is named 'my_tg' as suggested (not that it really matters as long as everything matches), and my button instance is 'return_categories'. So eventually I am hoping to create an EventListener and a function that incorporates 'return_categories.alpha = 1;"
Let me know if you can help, and if I'm on the right track!
Chris
Offline
use the clickThumb event
http://wiki.slideshowpro.net/TG/API-clickThumb
Offline
unfortunately, I'm still having trouble with this...
when I try to use clickThumb, I'm not getting the desired results.
Here is the overall layout:
Screen1: TG Gallery (no buttons present)
Screen2: User Selected Album ('return_categories' button present)
Screen3: User Selected Image ('return_thumbs' button present)
When using clickThumb, 'return_categories' button loads when an image is selected in Album view and is immediately replaced by 'return_thumbs' due to the transfer to Screen3.
So essentially, when I click a thumbnail, 'return_categories' displays but is immediately replaced due to other AS. I'm trying to get 'return_categories' to appear in relation to clicking on an Album in Screen1 (Gallery).
Offline
post your code
Offline
/*Import Classes*/
import net.slideshowpro.thumbgrid.*;
import net.slideshowpro.slideshowpro.*;
/*Return to Categories Button*/
function afterClick(e:MouseEvent):void {
my_tg.displayGallery();
my_tg.alpha = 1;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
return_categories.alpha = 0;
return_categories.mouseEnabled = false;
return_categories.mouseChildren = false;
return_thumbs.alpha = 0;
return_thumbs.mouseEnabled = true;
return_thumbs.mouseChildren = true;
}
return_categories.addEventListener("click",afterClick);
/*Return to Thumbnails Button*/
function afterClick2(e:MouseEvent):void {
my_tg.alpha = 1;
my_ssp.alpha = 0;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
return_categories.alpha = 1;
return_categories.mouseEnabled = true;
return_categories.mouseChildren = true;
return_thumbs.alpha = 0;
return_thumbs.mouseEnabled = false;
return_thumbs.mouseChildren = false;
}
return_thumbs.addEventListener("click",afterClick2);
/*Transition from ThumbGrid to SSP image display*/
function onSlideShowData(event:SSPDataEvent) {
my_tg.alpha = 0;
my_ssp.alpha = 1;
my_tg.mouseEnabled = false;
my_tg.mouseChildren = false;
return_thumbs.alpha = 1;
return_thumbs.mouseEnabled = true;
return_thumbs.mouseChildren = true;
return_categories.alpha = 0;
return_categories.mouseEnabled = false;
return_categories.mouseChildren = false;
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onSlideShowData);
/*Show Return to Categories Button on Album load*/
function onSlideShowData2(event:TGRequestEvent) {
return_thumbs.alpha = 0;
return_thumbs.mouseEnabled = false;
return_categories.alpha = 1;
return_categories.mouseEnabled = true;
}
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB_GROUP, onSlideShowData2);
/*Load Thumbnails from SSP image Click*/
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
my_tg.alpha = 1;
my_tg.mouseEnabled = true;
my_tg.mouseChildren = true;
return_categories.alpha = 1;
return_categories.mouseEnabled = true;
return_thumbs.alpha = 0;
return_thumbs.mouseEnabled = false;
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
Last edited by chrisvanderwall (2011-07-29 20:16:05)
Offline