Subtitles of the Movie

Things are getting even more interesting now with this tutorial on two extensions created by Projectseven. At their website, www.projectseven.com, you will find many extensions including the two I'll discuss here; horizontal scroller and a vertical scroller. These extensions are ideal for web designers who need to display information in a confined space. Additionally, they have the visual appeal that helps bring static sites alive. For example, this photographic site displays the images well enough but would benefit from additionally containing textual information. And this is where horizontal scroller comes into its own. It is a commercial extension but like all Projectseven products, has an immeasurable amount of thought put into it and conversely, with a minimum of your effort, you can create an excellent visual tool on the page. I'll click here to locate where I want my scrolling text to appear. Then click this orange icon with a horizontal, double-ended arrow to start the interface. The well-designed and self-explanatory interface pops up for you to choose the look of the scrolling text. Initially we'll just leave the scroller operation set to normal and the options to control the speed of our scrolling text we'll also leave at the default settings. The Pause on Mouse Over Option is useful, so I'll activate that. Once we preview this in a browser later, you'll see why I like this feature. I won't let the text scroll automatically. I want the end user to start it but the option is there, as is a delay time in milliseconds before it kicks in. If you leave the Include Show All Link Button activated, you will get a textual link above the scroller. Again, this will become more obvious in a second or two when I preview it in a browser. Finally, the Scroller Play Bar features a Drag Button so the end user can skip through the text quickly. I'll leave this option unticked so the user can drag the play bar if required. The final option here at the bottom offers seven different styles and looks for the scroller. Browse through them to match your design or at least get close to it. I'll go with Aero for this example. Click OK. Now in Dreamweaver's Design View, you can see horizontal scroller has filled the text area with filler text. OK, I'll preview in the browser so you can see all these chosen options functioning. Looking good but already I've decided to change the look. Don't need the Show All Link so I'll move it in a moment. First look how good this is when I click Play and when I mouse over the text, it pauses. OK. Back to Design View to adapt it to make it look more appropriate to our site. I'll click the Horizontal Scroller Icon again to re-edit. Now I'll remove the Show All Link and reduce the speed at which the text scrolled. Bizarrely, to reduce the speed you increase the delay setting here for the Auto Scrolling Speed. I'll make it 50 milliseconds, then OK. Then preview in my browser. Great, the scroll is now easier to read; maybe a little slow but it's better. Back to the Design View to make further changes. I'll delete this text and replace it with something more relevant. Note that even though your text might cover a few lines in the Design View, it actually only displays one line when live on your site. OK, that should do it so preview in browser again. Looking good but I'll show you some other options. I'll make the text have a carousel effect. This means when it gets to the end of the text, it scrolls back to the start in reverse. Also, I'll change the speed to 25 just to accelerate it a little. Click OK, then back to the browser. What a fabulous tool. Thank you Projectseven. You make me look so good. Well, that was the horizontal scroller. Let's look at the vertical scroller now. The controls are pretty much identical. I'll quickly choose some options. I'll make the scroller box height 500 pixels to fit comfortably on my finished page, then click OK. Now this is where it gets really good. You don't have to be confined to just scrolling text. Let's include some images too. I'll delete some of this text and drag over a photograph. Woops, too big. OK, I'll just reduce it to fit inside my scroll area, then preview. Great stuff. Let's go back to the Design View, delete more text, change the heading to something more relevant, delete this text and add another image. Woops, resize again, still too big, a bit more. That should do it. Now I'll add some relevant text. I'm a slow typer so I'll fade to the end of the text I've typed in. Now browser time again and there you have it. I'm sure as a designer you'll now think of even more creative uses outside of the obvious for Projectseven's wonderful scroller extensions. OK, to recap, these extensions make you look good without putting in much work. Brilliant! Now you can charge clients more! OK, I'll finish up now and see you in the next one.