Bilder vom xml laden und an MC anpassen

[WaZZkeSS]

Hallo allerseits!

Ich habe bereits im Netz gesucht und ähnliche Beispiele ua. gefunden. Leider konnte ich keine Lösung finden. Ich hoffe das Ihr mir dabei helfen könnt.

Ich habe mir eine Bildergallerie laut
http://www.multimedia.de/design/tutorial_bildgalerie.php
erstellt. Es ist alle gleich bis auf die xml Datei.

Dieser hat folgenden Aufbau.

<?xml version="1.0" standalone="yes"?>
<Gallerie>
  <bilder>
    <pfad>img/img1.jpg</pfad>
  </bilder>
  <bilder>
    <pfad>img/img2.jpg</pfad>
  </bilder>
  <bilder>
    <pfad>img/img3.jpg</pfad>
  </bilder>

Es sind ca. 300 Bilder.

Die Daten werden wie folgt gelesen

function ladeBild(paktBild) {
    status_mc._visible = 1;
    bild = mein_xml.firstChild.childNodes[paktBild].childNodes[0].childNodes[0].nodeValue;
    loadMovie(bild, "bild_mc");
}

Mit felgendem Codezeilen kann man zwar das Bild skalieren

    bild_mc._xscale = 36;
    bild_mc._yscale = 24;

Allerdings haben zwar die meisten Bilder die gleiche Größe aber halt nicht alle. Unter anderem gibt es Bilder in Hochformat.

Meine Frage dazu:
Die Flashseite ist 1024x768. Wie kann man die Bilder so anzeigen das die Bilder in jedemfall richtig in MC, schön gefüllt, angezeigt wird.

Ich habe schon irgendwie mit

if (mc_viewer._width > mc_viewer._height){
        bild_mc._width = 980;
        bild_mc._height = 980*faktor;
        bild_mc._x = 16;
    }
    else{
        bild_mc._height = 690;
        bild_mc._width = 690*faktor;
        bild_mc._x = 150;   // Bei Hochformat soll das Bild ca. in die Mitte kommen
    }

probiert aber so werden die Bilder überhaupt nicht angezeigt.

Ich wäre sehr dankbar wenn mir jemand eine Lösung anbieten könnte und wünsche in diesem Sinne allen noch einen schönen Abend.


WaZZkeSS

 

[Denniz]

Die Flashseite ist 1024x768. Wie kann man die Bilder so anzeigen das die Bilder in jedemfall richtig in MC, schön gefüllt, angezeigt wird.

Vielleicht hilft dir dieses Posting ?

 

[WaZZkeSS]

Hallo Denniz,

vorerst danke mal für die Antwort. Leider ist das nicht ganz das was ich suche. Aber ich möchte das nicht auf die gesamte Seite skalieren.

Die Seite ist zwar 1024x768 aber der MC ist 980x690. Das heisst einbisschen platz für einpaar buttons um hin und her zu blättern.

Ziel ist, egal welcher Format das aktueller Bild hat es soll sich halt in den MC ausgehen. Die Bilder haben eine Auflösung 3872x2592 4592x3056 Querformat und umgekehrt in Hochformat. Aber gleich vorweg die Bilder haben eine Größe von 200 - 300 KB.

Halt ne normale Gallerie wo die Bilder per Code im MC angepasst wird.
Ob jetzt ein kleiner Teil (unten, oben, r und l) nicht sichtbar wäre nicht so tragisch.

Ich hoffe ich konnte es diesmal besser erklären.

 

[Denniz]

Hi,

ja im Prinzip könntest du dann ja den mc ,in dem das Bild geladen wurde, die entsprechenden _width, _height Werte geben. Dann hat der Mc diese größe. Hat aber zur Folge das das Bild dann durch die unproportionale Skalierung gestreckt aussieht.

Wenn das Bild auf jeden Fall richtig dargestellt werden soll müßtest du erst das gesamte Bild proportional Skalieren. Dann ein BitmapData Object erstellen, mit der richtigen Ausgangsgröße, und dieses dann auf das Bild anwenden so das du ein neues Bitmap erhälst.

Ich habe dafür mal eine Klasse geschrieben das diese Aufgabe erfüllt, diese könnte ich dir geben. Das Problem ist leider das es in AS3 ist.
Eine Protierung nach AS2 kann ich leider nicht machen da ich kein Flash bzw einen AS2 Complier hier habe und die Bitmapdata Klasse in AS2 anders funktioniert als in AS3.

 

[WaZZkeSS]

Hy,

also ich verwenden auch AS3.
Wenn du mir die Klasse mal posten könntest wäre das erstklassig.

Danke im vorraus

 

[Denniz]

Wenn du mir die Klasse mal posten könntest wäre das erstklassig.

Klar ,

BitmapCutter.as Datei:

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	import flash.geom.Point;
	
	public class BitmapCutter {
		
		/*************************************
		 * CONSTRUCTOR
		 * ***********************************/
		
		public function BitmapCutter() {}
		
		/*************************************
		 * PUBLIC
		 * ***********************************/

		public static function cut(bitmap:Bitmap, maxWidth:Number, maxHeight:Number):Bitmap {
			var o:Object = BitmapCutter.getRatio(bitmap.width, bitmap.height, maxWidth, maxHeight );
			var ratio:Number;
			var borderX :Number = 0;
			var borderY :Number = 0;
			if (o.vRatio >= o.hRatio) {
				ratio = Math.ceil(o.vRatio*Math.pow(10, 3))/Math.pow(10, 3);
				borderX = Math.floor((bitmap.width  *  ratio) - maxWidth) / 2;
			}else {
				ratio =  Math.ceil(o.hRatio*Math.pow(10, 3))/Math.pow(10, 3);
				borderY = Math.floor((bitmap.height  *  ratio) - maxHeight) / 2;
			}
			var bmdWidth:Number = (bitmap.width <= maxWidth ) ? maxWidth + borderX	: 	bitmap.width;
			var bmdHeight:Number = (bitmap.height <= maxHeight ) ? maxHeight + borderY	: 	bitmap.width;
			var bmd:BitmapData = new BitmapData(bmdWidth, bmdHeight);
			var mat:Matrix = new Matrix();
			mat.scale(ratio, ratio)
			bmd.draw(bitmap, mat);
			var bmdCopy:BitmapData = new BitmapData(maxWidth, maxHeight);
			bmdCopy.copyPixels(bmd, new Rectangle(borderX, borderY, maxWidth, maxHeight), new Point());
			return new Bitmap(bmdCopy);
		}
		
		/*************************************
		 * PRIVATE
		 * ***********************************/
		
		private static function getRatio(bW:Number, bH:Number, maxWidth:Number, maxHeight:Number):Object {
			return { hRatio : maxWidth / bW, vRatio : maxHeight / bH };
		}
	}	
}

Angewendet wird die Klasse direkt auf dein geladenes Bitmap.
Die Methode cut() wird statisch aufgerufen mit den gewünschten Bildmaßen als Parameter:

var imageWidth:Number = 600;
var imageHeight:Number = 400;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadedHandler);
loader.load(new URLRequest('bild.jpg'));

function onLoadedHandler(e:Event):void {
	LoaderInfo(e.target).loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadedHandler);
	
	// Bitmap aus dem Loader auf die Statische Methode cut anwenden
	var newBitmap:Bitmap = BitmapCutter.cut( e.target.content as Bitmap, imageWidth, imageHeight);
	this.addChild(newBitmap);
}

Viel Spaß.

 

[WaZZkeSS]

Hy,

danke für deine mühe. Ich werde das dann mal ausprobieren.
Nochmals vielen dank.


Lg