Zoom su foto

[Picciola]

Buongiorno a tutti!
Uso questo codice per zoomare alcune immagini al passaggio del mouse:

MovieClip.prototype.zoom = function(endScale, speed) {
	this.onEnterFrame = function() {
		var offset = 0.5;
		var rscale = Math.abs(endScale-this._xscale);
	if (!rscale<=offset) {
		(this._xscale<endScale) ? (this._xscale=this._yscale += rscale/speed) : (this._xscale=this._yscale -= rscale/speed);
	} else {
		delete this.onEnterFrame;
	}
	};
	};
thumb.onRollOver = function() {
	this.zoom(120, 3);
	this.swapDepths(10);
	};
thumb.onRollOut = function() {
	this.zoom(100, 7);
	};

Funziona perfettamente.
Ecco il "problema":
le immagini THUMB che vado a ingrandire sono create da JPG esterne con createEmptyMovieClip e calcolando la spaziatura tra righe e colonne via AS. L'ingrandimento viene dunque fatto in su perno all'angolo superiore sinistro dell'immagine, mentre io vorrei che fosse dal centro (in pratica l'immagine zooma verso l'angolo in basso a destra).
Ho provato a trasformare l'istruzione di rollover in questo modo (non mi insultate, io TENTO!):

thumb.onRollOver = function() {
	this.zoom(120, 3);
	this._x+=this._x-4 
	this.swapDepths(10);
};

Ma chiaramente l'immagine parte e non si ferma più!


Sono un po' imbranata in AS, non avete una drittina??

[and80]

è un tantino complicata come pratica, ma non impossibile

intanto ti spiego il quadro basandomi su un'unico clip

devi avere il tuo clip creato con createEmptyMovieClip, ed è quel clip che deve fare il ridimensionamento al rollover, fin qui ok, l'hai già fatto... ora però devi fare in modo che il punto di registrazione dell'immagine risulti al centro, ma non è possibile decidere questa cosa, se non utilizzando un escamotage,
infatti basta nidificare un ulteriore clip dentro quello principale e fare su quello il caricamento utilizzando un preload che verifichi il momento in cui l'immagine è stata caricata e la sposti letteralmente al centro del clip contenitore, in tal modo ottieni l'animazione dal centro

una funzione per caricare in tal modo potrebbe essere questa

MovieClip.prototype.loadCenteredImage = function(url) {
    this.createEmptyMovieClip("v", 1);
    this.v.loadMovie(url);
    this.onEnterFrame = function (){
        var c = this.v.getBytesLoaded();
        var t = this.v.getBytesTotal();
        var p = Math.floor((c/t)*100);
        if(c>=t && t > p && p == 100){
            if(this.v._width > 0 && this.v._height > 0){
                delete this.onEnterFrame;
                this.v._x = (this.v._width/2)*-1;
                this.v._y = (this.v._height/2)*-1;
                this._x+= this.v._width/2;
                this._y+= this.v._height/2;
            }
        }
    }
} 

dovrebbe funzionare correttamente, la usi nel tuo codice al posto del loadMovie che già hai e mi fai sapere se funziona... poi se ti interessa sapere come funziona (se funziona) te la spiego

[edit] ok, l'ho testata e funziona correttamente

[Picciola]

VVoVe:
Ok, ci provo... anche se temo che non riuscirò perchè il codice è già molto più complicato di quanto io possa essere in grado!
Comunque grazie, ti farò sapere se non mi esplode il cervellino.

[and80]

quello che ti ho postato va solo incollato sul frame e poi deve essere richiamato al posto del loadMovie che già dovresti avere

poi dipende anche da come è strutturato il codice che già utilizzi... potrebbe non essere come me lo immagino e in quel caso bisognerebbe proprio verificare "sul campo" il da farsi

[Picciola]

Allora, rieccomi:
La tua funzione l'ho inserita, ma non mi fila!
Cioè, mi continua a fare il ridimensionamento in base all'angolo alto-sx.
Questo è lo script completo inserito nel frame 2 (in rosso la tua parte e come io l'ho integrata):

photo_xml.onLoad = function() {
	clip_th.html = true;
	clip_th.htmlText = "<p align=\"center\"></p>";
	Photos_Clip(0);
};

MovieClip.prototype.loadCenteredImage = function(url) { 
    this.createEmptyMovieClip("v", 1); 
    this.v.loadMovie(url); 
    this.onEnterFrame = function (){ 
        var c = this.v.getBytesLoaded(); 
        var t = this.v.getBytesTotal(); 
        var p = Math.floor((c/t)*100); 
        if(c>=t && t > p && p == 100){ 
            if(this.v._width > 0 && this.v._height > 0){ 
                delete this.onEnterFrame; 
                this.v._x = (this.v._width/2)*-1; 
                this.v._y = (this.v._height/2)*-1; 
                this._x+= this.v._width/2; 
                this._y+= this.v._height/2; 
            } 
        } 
    } 
} 

_global.Photos_Clip = function(carica) {
	var photos = photo_xml.firstChild.childNodes;
	var p_thumbs = photo_xml.firstChild.attributes.thumbs, p_photos = photo_xml.firstChild.attributes.clips;
	var i = carica;
	for (var l = 0; l<linee; l++) {
		for (var c = 0; c<colonne && i<photos.length; c++, i++) {
			var thumb = clip_th.createEmptyMovieClip("thumb_"+i, i);
			PhotoAlbum.thumbs.push(t);
			thumb._y = l*a_th;
			thumb._x = c*l_th;
			thumb.createEmptyMovieClip("photos", 1);
			thumb.photos.loadCenteredImage (p_thumbs+"/"+photos[i].attributes.thumb);
			thumb.dimensio = photos[i].attributes;
			MovieClip.prototype.zoom = function(endScale, speed) {
				this.onEnterFrame = function() {
					var offset = 0.5;
					var rscale = Math.abs(endScale-this._xscale);
					if (!rscale<=offset) {
						(this._xscale<endScale) ? (this._xscale=this._yscale += rscale/speed) : (this._xscale=this._yscale -= rscale/speed);
					} else {
						delete this.onEnterFrame;
					}
				};
			};
			thumb.onRollOver = function() {
				this.zoom(120, 3);
				this.swapDepths(10);
			};
			thumb.onRollOut = function() {
				this.zoom(100, 7);
			};
			thumb.onRelease = function() {
				.......azioni varie.........
			};
		}
	}
};
photo_xml.load("photos2.xml");
stop();

Mentre nel frame 1 c'è questo:

_global.a_th = 57;
_global.l_th = 77;
_global.colonne = 4;
_global.linee = 2;
var PhotoAlbum = {thumbs:[]};
photo_xml = new XML();
photo_xml.ignoreWhite = true;
stop();

Si comporta come prima...

[and80]

thumb.createEmptyMovieClip("photos", 1);
thumb.photos.loadCenteredImage (p_thumbs+"/"+photos[i].attributes.thumb);

elimina la prima riga di queste due e modifica la seconda in questo modo

thumb.loadCenteredImage (p_thumbs+"/"+photos[i].attributes.thumb);

ho realizzato una prova per verificare, e funziona esattamente come hai chiesto...

[Picciola]

MITICOOOOOOO! Grazie mille, funziona perfettamente.
Visto che ti sei offerto, mi spieghi il perchè di quest'ultima modifica?

[and80]

intanto riposto il codice che ho postato in precedenza, con i commenti

MovieClip.prototype.loadCenteredImage = function(url) {
    // nidifico un clip all'interno di quello che dovrebbe caricare l'immagine esterna
    this.createEmptyMovieClip("v", 1);
    // in questo nuovo clip carico l'immagine
    this.v.loadMovie(url);
    // all'enterFrame del clip "principale" verifico il caricamento del file esterno
    this.onEnterFrame = function() {
        // inizializzo una variabile che contenga la dimensione caricata in ogni istante
        var c = this.v.getBytesLoaded();
        // inizializzo una variabile che contenga la dimensione totale
        var t = this.v.getBytesTotal();
        // inizializzo una variabile che verifichi la percentuale di caricamento
        var p = Math.floor((c/t)*100);
        // al momento in cui tutte le condizioni di uguaglianza sono soddisfatte
        // ossia, a caricamento completato...
        if (c>=t && t>p && p == 100) {
            // ...verifico che le dimensioni dell'immagine appena caricata siano maggiori di 0 e quindi effettivamente utilizzabili
            if (this.v._width>0 && this.v._height>0) {
                // blocco l'enterFrame
                delete this.onEnterFrame;
                // posiziono il clip con l'immagine al centro del clip "principale"
                this.v._x = (this.v._width/2)*-1;
                this.v._y = (this.v._height/2)*-1;
                // sposto il mio clip "principale" in modo da farlo apparire nella stessa posizione in cui si sarebbe dovuto trovare prima del caricamento
                this._x += this.v._width/2;
                this._y += this.v._height/2;
            }
        }
    };
} 

poi domani, con più lucidità di quanta ne possa avere ora ( ) ti spiego il perchè della modifica al tuo codice