✔ Flashslideshow Proportionen und Seitenverhältnisse

W

Webflasher

Mitglied
Hallo Leute,

ich habe bei meiner Flashslideshow das Problem, dass die Bilder immer an die Größe des Flashfensters angepasst werden.
Dabei gehen allerdings Seitenverhältnisse und Proportionen verloren. Wie kann ich dafür sorgen, dass dies nicht so ist?

Hier der Code:
Code: 
import mx.transitions.*;

//Diesen Code am anfang der Skriptes setzen
Stage.scaleMode = "noScale";  
Stage.align = "TL"; 

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("(1).jpg", "(2).jpg", "(3).jpg", "(4).jpg", "(5).jpg", "(6).jpg", "(7).jpg", "(8).jpg", "(9).jpg", "(10).jpg", "(11).jpg", "(12).jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;

//5 Sekunde = 5000 Millisekunden Pause zwischen den Bildern
var pause:Number = 5000;


var o:Object = new Object();
Stage.addListener(o);
o.onResize = function() {
    bg._x = Stage.width/2;
    bg._y = Stage.height/2;
    con._x = Stage.width/2-con._width/2;
    con._y = Stage.height/2-con._height/2;
    setBackgroundSize();
};
o.onResize();
/**
*Das Hintergundbild soll  das gesamten Browserfenster einnehmen
*/
function setBackgroundSize() {
    var p:Number;
    if (bg._width<Stage.width) {
        p = Stage.width/bg._width;
        bg._width = Stage.width;
        bg._height *= p;
    }
 if (bg._height<Stage.height) {
        p = Stage.height/bg._height;
        bg._height = Stage.height;
        bg._width *= p;
    }
}
function startLoader(){
	//Lauscher und MovieClipLoader-Instanz erstellen
	_root.mclListener = new Object();
	_root.mcLoader = new MovieClipLoader();
	_root.mcLoader.addListener(_root.mclListener);
	
	//und das erste Bild laden
	_root.mcLoader.loadClip("..."+_root.urls[index], _root.con);

		//Bild ist geladen und MC wurde befüllt:
	mclListener.onLoadInit = function(mc:MovieClip) {
		trace("fertig, beladen wurde "+mc);
		
		//MC Skalieren
        mc._width = Stage.width;
        mc._height = Stage.height;
        
		 //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        _root.fader(mc,true);
	}  

}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
	if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}

//Intervall ist beendet
function weiter(){
	trace("Pause beendet");
	
	//Intervall wieder löschen
    clearInterval(_root.meineID);
	
	//aktuelles Bild ausblenden
	_root.fader(_root.con,false);
	
}

function folgefilm(){
	trace("folgefilm");
	 _root.index++;
	 
	//checken, ob das letzte Bild erreicht wurde
	if(_root.index == _root.len){
		//letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
		_root.index = 0;
	}
	_root.mcLoader.loadClip("..."+_root.urls[index], _root.con);
	
}


startLoader();

this.stop();



Vielen Dank
 
Warum skalierst du nich einfach immer nur die Breite? Du wirdst dann jedoch bei Hochkantbildern das problem haben, das Sie über die Bühne/Stage hinausgehen. Aber dann richtest du diese halt aus. Wenn du beide Seiten anpasst wird er Sie immer verzerren.
 
Probier das mal bin mir aber nicht sicher:

Code: 
o.onResize = function() {
    bg._x = Stage.width/2;
    con._x = Stage.width/2-con._width/2;
    setBackgroundSize();
};
o.onResize();
 
Mir ist noch mehr aufgefallen! Einen weiter runter!

Hat leider nicht funktioniert. Trotzdem DANKE.

Mir ist noch aufgefallen, dass das Problem eigentlich nur bei Hochkantfotos auftritt, da kein Platz links und rechts gelassen wird.

pixelpur hat gesagt.:
Probier das mal bin mir aber nicht sicher:

Code: 
o.onResize = function() {
    bg._x = Stage.width/2;
    con._x = Stage.width/2-con._width/2;
    setBackgroundSize();
};
o.onResize();
Zum Vergrößern anklicken....

Wenn ich das ausprobiere werden die Bilder zwar scharf aber sie sind auch größer als die Bphne. Somit kann man nicht alles sehen. Vielleicht hilft das.

Nach dem Anlernen von AS2 (mittels AS2 Referenzhandbuch) und dem darauf folgendem Frust, dass das alles nicht so will wie ich, habe ich zumindest logisch (ohne Code) einen Lösungsvorschlag gefunden.
Wenn ihr mir vielleicht sagen könntet, ob diese Idee machbar ist, wäre ich euch sehr dankbar.

Meine Idee ist wie folgt:

Ich möchte, dass jedes Bild solange skaliert wird bis die Höhe des Bildes der Höhe des MCs entspricht. Diese Skalierung soll, wie bei den folgenden auch proportional geschehen. Nach der Faustregel, dass Breite durch Höhe immer 1,33 ergeben muss.

Wenn nach dieser ersten Skalierung das Bild eine größere (kleiner ist egal) Breite als der MC aufweist, dann soll das Bild nach der gleichen Skalierungstechnik auf die Breite des MCs gebracht werden.

Nehmt bitte zu Kenntnis, dass ich immer „in PHP denke“. Ich weiß also nicht ob das oben genannte auch mit AS2 möglich ist.

Hoffentlich weiß irgendwer einen Rat. Ich weiß gar nicht mehr weiter und bin kurz davor nochmals ganz von vorne anzufangen (wofür ich aber eigentlich keine Zeit habe).

Vielen Dank
 
Zuletzt bearbeitet von einem Moderator:
Schau dir doch mal den Code an, den du da benutzt. Offensichtlich ist er nicht von dir aber wenigstens die Kommentare kann man lesen. Hier das ist in der Funktion startLoader:

Code: 
//MC Skalieren
mc._width = Stage.width;
mc._height = Stage.height;

Jetzt musst du also sehen, wie groß die Bilder sein sollen. Wenn die zwar so groß wie möglich, aber auf jeden Fall komplett und mit dem richtigen Seitenverhältnis angezeigt werden müssen, musst du 2 Fälle unterscheiden: hochkant und längskant.

Code: 
// variable für den Grad der skalierung des Bildes. also wie viel mal größer es wird - bei 2 ist es doppelt so groß
var skalierung = 0;

if(mc._height > mc._width) {
// höher als breit -> hochkant
skalierung = Stage.height / mc._height;
} else {
// längskant
skalierung = Stage.width / mc._width;
}

// skalieren
mc._width *= skalierung;
mc._height *= skalierung;

Gruß
.
 
Hallo zusammen,

@Jens B.: Du hast natürlich recht, der Code ist nicht von mir, sondern aus einem Tutorial.

Es hat noch nicht funktioniert, liegt aber wahrscheinlich nicht an dem Code, sondern an zwei Dingen, die mir noch aufgefallen sind.

  1. Wenn der Code doch bewirken soll, dass die Bilder skaliert werden, dann widerspricht sich das doch mit einer Funktion weiter oben. Diese soll doch bewirken, dass die Bilder die Größe, der Bühne annehmen. Ich habe den Abschnitt in dem Code unten mal Markiert (sucht nach "AB HIER" "BIS HIER").
  2. Aus irgendeinem Grund werden die hochkant Bilder, immer um 90 Grad in eine beliebige Richtung gedreht.
Es tut mir wirklich leid, das das alles so blöd läuft.

Ich hatte mir übrigens selber folgenden logischen Ablauf für das Skalieren überlegt:

Ich möchte, dass jedes Bild solange skaliert wird bis die Höhe des Bildes der Höhe des MCs entspricht. Diese Skalierung soll, wie bei den folgenden auch proportional geschehen. Nach der Faustregel, dass Breite durch Höhe immer 1,33 ergeben muss.

Wenn nach dieser ersten Skalierung das Bild eine größere (kleiner ist egal) Breite als der MC aufweist, dann soll das Bild nach der gleichen Skalierungstechnik auf die Breite des MCs gebracht werden.

Zum Schluss möchte ich nochmal daran errinnern, dass die Bilder momentan nicht der Bühnengröße entsprechen, sondern größer sind.

Hier der Code:

PHP: 
import mx.transitions.*;

//Diesen Code am anfang der Skriptes setzen
Stage.scaleMode = "noScale";  
Stage.align = "TL"; 

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("(1).jpg", "(2).jpg", "(3).jpg", "(4).jpg", "(5).jpg", "(6).jpg", "(7).jpg", "(8).jpg", "(9).jpg", "(10).jpg", "(11).jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;

//5 Sekunde = 5000 Millisekunden Pause zwischen den Bildern
var pause:Number = 5000;

//AB HIER

var o:Object = new Object();
Stage.addListener(o);
o.onResize = function() {
    bg._x = Stage.width/2;
    bg._y = Stage.height/2;
    con._x = Stage.width/2-con._width/2;
    con._y = Stage.height/2-con._height/2;
    setBackgroundSize();
};
o.onResize();
o.onResize = function() {
    bg._x = Stage.width/2;
    con._x = Stage.width/2-con._width/2;
    setBackgroundSize();
};
o.onResize();

//Das Hintergundbild soll  das gesamten Browserfenster einnehmen

function setBackgroundSize() {
    var p:Number;
    if (bg._width<Stage.width) {
        p = Stage.width/bg._width;
        bg._width = Stage.width;
        bg._height *= p;
    }
 if (bg._height<Stage.height) {
        p = Stage.height/bg._height;
        bg._height = Stage.height;
        bg._width *= p;
    }
}

//BIS HIER

function startLoader(){
	//Lauscher und MovieClipLoader-Instanz erstellen
	_root.mclListener = new Object();
	_root.mcLoader = new MovieClipLoader();
	_root.mcLoader.addListener(_root.mclListener);
	
	//und das erste Bild laden
	_root.mcLoader.loadClip("../bilder/bilder/orginal/home/"+_root.urls[index], _root.con);

		//Bild ist geladen und MC wurde befüllt:
	mclListener.onLoadInit = function(mc:MovieClip) {
		trace("fertig, beladen wurde "+mc);
		
		//MC Skalieren
        mc._width = Stage.width;
        mc._height = Stage.height;
		
		// variable für den Grad der skalierung des Bildes. also wie viel mal größer es wird - bei 2 ist es doppelt so groß
var skalierung = 0;

if(mc._height > mc._width) {
// höher als breit -> hochkant
skalierung = Stage.height / mc._height;
} else {
// längskant
skalierung = Stage.width / mc._width;
}

// skalieren
mc._width *= skalierung;
mc._height *= skalierung;
        
		 //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        _root.fader(mc,true);
	}  

}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
	if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}

//Intervall ist beendet
function weiter(){
	trace("Pause beendet");
	
	//Intervall wieder löschen
    clearInterval(_root.meineID);
	
	//aktuelles Bild ausblenden
	_root.fader(_root.con,false);
	
}

function folgefilm(){
	trace("folgefilm");
	 _root.index++;
	 
	//checken, ob das letzte Bild erreicht wurde
	if(_root.index == _root.len){
		//letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
		_root.index = 0;
	}
	_root.mcLoader.loadClip("../bilder/bilder/orginal/home/"+_root.urls[index], _root.con);
	
}


startLoader();

this.stop();


Vielen Dank
 
Zuletzt bearbeitet:
Die von dir markierten Zeilen skalieren lediglich das Hintergrundbild auf die volle Größe der Bühne. Auch das steht in den Kommentaren:

//Das Hintergundbild soll das gesamten Browserfenster einnehmen
Zum Vergrößern anklicken....

Magst du mal die fla und ein paar Beispielbilder posten dass man das ganze mal ausprobieren und sehen kann. Kannst es ja irgendwo hochladen und verlinken.
 
Klar, mach ich:

Hier der Link zur fla:
(entfernt)

Vielen Dank

P.S.: Ich würde die Dateien gerne so schnell wie möglich wieder löschen
 
Zuletzt bearbeitet von einem Moderator:
Probier's mal mit der fla im Anhang.

Irgendwas scheint mit dein Bildern nicht zu stimmen, die wurden auch im Windows Explorer als längskant angezeigt - als ich sie dann in Photoshop geöffnet habe waren manche aber hochkant. Als ich die dann gespeichert und in der fla verwendet habe ging's. Außerdem sind die Bilder viel zu groß, denk mal darüber nach die bei der Gelegenheit gleich kleiner zu skalieren.

Gruß
jens
 

Anhänge

  • slideshow2.fla
    40 KB · Aufrufe: 25
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück