✔ Übergroßes Bild per Drag & Drop verschieben

[SeargentWinters]

Ich stehe vor folgender Aufgabenstellung:
Ich habe ein Bild mit einer Auflösung von 2000x2500 Pixeln.
Der Inhalt des Bildes ist mein Portfolio.
Ich möchte das man dieses Bild im Browser verschieben kann, so das man jeden Artikel lesen kann.

Ich habe mir folgenden Weg überlegt dies zu lösen:

1. index.fla erstellen, welche in den Stage Einstellungen auf "NoScale" steht, so das die Flash Datei nicht verkleinert wird und ihre proportionen beibehält.
2. Lade ich aus "portfolio.fla" das Bild in einen Movieclip in "index.fla".
3. Per ActionScript sage ich das der MC verschiebbar sein soll.

Ich hätte jetzt eigendlich schon das gewünschte Ergebnis, aber!
Wenn ich das jetzt so lasse, dann kann man das ganze Bild aus dem Fenster herausziehen, und das soll ja nicht sinn der Sache sein. Man soll nur so weit das Bild nach rechtsverschieben können, bis das Bild rechts zuende ist, sprich nach den 2000 pixeln. Das gleiche Spiel mit der Höhe.

Anschließend wäre es noch cool wenn das "draggen" ein bischen "smooth" wäre. Ich hab das mitm Elastic Tween versucht, aber das hat irgendwie nicht so funktioniert und ich weiß ehrlich gesagt nicht wie ich da ran gehen soll.

Gerade noch gefunden, eigentlich genau wie hier: http://www.conceptm.nl/

Wäre super cool wenn man mir n Tipp zu den beiden Problemen geben könnte
Mfg, Chris

 

[Tobias Menzel]

Hi,

probiers mal mit diesem Code ("img" ist hier der Instanzname des Clips mit dem Bild):

Stage.scaleMode = "noScale";
Stage.align = "TL";

img.onPress = function() {
	startSlide();
}

img.onRelease = img.onReleaseOutside = function() {
	stopSlide();
}

function startSlide() {
	var ox = _xmouse;
	var oy = _ymouse;
	var basex = img._x;
	var basey = img._y;
	this.onEnterFrame = function() {
		var dx = _xmouse - ox;
		var dy = _ymouse - oy;
		img.dx = basex + dx;
		img.dy = basey + dy;
		img._x += (img.dx - img._x) / 5;
		img._y += (img.dy - img._y) / 5;
		checkBoundaries();
	}
}

function stopSlide() {
	this.onEnterFrame = function() {
		img._x += (img.dx - img._x) / 5;
		img._y += (img.dy - img._y) / 5;
		checkBoundaries();
		if (Math.abs(img.dx - img._x) < 1 && Math.abs(img.dy - img._y) < 1) {
			img._x = img.dx;
			img._y = img.dy;
			delete this.onEnterFrame;
		}
	}
}

function checkBoundaries() {
	if (img._x > 0) img._x = 0;
	if (img._y > 0) img._y = 0;
	if (img._x < Stage.width - img._width) {
		img._x = Stage.width - img._width;
		img.dx = img._x;
	}
	if (img._y < Stage.height - img._height) {
		img._y = Stage.height - img._height;
		img.dy = img._y;
	}
}

Gruß
.

 

[SeargentWinters]

Könnte dich küssen, genial funktioniert astrein! Exakt das was ich wollte danke danke danke