[Pro] need help with a scrolling list of logos

Greetings to all. Need some suggestions.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What I want to do is to be able to have a list of logos

1 2 3 4 5 6 7 8 9 etc

And I want these logos to advance

2 3 4 5…1

3 4 5 …1 2

4 5 6 …1 2 3

I need help on how to make this happen. I want them to all display at the same time and just move to the back of the list, horizontally.

Any ideas? I thought about the carousel action, but I want them all to display at one time and just move.

Thanks for the help.

Sam


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The Carousel has a setting that allows it to move automatically until the user interacts with it. If you don’t put any other controls on the Carousel, either buttons or tabs, then it will just cycle through its options at whatever interval you enter in the Actions palette.

Another trick you could try is to use the “endless scroll” effect, detailed here: Endless Scroll (view source to see the code – it’s very straightforward).

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Another trick you could try is to use the “endless scroll” effect,
detailed here: Endless Scroll

Walter, wouldn’t you like a cylindrical panorama strip image for that
demo? It’d look so much nicer without that seam… :slight_smile:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh yes, please. Something with Richard Thompson in it, maybe???

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

I see the effect on the page. I can produce the graphic in Freeway; Now where is the action and the download?

Sam


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I see the effect on the page. I can produce the graphic in Freeway;
Now where is the action and the download?

There’s no action for that ‘endless scroll’ effect. That’s a small
bit of JavaScript, a bit of CSS, and an image that has 500 pixels
from the left repeated on the right.

You’d need to prepare your own image, including choosing how wide you
want it to appear on the page and repeating that amount of the
original as above, then use markup to add the CSS and JavaScript. Not
hard if you understand a smidgin of this stuff, and we could help out
if you like.

But no, there’s no action.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s no Action, just a little lump of JavaScript, which you can get by viewing source in your browser.

<script type="text/javascript" charset="utf-8">
	var h = document.getElementById('harbor');
	var start = 0;
	var fx = function(){
		switch(start){
			case 1000:
				h.style.left = 0;
				start = 0;
				break;
			default:
				h.style.left = '-' + (start + 1) + 'px';
				start = (start + 1);
				break;
		}
		window.setTimeout(fx,30);
	};
	fx();
</script>

In Photoshop or the local equivalent, make your sliding image following this technique: decide how wide of a “window” your sliding logo-fest will be viewed through, then copy that much of the image from the left-most side of your entire strip and add it on to the right side. So if you wanted a 250px wide window, and you had 1,000px of logos across your image, make your final image 1,250px wide, and make sure that the left-most 250px are duplicated at the right of the image.

Make sure the CSS Layout button is on (blue, if you have the default Aqua appearance set in your Mac). Draw an HTML box on your page where you want the effect to appear, at the width you decided above and the height of your photo strip. Set its Overflow property to Hidden (using the Inspector), and then while that HTML box is still selected (showing its 8 handles) draw another HTML box inside it (to make this second box a positioned child of the first box). You don’t have to make this second box any particular size, just get it approximately in the middle of the first box. Your cursor will change while you are drawing it into a [+] and the edges of the first HTML box will glow blue to indicate that you’re making a child element.

The rest is done with the Inspector. First, set the name of the box, or at least write down what Freeway names it (item2, probably). Set the top and left position to 0. Set the width and height to the dimensions of your photo. At this point, you will see the second box appear to “stick out” of the right side of the first box. The first box will actually crop the second box, so no worries. Now drag your photo strip from the Finder into the second box, which it should fit perfectly.

Finally, open the Page / HTML Markup dialog, and move to the Before /BODY section of that dialog. Paste the code into it, and make the following changes in the code before you okay the dialog:

  • change harbor to the name of your second HTML box
  • change 1000 to the actual width of the image, minus the part you tack on to hide the repeat

That’s all there is to it, and it takes more time to write out than to actually do, so don’t be put off by there not being an Action.

Also, you adjust the speed of the scroll by changing the number 30 near the end of the script – smaller numbers equal a faster scroll. Don’t get carried away with this, though, it will seriously challenge a wimpy computer if you set this number too low, and it will look jerky if you set it too high.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Something with Richard Thompson in it, maybe???

Quick work there Walter!

http://scripty.walterdavisstudio.com/endless/

:slight_smile:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow. Thanks, Walter and Keith

I will try to muddle my way through. I was impressed this week that I figured out how to put a text (I think that’s what I used) to get get bold text in a mark up ! I know, I’m showing my lack of knowledge here. My apologies.

I came to Freeway Pro after 12 years in the newspaper business, and 12 years after that selling and producing radio commercials.

I am just learning how html works. I remember in the 1980s (pre-Mac computers) having to set up the ol’ Compugraphic Machines and they had a bit of html for setting font, size and leading, then we’d put the film in the developer and after it dried, wax it and cut it apart for the layout. Since then, I’ve used a Mac and Ready, Set, Go for all of my graphics work. So, forgive me for being behind the times. I really appreciate your concern enough to help me learn.

I have been blown away by the willingness of people to help me with this program. Maybe I will post a couple of links to sites where I have a question on how the Target Show/Hide layers function.

Again, millions of thanks.

Sam


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Now, if I want to do this with a series of items…is that possible.

Gif or jpeg average size 119px wide by 60 high

Let’s say I want to have a scroll where the 1st one on the left moves off the page and over to the far right at the end of the list?

Possible?

Sam


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 11/7/09 (at 21:06 -0400) sampolfonz said:

I was impressed this week that I figured out how to put a
text
(I think that’s what I used) to get get bold text in
a mark up !

Excellent stuff - that’s exactly right, and semantically better than
the literal tag too.

Although may I make a general comment? I personally feel that it is
good to try to avoid using markup where you can. Not because the
results aren’t as good, but because Freeway is fabulously clever and
sophisticated at handling things for you and it makes sense to use
its strengths except where you really need to ‘get out and push’ (as
Walter likes to describe it).

Since then, I’ve used a Mac and Ready, Set, Go for all of my graphics work.

Ahh, RSG! I remember that well, both when it was with the original
Manhattan Graphics Corporation team and later with Diwan. It is
available as a native Mac OS X app, but it isn’t really at the pro
end of things any more.

I have been blown away by the willingness of people to help

Think of this as the Freeway difference realised in social form. Nice
people use nice software. :wink:

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could do this by following the steps I gave you, but instead of inserting a single image into the wide HTML box, you would insert a number of individual images into it. The script would work just fine as is. If you wanted to have 8 logos, each 119 x 60, then do this:

  1. Make an HTML box that is 119 x 60, set it to Overflow: Hidden, and while it’s still selected, draw another HTML box over it (as a child).
  2. Select your second box, and use the Inspector to make it 1070 x 60. (9 times the width, so you have room for your duplicate at the end)
  3. Double-click inside the second box, and use Insert / Graphic Item to insert an inline graphic box. Fill that box with your first logo.
  4. Repeat step 3 for each additional logo, and when you get to the end, add the first logo one more time.
  5. Add the JavaScript, and change 1000 to 952.

That should get you individual graphics for each logo, but the same endless scrolling effect.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

Thanks so much. I will be trying it today or tomorrow.

Sam


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I want to do the same type of thing, but instead of getting the endless scrolling effect, I would like to have a scroll bar below the image.

Just as you have on your page, below the endless scrolling effect.

http://scripty.walterdavisstudio.com/endless/

How do you achieve that? Thanks for the help. This site is amazingly helpful.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The scroll bar below the non-automatic image is there because the
picture is too large for the box it’s in, and the box has its overflow
set to “auto”. Draw an HTML box on the page, make sure that the
Overflow picker in the Inspector is set to auto, then double-click
inside that box and use the main menu to Insert / Graphic Item. Import
your large image into that box, resize the box to fit the contents,
and hey-presto, instant scrollbar.

Walter

On Oct 6, 2009, at 1:38 PM, Peter Wlazlo wrote:

I want to do the same type of thing, but instead of getting the
endless scrolling effect, I would like to have a scroll bar below
the image.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That was easy! Thanks.

I posted another question today on the forum under the title “Thumbnails/Rollovers with Sequence Timers” that I think might be right up your alley. If you have a chance, is there any way you can take a loot at that?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options