Hi
I'd like to scroll an image within a masked area, using an image larger than the masked area, to allow the user some interaction in viewing a gallery.
the image should be scrollable using the mouse position to show more of the image.
any ideas?
thanks
aidan
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
In addition. You want the image to move based on the mouse position? Like if the mouse if far to the left, the image will move fast.... if mouse is in center, the image is almost still... correct?
Bad tutorial here, but describing the principle:
http://www.internetcross.c
Another example of a slider:
http://www.flashkit.com/mo
Or slightly different:
http://www.flashkit.com/mo
Or if you are looking for some zoom panner tool, there is one I made here
http://www.billystyx.co.uk
or one someone else made here:
http://www.zoomify.com/
both allow some interaction with the picture
billystyx
thanks for that
not quite what i was thinking, so went on a web prowl and found
http://www.f1play.com/main
conveniently, it's the F1 babes gallery that illustrates almost perfectly. the masked image moves only thru the vertical, but i think it's an even better way to work it.
any ideas?
aidan
Oke 2 downloadable FLA's with your effect.
http://www.flashkit.com/mo
http://www.flashkit.com/mo
The principle is that the speed of the scrolling (and direction if you want) is based on your mouse-position in relation to a Point in your movie. Say your point is on x=50 and y=50. Your mouse is on x=110 and y=50. So the speed of the scroll could be:
speed = mouse._x - point._x // is 60
You would only use the X position for scrolling left / right. And the Y position for scrolling up / down only. Use both for scrolling in all directions off course.
I'm looking for a horizontal ideally dutch.
imagine looking out at a view from a window - as u move yr cursor to the rite, so you see more on the rite side (i would assume that the image moves thru the masked area) - however, as you move your cursor off the masked area, the masked image eases to a stop.
make sense? that's what i'm trying to achieve.
thanks for your help.
aidan
I found this - which is perfect!
http://www.sephiroth.it/fi
problem is that I can't seem to get it to work (like it seems everyone else that downloaded it)
any ideas?
thanks
aidan
If you want horizontal and mask.... take this example FLA (http://www.flashkit.com/m
The example from Sephiroth does not react to the mouse-position whatsoever. It just has photo's glued together going to the left in a circle. This means you have something like this:
onKeyframe (
panoramic._x --;
if (panoramic._x <= -500) {
panoramic._x = 0;
}
)
aidan09, sorry but I cannot provide you with a complete and final solution here on this website unless we find something on the internet that is 100% what you want. I can only point out some ideas. If you have a Flash-movie in which you found a problem, then we have your movie.fla we can look at / studie.... and find out whats wrong.
Found another tool: http://www.flashloaded.com
Thats the thing you want? There is no mask involved though.
And the same from Flashkit again:
http://www.flashkit.com/mo
http://www.flashkit.com/mo
The next one is nice because objects that are far will move slower creating a depth effect:
http://www.flashkit.com/mo
And finally a 360 panoramic with flash tutorial:
http://www.flashkit.com/tu
Hope I had something of your liking there!? :)
Hi
http://www.flashkit.com/mo
I'd ideally like it to ease to a stop as it reaches the edge of the picture, instead of looping thru like a 360.
any ideas how i could change it to do this?
thanks very much for the effort so far!
aidan
You dont want a loop / 360. Then this "UpNorth movie" is not a good starting point, because it is duplicating the image to create the continues looping effect. If you want it to stop on the edge, then the duplication seems unrequired.
So what you want is the mouse-over effect of the "UpNorth movie" and the "easing" effect with actionscript. There is a tutorial on this easing effect here (many options):
http://www.robertpenner.co
But I noticed you are familiar with the easing effect looking at a previous question, maybe some can help you with this too?
http://www.experts-exchang
Here a different type of slider, but helpfull if you look at the actionscript:
http://flash-creations.com
There is, I think, no ready to go Fla-file out there for you to use by just inserting your own image. You will need to combine at least 2 Fla files from above (the North and the Robert Penner one).
Business Accounts
Answer for Membership
by: dutchfoxerPosted on 2005-10-10 at 10:00:55ID: 15053604
Not really sure what you mean. But lets try a few links and you can decide if there is something usefull there. Otherwise give me more info based on these examples:
This one shows how a mask can be put on top of an image and then Move the mask:
http://www.kirupa.com/deve
This one shows you how to create masks using Actionscript (is actually easy: _root.mymovieclip.setMask(
http://www.internetcross.c
And I found the following Actionscript on this Experts website:
_root.createEmptyMovieClip
container.createEmptyMovie
container.nested.loadMovie
_root.createEmptyMovieClip
drawRectangle(rectangularc
function drawRectangle(mc,mX,mY,mas
mc.beginFill (0x000000, 100);
mc.moveTo (mX, mY);
mc.lineTo (maskWidth, mY);
mc.lineTo (maskWidth, maskHeight);
mc.lineTo (mX, maskHeight);
mc.lineTo (mX, mY);
mc.endFill();
}
container.setMask(rectangu
Any of this helpfull?