Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

Witam,
taki oto problem napotkałem i nie wiem z której strony najlepiej do niego podejść: chcialbym aby ikony w Tilelist wyswietlaly sie czarno-bialo, a po najechaniu myszka dana ikona 'dostawała' kolorów.

szukam wskazowek, jak najlepiej rozwiazac to zagadnienie, niekoniecznie gotowych rozwiazan :)

Na razie doszedlem do takiej koncepcji, poprawcie mnie jesli nie ma sensu i jest szybszy sposob:
- dodac filtr (cz-b) do wszystkich ikon przy ich ładowaniu do TileList
- po najechaniu myszka dezaktywac filtr
ale nie wiem gdzie wpisac kod z dodawaniem filtra i z eventami ROLL_OVER i ROLL_OUT.

Z góry dzieki za pomoc.

Kuba

Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

myTileList.addEventListener(ListEvent.ITEM_ROLL_OVER, onRollOverFunction);

private function onRollOverFunction(e:ListEvent):void{
var myTileList:TileList = e.target as TileList;
var renderer:ImageCell = myTileList.itemToCellRenderer(e.item) as ImageCell; // tak się dobierzesz do konkretnej komórki z obrazkiem i tutaj możesz coś z nim zrobić
}

ew. jeśli potrzebujesz różne magiczne rzeczy robić z tą TileListą to można rozszerzyć tę klasę i dodawać różne ficzery ;)Agnieszka P. edytował(a) ten post dnia 24.03.10 o godzinie 23:50

Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

Dzieki, za pomoc
udalo mi sie dodac listenery do listy, i rozszerzyc jej CellRenderera o filtr podczas ladowania zdjecia przez loader-a. (loader.filters....)
ale mam problem: jak dodam filtr do loadera, to listenery nie sa w stanie zmodyfikowac tego filtru, tak jakbym nie dostawal sie przez listenery listy do loadera (korzystalem z proponowanego kodu) tylko do... wlasnie nie jestem pewien.
wychodzi na to ze wszystko (listenery + filtr) trzeba robic albo w Cell Renderer komorek listy, albo na obiekcie listy. nad tym pracuje :)
kuba

Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

Witam,
sprawa załatwiona :)
może sie komuś przyda efekt z listą obrazków jak na: http://www.hp.video-foto-studio.pl w zakładce Fotografia.
a oto rozwiązanie:
rozszerzamy klase ImageCell [odpowiedzialna za wyglad elementow TileList]

package comHP.controls.listClasses{

	import fl.controls.listClasses.ICellRenderer;

	import fl.controls.listClasses.ImageCell;

	import fl.controls.TileList;

	import fl.managers.StyleManager;

	import flash.events.*;

	import fl.containers.UILoader;

	import flash.display.Loader;

	import flash.display.BlendMode;

	import flash.filters.ColorMatrixFilter;



	public class CustomImageCacheCell extends ImageCell implements ICellRenderer {

		private var zrobioneCzB:Boolean=false;

		private var aColor:Array=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0];

		private var aWhiteBlack:Array=[0.35,0.35,0.35,0,0,0.35,0.35,0.35,0,0,0.35,0.35,0.35,0,0,0,0,0,1,0];

		private var colorMat:ColorMatrixFilter=new ColorMatrixFilter(aColor);

		private var whiteBlackMat:ColorMatrixFilter=new ColorMatrixFilter(aWhiteBlack);

		public function CustomImageCacheCell() {

			super();

			//skins, umieszczone w pliku .fla jako symbole graficzne

			setStyle("upSkin", CustomCellBg);

			setStyle("downSkin", CustomCellBg);

			setStyle("overSkin", CustomCellBgOver);



			setStyle("selectedUpSkin", CustomCellBgSelected);

			setStyle("selectedDownSkin", CustomCellBgSelected);

			setStyle("selectedOverSkin", CustomCellBgSelected);

			setStyle("textOverlayAlpha", 0.4);







override protected function drawLayout():void {

			var imagePadding:Number=getStyleValue("imagePadding") as Number;

			loader.move(2, 2);//2 pixele na ramke zdjec-elementow TileList-y



			var w:Number = width-(imagePadding*2);

			var h:Number=height-imagePadding*2;

			if (loader.width!=w&&loader.height!=h) {

				loader.setSize(w,h);

			}

			loader.drawNow();

//TUTAJ ROBIMY CZARNO-BIALE ELEMENTY TILELIST NA POCZATEK PO ZALADOWANIU

			addEventListener(Event.ENTER_FRAME, zrobCzB);

			function zrobCzB(e:Event):void {

				if (! zrobioneCzB) {

					zrobioneCzB=true;

					var ld:UILoader=UILoader(e.target.loader);

					ld.filters=[whiteBlackMat];

					removeEventListener(Event.ENTER_FRAME, zrobCzB);

				}

			}



//TUTAJ ROBIMY KOLOROWE ELEMENTY TILELIST PO NAJECHANIU MYSZKA

			addEventListener(MouseEvent.ROLL_OVER,zrobKolor);

			function zrobKolor(e:MouseEvent):void {

				trace("over");

				var ld:UILoader=UILoader(e.target.loader);

				ld.filters=[colorMat];

				removeEventListener(MouseEvent.ROLL_OVER,zrobKolor);

				removeEventListener(MouseEvent.ROLL_OUT,zrobCzBZnow);

			}

//TUTAJ ROBIMY CZARNO-BIALE ELEMENTY TILELIST NA POCZATEK PO ZJECHANIU KURSORA MYSZKI



			addEventListener(MouseEvent.ROLL_OUT,zrobCzBZnow);

			function zrobCzBZnow(e:MouseEvent):void {

				trace("out");

				var ld:UILoader=UILoader(e.target.loader);

				ld.filters=[whiteBlackMat];

				removeEventListener(MouseEvent.ROLL_OUT,zrobCzBZnow);				removeEventListener(MouseEvent.ROLL_OVER,zrobKolor);

			}



			background.width=width;

			background.height=height;

			textField.visible = false;

		}

A w pliku .fla w którym umieszczamy obiekt tak rozszerzonej klasy piszemy:

import fl.controls.listClasses.ImageCell;

import fl.controls.TileList;

import fl.controls.ScrollBarDirection;



import comHP.controls.listClasses.CustomImageCacheCell;





var tlGalerie:TileList = new TileList ();

tlGalerie.direction=ScrollBarDirection.VERTICAL;



tlGalerie.setStyle("cellRenderer", CustomImageCacheCell);



addChild(tlGalerie);

a w jego bibliotece umieszczamy symbole graficzne ramek zdjec-elementów TileList, które nie beda zmienialy koloru na czarno-bialy:
CustomCellBg CustomCellBgOver oraz CustomCellBgSelected

i dziala.
caly kod zainteresowanym udostepnie [kontakt na priv], ale mysle ze i to sie przyda.

pozdrawiam
kuba

Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

ładniejszy efekt uzyskasz jak zdobisz desaturyzację czasową.

http://sgasiewski.pl/assets/projects/imagegallery/

tu masz jakieś 2 sekundy, nie pamiętam, robiłem to rok temu :)

Temat: Fl, AS3 - jak dodac filtr do zdjec w komponencie TileList...

Mozna to skrocic

package

{

	import fl.controls.listClasses.ImageCell;

	import flash.events.*;

	import gs.*;

	public class CustomImageCell extends ImageCell

	{

		public function CustomImageCell() {

			super();

		   			addEventListener( MouseEvent.ROLL_OVER, handleOver )

			addEventListener( MouseEvent.ROLL_OUT, handleOut );

					TweenMax.to( loader, .3, {colorMatrixFilter:{saturation:0}});

		}

			function handleOver(event:Event)

		{

			TweenMax.to( loader, .3, {colorMatrixFilter:{saturation:1}} );

		}

		function handleOut(event:Event)

		{

			TweenMax.to( loader, .3, {colorMatrixFilter:{saturation:0}} );

		}

	}

}

+ skiny