Film dem Browserfenster anpassen ohne zu skalieren

Flextone · 6. September 2005

Ok nun gehts.

Ich danke dir soweit Datic.

Tobias Menzel · 6. September 2005

Wo Du das Ding am Anfang hinsetzt, ist wurscht - es wird ja eh per AS positioniert.

Setz mal den Ankerpunkt des MovieClips auf seinen Nullpunkt (Öffne den Clip zum Editieren und setze das Textfeld auf die Koordinatei 0|0) - dann sollte der Clip zentriert sein (siehe Anhang).

Gruß

P.S.: Obwohl die Position des Ankerpunktes nur eine geringe Auswirkung auf die Position haben dürfte - ein paar Pixel halt.
.

Dr_Ogen · 11. September 2005

und was ist mit Mozilla?

Hi Leute,

ich muss mich gerade mit dem selben Problem auseinandersetzen. Ich hab mir dazu eure Files runtergesaugt und ausprobiert - klappt auch alles halbwegs. Allerdings nur im IE, sobald ich versuch meinen Film in Mozilla(Firefox) zu öffnen bleibt der Bildschrim weiß. Habt ihr vieleicht nen Lösungsansatz wie man das in den Griff bekommt?

Tobias Menzel · 11. September 2005

Hi,

ich habe alle meine Beispiele mit dem Firefox getestet. Wenn bei Dir da etwas nicht funktioniert: poste bitte Deine beteiligten Dateien.

Gruß
.

mgraf · 12. September 2005

Servus.

Sorry, das ich den Thread wieder aktuell mache, aber ich hielt einen neuen für unnötig, ist ja im Prinzip das gleiche Thema.

Also, ich hab mir eine wunderbare Slideshow gebastelt, und jetzt will ich die importierten Bilder absolut zentriert (v+h) anzeigen.
Wenn ich nur einen Movieclip zentrieren will funktioniert das ja wunderbar, nur beim 2ten eben nicht.
Anm. Alles was ich kann hab ich mir zusammengesucht, also nicht zuviel erwarten

Hier mein Code:

Code:

//---------------------------------------------------------------------
// jpgrotator initialization
//---------------------------------------------------------------------

// check if there's a xml file set in html.
// if not, use the default jpgrotator.xml.
!_root.file ? _root.file ="files.xml": null;

//declaring the stagevars
Stage.showMenu = false;
Stage.scaleMode = "noScale";
Stage.align = "TL";

var l = new Object();
l.onResize = function() {
	container1._x = Stage.width / 2 - container1._width / 2;
	container1._y = Stage.height / 2 - container1._height / 2;
} 
l.onResize();

Stage.addListener(l);

var 2 = new Object();
2.onResize = function() {
	container2._x = Stage.width / 2 - container2._width / 2;
	container2._y = Stage.height / 2 - container2._height / 2;
} 
2.onResize();

Stage.addListener(2);


// Stage fix: in the first frame 
// the Stage.width and Stage.height
// are 0 in IE and Opera for PC .. 
stop();


//---------------------------------------------------------------------
// xml loading and parsing
//---------------------------------------------------------------------

// create necessary variables.
var xmlfile:XML = new XML();
var rotatetime:Number = new Number();
var randomplay:String = new String();
var shownavigation:String = new String();
var transition:String = new String();
var paths:Array = new Array();
var links:Array = new Array();

// the parsing function.
xmlfile.onLoad = function(success) { 
	if(success) {
		// get parameters from xml to variables. 
		// booleans are parsed as strings: can't get them
		// to convert to booleans from xml .. :(
		rotatetime = parseInt(this.firstChild.firstChild.childNodes[0].firstChild);
		randomplay = String(this.firstChild.firstChild.childNodes[1].firstChild);
		shownavigation = String(this.firstChild.firstChild.childNodes[2].firstChild);
		transition = String(this.firstChild.firstChild.childNodes[3].firstChild);
		// get paths and links from xml to array.
		for (var i=0; i < this.firstChild.childNodes[1].childNodes.length; i++) {
			paths.push(this.firstChild.childNodes[1].childNodes[i].attributes.path);
			links.push(this.firstChild.childNodes[1].childNodes[i].attributes.link);
		}
		// build navigation if necessary.
		shownavigation == "true" ? buildNavigation(): null;
		// get first random image if necessary.
		randomplay == "true" ? nextImage = random(paths.length): null;
		// start first rotation.
		rotateStepOne();
	} 
	// xmlfile not needed anymore, so deleting it.
	delete xmlfile;
};

//whitespace fix and actual load command.
xmlfile.ignoreWhite = true;
xmlfile.load(_root.file);


//---------------------------------------------------------------------
// stage elements buildup
//---------------------------------------------------------------------

// vars for determining current and next image.
var currImage:Number = 0;
var nextImage:Number = 0;

// create containers to load the photos into.
// using 2 containers removes loading glitches
// and allows for fade transitions.
this.createEmptyMovieClip("container1",1);
this.createEmptyMovieClip("container2",2);

// var for determining which container is up.
var containerUp:Number = 1;

// set up moviecliploader for handling jpg loading.
var loader:MovieClipLoader = new MovieClipLoader();
var loadListener:Object = new Object();
loader.addListener(loadListener);

// attach button from library.
this.attachMovie("button","button",3);
button._width = Stage.width+10;
button._height = Stage.height;

// attach navigation if needed.
// this function is called after xml has parsed.
function buildNavigation() {
	this.createEmptyMovieClip("navigation",5);
	// duplicate the navigation button.
	for(i=0; i<paths.length; i++) {
		navigation.attachMovie("navBut","navBut"+i,i);
		// set it to the correct place.
		navigation["navBut"+i]._x = i*navigation["navBut"+i]._width;
		// add the text to the buttons.
		navigation["navBut"+i].txtField.text = i+1;
	}
	// reposition navigation bar to bottom-right.
	navigation._x = Stage.width - navigation._width - 10;
	navigation._y = Stage.height - navigation._height - 10;
};


//---------------------------------------------------------------------
// buttons on/off fuctionality
// for navigation and link button
//---------------------------------------------------------------------

function setButtons() {
	// set link button, but only
	// if link is a string of substance
	if (links[currImage].length > 5) {
		button.onPress = function() {
			getURL(links[currImage]);
		};
	}
	// set navigation buttons if navigation is used.
	if(shownavigation == "true") {
		for(i=0; i<paths.length; i++) {
			// current image button gets no actions.
			if (i != currImage) {
				// simple rollover color effect.
				navigation["navBut"+i].onRollOver = function() {
					this.txtField.textColor = 0xff0000;
				};
				navigation["navBut"+i].onRollOut = function() {
					this.txtField.textColor = 0x000000;
				};
				// rotation action.
				navigation["navBut"+i].onPress = function() {
					this._parent._parent.nextImage = this.getDepth();
					this._parent._parent.rotateStepOne();
				};
			}
		}
	}
};

function killButtons() {
	// kill link button
	delete button.onPress;
	// kill navigation buttons if in use
	if(shownavigation == "true") {
		for(i=0; i<paths.length; i++) {
			delete navigation["navBut"+i].onRollOver; 
			delete navigation["navBut"+i].onRollOut; 
			delete navigation["navBut"+i].onPress;
			// set color of current image buttontext to red.
			if (i == nextImage) {
				navigation["navBut"+i].txtField.textColor = 0xff0000;
				// set color of the other buttontexts to black
			} else {
				navigation["navBut"+i].txtField.textColor = 0x000000;
			}
		}
	} 
};

//---------------------------------------------------------------------
// rotation step 1:
// some initialization stuff
//---------------------------------------------------------------------

function rotateStepOne() {
	// kill the current interval rotation
	clearInterval(rotateInt);
	//kill the buttons before rotation starts
	killButtons();
	// load the jpg file
	loader.loadClip(paths[nextImage],"container"+containerUp);
};


//---------------------------------------------------------------------
// rotation step 2:
// what happends after the image has loaded
//---------------------------------------------------------------------

loadListener.onLoadComplete =  function() {
	//swap containers
	container1.swapDepths(container2);
	// determine transition to use if jpg has loaded
	if (transition == "fade") {
		rotateStepThreeFade();
	} else if (transition == "bgfade") {
		rotateStepThreeBgfade();
	} else if (transition == "circles") {
		rotateStepThreeCircles();
	} else if (transition == "blocks") {
		rotateStepThreeBlocks();
	} else if (transition == "fluids") {
		rotateStepThreeFluids();
	} else {
		trace("no transition by that name");
	}
};


//---------------------------------------------------------------------
// rotation step 3:
// the transition-specific functionality
//---------------------------------------------------------------------

// rotation step three if fade is used:
function rotateStepThreeFade() {
	//set alpha to 0
	this["container"+containerUp]._alpha = 0;
	//fade alpha in
	this["container"+containerUp].onEnterFrame = function() {
		this._alpha +=3;
		if(this._alpha >= 100) {
			// move to next step on alpha 100
			delete this.onEnterFrame;
			rotateStepFour();
		}
	};
};

// rotation step three if bgfade is used:
function rotateStepThreeBgfade() {
	//set alpha to 0
	this["container"+containerUp]._alpha = 0;
	//first fade the back container out
	this["container"+(3-containerUp)].onEnterFrame = function() {
		this._alpha -=3;
		if(this._alpha <= 0) {
			// if that is done, discard and fade the front in
			delete this.onEnterFrame;
			this._parent["container"+containerUp].onEnterFrame = function() {
				this._alpha +=3;
				if(this._alpha >= 100) {
					// move to step 4 on alpha 100 
					// and fix alpha of the back container
					delete this.onEnterFrame;
					this._parent["container"+(3-containerUp)]._alpha = 100;
					rotateStepFour();
				}
			};
		}
	};
};


//---------------------------------------------------------------------
// rotation step 4
// setting all vars for the next round
//---------------------------------------------------------------------

function rotateStepFour() {
	// determine next active image
	currImage = nextImage;
	// randomly get image if randplay is true
	if(randomplay == "true") {
		rnd = nextImage;
		// this do-while loop is for fixing 
		// the "same image twice" problem
		do { rnd = random(paths.length); }
		while(rnd == nextImage);
		nextImage = rnd;
	} else {
		// else get the next image in line
		nextImage == paths.length-1 ? nextImage=0: nextImage++;
	}
	// swap container number
	containerUp == 1 ? containerUp = 2: containerUp = 1;
	// re-set buttons
	setButtons();
	// set new interval start
	rotateInt = setInterval(rotateStepOne,rotatetime*1000);
};

hier der kurze teil

Code:

var l = new Object();
l.onResize = function() {
	container1._x = Stage.width / 2 - container1._width / 2;
	container1._y = Stage.height / 2 - container1._height / 2;
} 
l.onResize();

Stage.addListener(l);

var 2 = new Object();
2.onResize = function() {
	container2._x = Stage.width / 2 - container2._width / 2;
	container2._y = Stage.height / 2 - container2._height / 2;
} 
2.onResize();

Stage.addListener(2);

Wäre für Anfänger Antworten dankbar :-(

PS: eine nette Draufgabe wäre auch noch, wenn sich die Bilder dynamisch anpassen, bis jetzt muss ich die Bilder zuerst verkleinern. kA, ob das überhaupt nur mit flash geht?

Tobias Menzel · 12. September 2005

Hi,

1. Können Variablen und Objekte keine Nummern als Bezeichner haben (mein Ding hieß "l", das ist ein kleines "L" und keine 1 ^^)

2. Solltest Du alle Clips im selben Listener positionieren:

Code:

l.onResize = function() {
	container1._x = Stage.width / 2 - container1._width / 2;
	container1._y = Stage.height / 2 - container1._height / 2;
	container2._x = Stage.width / 2 - container2._width / 2;
	container2._y = Stage.height / 2 - container2._height / 2;
}

Gruß
.

mgraf · 12. September 2005

Dankeschön

Hat fast wunderbar funktioniert, nur wenn ich jetzt auf Strg+F mache, zeigt er mir den ersten Container wunderbar in der Mitte an, den 2ten aber links unten!

Was eigentlich egal ist, weil die swf sowieso auf einer Auflösung von 848x480 läuft, da kann ers nirgends anders hinsetzen als in die Mitte!

Was mich jetzt noch interessieren würde, geht das irgendwie das Flash, übergroße Bilder automatisch anpasst?

mfg michi

mgraf · 12. September 2005

Ich interpretiere, keine Antwort, als das das dynamische skalieren nicht möglich ist

Tobias Menzel · 12. September 2005

Geduld, junger Skywalker ^^

PHP:

l.onResize = function() {
	for (var i=1; i<=2; i++) {
		var obj = _root["container" + i];
		var hr = obj._width / Stage.width;
		var vr = obj._height / Stage.height;
		var r = obj._width / obj._height;
		trace(hr);
		if (hr > vr) {
			if (hr > 1) {
				trace(obj);
				obj._width = Stage.width;
				obj._height = obj._width / r;
			} else {
				obj._xscale = obj._yscale = 100;
			}
		} else {
			if (vr > 1) {
				obj._height = Stage.height;
				obj._width = obj._height * r;
			} else {
				obj._xscale = obj._yscale = 100;
			}
		}
		obj._x = Stage.width / 2 - obj._width / 2;
		obj._y = Stage.height / 2 - obj._height / 2;
	}
} 
l.onResize();

Du musst nur dafür sorgen, dass l.onRezize() auch direkt nach dem Laden der Bilder ausgeführt wird, sonst werden die Dinger erst beim Skalieren positioniert.

Gruß
.

Film dem Browserfenster anpassen ohne zu skalieren

Flextone

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

Anhänge

Dr_Ogen

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

mgraf

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

mgraf

Erfahrenes Mitglied

Anhänge

mgraf

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

Neue Beiträge