✔ Scrollfunktion und zurück Button

drabbit · 2. Dezember 2009

Hy,

ich möchte folgendes Script mit einer Scrollfunktion im Thumb-Menü (z.B. über Cursor-Position oder Buttons) erweitern - es soll dann auch noch einen Back-Button geben um zur übersicht zu gelangen.

Leider fehlt mir hier total der Überblick, wo ich was einfügen muss (hab leider noch nicht so oft mit Klassen gearbeitet) ich hoffe ihr könnt mir hierbei etwas weiter helfen.

danke und lg

PHP:

import mx.transitions.Tween;
import mx.transitions.easing.*;

new Tween();

manager = new ShowMaster();

gallery_xml = new XML();
gallery_xml.ignoreWhite = true;

gallery_xml.onHTTPStatus = checkHTTPStatus;
gallery_xml.onLoad = extractXML;

gallery_xml.load("slideshow.xml");

function checkHTTPStatus(status_code){
	trace(status_code);
}

function extractXML(erfolg){
	if(erfolg){
		var i;
		var j;
		
		var gallery_label;
		var bild_xml_array;
		
		var bild_obj_array;
		var myUrl;
		var myArtist;
		var myMagazin;
		var myYear;
		var myBild_obj;
		
		var gallery_xml_array = gallery_xml.lastChild.childNodes;
		
		
		for(i in gallery_xml_array){
			gallery_label = gallery_xml_array[i].attributes["label"];
			
			bild_xml_array = gallery_xml_array[i].childNodes;
			bild_obj_array = new Array();
			
			for(j in bild_xml_array){
				myUrl 		= bild_xml_array[j].attributes["url"];
				myArtist 	= bild_xml_array[j].attributes["artist"];
				myMagazin 	= bild_xml_array[j].attributes["magazin"];
				myYear 		= bild_xml_array[j].attributes["year"];
				
				// Bild(myUrl, myArtist, myYear, myMagazin)
				myBild_obj = new Bild(myUrl, myArtist, myYear, myMagazin);
				bild_obj_array.push(myBild_obj);
			}
			
			// Galerie(myLabel, myBild_array)
			
			myGalerie_obj = new Galerie(gallery_label, bild_obj_array);
			manager.gallery_array.push(myGalerie_obj);
		}
		
		manager.initShow();
		
	} else {
		trace("Problem bei XML-Übergabe.");
	}
}


// ****************************** //
// *** Konstruktor-Funktionen *** //
// ****************************** //

// *** ShowMaster *** //
function ShowMaster(){
	this.gallery_array = new Array();
}
ShowMaster.prototype.initShow 			= initShow;
ShowMaster.prototype.buildGalleryMenu 	= buildGalleryMenu;
ShowMaster.prototype.hideMenu 			= hideMenu;

function initShow(){
	_root.createEmptyMovieClip("thumb_menu_mc", 1);
	thumb_menu_mc._x = 48;
	thumb_menu_mc._y = 520;
	
	_root.attachMovie("mask_mc_sym", "mask_mc", 2);
	mask_mc._x = thumb_menu_mc._x - 27;
	mask_mc._y = thumb_menu_mc._y - 37;
	//mask_mc.cacheAsBitmap = true;
	
	_root.createEmptyMovieClip("img_mc", 3);
	img_mc._x = 20;
	img_mc._y = 20;
	
	thumb_menu_mc.setMask(mask_mc);
	
	this.buildGalleryMenu();
}

function hideMenu(){
	gallery_menu_mc._visible = false;
}

function buildGalleryMenu(){
	var i_num;
	var mc;
	var gallery_obj;
	
	_root.createEmptyMovieClip("gallery_menu_mc",0);
	_root.gallery_menu_mc._x = 80;
	_root.gallery_menu_mc._y = 80;
	
	for(var i in this.gallery_array){
		i_num = Number(i);
		gallery_obj = this.gallery_array[i];
		
		mc = _root.gallery_menu_mc.attachMovie("gallery_but_mc","mc"+i, i_num);
		mc._y = (mc._height + 10) * i_num;
		
		mc.tf_txt.text = gallery_obj.label;
		mc.gallery = gallery_obj;
		
		mc.onRelease = function(){
			manager.hideMenu();
			this.gallery.initGalleryView();
		}
		
	}
}



// *** Galerie *** //
function Galerie(myLabel, myBild_array){
	this.label 				= myLabel;
	this.bild_array 		= myBild_array;
	this.load_i				= -1;
	
	this.thumb_loader 		= new MovieClipLoader();
	this.thumb_listener 	= new ThumbListener(this);
	this.thumb_loader.addListener(this.thumb_listener);
	
	this.img_loader 		= new MovieClipLoader();
	this.img_listener 		= new ImgListener(this);
	this.img_loader.addListener(this.img_listener);
}
Galerie.prototype.initGalleryView 	= initGalleryView;	
Galerie.prototype.buildThumbMenu 	= buildThumbMenu;
Galerie.prototype.loadNextThumb 	= loadNextThumb;
Galerie.prototype.getLargeImg 		= getLargeImg;

function initGalleryView(){
	this.buildThumbMenu();
	this.getLargeImg(0);
}

function buildThumbMenu(){
	var mc;
	
	this.load_i	= -1;
	
	for(var i in this.bild_array){
		var i_num = Number(i);
		mc = thumb_menu_mc.attachMovie("thumb_mc_sym", "mc" + i, i_num);
		mc._x += (mc._width + 5) * i_num; 
		mc.createEmptyMovieClip("jpg_mc", 0);
		mc.img_i 	= i_num;
		mc.gallery 	= this;
	}
	this.loadNextThumb();
}

function loadNextThumb(){
	if(this.load_i < this.bild_array.length - 1){
		this.load_i ++;
		var bild_url = "movie_pix/small/" + this.bild_array[this.load_i].url;
		var ziel_mc = thumb_menu_mc["mc" + this.load_i].jpg_mc;
		this.thumb_loader.loadClip(bild_url, ziel_mc);
	} else {
		trace ("Alle Thumbs geladen!");
	}
}

function getLargeImg(img_i){
	var bild_obj = this.bild_array[img_i];
	var bild_url = "movie_pix/large/" + bild_obj.url;
	
	_root.details_txt.text = bild_obj.magazin + ", " + bild_obj.year + ", " + bild_obj.artist;
	this.img_loader.loadClip(bild_url, _root.img_mc);
}

// *** Bild *** //
function Bild(myUrl, myArtist, myYear, myMagazin){
	this.url 		= myUrl;
	this.artist 	= myArtist;
	this.year 		= myYear;
	this.magazin 	= myMagazin;
}


// *** Konstruktor ThumbListener *** //

function ThumbListener(galerie_obj){
	this.gallery = galerie_obj;
}
ThumbListener.prototype.onLoadError = function(ziel_mc, error_str, http_status){
	this.gallery.loadNextThumb();
}

ThumbListener.prototype.onLoadInit = function(ziel_mc){
	ziel_mc._x -= ziel_mc._width/2;
	ziel_mc._y -= ziel_mc._height/2;
	
	ziel_mc._parent.onRelease = function(){
		this.gallery.getLargeImg(this.img_i);
		new Tween(this, "_xscale", Elastic.easeOut, 85, 100, 0.8, true);
		new Tween(this, "_yscale", Elastic.easeOut, 85, 100, 0.8, true);
	}
	
	this.gallery.loadNextThumb();
}


// *** Konstruktor ImgListener *** //

function ImgListener(galerie_obj){
	this.gallery = galerie_obj;
}
ImgListener.prototype.onLoadError = function(ziel_mc, error_str, http_status){
	//
}

ImgListener.prototype.onLoadInit = function(ziel_mc){
	trace("mc._url: " + ziel_mc._url);
	new Tween (ziel_mc, "_alpha", Strong.easeOut, 0, 100, 2, true);
}

Jens B. · 2. Dezember 2009

Bitte beschränke den Code auf die für die Frage wesentlichen Teile und vor allem Beschreibe, worum es in deinem Projekt überhaupt geht.

Mit "Scrollfunktion im Thumb-Menü" kann man als Außenstehender genauso viel Anfangen wie mit einem Hydroschild in Riegelstellung als nicht-Feuerwehrmann. Genauso dein "Back-button um zur Übersicht zu gelangen" - was für eine Übersicht denn überhaupt?

Wir brauchen einfach mehr und gezieltere Informationen. Niemand liest einen 500 Zeilen-Code um erstmal zu checken was du überhaupt fragst.

drabbit · 2. Dezember 2009

OK, mal mehr Details und weniger Code

Ich lese aus einem XML-File Bildinformationen aus (Name, Datum, Beschreibung, Album,...)

dann erzeuge ich mir eine Übersicht in der Die Alben gelistet sind...

Klickt man ein Album der Übersicht an öffnet sich dieses Album und das erste Bild wird gargestellt, weiters werden die bilder dann darunter als thumbnails angezeigt.

1: Ich möchte bei den Bildern (Thumbnails) eine Scrollfunktion, da nicht alle angezeigt werden (mit Buttons bzw. via Mouse over effekt - ist eigentlich nicht so wichtig, hauptsache man sieht alles)

2: Muss ich noch einen Back-Button oder zu einbauen um wieder zur Alben-Übersicht zu gelangen...

Hier der Code ohne dem XML-Teil:

PHP:

import mx.transitions.Tween; 
import mx.transitions.easing.*; 

new Tween(); 

manager = new ShowMaster(); 

// ****************************** // 
// *** Konstruktor-Funktionen *** // 
// ****************************** // 

// *** ShowMaster *** // 
function ShowMaster(){ 
    this.gallery_array = new Array(); 
} 
ShowMaster.prototype.initShow             = initShow; 
ShowMaster.prototype.buildGalleryMenu     = buildGalleryMenu; 
ShowMaster.prototype.hideMenu             = hideMenu; 

function initShow(){ 
    _root.createEmptyMovieClip("thumb_menu_mc", 1); 
    thumb_menu_mc._x = 48; 
    thumb_menu_mc._y = 520; 
     
    _root.attachMovie("mask_mc_sym", "mask_mc", 2); 
    mask_mc._x = thumb_menu_mc._x - 27; 
    mask_mc._y = thumb_menu_mc._y - 37; 
    //mask_mc.cacheAsBitmap = true; 
     
    _root.createEmptyMovieClip("img_mc", 3); 
    img_mc._x = 20; 
    img_mc._y = 20; 
     
    thumb_menu_mc.setMask(mask_mc); 
     
    this.buildGalleryMenu(); 
} 

function hideMenu(){ 
    gallery_menu_mc._visible = false; 
} 

function buildGalleryMenu(){ 
    var i_num; 
    var mc; 
    var gallery_obj; 
     
    _root.createEmptyMovieClip("gallery_menu_mc",0); 
    _root.gallery_menu_mc._x = 80; 
    _root.gallery_menu_mc._y = 80; 
     
    for(var i in this.gallery_array){ 
        i_num = Number(i); 
        gallery_obj = this.gallery_array[i]; 
         
        mc = _root.gallery_menu_mc.attachMovie("gallery_but_mc","mc"+i, i_num); 
        mc._y = (mc._height + 10) * i_num; 
         
        mc.tf_txt.text = gallery_obj.label; 
        mc.gallery = gallery_obj; 
         
        mc.onRelease = function(){ 
            manager.hideMenu(); 
            this.gallery.initGalleryView(); 
        } 
         
    } 
} 



// *** Galerie *** // 
function Galerie(myLabel, myBild_array){ 
    this.label                 = myLabel; 
    this.bild_array         = myBild_array; 
    this.load_i                = -1; 
     
    this.thumb_loader         = new MovieClipLoader(); 
    this.thumb_listener     = new ThumbListener(this); 
    this.thumb_loader.addListener(this.thumb_listener); 
     
    this.img_loader         = new MovieClipLoader(); 
    this.img_listener         = new ImgListener(this); 
    this.img_loader.addListener(this.img_listener); 
} 
Galerie.prototype.initGalleryView     = initGalleryView;     
Galerie.prototype.buildThumbMenu     = buildThumbMenu; 
Galerie.prototype.loadNextThumb     = loadNextThumb; 
Galerie.prototype.getLargeImg         = getLargeImg; 

function initGalleryView(){ 
    this.buildThumbMenu(); 
    this.getLargeImg(0); 
} 

function buildThumbMenu(){ 
    var mc; 
     
    this.load_i    = -1; 
     
    for(var i in this.bild_array){ 
        var i_num = Number(i); 
        mc = thumb_menu_mc.attachMovie("thumb_mc_sym", "mc" + i, i_num); 
        mc._x += (mc._width + 5) * i_num;  
        mc.createEmptyMovieClip("jpg_mc", 0); 
        mc.img_i     = i_num; 
        mc.gallery     = this; 
    } 
    this.loadNextThumb(); 
} 

function loadNextThumb(){ 
    if(this.load_i < this.bild_array.length - 1){ 
        this.load_i ++; 
        var bild_url = "movie_pix/small/" + this.bild_array[this.load_i].url; 
        var ziel_mc = thumb_menu_mc["mc" + this.load_i].jpg_mc; 
        this.thumb_loader.loadClip(bild_url, ziel_mc); 
    } else { 
        trace ("Alle Thumbs geladen!"); 
    } 
} 

function getLargeImg(img_i){ 
    var bild_obj = this.bild_array[img_i]; 
    var bild_url = "movie_pix/large/" + bild_obj.url; 
     
    _root.details_txt.text = bild_obj.magazin + ", " + bild_obj.year + ", " + bild_obj.artist; 
    this.img_loader.loadClip(bild_url, _root.img_mc); 
} 

// *** Bild *** // 
function Bild(myUrl, myArtist, myYear, myMagazin){ 
    this.url         = myUrl; 
    this.artist     = myArtist; 
    this.year         = myYear; 
    this.magazin     = myMagazin; 
} 


// *** Konstruktor ThumbListener *** // 

function ThumbListener(galerie_obj){ 
    this.gallery = galerie_obj; 
} 
ThumbListener.prototype.onLoadError = function(ziel_mc, error_str, http_status){ 
    this.gallery.loadNextThumb(); 
} 

ThumbListener.prototype.onLoadInit = function(ziel_mc){ 
    ziel_mc._x -= ziel_mc._width/2; 
    ziel_mc._y -= ziel_mc._height/2; 
     
    ziel_mc._parent.onRelease = function(){ 
        this.gallery.getLargeImg(this.img_i); 
        new Tween(this, "_xscale", Elastic.easeOut, 85, 100, 0.8, true); 
        new Tween(this, "_yscale", Elastic.easeOut, 85, 100, 0.8, true); 
    } 
     
    this.gallery.loadNextThumb(); 
} 


// *** Konstruktor ImgListener *** // 

function ImgListener(galerie_obj){ 
    this.gallery = galerie_obj; 
} 
ImgListener.prototype.onLoadError = function(ziel_mc, error_str, http_status){ 
    // 
} 

ImgListener.prototype.onLoadInit = function(ziel_mc){ 
    trace("mc._url: " + ziel_mc._url); 
    new Tween (ziel_mc, "_alpha", Strong.easeOut, 0, 100, 2, true); 
}

drabbit · 2. Dezember 2009

OK Thema kann geschlossen werden - ich idiot hab in meiner gestrigen Nachtsession vergessen den Buttons-Instanznamen zu geben...

jetzt funktioniert das alles. Mit dem Code funktioniert auch das scrolling und der backbutton

PHP:

	_root.left_btn.onRelease = function() {
		thumb_menu_mc._x = thumb_menu_mc._x -60;
	}

	_root.right_btn.onRelease = function() {
		thumb_menu_mc._x = thumb_menu_mc._x +60;
	}	
	
	_root.back_btn.onRelease = function(){
		thumb_menu_mc._visible = false;
		img_mc._visible = false;
		gallery_menu_mc._visible = true;
	}

Thema kann geschlossen werden

✔ Scrollfunktion und zurück Button

drabbit

Mitglied

Jens B.

Erfahrenes Mitglied

drabbit

Mitglied

drabbit

Mitglied

Neue Beiträge