Difference between revisions of "Actionscript Image Panning"
From Wikicliki
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Simple AS2 Panning script with image loaded in from exterior image files. | Simple AS2 Panning script with image loaded in from exterior image files. | ||
| − | Not terribly complex but hey it does the job. | + | Not terribly complex but hey it does the job. I modded the script from [http://www.kirupa.com/developer/flash8/interactive_image_pan.htm kirupa's image pan] to have both x and y direction mouse pan and exterior image loading. |
== AS 2 == | == AS 2 == | ||
| Line 102: | Line 102: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| + | |||
| + | [[Category:Programming]] | ||
Latest revision as of 09:36, 16 July 2011
Simple AS2 Panning script with image loaded in from exterior image files.
Not terribly complex but hey it does the job. I modded the script from kirupa's image pan to have both x and y direction mouse pan and exterior image loading.
AS 2
////////////////////////////////////
// room == filename of pic
// roomWidth == width of pic
// roomHeight == height of pic
//
// flashvars are defined in html
////////////////////////////////////
var filename = room+".jpg";
container.loadMovie(filename);
container._x = -100;
container._y = -100;
this.onMouseMove = function() {
constrainedXYMove(container,4,1);
};
function constrainedXYMove(target:MovieClip, speed:Number, dir:Number) {
var mouseXPercent:Number = _xmouse/Stage.width;
var mouseYPercent:Number = _ymouse/Stage.height;
var mxSpeed:Number;
if (dir == 1) {
mxSpeed = 1-mouseXPercent;
} else {
mxSpeed = mouseXPercent;
}
var mySpeed:Number;
if (dir == 1) {
mySpeed = 1-mouseYPercent;
} else {
mySpeed = mouseYPercent;
}
target.destX = Math.round(-((Stage.width-roomWidth)*mxSpeed));
target.destY = Math.round(-((Stage.height-roomHeight)*mySpeed));
target.onEnterFrame = function() {
if (target._x == target.destX && target._y == target.destY) {
delete target.onEnterFrame;
} else {
target._x -= Math.ceil((target.destX+target._x)*(speed/100));
target._y -= Math.ceil((target.destY+target._y)*(speed/100));
}
};
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Panning</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body {
background-color: #333;
}
#flashcontent {
width: 300px;
height: 300px;
float: left;
margin: 15px 20px;
}
</style>
</head>
<body>
<div id="flashcontent">
This is replaced by the Flash content.
Place your alternate content here and users without the Flash plugin or with
Javascript turned off will see this. Content here allows you to leave out <code>noscript</code>
tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("NewPan.swf", "container", "600", "400", "9", "#000");
so.addVariable("room", "3rd_lobby_02");
so.addVariable("roomHeight", "600");
so.addVariable("roomWidth", "903");
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
