Bilder mit AS vergrößern und wieder verkleinern


Binio

Erfahrenes Mitglied
#1
Hallo Leute,

ich sitze seit zwei Tagen an einem Problem das denke ich jeder schonmal hatte bzw. gelöst hat.

Ich möchte 6 Bilder in einem Fenster (Flash animation) laden und zufällig vergrößern und dann wieder verkleinern. Ich habe bisher folgenden Quellcode:
Code:
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.utils.getTimer;
import flash.utils.Timer;

var dauer:int = 1000; //1000 = 1 sekunde dauer
var startzeit:int;

var ziel_x = 0;
var viel_y = 0;
var ziel_breite = 671;
var ziel_hoehe = 260;

var i:int = 1

var anzeige_start:int = 0;

function init():void{
	this.addEventListener(Event.ENTER_FRAME, zoom_in_bild0); // Verbinde jeden Bildaufbau (jede 24 Frames) mit einer Aktion
}

function zoom_in_bild0(e:Event):void{
	trace("zoom_in");
	if(bild3.x>0)
	   bild3.x = bild3.x-5;
	if(bild3.y>0)
	   bild3.y = bild3.y-5;
	
	bild3.scaleX = bild3.scaleX + 0.01;
	bild3.scaleY = bild3.scaleY + 0.01;
	if(bild3.height>=260){
		anzeige_start = getTimer();
		this.removeEventListener(Event.ENTER_FRAME,zoom_in_bild0);
		this.addEventListener(Event.ENTER_FRAME, zeige_bild0);
	}
}

function zeige_bild0(e:Event):void{
	trace("bild_anzeigen");
	if(getTimer()>=anzeige_start+5000){ // 5 Sekunden Bild anzeigen
		this.removeEventListener(Event.ENTER_FRAME,zeige_bild0);
		this.addEventListener(Event.ENTER_FRAME, zoom_out_bild0);
	}
}

function zoom_out_bild0(e:Event):void{
	trace("zoom_out");
	bild3.scaleX = bild3.scaleX - 0.02;
	bild3.scaleY = bild3.scaleY - 0.02;
	if(bild3.height<=78){
		this.removeEventListener(Event.ENTER_FRAME,zoom_out_bild0);
	}
}
Im Anhang sieht man wie das Projekt aussieht bzw. aufgeteilt ist.

ich möchte jetzt Bild 3 erstmal vergrößern, 5 Sekunden anzeigen und dann wieder verkleinern. Dabei habe ich das Problem wenn ich ein bisschen dynamisch bleiben möchte und nicht so "unDynamisch" wie ich es programmiert habe das ich wahrscheinlich nur eine zoom_in, zeige_bild und zoom_out brauche. Ich bekomme bzw. weiss nicht wie man sowas übergibt. Also mir eine schleife zufällig eine zahl generieren (Zahl zwischen 1 bis 6) dann mit dieser Zahl das dazugehörige Bild zoomen, anzeigen und outzoomen.
zudem habe ich keine ahnung wie ich die positionen der jeweiligen Bilder wieder zurückbringe. Bild0 (siehe Anhang) ist bei mir an einfachsten da x und y genau richtig ist an der Stelle und ich nur Scalex bzw. ScaleY drehen muss. Zudem möchte ich eine flüssige bewegung der Bilder erzeugen. Bild0 darf nicht schneller "zoomen" als bild5 nur weil es einen längeren weg hat.

Also ganze viele Probleme und leider nicht genug Erfahrung aber viel ergeiz !!
Also bitte ich um Tipps die ich dann realisieren werde :)
 

Anhänge

#3
Also ich glaube du machst es dir da komplizierter als die ganze Sache eigentlich ist :) Zu erst einmal soltest du die Vergrößerung nicht so abrupt machen, sondern das ganze Tweenen. Das geht per actionscript ziemlich einfach zum Beispiel mit greensock. Das ist eine Tweening Bibliothek die du in jeden Flash Film laden kannst. Zu finden ist das ganze hier: https://www.greensock.com/tweenlite/

Dort findest du auch eine sehr gut beschriebene Live-Demo, dort kannst du die parameter selbst einstellen und dann unten einfach den code rauskopieren. das ganze ist natürlich kostenfrei ;-)

So, nun zu der Random Geschichte: Da legst du dir (um das ganze auch dynamisch zu gestalten) ein array an, welches in einer for-Schleife mit Zahlen gefüttert wird:

Code:
var aTempNums		:Array = [];
var aRandomNums		:Array = [];
var anzahl                       :int = 6;

for (var i = 1; i<=anzahl; i++) 
{					
		aTempNums.push(i);
									  
}
Damit werden in das array die Zahlen 1 bis 6 geschrieben. Natürlich sortiert, jetzt mischen wir das ganze in einer weiteren for-Schleife:

Code:
while (aTempNums.length > 0) 
{
				aRandomNums.push(aTempNums.splice(Math.round(Math.random() * (aTempNums.length - 1)), 1)[0]);
}
Jetzt hast du in dem Array aRandomNums 6 Zahlen die gemischt wurden und bei jedem neuen Aufruf anders sind. Was machen wir jetzt aber damit?
Also, du kannst nun die Bilder auf deiner Bühne über ihre Instanznamen ansprechen, und so das Array abarbeiten. Nennen wir die Bilder auf deiner Bühne doch einfach "pic_1" bis "pic_6". Da wir nun 6 zufällige Nummern von 1 bis 6 haben können wir zufällig alle 6 hintereinander ansprechen.

Pack die Bilder auf der Bühne nochmal in einen MovieClip zum beispiel mit dem Namen "container":

Code:
for (var j=1;  j<=aRandomNums.length, j++) {
TweenLite.to(container.getChildByName("pic_"+aRandomNums[j]), 1, {scaleX:1.2, scaleY:1.2});
}
Damit wird das bild mit der nummer die im array an erster Stelle steht vergrößert auf 120%

Ich hoffe den Rest bekommst du selber hin wenn du das hier verstanden hast. Denk natürlicha uch dran die greensock.swc in den Veröffentlichungseinstellungen für FLash zu hinterlegen.

Gruß,

Awesomo
 

Binio

Erfahrenes Mitglied
#4
Wau ! Geniale Bibliothek ******
Ich gucke mir das heute ABend mal in ruhe an und experimentiere mal ein bisschen ;)
Aber super vielen Dank. Wenn ich mein Problem fertig habe dann poste ich mein Ergebniss hier rein (für die Nachwelt mit dem selben Problem)
 

Binio

Erfahrenes Mitglied
#5
Ich denke mal meine Lösung wird euch nicht gefallen.
Aber ich poste mal meine Lösung:
Code:
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.utils.getTimer;
import flash.utils.Timer;
import com.greensock.TimelineLite;

var dauer:int = 1000; //1000 = 1 sekunde dauer
var startzeit:int;
var ziel_x = 0;
var viel_y = 0;
var ziel_breite = 671;
var ziel_hoehe = 260;
var anzeige_start:int = 0;

init();

function init():void{
	var zufallszahl:Number = 0 + Math.floor(Math.random() * (3 - 0 + 1)); 
	trace(zufallszahl);
	switch(zufallszahl){
		
		case 0:		this.addEventListener(Event.ENTER_FRAME, zoom_in_bild0);	break;
		case 1:		this.addEventListener(Event.ENTER_FRAME, zoom_in_bild1);	break;
		case 2:		this.addEventListener(Event.ENTER_FRAME, zoom_in_bild2);	break;
		case 3:		this.addEventListener(Event.ENTER_FRAME, zoom_in_bild5);	break;
	}
}


//############################## BILD 0 ##############################
function zoom_in_bild0(e:Event):void{
	this.setChildIndex(bild1, 0);
	this.setChildIndex(bild0, 1);
	this.setChildIndex(bild2, 0);
	this.setChildIndex(bild5, 0);
	trace("zoom_in");
	if(bild0.x>0)
	   bild0.x = bild0.x-5;
	if(bild0.y>0)
	   bild0.y = bild0.y-5;
	
	bild0.scaleX = bild0.scaleX + 0.01;
	bild0.scaleY = bild0.scaleY + 0.01;
	if(bild0.height>=260){
		anzeige_start = getTimer();
		this.removeEventListener(Event.ENTER_FRAME,zoom_in_bild0);
		this.addEventListener(Event.ENTER_FRAME, zeige_bild0);
	}
}

function zeige_bild0(e:Event):void{
	trace("bild_anzeigen");
	if(getTimer()>=anzeige_start+5000){ // 5 Sekunden Bild anzeigen
		this.removeEventListener(Event.ENTER_FRAME,zeige_bild0);
		this.addEventListener(Event.ENTER_FRAME, zoom_out_bild0);
	}
}

function zoom_out_bild0(e:Event):void{
	trace("zoom_out");
	bild0.scaleX = bild0.scaleX - 0.02;
	bild0.scaleY = bild0.scaleY - 0.02;
	if(bild0.height<=130 || bild0.width<=236){
		this.removeEventListener(Event.ENTER_FRAME,zoom_out_bild0);
		init();
		//this.addEventListener(Event.ENTER_FRAME, zoom_in_bild1);
	}
}

//############################## BILD 1 ##############################
function zoom_in_bild1(e:Event):void{
	this.setChildIndex(bild1, 1);
	this.setChildIndex(bild0, 0);
	this.setChildIndex(bild2, 0);
	this.setChildIndex(bild5, 0);
	trace("zoom_in");
	if(bild1.x>0)
	   bild1.x = bild1.x-5;
	if(bild1.y>0)
	   bild1.y = bild1.y-5;
	
	bild1.scaleX = bild1.scaleX + 0.01;
	bild1.scaleY = bild1.scaleY + 0.01;
	if(bild1.height>=260){
		anzeige_start = getTimer();
		this.removeEventListener(Event.ENTER_FRAME,zoom_in_bild1);
		this.addEventListener(Event.ENTER_FRAME, zeige_bild1);
	}
}

function zeige_bild1(e:Event):void{
	trace("bild_anzeigen");
	if(getTimer()>=anzeige_start+5000){ // 5 Sekunden Bild anzeigen
		this.removeEventListener(Event.ENTER_FRAME,zeige_bild1);
		this.addEventListener(Event.ENTER_FRAME, zoom_out_bild1);
	}
}

function zoom_out_bild1(e:Event):void{
	trace("zoom_out");
	trace(bild1.x);
	if(bild1.x<236)
	   bild1.x = bild1.x+10;
	if(bild1.y>0)
	   bild1.y = bild1.y-5;
	
	bild1.scaleX = bild1.scaleX - 0.02;
	bild1.scaleY = bild1.scaleY - 0.02;
	if(bild1.height<=130 || bild1.width<=236){
		this.removeEventListener(Event.ENTER_FRAME,zoom_out_bild1);
		init();
		//this.addEventListener(Event.ENTER_FRAME, zoom_in_bild2);
	}
}


//############################## BILD 2 ##############################
function zoom_in_bild2(e:Event):void{
	this.setChildIndex(bild1, 0);
	this.setChildIndex(bild0, 0);
	this.setChildIndex(bild2, 3);
	this.setChildIndex(bild5, 0);
	trace("zoom_in");
	trace(bild2.y);
	if(bild2.x>0)
	   bild2.x = bild2.x-5;
	if(bild2.y>0)
	   bild2.y = bild2.y-2.6;
	
	if(bild2.height<=260){
		bild2.scaleX = bild2.scaleX + 0.01;
		bild2.scaleY = bild2.scaleY + 0.01;
	}
	if(bild2.height>=260 && bild2.x<=0 && bild2.y<=0){
		anzeige_start = getTimer();
		this.removeEventListener(Event.ENTER_FRAME,zoom_in_bild2);
		this.addEventListener(Event.ENTER_FRAME, zeige_bild2);
	}
}

function zeige_bild2(e:Event):void{
	trace("bild_anzeigen");
	if(getTimer()>=anzeige_start+5000){ // 5 Sekunden Bild anzeigen
		this.removeEventListener(Event.ENTER_FRAME,zeige_bild2);
		this.addEventListener(Event.ENTER_FRAME, zoom_out_bild2);
	}
}

function zoom_out_bild2(e:Event):void{
	trace("zoom_out");
	trace(bild2.x);
	if(bild2.x>0)
	   bild2.x = bild2.x-5;
	if(bild2.y<125)
	   bild2.y = bild2.y+4;
	if(bild2.y<130)
	   bild2.y = bild2.y+0.5;
	   
	if(bild2.height>130){
		bild2.scaleX = bild2.scaleX - 0.01;
		bild2.scaleY = bild2.scaleY - 0.01;
	}
	if(bild2.height<=130 && bild2.width<=236){
		this.removeEventListener(Event.ENTER_FRAME,zoom_out_bild2);
		init();
		//this.addEventListener(Event.ENTER_FRAME, zoom_in_bild5);
	}
}

//############################## BILD 5 ##############################
function zoom_in_bild5(e:Event):void{
	this.setChildIndex(bild1, 0);
	this.setChildIndex(bild0, 0);
	this.setChildIndex(bild2, 0);
	this.setChildIndex(bild5, 3);
	trace("zoom_in");
	if(bild5.x>0)
	   bild5.x = bild5.x-4.6;
	if(bild5.y>0)
	   bild5.y = bild5.y-2.6;
	
	if(bild5.height<=260){
		bild5.scaleX = bild5.scaleX + 0.01;
		bild5.scaleY = bild5.scaleY + 0.01;
	}
	
	if(bild5.height>=260 && bild5.x<=0 && bild5.y<=0){
		anzeige_start = getTimer();
		this.removeEventListener(Event.ENTER_FRAME,zoom_in_bild5);
		this.addEventListener(Event.ENTER_FRAME, zeige_bild5);
	}
}

function zeige_bild5(e:Event):void{
	trace("bild_anzeigen");
	if(getTimer()>=anzeige_start+5000){ // 5 Sekunden Bild anzeigen
		this.removeEventListener(Event.ENTER_FRAME,zeige_bild5);
		this.addEventListener(Event.ENTER_FRAME, zoom_out_bild5);
	}
}

function zoom_out_bild5(e:Event):void{
	trace("zoom_out");
	trace(bild5.x);
	if(bild5.x<231)
	   bild5.x = bild5.x+4;
	if(bild5.x<236)
	   bild5.x = bild5.x+1;
	if(bild5.y<=125)
	   bild5.y = bild5.y+4;
	if(bild5.y<=130)
	   bild5.y = bild5.y+1;
	
	if(bild5.height>130){
		bild5.scaleX = bild5.scaleX - 0.01;
		bild5.scaleY = bild5.scaleY - 0.01;
	}
	if(bild5.height<=130 && bild5.width<=236 && bild5.x>=236 && bild5.y>=130){
		this.removeEventListener(Event.ENTER_FRAME,zoom_out_bild5);
		init();
		//this.addEventListener(Event.ENTER_FRAME, zoom_in_bild0);
	}
}
 
#6
naja also für den anfang ist das doch ok, wenn es funktioniert. Natürlich ist es kein schöner code und überhaupt nicht dynamisch, aber das kommt mit der zeit. Wenn du große Lust hast dann kannst du ja den code so bauen, das man eine beliebige anzahl an bildern laden kann die sich dann aufzoomen, das wäre dann die weiterentwicklung. Dafür kannst du immer entweder mit GetChildAt as Picture oder dem instanznamen arbeiten. MIt einer einfachen for schleife wie dieser hier kommst du immer an sämtliche MC´s in einem container ran:

Code:
for (var i=0; i<=container.numChildren; i++) {
trace((container.GetChildAt(i) as picture).name)
}
Der code gibt dir die Instanznamen aller MC´s im Container, und über die gleiche methode kannste auch EventListener hinzufügen, tweenen, usw...