Frame by Frame Scrolling

[tcabaco]

Hey

I'm developing the web-site for a movie and the client demanded that the design was diagonal. Not too bad until he gave me the synopsis and it is a 3 paragraph long text which requires scrolling.
I've been searching the web for the past hour trying to find a way to diagonally scroll and no possibilities came up. Skewing the text doesn't work because the angle is just to big. But I think that skewing the scrollbar once it is developed Vertically won't be a problem (Will it still work though? If I skew the movieClip the scrollbar is?)

A way around I guess would be creating the text manually, indenting each line to make it diagonal, make it into a movie clip, give it a motion that moves diagonally from the beginning of the text to the end with a mask and have a scroll that goes back and forward from frame 1 to 30 (or wherever the motion ends). But two questions arose:

1. How do I make a scroll with these properties - scroll back and forth (frame X to Y and vice-versa)?

2. Can I make the scrollbar in a diagonall disposition? Something simple, the dragger button and a guide-line underneath or something like that.

Thanks so much in advance,
Hope someone can help me!

T

[scottc]

mc.gotoAndStop(scrollbar.y);

You'll probably want something more complex then that, but that could be a start...

or you could animate the text with actionscript by changing it's .y property.

[tcabaco]

Hey, thanks for your answer.

Here's a drawing that might help you guys understand what I'm thinking about and what I want.

http://www.tiagocabaco.com/other/diagonalScrollComp.jpg

Hope it helps.
Thanks in advance,
T

[Xannax]

I can't give you code, because I am not good enough in AS;
But a few thoughts (I'm not sure they work, but maybe they can give you ideas):
1) If you have a static text then you don't have a problem. Just do the motion for the text and the scrollbar in a movieclip, then add an event listener to the dragger button and listen for MOUSE_DOWN; on mouse down set a boolean "is_pressed"to true, set it to false on mouse_up, and on mouse move, if(is_pressed), activate a function that checks for the mouse position; if the position Y + position X is equal or higher than the dragger button, animate in direction up, else animate to direction down.
2) you might rotate the entire clip and use normal x and y, since x and y are relative to the clip's space. It means you can set up everything normally and rotate everything at the end. You'd have to rotate back the text and the scrollbar though to make up for the rotation.
3) if your text isn't static, of if you want to make something re-usable, slice your text each x characters, and add a "\n" there, as well as a "\t". The "\t" should increment with each line by a value z, and make your text field autosize=true. Then add your scrollbar, and check for it's y position to scroll the text, and scroll it each time by y,x*z
4) mix the two previous suggestions and have your text idented, but your scrollbar normal (vertical). Then when you have coded everything, rotate the scrollbar and it *should* if i remember well, as I said before, retain its internal x and y values.
5) Clients can be extremely funny.

Good luck with the weird request!

[tcabaco]

I honestly don't think it is THAT weird. Just put the diagonal disposition for the side a little bit, lets forget about it for a sec. This is just like having a movie player timeline. The dragger goes from the beggining to the end of the movie and vice-versa, but in this case, instead of a movie it is a movieCLIP and it plays around with the frames.. Don't worry about the text, I know how to do it, that is a movieclip, the question here is the scrollbar code to have it play the movieClip back and forth depending on the dragger's position.

I honestly don't see it as a weird request, I'm just like you, I just don't know that much AS3, maybe even waaay less than you do. Either way, thank you for your thoughts.

[Xannax]

Here, I'm giving you something I quickly slapped together, using scottc's proposition; the text is not diagonal, it is skewed, but the logic remains the same. You can make any animation in "text_mc", as long as it is 100 frames long, and you can rotate, skew, do whatever you want with the scrollbar, it'll still work.
Hope it helps you.
By the way, I never intended "funny" or "weird" to be offending, even in the slightest way (just in case it had been understood that way). I just meant sometimes you get requests from clients you would've never thought of. I would not anyway.

[scottc]

and for the buttons you can use:


//up
mc.gotoAndStop(mc.currentFrame+1);
//down
mc.gotoAndStop(mc.currentFrame-1);


You will also need to reposition the scrollbar thing too.

[tcabaco]

Oh it looks perfect! Thank you so very much! (haven't used it on my project but I'm pretty sure it will work)
That's exactly what I was looking for.

When you say that I have to keep it at 100 frames if I want to change the number of frames by any reason in future projects for example is there any change in the code that need to be done? Is it even possible?
Just out of curiosity.

Again THANK YOU SO MUCH!

All the best,
T

[tcabaco]

Oh and about the "weird" thing, I obviously didn't take it in any disapproving or offending way! :) Thanks!!

[Xannax]

you're welcome :) glad I could help;
it's possible and even easy to change the frames number;
look under the onMouseMoveHandler function.
check this line out:


text_mc.gotoAndStop(Math.round((scrollbar_mc.handl e_mc.y/scrollbar_mc.track_mc.height)*100));

trimmed down, this function basically means:
go to the frame in text_mc that matches the percentage of handle on the scrollbar track.
it calculates a simple percentage and since there is 100 frames, it works;
If you have 127 frames, simply switch the "100" for "127"
Now I used percents out of habit, but in fact the function would be a lot more portable if you switch the line to this:

text_mc.gotoAndStop(Math.round((scrollbar_mc.handl e_mc.y/scrollbar_mc.track_mc.height)*text_mc.totalFrames) );

that way, whatever number of frames is contained in your text_mc, it will work;
However, my guess is that for any kind of text you might think of, 100 frames should be enough; Do not forget that the more frames you have, the bigger your swf will be.
Good luck!