Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, we're going to generate a Flash-based Web gallery, so you will need to have Flash installed on your system. This gallery is going to be based on this template right here, Airtight PostcardViewer, a very awesome- looking template based on the design as I said from Felix Turner. So, I'll go ahead and choose that option. Notice that our Style is set to Lightroom, by default. We'll go ahead and update that Style shortly. Click on Refresh Preview, in order to get a sense of what this is going to look like. Notice that you'll see a bunch of photo cards arranged here inside the Output Preview panel.
They are randomly organized. They are not organized in the order that you've specified inside the Content panel. Notice if I click Refresh Preview again, that goes ahead and resorts the photographs, like so. So every time you open up this site, it will have a different sort order associated with it. All right! Let's check out our options here. I'll click on Site Info first. Of course, it's called Adobe Web Gallery. I'm just going to call it My Gallery. That'll work. Color palette, you can change just the background color. That's it, up to you. I'm going to leave it the same.
Here inside Appearance, we have a lot of options we could change. I'm going to set the Columns to 4. The Photo Borders are fine the way they are, 20 pixels. The Padding, which determines how far the thumbnails are spaced away from each other is 160 pixels. That's fine by me. I'm going to increase this Distant value to 30%, which is going to make these distant photos larger. Then I'm also going to reduce the Near value. Because notice, if I click on Refresh Preview, in order to make these guys bigger here, notice how much bigger they are now. If I click on any one of these images, for example, I'll click on her.
Notice how big she becomes onscreen. That's a little too big for the near version of my photo. So I'll take it to 80% instead. Then I'll click on Image Info. I can elect to add a caption. So I'll go ahead and click on Caption to turn it on. Then I could say that I want the Caption to be the Filename. But I really want it to be Caption. Now what in the world is Caption? Well, that happens to be the Description field inside of File Info. So, for example, if I go ahead and click beside this woman in order to zoom her out, and then I refresh the preview, and then I click, say on this image right here, and we can see that it says, please don't tell Mom that we are vampires, which is exactly the text that I entered into the Description field in the File Info dialog box. All right! Now I'm going to switch over to Output Settings here.
You can choose to make your core images, those images upon which your Flash site is based, larger or smaller. Were I working on the bigger screen, I probably make these images quite a bit bigger. But in my case, I'm going to leave them alone. By the way, this option right here, 640 pixels, is going to work hand in hand with whatever percentage values that you've entered here inside the Appearance panel. So if you make that value bigger, you're going to have to make these guys smaller. Of course, you can refresh the preview in order to see exactly what's going to work out for you.
Now let's go ahead and drop down here. Actually, before we do, I better save off my Style. So I'll click on Save Style, like so. Then I'll go ahead and call this Supercool Interactive, something that I copied in advance there. I'll click Create. This is my Supercool Interactive site. In fact, you know what? I'll go ahead and call this Gallery Supercool Interactive as well, like so. Then I'll make sure that, of course, my Save Location, this is same as it was in the previous exercise. I'm working inside of exercise_ files>11_ printing>Final site.
I will now go ahead and save off my site. I see the Progress bars. The Bridge is working away at it. And now my gallery is created. All right! Now let's go ahead and display the site inside of a browser. I'll go ahead and minimize the Bridge. In the background here, I have opened the Final site folder that's found inside the 11_printing folder. I'll go ahead and double- click on Supercool Interactive. Then I'll double-click on index.html to open it up inside of my Web browser. Now, you can see the site. Notice every time I refresh it, that I re-shuffle those photo cards to different locations.
If I want to view any specific image at a larger size, I can go ahead and click on it. I see that Goofus wears his hat when it's warm out, that Goofus man! Then this guy right here, if I click on him, Gallant is genetically superior and makes more money, which is why we like him. So, I'll go ahead and click off. Then I'll just tell you, I'm very serious about this one. If I were a time-traveling cyborg, I would disguise myself as this boy. Incidentally, if you want to see, one of the underlying images or download it, then what you would do is right-click inside of this image and choose Open Image in New Window.
That will go ahead and show that 640 pixel tall or wide image. You can download it to your computer just by right-clicking on it and choosing Save Image As or whatever is the similar command inside of your browser. That is it people! That is how you go about creating a super-cool, interactive, airtight site from Bridge CS5.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 63590 Viewers
119 Video lessons · 71188 Viewers
125 Video lessons · 32057 Viewers
84 Video lessons · 18671 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.