Sunday, February 06, 2005

Making a scrollable field in Flash

For the more intermediate/advanced Flash users:
To understand this tutorial, make sure you have done your Flash lessons first.

Some of you expressed interest in making a scrollable field as part of your website. There are various ways of doing this. I chose Flash as opposed to for example Javascript as way of doing this, because with this tool you can design your own buttons and you don't have to do a lot of coding. This is a handy thing to know or do, because it allows you to have e.g. your menu buttons always on the same place while you can have a smaller field for a scrollable bigger picture like a large wall painting or for a lot of text.

Flash samples does have a Sample in the Help menu which you can use for a scroll and you can check various helpfiles on the Internet. BUT I found a relatively easier step-to-step tutorial so please go to: here
I tried it and it works very well. There are only few mistakes in it, so please keep this in mind:
*The name of the movieclip (scrollabletext) should be the same! twice. It doesn't matter what you call it (scrollabeltext or else) as long as the instance name is the same every time.

*There is a mistake with the script at on keyUp. You can remove the keyPress, 'cause you probably won't need a keypress to trigger the action, but if you put it there, there should be more than just "". So press a key you want to use to trigger the action "e.g. "r" or "".

I programmed a little bit of extra with it (see code under), so with this added script you can't scroll forever to the right or left, if the picture has already passed its own dimensions.
With my little script, when the ending is near, it puts the location, the x-coordinates to the original position. (is also possible with y-coordinates, depending on what you want) You can find out about the exact x/y coordinates of your own picture by pressing apple i or go to Window and then info in Flash. If you scroll over the corners of your scrollable picture, the coordonates will be shown in the info.

If you're interested, I can send you my Flash (. fla for authoring and editing) and .swf file ( for just looking at it). I'm having problems with my Internet and email, but you can let Adriaan know, and he will be able to help you or inform me as well.

Good luck!

Add this script to your movieclip (Select movieclip,Ctrl, Click, Actions), if you don't want it to scroll forever.:

onClipEvent (enterFrame) {
if (_root.scrollabletext._y<0) {
_root.scrollabletext._y = 317;
}
if (_root.scrollabletext._y>317) {
_root.scrollabletext._y = 0;
}
if (_root.scrollabletext._x<212) {
_root.scrollabletext._x = 694;
}
if (_root.scrollabletext._x>694) {
_root.scrollabletext._x = 212;
}
}

Adjust the coordinates (and other likings) to your own scrollable picture of course!

Now if you want to make it into a file for the Internet, go through these steps:
Go to File and choose Publish. Then select Flash (.swf) and HTML, select the preferred options for the rest and then choose publish ok. On your Desktop a .swf file and a .html file appear which you need for publishing on the Internet. You can test the file in you browser by dragging the HTML file to your browser (explorer, Safari,...)

1 comment:

Anonymous said...

------------------------------------------------------------------------
More tips:*Make sure that when you define the coordinates that the registration point is in the middle of your object.
*If you don't want to scroll forever and you just want the picture to stop instead of starting from the same position again, then you just have to fill in the same for the max. coordinate and the same for the min coordinate.
e.g. if(_root.scrollabletext._x>694) {
_root.scrollabletext._x = 694;
}