MovieClip dinamikus létrehozása, és kezelése

MovieClip-et nem csak a flash szerkeszt?ben tudunk létrehozni, s?t… Sok olyan helyzet van, mikor nem tudjuk el?re, hogy mennyi klip kell. Ilyenkor dinamikusan tudjuk csak létrehozni. (pl.: dinamikus képgaléria)

Készítsünk egy olyan flash-t, amiben dinamikusan jön létre 5×5, vagyis 25 db movieClip, és rajzoljunk nekik keretet. Egyenl?re fix lépésszámmal dolgozunk, de a következ? cikkben majd XML file-ból olvassuk az adatokat, és az alapján hozzuk létre a klippeket.

Készítsünk egy új flash dokumentumot. A dimenziókat állítsuk 300×300 -ra. Az elég lesz.

Dupla for ciklussal fogjuk létrehozni a movieClip-eket, hogy szépen 5×5-ös elrendezésbe tudjuk elkészíteni. A létrehozáshoz a createEmptyMovieClip metódust hívjuk segítségül, mely minden movieClip-nek van.
Helyezzük el a kódot az els? layer legels? fame-jén:

ypos = 0;
for (i=0; i<5; i++) {
	xpos = 0;
	for (j=0; j<5; j++) {
		mc = createEmptyMovieClip("r"+i+"c"+j, i*5+j);
   		mc.lineStyle(2, 0x555555, 100);
   		mc._alpha = 100;
		colors = [0x330000, 0xAA0000];
   		alphas = [100, 100];
   		ratios = [0, 255];
   		matrix = {matrixType:"box",
				      x:0,
				      y:0,
				      w:40,
				      h:40, r:0};
	        mc.beginGradientFill("linear",
				      colors,
				      alphas,
				      ratios, matrix);   		

   		mc.moveTo(0, 0);
   		mc.lineTo(40,0);
   		mc.lineTo(40,40);
   		mc.lineTo(0, 40);
   		mc.lineTo(0, 0);
		mc._x = xpos;
		mc._y = ypos;
		xpos += 45;
	}
	ypos += 45;
}

Vizsgáljuk meg alaposabban a programot. Láthatjuk a két ciklust amir?l beszéltem. Ezek az i illetve a j változót “futtatják”. A bels? cuklus belsejében van maga a létrehozó kód.

A createEmptyMovieClip-el létrehozunk egy új movieClip-et, mivel nem adtunk meg a metódus el?tt semmit ez a _root -hoz fog tartozni, vagyis a _root metódusát hívjuk. A visszakapott objetumot eltároljuk, mert még szeretnénk egyéb dolgot végezni rajta.

Ezután fogjuk rajzolni a keretet, illetve egyb?l ki is “színezzük”. Beállítjuk a kitöltést:

		colors = [0x330000, 0xAA0000];
   		alphas = [100, 100];
   		ratios = [0, 255];
   		matrix = {matrixType:"box",
				      x:0,
				      y:0,
				      w:40,
				      h:40, r:0};
	        mc.beginGradientFill("linear",
				      colors,
				      alphas,
				      ratios, matrix);

És a végén pedig megrajzoljuk a keretet:

   		mc.moveTo(0, 0);
   		mc.lineTo(40,0);
   		mc.lineTo(40,40);
   		mc.lineTo(0, 40);
   		mc.lineTo(0, 0);

Természetesen, hogy az összes négyzet ne egymás fölött helyezkedjen el, kell egy kis pozicionálás is. Az xpos és ypos változók, mindíg az aktuális négyzet bal fels? koordinátáját tárolják. Amit oszloponként és soronként növelünk.

Még egy kis magyarázat. A createEmptyMovieClip-nek van két paramétere. Az egyik a név (instanceName), ami az új klip nevét adja meg. Ezt egy apró kis képlettel generálom, hogy ne legyen az összesé egyforma. A másik pedig a mélység (depth) amely az új klipp elhelyezkedésér?l (takarásáról) gondoskodik. Minden klip-nek új mélység kell, ezért ezt is kiszámoljuk, hogy ne kelljen új változó.

Ha mindent jól csináltunk, egy hasonlót kell hogy rajzoljon:

6 April 2008 | Uncategorized | Comments