Developing Wicked Site Stuck On Image Panning Action Script.
Hi friends. i'm stuck on some AS and i need someone's expertise.
Here's a link to the site: http://www.invisioncreative.ca/v04/index2.html
Click on the top portfolio button and a portfolio section will slide in (load ext swf.)
I've used the code from http://www.kirupa.com/developer/flas..._image_pan.htm
The problem is I need to specify where the left and right edges of my scrollable area is - right now it is scrolling with regards to X = 0 and Y = 0. and the scrolling is way off.
Here's the As from the portfolio scrolling movie: ( I've got the AS pasted on to a hot spot so it only works in that window - but the X and Y values are messed as you'll see)
on (rollOver) {
this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}
}
on (rollOut) {
this.onMouseMove = function() {
this.onMouseMove = false()
};
}
I totally appreciate any one who could point me in the right direction.
The Fla files are here: download portfolio.fla
http://www.invisioncreative.ca/source/
KirupaForum > Flash > ActionScript 1.0/2.0
Posted on: 12-14-2006, 04:02 PM
View Complete Forum Thread with Replies
Sponsored Links:
Stuck On Panning/Zooming An Image
It's been a long while since i've been around here, so I'm currently trying to get to grips with AS3, and what i'm trying to do is driving me nuts!
What I want to end up with is an image viewer where i can zoom in and out of the image and pan around it.
I've got so far, and have now got fairly stuck and i've googled for ages trying to find answers but don't seem to be able to find anything.
Problems:
- Zooming in on the centre of the viewing area
- Limiting the panning so you cant pull the images out of the viewing area
THE LINKS:
View Swf
Source Files
THE CODE:
Code:
package {
import flash.display.*;
import flash.events.*;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.net.URLRequest;
import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import flash.geom.Rectangle;
public class ImageViewer {
private var imgLoader:Loader;
private var container:Sprite = new Sprite();
private var frame:Sprite = new Sprite();
private var picMask:Sprite = new Sprite();
private var picTemp:Sprite = new Sprite();
private var picHolder:Sprite = new Sprite();
private var pic:Bitmap;
private var dragRect:Rectangle;
private var loadStatus_txt:TextField;
private var picWidth:int;
private var picHeight:int;
private var frameWidth:Number;
private var frameColor:Number;
private var initPicScale:*;
private var curPicScale:*;
private var btnZoomIn:myButton;
private var btnZoomOut:myButton;
/*var btnPanUp:myButton = new myButton(20,20,4,0xFFFFFF,0.7);
var btnPanDown:myButton = new myButton(20,20,4,0xFFFFFF,0.7);
var btnPanLeft:myButton = new myButton(20,20,4,0xFFFFFF,0.7);
var btnPanRight:myButton = new myButton(20,20,4,0xFFFFFF,0.7);*/
// The constructor function
public function ImageViewer ( sprite, w:int, h:int, frameWidth:Number, frameColor:Number) {
this.container = sprite;
this.picWidth = w;
this.picHeight = h;
this.frameWidth = frameWidth;
this.frameColor = frameColor;
buildViewer(w,h);
}
// The loadImage( ) method
public function loadImage (picURL:String) {
var picLdr:Loader = new Loader();
var picURLReq:URLRequest = new URLRequest(picURL);
picLdr.load(picURLReq);
picLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
function imgLoaded(event:Event):void {
trace('image loaded');
var pic:Bitmap = new Bitmap(event.target.content.bitmapData);
resizePic(pic);
}
}
private function buildViewer( w:int, h:int) {
createFrame(w,h);
createMask(w,h);
container.addChild(picHolder);
}
private function createFrame(w:int, h:int) {
frame.graphics.beginFill(frameColor);
frame.graphics.drawRect(0, 0, w, h );
var glow:GlowFilter = new GlowFilter();
glow.color = 0x666666;
glow.alpha = 0.8;
glow.blurX = 10;
glow.blurY = 10;
glow.quality = BitmapFilterQuality.MEDIUM;
frame.filters = [glow];
container.addChild(frame)
}
private function createMask(w,h) {
var maskW:int = (w-(2*frameWidth));
var maskH:int = (h-(2*frameWidth));
picMask.graphics.beginFill(0xff0000);
picMask.graphics.drawRect(frameWidth, frameWidth, maskW, maskH );
//var dragRect:Rectangle = new Rectangle(frameWidth,frameWidth,picWidth,picHeight);
}
private function resizePic(picture) {
picture.width=picWidth;
picture.scaleY=picture.scaleX;
initPicScale=1;
trace('initScale='+initPicScale)
curPicScale=initPicScale;
trace('curScale='+curPicScale);
picture.x=frameWidth;
picture.y=frameWidth;
picHolder.addChild(picture);
picHolder.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
picHolder.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
addDisplayItems()
}
private function addDisplayItems(){
container.addChild(picMask);
picHolder.mask=picMask;
}
private function createDragRect() {
var dragRect:Rectangle = new Rectangle(0,0,100,100);
}
// This function is called when the mouse button is pressed.
private function startDragging(event:MouseEvent):void {
createDragRect();
picHolder.startDrag(false, dragRect );
}
// This function is called when the mouse button is released.
private function stopDragging(event:MouseEvent):void {
picHolder.stopDrag();
}
public function createControls(size:int,padding:int,margin:int,zoom:Boolean,pan:Boolean){
var buttonSize:int = size;
var buttonMargin:int = padding;
var zoomX:Number = margin;
var zoomInY:Number = picHeight-margin-(buttonSize*2)-padding;
var zoomOutY:Number = picHeight-margin-buttonSize;
if(zoom){
addZoomControls(zoomX,zoomInY,zoomOutY,buttonSize);
}
}
private function addZoomControls(zoomX:int,zoomInY:int,zoomOutY:int,buttonSize:int) {
var btnZoomIn:myButton = new myButton(zoomX,zoomInY,buttonSize,buttonSize,4,0xffffff,0.7,true);
var btnZoomOut:myButton = new myButton(zoomX,zoomOutY,buttonSize,buttonSize,4,0xffffff,0.7,true);
container.addChild(btnZoomIn);
container.addChild(btnZoomOut);
btnZoomIn.addEventListener(MouseEvent.CLICK, zoomIn);
btnZoomOut.addEventListener(MouseEvent.CLICK, zoomOut);
}
private function zoomIn(event:MouseEvent){
trace('*************************************')
curPicScale = curPicScale+0.1
trace ('newScaler='+curPicScale);
trace('initX='+picHolder.x)
var centreX:Number = (frame.width/2)
trace('framecentreX='+frame.width/2)
trace('centreX='+centreX);
var centreY:Number = (frame.height/2)
var prevPointX:Number = (picMask.x-picHolder.x)+centreX
trace('prevPointX='+prevPointX);
var prevPointY:Number = (picMask.y-picHolder.y)+centreY
var newPointX:Number = prevPointX*curPicScale;
trace('newPointX='+newPointX)
var newPointY:Number = prevPointY*curPicScale;
var newWidth:Number = picHolder.width*curPicScale
trace('newWidth='+newWidth);
var newHeight:Number = picHolder.height*curPicScale
var difX:Number = newPointX-prevPointX;
trace('difX='+difX)
var difY:Number = newPointY-prevPointY;
var newX:Number = picHolder.x-difX;
trace('newX='+newX)
var newY:Number = picHolder.y-difY;
trace('newY='+newY)
picHolder.scaleX=curPicScale;
picHolder.scaleY=curPicScale;
picHolder.x=newX;
picHolder.y=newY;
trace('*************************************')
}
private function zoomOut(event:MouseEvent){
if(curPicScale>initPicScale){
curPicScale = (curPicScale-0.1)
trace ('newScale='+curPicScale);
if(curPicScale<1){
curPicScale=1
}
pic.scaleX=curPicScale;
pic.scaleY=curPicScale;
}
}
}
}
Please help if you can, I seem to have hit a brick wall with this - the maths on the zoom repositioning looks right to me, but it still veers off to the left!! and the bounds for the panning just don't seem to do anything! Argh!
Thanks in advance
Chris
View Replies !
View Related
Wicked Long Image Scrolling
OK, sorry, this is driving me nuts.
I have about 20,000 px wide of content I want to be able to scroll from left to right and back again at the viewer's discretion as a scrolling porftolio basically.
Recently I found out the limitations of about 2880px wide for a MC being masked in flash, and obviously this causes some issues. (the entire 20,000px will have a revealing mask over it)
I have the points of the image in an array so the next and previous buttons take you to appropriate places to view the appropriate image, but i can only fit 3 images within the limitations flash gives me, and I will want probably 20 or so. I now have 10 posts, so here's the example of what I'm doing, and it works fine, I just need it to have about 15 more images in it.
Use the following link and go to the stills page:
http://www.nickhand.net/DMA/alpha.html
Thanks!!
Nick
View Replies !
View Related
Wicked Long Image Scrolling
OK, sorry I've posted so much lately, but this issue is slightly urgent, and is making me nuts.
I have about 20,000 px wide of content I want to be able to scroll from left to right and back again at the viewer's discretion as a scrolling porftolio basically.
Recently I found out the limitations of about 2880px wide for a MC being masked in flash, and obviously this causes some issues. (the entire 20,000px will have a revealing mask over it)
I have the points of the image in an array so the next and previous buttons take you to appropriate places to view the appropriate image, but i can only fit 3 images within the limitations flash gives me, and I will want probably 20 or so. I now have 10 posts, so here's the example of what I'm doing, and it works fine, I just need it to have about 15 more images in it.
Use the following link and go to the stills page:
http://www.nickhand.net/DMA/alpha.html
Tann, this is also the deal of the other issues we were working on... now you can at least see what I'm trying to work with, and where the preloader would be (as you click on stills)
Thanks!!
Nick
View Replies !
View Related
Developing The Site?
Ok,
So I've made my menu, I have my intro, then I have my HTML content pages. How to I put it all together?
Example:
Lets say I have a moon shaped vertical menu that wraps around my content pages. Is it easier to make the content all in flash or can I mask my entire SWF over the content pages in order to give it the effect of it all being as one.
Sorry if I'm not making much sense, but what I'm trying to do is avoid that frame page look. I see alot of great sites that are all flash and the pages are contained in flash but I haven't figured that out yet.
If someone has the source code of an entire site to show me how it's put together that would help.
Grrrr... I even confuse myself.
View Replies !
View Related
Developing A Flash Site That The Client Can Update Personally
hi, i've got a problem and i would like people to offer what they think the best solution will be.
as part of a university assignment, i need to develop an online CV for a dance student. my client wishes to be able to update the content on the site herself (she has absolutely no html/flash/computer knowledge). its only the text content that she wishes to be able to change.
searches so far suggest that i can develop the site using dynamic text fields, which upload whatever information is in the external text file, but the problem i have is how will i set it up so that she can edit it and save the changes.
am i able to develop a form on the site that allows her to edit/add text as she pleases? (how will the new information be saved to the text file?)
am i able to do it using flash only, or will i need to use mySQL and PHP (which is an available option)?
(these are some of the solutions i've come across searching for answers)
if she needs to login to servers, upload files, etc.. i don't think she would be able to do it. I could give her a template file that includes the needed variables to do the upload, etc. but if this is the case, it would be easier for her to give me the new content and i update it myself as i think she would get lost in it all.
please help. any and all advice and direction greatly appreciated.
View Replies !
View Related
Developing A Flash Site, Part2: The Intro ,more Details On Part1
In this thread I will reflect my personal thoughts of developing an introduction movie for a flash presence. I just want to write down my opinions and theories about general flash development. I also will do this in upcoming articles and maybe it is helpful for some of you. What I'm writing could also be seen as flash philosophy. I would appreciate when anyone of you also could add some additional thoughts or critics on this thread.
When writing an intro - The basic concept
When writing an intro for a flash site we should think about the functional meaning of the introduction. An intro is "talking" to the customer or surfer. An intro can be seen as an employee representing a company. When an intro "talks" it has to find the right balance between gesture (animation), information (words, sentences, content) and emotional expression (graphics, music, sound).
The effect of motion
When we compare an intro with a person we know that a conversational partner using additional gesture is more interesting than a person using no gesture attached to his speech. Why? Gesture (motion) attaches life to a conversation. Gesture focuses the interest of the bystander on the information provided. When we look on a flash stage with a moving object and a static object, we always will look at the moving object at first. The eye has a weakness for motion, because motion represents live (change) and we all are living and changing at every moment in time. Flash animation attaches life to provided information and makes it interesting for our eyes.
The less flash objects on stage the higher the viewer's focus
When we write an intro it is advantageous to display as less as objects as possible in a sequence. Why? Well, the more objects we use at one time the more the viewer looses focus on each object or information. The eye can only fix one object at one time. When there are too many objects on stage the visitor doesn't know which object he has to focus on. This is ok when we just want to entertain our customers, but in such a sequence it's very hard to transfer information. The viewer needs to watch global and not detailed.
When there is to much motion on stage
When there is much animation / motion in a sequence our understanding for additional provided information (words, sentences) gets blured.
We are getting confused. We want to orientate but we don¡¦t know where to look at. So once again we have to watch global and not detailed. In cause of our confusion we loose our interest for detailed information. Overstated movements blur information interest. There is only one way to transfer information in such a type of sequence
Providing information in fast motion sequences containing many objects
There is a trick to maintain the viewer¡¦s focus when many fast moving objects are on stage . It¡¦s the speed level of motion. When we slow down the motion of the most important object or message in a sequence, the viewer can clearly focus on it, we establish a contrast of motion. When we slow down the most important object or information other objects stay at a higher level of speed. „³ Different tweening speeds result in a contrast of motion and in a focus on the slowest object.
The huge advantage of flash: Providing information in portions
A huge advantage of flash is the fact that we can provide content or information step by step. We can provide it in portions. We do not have to write down all our content on html pages any more. We are making movies. Now we can really feed our customers with information. But he needs some time for chewing. You have to slow down animation speed when it comes to information transfer. When you have huge personal content, you can not throw it in your customer¡¦s face by a static flash page with a lot of text. Just take a portion of information and provide it to your customer by animated motion. He will appreciate it, he will focus on it, he eats it, he chews and when he finally swallows he really has understood what you¡¦re talking about. Nice metaphor isn¡¦t it?
I will write more in the next days. Please post some comments or suggestion on this thread.
View Replies !
View Related
Full Flash Web Site Panning
Ive been wondering how some web sites create the panning effect, that the entire web site is on one big image that the user can get to by clicking on a menu option to "jump" or panning using the mouse, like on http://www.bio-bak.nl/ anyone know how to achive this? I would search for it but i have no idea what its called
View Replies !
View Related
Help With Panning An Image
Hi,
In my movie, a user can pan a map image left, right, up and down. I have made buttons for each direction and they continuously scroll when the mouse is over the button. At the moment the map (movie clip called "map") keeps scrolling until it disappears off the movie but I would like the map to stop when the edge of the map reaches the end of the display area.
The movie size is 550px (width) by 520px (height). The map size is 519.9 (height) by 746.8 (width) and the dimensions are -9.7x (left), -195.1y (up), 510x (right) and 551.7y (down). I have a display area with the following dimensions 48.3x (left), 40.6y (up), 497.7x (right) and 434.6y (down). I only want the map to appear when it is in the display area.
The ActionScript code that makes the map scroll continuously is the following:-
setProperty ("/map", _y, Number(getProperty("/map", _y))+18);
x_value = getProperty("/map", _x);
y_value = getProperty("/map", _y);
I want the left map edge (-9.7x) to scroll across to the right but only as far as the left display area edge (48.3x) and then to stop scrolling. Does anyone know how to do this??? I have tried with some if statements but nothing has worked. Also, is _x the x value taken from the left or the centre???
Hope someone can help me!!
View Replies !
View Related
Panning Image With AS
I am using the following code to pan an image based on the mouse position. All works fine except I want the image to slide to the correct position with easing if you move the mouse off of the stage and then reenter the mouse in a different position from when you left. Right now, what it does is snaps to the mouse instead of sliding to it.
Code:
_root.createEmptyMovieClip("holder", 1);
holder.attachMovie("image", "image", 1);
holder._x = 0;
holder._y = 0;
slope = (Stage.width - holder._width)/Stage.width;
vertSlope = (Stage.height - holder._height)/Stage.height;
curXPos = holder._x;
curYPos = holder._y;
_root.onMouseMove = function(){
_root.onEnterFrame = function(){
_root.holder._x = slope*_xmouse;
_root.holder._y = vertSlope*_ymouse;
curXPos = _root.holder._x = slope*_xmouse;
curYPos = _root.holder._y = vertSlope*_ymouse;
trace("x:" + curXPos);
trace("y:" + curYPos);
delete(this.onEnterFrame);
}
}
Can somebody take a look or give me an idea as to how I can make it slide to the mouse from the images current position with easing instead of snapping to it? Any help is greatly appreciated.
View Replies !
View Related
[CS3] Image Panning HELP
Hi,
here's my file :
http://www.muellerdesign.com/aftp/te...ate-Dv1.0.html
so I have sort of have an image reel than pans on mouse move and when you roll over on the image a white box pops in.
Each photo is an button that makes up 1 movie clip on the main timeline that gets controlled by a script on the main timeline also
here's what I want to happen:
I was hoping that when I roll over those white boxes that pop in, the main movie clip will go to a specific place on the stage (with easing) and the panning script on mouse over will be disabled until I roll out.
I'm a total newbie, and this is way too complicated for me, but i have to do it.
pls help:
here's the script for the panning
this.onMouseMove = function() {
constrainedMove(MC,5, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == -1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}
stop();
here's an actionscript for making movie clips move with ease to s specific place on the stage
onClipEvent (enterFrame) {
xMC = getProperty(_root.MC, _x);
moveMC = _root.xTargetMC - xMC;
setProperty(_root.MC, _x, yMC + (moveMC/10));
}
is there a way to combine these???? sorry im losing my mind.
HELP!
View Replies !
View Related
Panning Image Help
Hello
Im having a bit of trouble on the panning image im working on. Theres a couple things I wanna do to it but im not quite sure how. Im useing partial code form the infinate menu tutorial but added a y axis onto it. Im working with a really big image so Instead of making the image infinate, how would I set up boundries so that the image could scroll to a certain point and then stop when it reaches the end. the map movie code is just this.
onClipEvent (load)
{
xcenter=350;
ycenter=200;
speed=1/20;
}
onClipEvent (enterFrame)
{
var distance=_root._xmouse-xcenter;
_x+=(distance*speed);
var distance=_root._ymouse-ycenter;
_y+=(distance*speed);
}
I also wanted to make it so the camera zooms in at certain points on the image. Any help is very much appreciated as always.
Thanks in advance,
Zach
View Replies !
View Related
Panning Image
Hi, I need help with panning an image. I already made the panning but I cant stop the image when it reach the border of the mask. I look for tutorials in other sites and haven't found anything
If some one want to see my .fla here it is:
www.ebsolutions.ws/imagepanning.fla
Thank you
View Replies !
View Related
IMAGE PANNING :-(
Hello,
Can someone please give a tutorial or code for image panning, the same as this one http://www.kirupa.com/developer/flas..._image_pan.htm but for FLASH MX 2004
Really, really want this one.
Thanks.
View Replies !
View Related
2D Image Panning
Can anyone tell me how this was done, or what might all be involved for that matter in creating it? Would you say it's all 2D? Any advice would be great appreciated!
http://www.scifi.com/eureka/
Thanks!!
View Replies !
View Related
Image Panning Help
I am currently working a piece in flash the utilises the great tutorial (right here on Kirupa) for image panning.
What i want to be able to do is create a left and right button the controls the panning of the image rather than the mouse.
I would be greatly greatful if some kind soul could point me in the right direction of how to achieve this!
Star*
View Replies !
View Related
Image Panning
Hi there i am in desperate need of some help (project due in next week! ahh). Basically i found the image panning tutorial on this website, http://www.kirupa.com/developer/flas..._image_pan.htm which is almost perfect however its not working exactly how i need it to work.
i need it to work exactly like it does in the link below!
http://mediaweb.aib.ac.uk/fdashow08/...web/index.html
the reason they differ is because the image pans left and right from the centre of the animation window which i need it to do, but in kirupas you will notice, if you put ur cursor in the middle of the image, its not still it is moving at 100mph to the right. I need the image to be perfectly still when the cursor is the middle of the image. Im struggling to explain this but i hope someone understands!
If anyone can help ill be forever grateful
thankyou all
View Replies !
View Related
Image Panning
I know how to do the action script for the image pan. My problem is that I am loading a movie with a stage size of 100 w 50 h into a stage size of 200 w 100 h. When the smaller movie loads into the bigger one, the image begins to pan from left to right when I move my mouse from left to right. However since this stage size is bigger, even if I place my mouse at the top of the stage, the image still pans once I move my mouse from left to right. HOW CAN I CONSTRAIN THE IMAGE FROM PANNING FROM WITHIN A 100 W BY 50 H AREA?
View Replies !
View Related
Image Panning Help..
I just had a look at the image panning tutorial, is there a way that this can be modified so that when for example clicking on a button within the scrolling movieclip the panning stops and something else happens and then when the button is clicked again or when an animation finishes we can activate that panning again when the user moves his mouse....?
View Replies !
View Related
Image Panning
Hello everyone
i need to design a website for someone, and i am a total beginner in matters of coding, so i apologize for possible blindness to obvious things.
i am having a great difficulty to create a simple code for image/mc panning with an easing effect. there's a tutorial here for doing this in as2, but nothing similar for as3.
i tried to write a very simple code, there it is
Code:
stage.addEventListener(MouseEvent.MOUSE_MOVE,mur)
function mur(e:MouseEvent):void {
sq.x=stage.stageWidth -mouseX;
}
but i got stuck on thinking how to add easing=> how to slow down and stop when reaching the mc's edge? to see the swf, click here
so i searched the web and found this code, but, as you'll see if you'll follow the link below, for some reason it all trembles weirdly, and i dont know how to make it smooth.
Code:
function panImage(E:MouseEvent):void {
var target:MovieClip = bg_mc;
var mousePercent:Number = mouseX/stage.stageWidth;
var mSpeed:Number;
var dir:Number = 1;
target.cacheAsBitmap = true;
if (dir == 1) {
mSpeed = 1 - mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target.width-stage.stageWidth)*mSpeed));
target.addEventListener(Event.ENTER_FRAME, del);
}
function del(E:Event):void {
var speed:Number = 2;
var myMovie:MovieClip=MovieClip(E.target);
if (myMovie.x == myMovie.destX) {
borra(myMovie);
} else if (myMovie.x>myMovie.destX) {
myMovie.x -= Math.ceil((myMovie.x-myMovie.destX)*speed/100);
} else if (myMovie.x<myMovie.destX) {
myMovie.x += Math.ceil((myMovie.destX-myMovie.x)*speed/100);
}
}
function borra(cual) {
cual.removeEventListener(Event.ENTER_FRAME, del);
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);
for crystal clearness, the rectangle in the swf is instantiated as "bg_mc".
to see the swf, click here
please please help me out, with either of the codes, my dinner depends on it
PS.
if somebody could also tell me how to control the amount of panning (speed) to mouse
movement ratio i'd be eternally grateful..
thanks,
michael
View Replies !
View Related
Panning Image Help
Hello
Im having a bit of trouble on the panning image im working on. Theres a couple things I wanna do to it but im not quite sure how. Im useing partial code form the infinate menu tutorial but added a y axis onto it. Im working with a really big image so Instead of making the image infinate, how would I set up boundries so that the image could scroll to a certain point and then stop when it reaches the end. the map movie code is just this.
onClipEvent (load)
{
xcenter=350;
ycenter=200;
speed=1/20;
}
onClipEvent (enterFrame)
{
var distance=_root._xmouse-xcenter;
_x+=(distance*speed);
var distance=_root._ymouse-ycenter;
_y+=(distance*speed);
}
I also wanted to make it so the camera zooms in at certain points on the image. Any help is very much appreciated as always.
Thanks in advance,
Zach
View Replies !
View Related
Panning Image
Hi, I need help with panning an image. I already made the panning but I cant stop the image when it reach the border of the mask. I look for tutorials in other sites and haven't found anything
If some one want to see my .fla here it is:
www.ebsolutions.ws/imagepanning.fla
Thank you
View Replies !
View Related
Image Scrolling/panning?
I want a line of objects that go well off the stage and have a mask, so only 1 object can be seen at a time. and when you use a scroll bar or click on a link say 1-10 to get to what object you want to.
say: 1 2 3 | 4 | 5 6 7 8 9 10
then you click 9
1 2 3 4 5 6 7 8 | 9 | 10
the brackets represent what is view able in the scene but when it scrolls from 4 to 9...you see the inbetweens scrolling through it on the way from 4 to 9 so you can see 5 6 7 8 scroll through the "window" ....
View Replies !
View Related
[F8] Image Panning & Communicating Two .swf's
Hi!
I have some serious troubles with AS, maybe somebody would be kind enough to help me or at least give me some hints, as I am stuck with my personal website since last week and can't move on
First problem: I am trying to do MC panning from left to the right and the other way around. I used and slightly modified tutorial from kirupa.com:
http://www.kirupa.com/developer/flas..._image_pan.htm
It's working pretty well but MC pans no matter where you point the mouse cursor - whether the mouse is over MC or not. It pans that movie clip all the time. I would like it to move only when the cursor is over the MC. Could anyone have a look at my .fla file and give me some hint how to do that? You can download .fla from here:
http://spoon.unspl.com/imagePan_3.fla
And my second question: How can you communicate two .swf files, in such a way that e.g. file "1.swf" pass some action script to file "2.swf" that is then executed in "2.swf". Let say that when frame 20th is played in file 2.swf, then in file 1.swf background colour changes. I've tried many different tutorials but still can't make that working.
Please, I need your help!
View Replies !
View Related
Panning Image Not Working Right, HELP
HELP!
So I have an image that pans onMouseMove, several things happen
onRelease= it attaches a movieclip and play (this works)
Problem:
I want the attached movieclip to be removed when I roll-out the hit area and continue panning. It kind works but the when I pan from hit area to outside hit area the panning stops and I have to move the mouse around for it to work, it's weird I dont know what I'm doing wrong pls, help!
I attached the swf file for the animation.
and hover over on the first to 2nd photo. I just applied the code to those.
here's my code
// panning code
stop();
var _MAIN:MovieClip = this;
var isSelected:MovieClip = null;
var canPan:Boolean = true;
MC._x = locX;
//
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/bg._width;
var mSpeed:Number = mousePercent*dir;
target.destX = Math.round(-((target._width-bg._width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX || target._x>0 || target._x<bg._width-target._width) { delete target.onEnterFrame;
if (target._x>0) {
target._x = 0;
} else if (target._x<bg._width-target._width) {
target._x = bg._width-target._width;
}
} else if (canPan) {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
} else {
delete target.onEnterFrame;
}
};
}
// load movie clip code
function doPress(btn) {
canPan = !canPan;
if (!canPan) {
isSelected = _MAIN.attachMovie(btn._name, btn._name, 1, {_x:0, _y:0});
} else {
isSelected.removeMovieClip();
MC._x = locX=0-(btn._x);
}
}
MC.btn_A.onPress = function() {
doPress(this);
};
//code on hit areas
//this part doesnt really work smoothly
MC.btn_A.onRollOut = function() {
canPan = !canPan;
!canPan == true
isSelected.removeMovieClip();
};
MC.btn_B.onPress = function() {
doPress(this);
};
MC.btn_C.onPress = function() {
doPress(this);
};
MC.btn_D.onPress = function() {
doPress(this);
};
_MAIN.onMouseMove = function() {
constrainedMove(MC,4,1);
};
HELP! thanks a lot!
View Replies !
View Related
Multiple Image Panning
Hi. I saw the Interactive Image Panning tutorial (great one) and i whould like to know what modifications can be made on the tutorial actionscript in order to pan more than one image. Actionscipt isn´t my cup of tea, so you will have to bare with me
I whould apreciate the help...
thanks
View Replies !
View Related
Image Panning Problem
Hi
I have been using the code from Krilnon image panning tutorial :http://www.kirupa.com/developer/flas..._image_pan.htm.
Seem to be have a problem setting different co-ordinates than a 0,0 xy.
Basically what is happening is when i position the movie to a x position of 179px, the image scrolls, but i need to move to 0px to see the edge of the image - i need to be able to roll over the people in the image to view info, but on scrolling back right to left, the image does not reset to 179px position. here is an example of it:
http://www.origin.ie/imagepan
Any suggestions would be greatly appreciated.
Mick
View Replies !
View Related
Panning Image Question
hey guys, i have a question. I'm looking to create a panning image controlled by two buttons spanning the height of either side of the workspace. i found this turorial http://www.kirupa.com/developer/flas..._image_pan.htm which is similar, however i want to put buttons in the movie and it would be rather hard to click on a button if youre chasing it around the screen. So basically i want to be able to scroll the image like that, but to have the scrolling controlled by two rollerover buttons, one of the left scrolling the image left, and the right to the right. The only thing is, i want to be able to do this and have it stop at the edge of the background so that it wont keep going indefinitely showing a blank screen. If anybody can point me in any direction, i would be insanely appreciative. Thanks, everyone
View Replies !
View Related
Interactive Image Panning
I just read the tutorial for the Interactive Image Panning. I am using this code for a starting point for a navigation menu that is being masked. I am want the menu to scroll only when the mouse is over the masked area. I have found many references to scrolling menus but they all scroll with the stage and not just the menu area.
Anyone have any tips for doing this?
View Replies !
View Related
Interactive Image Panning
Hello
First of all let me start by saying how wonderful this site is.
I was in the neighborhood and loved this tutorial.
---> http://www.kirupa.com/developer/flas..._image_pan.htm <---
I was wondering if anyone could tell me if it would be possible to add a simple button to this movie. I wanted to see if I could add a second image to upload once the first one was clicked on.
I’ve tired to add a simple scene script but it will not budge. If anyone has any input relating to this tutorial would be a great help. Or if anyone knows of simpler way of doing this would be helpful as well.
on (release) {
gotoAndStop ("Image2", 1);
}
ˆ-ˆ
View Replies !
View Related
Interactive Image Panning
Hi,
http://www.kirupa.com/developer/flas...image_pan3.htm
I was looking at the tutorial for the above and found it very useful, but I wanted to get the scroll working for the vertical axis aswell as just the horizontal. I'm a bit of a novice when it comes to AS so I thought I could pretty much just copy the code for the x axis and change all the X's to Y's. However this didn't work. Does anyone have any advice as to what I should be doing? Much appreciated.
View Replies !
View Related
Interactive Image Panning
Hi, I have just completed your tutorial on interactive image panning (http://www.kirupa.com/developer/flas...image_pan3.htm), however i have a couple of question i was hoping someone might be able to help me with:
1. when i move the mouse, the image scolls the opposing direction; in the tutorial the image scrolls with the mouse...? i pasted the code from the page,so i'm unsure what the solution might be...
2. I would like to be able to scroll the image on the x and y axis; both up and down/left and right, and was wondering how to modify the code to do this; is it possible to capture whether the mouse is moving left or right with an event listener, or is there some other way of doing this?
any help would be much appreciated, thanks!
View Replies !
View Related
Image Panning In Nested MC
I am using the Image panning script from one of Kirupa.com's tutorial. The instance name of the MC on stage is , contentMC, now what I want to do is I want this "Image panning" script to work which is inside my contentMC, called, glMC (contentMC -> glMC). The AS is not working, I have tried to change the acquiring values to _parent, but to no avail. Where am I going wrong?
Here's the AS:
this.onMouseMove = function() {
constrainedMove(glMC, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _parent._xmouse/Stage.width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else if (target._x>target.destX) {
target._x -= Math.ceil((target._x-target.destX)*(speed/100));
} else if (target._x<target.destX) {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}
View Replies !
View Related
Image Panning Gallery - Help Please
Hi,
I have just found this forum today and boy am I glad I did!
I have done the tutotrial "Interactive Image Panning", and have applied it to a gallery I am trying to create, but I can't get the scrolling to stop when the gallery reaches the edge of the stage - can someone please help?
fla is uploaded here
http://www.fili.com.au/mens-new3.fla
Thankyou!
View Replies !
View Related
Image Panning Question
I had tried the image panning tutorial and i have some question with it bcoz i m begginer of AS. Can anyone clear d question marks in my mind? First below is the code and explaination for it. The red colour words are my questions.
/*The below section of code registers an onMouseMove event handler. Whenever the mouse moves, any code contained within the this.onMouseMove function will be executed. The code that is executed is the function call constrainedMove(bg_mc, 4, 1); constrainedMove(target, speed, dir)
*/
this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
/* Declaring a new function called constrainedMove. It takes in three arguments - target, speed, and dir. Notice that I define their types as MovieClip, Number, and Number.
*/
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
/*The mousePercent variable stores a fraction of your mouse's X position with regards to your total stage width. This number varies between 0 and 1, and as you will see later, it helps dampen or speed up how fast your image scrolls to its boundary.
*/
var mousePercent:Number = _xmouse/Stage.width;
/*The mSpeed variable either stores the value stored by your mousePercent variable or it reverses the value in your mousePercent variable. Depending on what value you pass in for the dir variable, your mousePercent value will be either mousePercent or 1 - mousePercent.
What this essentially does it reverses the movement of the image scroll based on your mouse movement. For example, when the dir value is 1, your image pans in the same direction as your mouse movement. If the dir value is anything besides 1, then the mouse
movement and the image panning work in opposite directions.
*/
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
/*The destX variable stores the X position of our image. This line of code is designed to ensure that no matter where the mouse is, as determined by the mousePercent variable stored in mSpeed, that your image will not go beyond either the left-most or right-most
boundaries. One way you can think about this is that, mSpeed is either (1 - mousePercent) or mousePercent. Either way, mousePercent is _xmouse/Stage.width. When you expand this out, for example when dir = 1, your destX variable can be simplified as:
-(_xmouse * (target._width - Stage.width) / Stage.width)
As your mouse position moves, your value for destX changes. What this does, as you will see shortly, is that it sets the final destination for where your image needs to scroll. When you are panning, you would have noticed the image movement is not immediately responsive to your mouse movement. There is a gradual acceleration and deceleration as the image moves to its destination. The destination is what the above destX value finds for you.
*/
Why target._width - Stage.width? Cant target._width just multiply with mSpeed?
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
/*If your image position, target._x, is less than or greater than your destX variable, then you need to move in the appropriate direction to make sure that the difference between where you are and where you should be as specified by the destX variable is
reduced to zero. In other words, your goal is to have both your current position and
the position stored by destX to be the same so that you end the enterFrame by reaching target._x == target.destX.
*/
target.onEnterFrame = function() {
if (target._x == target.destX) {
sorry, i know is a dumb question, is the code blow means stop running d coding in frame?
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}
And last question. can this image panning only when d mouse pointer is moving inside then image itself? The image from tutorial is panning when ur mouse pointer is at anywhere in d stage. Let say we make d stage size bigger than the image and we wan to make d image only panning when d mouse pointer is moving in image area. Anyone know how to do it? Plz let me know if you know. Thank you.
View Replies !
View Related
Interactive Image Panning
http://www.kirupa.com/developer/flas..._image_pan.htm
Hello, i have a question here.
I dont want to pan the image within the Stage size.
i want to pan the image within a masking. so that i can adjust the width & height anytime.
Can anyone show me how to change the script?
thanks.
View Replies !
View Related
Panning Image = Choppy?
I'm trying to move an image that is a sort of widescreen image from one of the stage to the other side - when played back in .swf form it appears very choppy - is there a way to stop this from happening? (this is for a presentation not the web)
Thanks!
Boon.
View Replies !
View Related
Help Flash Image Panning
I am currently developing a pixel and I would like the user to be able to pan around the city.
I think the easiest way of doing this is to have a very large image (3500px by 3000px) and four buttons, one at the top, bottom, left and right. I would love it that when the user hovers over the button the screen/stage will move in the direction of the button. for example when the user hovers over the left button flash will move the image to the right so the screen will move left.
Please help I have made most of the pixel designs, I just don't know how to do this, could someone point me in the way of a tutorial or something.
Thank You
Big J
View Replies !
View Related
Interactive Image Panning
Hey all, I'm new here! And I've got a reason for that. I've been looking for a Flash component/tutorial I can use to make an interactive map. Now I've found the tutorial Interactive Image Panning here at Kirupa.
In that tut you go with the mouse to the right, and the image floats to the left...but here's the problem/question: I also want to get the image float to the bottom/top, when the mouse goes to top/bottom...
Can anyone help me with that? If, of course, you know what I mean by this unclear message
mane.
View Replies !
View Related
Image Panning - Stopping?
I built out a Flash file with the help with Kirupa's image panning script: http://www.kirupa.com/developer/flash8/interactive_image_pan3.htm
Anyhow, everything is working great, but I've added some on release nav items that overlay the panning motion. Ideally I'd love to have the overlays, when activated, stop the mouse movement altogether. I checked out some examples via Google, and I *think* it's possible, I just have no idea where to start.
Here is my image panning code:
Code:
this.onMouseMove = function() {
constrainedMove(bg_mc,4,90);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed-3000));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else if (target._x>target.destX+5) {
target._x -= Math.ceil((target._x-target.destX)*(speed/400));
} else if (target._x<target.destX) {
target._x += Math.ceil((target.destX-target._x)*(speed/400));
}
};
}
Any help / insight is really appreciated!
View Replies !
View Related
Vertical Image Panning?
Hi there, I'm a bit slow with Flash, so forgive me if I'm a complete idiot with this stuff.
Okay, I followed the Interactive Image Panning tutorial here on Kirupa (great place btw) and it works great horizontally, but I'm a bit confused when trying to do it vertically. I changed so far everything from x to y and width to height, but it seems that when I test the movie, and scroll down, the image completely scrolls by, leaving what's left, which is white. Why won't it stop at the edge of the image like the horizontal version?
this is what I have at the moment:
Code:
this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _ymouse/Stage.height;
var mSpeed:Number;
if (dir == 1) {
mSpeed = mousePercent;
} else {
mSpeed = mousePercent;
}
target.destY = Math.round(-((target._width-Stage.height)*mSpeed));
target.onEnterFrame = function() {
if (target._y == target.destY) {
delete target.onEnterFrame;
} else if (target._y>target.destY) {
target._y -= Math.ceil((target._y-target.destY)*(speed/100));
} else if (target._y<target.destY) {
target._y += Math.ceil((target.destY-target._y)*(speed/100));
}
};
}
View Replies !
View Related
Interactive Image Panning
Hi ,
I tried working with this effect :
http://www.kirupa.com/developer/flas..._image_pan.htm
It works fine when we use it as single file but suppose I load the same file into another file, it doesn't work fine especially if I load 2 such movies in a movie.
Any help would be really appreciated.
Thanks
Yogendra
View Replies !
View Related
Help With Interactive Image Panning..
Hi I've been following the tutorial on the site for interactive image panning, but i would like to be able to pan both on the x and y axis, i've been trying various things but with no luck, can anyone point out how i go about adjusting the code to do X & Y?
do i need to create a whole new function fo the Y or can i incorporate it into the current code.
help is great;y appreciated
Code:
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == 0) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX-target._x)*(speed/18));
}
};
}
thanks for your help
bo
View Replies !
View Related
Interactive Image Panning
Hi.
I've acted upon your tuturial here and even added the Yscale to make it more fluent, but I lack flexibility in mouse movement.
Here's the link to what the image is supoosed to move like:
http://bedtimestoryband.com/test/vlab/01/index.html
and mine moves and kinda gets stuck:
http://www.spice-e.net/samples/vlab/vlab.html
This is the code in the flash:
this.onMouseMove = function() {
constrainedMove(bg_mc, 15, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mouseYPercent:Number = _ymouse/Stage.height;
var mSpeed:Number;
if (dir == 2) {
mSpeed = 1-mou0.sePercent;
} else {
mSpeed = mousePercent;
}
var mYSpeed:Number;
if (dir == 2) {
mYSpeed = 1-mouseYPercent;
} else {
mYSpeed = mouseYPercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.destY = Math.round(-((target._height-Stage.height)*mYSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else if (target._x>target.destX) {
target._x -= Math.ceil((target._x-target.destX)*(speed/100));
} else if (target._x<target.destX) {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
if (target._y == target.destY) {
delete target.onEnterFrame;
} else if (target._y>target.destY) {
target._y -= Math.ceil((target._y-target.destY)*(speed/100));
} else if (target._y<target.destY) {
target._y += Math.ceil((target.destY-target._y)*(speed/100));
}
};
}
Thanks for the help
Galia
View Replies !
View Related
Interactive Image Panning
There is an Interactive Image Panning tutorial on Kirupa.
I was curious if anyone knows how to get this to pan the X and Y rather than just along the X axis.
In other words, any mouse direction you move would move the image, the same way or the opposite way.
View Replies !
View Related
Panning Image, But With Buttons
okay so I used the image panning tutorial to achieve and effect that I have been trying to accomplish for a while now.(ty)
The last part of the puzzle is to take the image mc and use a bunch of buttons instead. so in effect i have a horizontal "wheel of fortune" type menu. The issue I am having is that i need the mouse movement to get triggered and "scroll/pan" the series of buttons and then let the buttons settle. Right now it is very difficult to select a different button without quite a bit of effort.
please let me know if you have any ideas.
View Replies !
View Related
Image Panning On Load
Hi
Ive created a new flash movie that pans an image when you move the mouse over it.
The problem I have is that I would like the movie to pan from right to left when the flash movie loads then pan in any direction when the mouse moves over it.
How would I modify the following code to do that?
this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _xmouse/Stage.width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1-mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX-target._x)*(speed/100));
}
};
}
Many Thanks
Bilbo
View Replies !
View Related
|
TRACKER
