Make Flash photo Galleries scroll [Archive]

Click to See Complete Forum and Search --> : Make Flash photo Galleries scroll

Tybaltcap

10-17-2008, 08:33 AM

Hey!

I'm just getting into the whole Adobe suite and being both amazed and frustrated by its immense capabilities and my immense deficiencies.

I have created a Web Photo Gallery with the Photoshop CS3 automated tool. I liked the Flash Gallery 1 option.

But I have two questions with how I might be able to make it fit my needs a bit better.

1) I would like to put my navigation bar at the top of the window so visitors can easily go to other galleries. How can I do that (as non technically explained as possible would be appreciated!)

2) I have a few too many pictures for all the thumbs and the large picture to fit on the screen. For some reason I don't have the ability to scroll down on the page. How can I enable this ability? (again if possible, explained for a real novice).

Thanks a lot! I really appreciate it!
Tim
PS I did try searching around for this, but can't seem to find the answer
PPS I hope that I posted to the right area - if not, tell me where it should go!

Eye for Video

10-17-2008, 10:23 AM

The Flash Gallery created in Photoshop is sort of a one size fits all approach. Once you go through the creation process, it has placed a Flash .swf file on an html page. So you’ll have to alter that html to have better placement and movement up and down on the page. Selecting the size of the large image is done during the dialog process in setting up the Web automation process in Photoshop. So when selecting the large image size in PhotoShop, imagine that the gallery will be sharing space on an html page with other elements, like navigation bars, other text, etc. It does not have to be the only thing on the page. You can add elements both above and below simply by editing the html.
Please, don’t make the images so large that the viewer has to scroll up to view the entire image and then back down to reach the gallery controls. The usable screen size on a 1024 X 768 monitor is only about 600 pixels high, once a browser is open. Then take off 100 or so for your banner and nav bar. Now you're lucky if you even have 500 pixels left. Your gallery has thumbs under the image and the gallery controls under that…that really cuts down on the max viewable size of your large images. Personally, I try to keep the thumbs off to the side, as well as the gallery controls so I can have more space for the large size images. Usable height is the constraining issue, not width.
OK, to add your nav bar, edit the page by going to the <body> open tag and put some stuff right after it, and before the Flash stuff created for the gallery. If you’d like some written stories or whatever after the gallery, drop down to the bottom of the page, just before the </body> tag and put some stuff in about your life story or whatever. Nav at top…gallery in middle…story at bottom.
Now the reason you can’t scroll is the “overflow:hidden” settings in the CSS, take it out all together or use “overflow:auto”. You don’t have to use any of this auto created CSS but could replace it with your own, to match other pages from your site. There are also a couple of xml files which control some of the gallery display characteristics you can open up and make alterations to if you are so inclined.
<style type="text/css">
html {
height: 100%x;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}
</style>
Best wishes,
Eye for Video
www.cidigitalmedia.com

Tybaltcap

10-17-2008, 01:49 PM

Ok - I'm getting closer, but not there yet.

Now I have the photo gallery over on the right with my Nav bar on the left. But only a bit of the Gallery is showing - it seems to cut off.

What is it that defines the Photo Gallery height?

Or am I not giving you enough to answer the question?

Eye for Video

10-17-2008, 03:06 PM

To get a feel for the dimensions of the actual "gallery.swf" go to your destination folder and directly open the .swf. My guess is you will see something a fair amount larger than just your large image (there will be a bunch of space around it).
OK so that's the dimensions of the "box" you are placing on the page. This line determines home much space it's actually given:
var myFlashObject = new FlashObject("gallery.swf", "gallery", "100%", "100%", 6, "#ffffff");
The first "100%" is width and the second height. Change from a percent to a pixel amount and play around a little, for example "500", "500".
You really don't want to scale it since you already resized the pictures to the size you want.
Good luck,
EfV

Tybaltcap

10-17-2008, 09:43 PM

ok. I will play with those dimensions. Using your previous suggestions I have put them inside the "box" with my header on top and my nav bar on the left. But the image seems cut off. When I preview it in the browser it seems to crop it, or onlydisplays a small bit and keeps the rest hidden.

When I click 'show all' it shrinks it and I can see there seems to be a black rectangle on a big white square as a background. Any ideas?

Tybaltcap

10-17-2008, 09:44 PM

oh, and the SWF file is protected so I can't open it up

Tybaltcap

10-17-2008, 09:48 PM

wait wait! it worked!! Thank you so much!! The sfw is still protected, but by changing the height I can fit in it perfectly!

Your awesome!

Eye for Video

10-18-2008, 12:26 AM

Hey, glad you have it working!
Best wishes,
EfV

Tybaltcap

10-18-2008, 07:16 AM

Hey - I came into one more little stumble. What is the part of the code which controls the margins inside the flash movie? there is a considerable amount of empty black space around where my pictures and thumbnails are - I would love to be able to use that space! Where are the controls for that?

Thanks again

Eye for Video

10-18-2008, 08:38 AM

Since this a just an auto created gallery, I don't think you can control every aspect of it. I was able to greatly reduce the size of that wasted space by playing with the dimensions here:
var myFlashObject = new FlashObject("gallery.swf", "gallery", "400", "400", 6, "#ffffff");
Play with those again until you make it so small that part of the .swf is being cut off. Then increase the size just a little until it all shows but at least most of the wasted space is gone.
Your next step may be to build your own gallery. Here are a couple of sources for tutorials:
www.gotoandlearn.com
http://www.flashkit.com/
Best wishes,
EfV

Tybaltcap

10-18-2008, 03:56 PM

Ok! Thanks again for your help. I'm just kinda teaching myself, and learning as I go so this is a big help! Much appreciated.

Tybaltcap

10-20-2008, 06:03 AM

Hey EfV - I'm sorry to keep coming back with Issues, but I can't seem to get it quite right and I really think its attainable!

I have uploaded what I have - its at
www.just-go.net - then if you go to Photo Galleries -->Greece-->2008 you will find it. there are a ton of other issues with my site now - I can't seem to get all my buttons up there as they are on my Dream Weaver previews, and the CSS dont seem to be up either - but the gallery works.

you can see the space I'm talking about. If I shrink the size with the height and width that you told me about - I can reduce the margins, but then it just cuts off the thumbnails at the bottom. The Its current size seems to be the smallest (or close at least) that I can make it and still have all the tumbnails visable when I click on a vertical picture.

I would LOVE to make my own gallery - but I really like these resizing thumbnails, and I can't seem to find any tutorials which would show me, and even then I worry that I'm just missing something changes the alignment or something inside the flashobject space.

Any ideas? And again - sorry to keep coming back - I'm just so close!!

Eye for Video

10-21-2008, 07:30 PM

You may have reached the max on customizing that slide show. Remember, it's a quick and easy PhotoShop template, not designed to allow for much customization. There are a lot of Flash slideshows available outside of PhotoShop.. just Google for flash slide shows. My advice, get one with the thumbs over on the side of the image not under it. That really constrains the space available for the main image and the controls.
If you would like to start building your own slide show, you might try:
www.gotoandlearn.com
or
http://www.flashkit.com/
for tutorials and help in their Forum
Best wishes,
EfV

Valerie8

04-11-2011, 08:50 AM