Witam wszystkich forumowiczów! Mam pytanie a mianowicie jak zrobić żeby miniatury w galerii zdjęć miały równą wielkość. Gdy wrzucam kwadratowe zdjęcie to jest kwadratowa miniatura, a gdy prostokątne to jest prostokątna, galeria wtedy wygląda jak by była z cegiełek nieładnie porozrzucanych. Chciałbym żeby wszystkie miniatury miały wielkość kwadrata np 20 px 20 px (prostokątne fotki dostosowywane były by automatycznie do kwadrata lub na odwrót) wtedy galeria wyglądała by bardziej schludnie. Bardzo prosił bym o jakieś wskazówki jak mam tego dokonać, zaznaczam iż jestem początkujący w tych sprawach. Pozdrawiam
Od tego momentu thumby będą się tworzyć jako kwadraty o boku 100 z białym tłem (określonym w $colorWeiss), jeśli obrazek wyjściowy nie był kwadratem. Obrazek zostaje wypośrodkowany i w zależności od formatu (portret, landscape) dostaje białe ($colorWeiss) ramki: góra/dół albo lewo/prawo. Jak się komuś chce, może poeksperymentować z wartościami "100" i/lub włożyć tam zmienne/stałe z $config.
Dzięki, Makaron ;-) a po wstawieniu do general.php przykładowo $config[thumb_square] = true (or false) możnaby to regulować z poziomu konfiguacji w adminie. Oczywiście po "owinięciu" powyższego kodu "ifem" (if $thumbsquare = true) I wrzucić w następną wersję QC i CMS.
A czy po tej zmianie będzie można dalej kontrolować wielkość miniaturek w administracji 100 200?
boboo - super że to zrobiłeś męczę się z tym już rok
Nie znam php za bardzo i w widoku wkładałem diva np 200x200px z ukrywaniem przepełnienia a admin wkładał miniaturkę powiedzmy 250px i niby było widać :) tak jak chce ale to nie tak jak powinno być zrobione :)
Super boboo - jeszcze raz wielkie dzięki
Teraz potestuje
Chyba nie dam rady zrobić tego if ze zmienną w administracji ale będę próbował - bo to naprawdę rozwija Quicka i tej opcji już długo szukałem.
No to jedziemy z tym koksem: 1. W pliku /config/general.php znajdź: $config['max_dimension_of_image'] i pod tą linijką (aby sprawy grafiki trzymać w jednym miejscu) wstaw: $config['square_thumb] = true; 2. W pliku /libraries/FotoJobs.php u góry pod linijką: var $sCustomThumbAdd = null; wstaw: var $iSquareThumb = 100; 3. W tym samym pliku (FotoJobs) dużo niżej znajdź funkcję: createCustomThumb a w niej znajdź: else $this->setThumbSize( $this->iCustomThumbX ); i pod tym wstaw: $this->iSquareThumb = $this->iThumbX; 4. W następnej funkcji: createThumb (przed zmianami, które podałem 3 posty wyżej!!!) zamień linijkę: $mImgDest = imagecreatetruecolor( $this->iThumbX, $this->iThumbY ); na taki duży blok: if ($GLOBALS['config']['thumb_square'] == true){ $mImgDest = imagecreatetruecolor( $this->iSquareThumb, $this->iSquareThumb ); $colorWeiss = imagecolorallocate($mImgDest, 255,255,255); imagefilledrectangle($mImgDest,0,0,$this->iSquareThumb,$this->iSquareThumb, $colorWeiss); if ($this->iThumbY > $this->iThumbX){ $iYstart = 0; $iXstart = (int)($this->iSquareThumb - $this->iThumbX)/2; } elseif ($this->iThumbX > $this->iThumbY){ $iXstart = 0; $iYstart = (int)($this->iSquareThumb - $this->iThumbY)/2; } else{ $iYstart = 0; $iXstart = 0; } } else{ $mImgDest = imagecreatetruecolor( $this->iThumbX, $this->iThumbY ); $iYstart = 0; $iXstart = 0; } i ciut poniżej zamień linijkę: if( !$sCreateFunction( $mImgDest, $mImgCreate, 0, 0, 0, 0, $this->iThumbX + 1, $this->iThumbY + 1, $iImgCreateX, $iImgCreateY ) ) na: if( !$sCreateFunction( $mImgDest, $mImgCreate, $iXstart, $iYstart, 0, 0, $this->iThumbX + 1, $this->iThumbY + 1, $iImgCreateX, $iImgCreateY ) ) 5. W /lang/pl.php (i/lub innych językach) dodajemy: $lang['square_thumb'] = "Twórz kwadratowe miniaturki"; 6. W /templates/admin/settings.tpl szukamy tabeli: <table class="tab" id="tabOptions"> i jedziemy edytorkiem do końca tej tabeli, aż znajdziemy: <!-- tab options --> </table> i nad <!-- tab options --> wstawiamy: <tr> <td>$lang['square_thumb']</td> <td> <select name="square_thumb"> $sSquareThumb </select> </td> </tr> 7. W pliku /actions_admin/settings.php nad linijką: $sFormTabs = $oTpl->tbHtml( 'settings.tpl', 'CONFIG_TABS' ); wstawiamy: $sSquareThumb = throwTrueFalseSelect( $config['square_thumb'] );
Od tego momentu decydujemy w panelu admina, czy nowowgrywane zdjęcia produktów mają mieć kwadratowe miniaturki (działa i na 100, i na 200 - czyli wielkości ustawione w general.php). Jednak nie działa to wstecz!!! Czyli tylko miniaturki wgrane z ustawioną opcją: TAK (panel admina, konfiguracja, opcje) będą kwadratowe i takie pozostaną.
1.) A czy ty byś umiał zrobić żeby po wczytaniu fotek z kanałem Alpha 0 Czyli PNG lub GIF z przezroczystym tłem Po stworzeniu miniatury dalej miał by przezroczystość Np.: Wkładam obrazek Ikonę na tło teksturowane
2.) I czy umiałbyś zrobić taką modyfikację że klient w konfiguracji wczytuje logo w pliku png z przezroczystością powiedzmy 200x120px
Następnie to logo wkładane jest jako logo na froncie
to samo logo jest skalowane do powiedzmy 25px i nakładane na fotki przy produkowaniu miniaturek i kopiowaniu zdjęć na serwer
Albo w konfiguracji trzy pola uploadu: Wczytaj logo na stronę wczytaj logo jako znak wodny na fotkę dużą wczytaj logo jako znak wodny na miniaturki
Ja sobie z tymi żeczami raczej nie poradzę, a OpenSolution chyba nie za bardzo ma czas na takie żeczy.
Uuups, w punkcie 4. w linijce: if ($GLOBALS['config']['thumb_square'] == true){ wkradł się "czeski błąd" zamiast: 'thumb_square' MA BYĆ: 'square_thumb' !!!
marcincook, podejrzałem Twoją stronkę, podobają mi się białe cienie przysłaniające header - http://personaldesign.pl/templates/img/opacity75_2x200.png, oraz podświetlenie loga, jeśli możesz podeślij mi kod i obrazki do podmianki, chciałbym taką samą wielkość hadera wraz z tymi cieniami bez żadnych marginesów, był bym bardzo wdzięczny za pomoc, euphoria_art@onet.eu, dzięki i pozdrawiam
Kod to chyba sobie potrafisz skopiować a i adres obrazka też już podałeś
Może go nie zauważyłeś bo ma 2piksele szerokości i pozycje top w background image
Jeśli chodzi o cień (hmm raczej światło) pod logo to są dwa obrazki w rollOver pod a
Photoshop receptę Ci podam to sobie zrobisz jaki chcesz kolor 1. Nowy obrazek przezroczyste tło 2. Rysujesz kółko - takie duże jak chcesz - np 250piks dokument = kółko 100piks max 3. Filtr > rozmycie guasowskie - duży radius (poeksperymentuj) 4. Zapisz dla internetu PNG 1bit na kanał Alpha
W Darmowym gimpie też na pewno można tak butelkowo rozmyć obiekt, ale nie mam doświadczenia w gimpie (7lat na photoshopie + Adobe Certyfikat Ekspert, więc mi trudno się w gimpie odnaleść :) ale zapewne sobie poradzisz
Ja jak zaczełem przygody z kodowaniem css html js to też chciałem wszystko dostać gotowe do użycia
Ale teraz DZIĘKUJĘ ludziom z różnych forum że też mi podawali recepty na wszystko co chciałem a nie gotowe rozwiązania.
Więc pokombinuj a ja Ci mogę pomagać na forum czy mailu czy skype / FORUM jest o tyle lepsze że z tej porady może ktoś jeszcze skorzystać a nie tylko jedna osoba
Lepiej założyć nowy temat "Porady graficzne - przezroczystość" Niż zaśmiecać ten wątek
bo przyznam szczerze że liczę że temat miniatrek kwadratowych się rozwinie do takiego stopnia że można będzie ten skrypt od OpenSolution rozwinąć Bo jest banalnie prosty w obsłudze dla użytkowników Adminów i zasługuje na Dobry rozwój o Pare zabawek żeby OpenSol... zebrało więcej uzytkowników i w końcu w darmowej wersji zrobili też SEO Frendly bo to jest ogromny minus tego narzędzia
Sam kupiłem kilkanaście licencji płatnych tylko dlatego że nie ma ?http
A miło by było żeby OpenSolution mogło zarabiać żeby to rozwijać - ale nie będzie zarabiać z taką liczbą użytkowników (porównaj wordpresa czy joomle)
Ale chyba już bardzo nie na temat piszę
Jestem skłonny pomagać graficznie + CSS + HTML + AS3 Flash Fajnie jak by ktoś pomagał mi w php - bo ta kolejność generowanych treści i taka "obiektowość" jest na razie dla mnie nie do ogarnięcia na tyle żebym sobie sam radził a co do tego pomagać
Marcin, zacznij grać w sudoku ;-) szybciej wtedy ogarniesz QC :-) Ale, proszę daj mi parę wskazówek: "spełnienie marzeń - przycinanie fotek do kwadratu". Wnioskuję, że chodzi o "główne fotki". Do jakiego rozmiaru? Centrycznie?
bobo na tej stronie jest galeria przycięta http://www.viking-jeans.com.pl/?pl_oferta,3 jest też fajne rozwiązanie po najechaniu na fotkę przysłania go w pół przezroczyste tło http://www.viking-jeans.com.pl/templates/img/photo_bg_hover.png, jest to quick.cms może da się jakoś podpatrzeć w plikach, co i jak zmienić. Wszystkie fotki mogą być przycięte do prostokąta tak jak na tej podanej wyżej stronie.
Może to Ci ułatwi zrozumienie o co mnie chodzi http://inherit.pl/ProporcjeMiniatur.jpg
Fakt Sudoku nigdy nie rozumiałem
Wiem że często za dużo wymagam od narzędzi które generują w efekcie htmla ale jestem grafikiem, a programuję tylko dlatego że muszę, coś tam wiem o flashu i AS3 i w takiej obiektowości potrafię się odnaleść a php męczę już jakiś czas i dochodzę do wniosku że chyba zaczne uczyć się php a nie php w QuickCms bo trochę nie mogę się połapać
We flashu robi się to tak że maskuję obrazek kwadratem...
a zresztą wklejam ci cały pakiet AS3 (Flash) który robi ma klasy (w php to chyba raczej funkcje) które prubuje wykonać w tej bibliotece Quickowej od pół roku czy lepiej. Jak sobie włożysz ten kod do czegoś co Ci składnie pokoloruje to zrozumiesz chyba o co mi chodzi
Weź sobie w notepad++ włącz język Flash AS i poczytaj poniższy kod
Wszystko jest dość dobrze skomentowane więc to jest działanie którego ni jak nie mogę uzyskać w QCms i QCatr
KLASA ---- GALERIA & DZIAŁANIE NA OBRAZKACH package { import flash.display.*; import flash.events.*; import flash.net.URLRequest; import flash.net.URLLoader; import flash.text.*; import flash.filters.ColorMatrixFilter; import fl.motion.AdjustColor; import flash.errors.IOError; import flash.utils.*; import flash.ui.*;
public class galeria extends MovieClip { //własność okreslająca nazwę galerii domyślnie jest to galeria.xml private var galeriaNazwa:String = "galeria.xml"; //zmienne przechowujące dane wczytane z pliku XML private var listaObrazow:XMLList; private var liczbaObrazow:Number; //loader pliku XML z opisem zdjęć do galerii private var xmlLoader:URLLoader = new URLLoader(); //ewentualne wymuszenie jakości wyświetlania //stage.quality=StageQuality.BEST; //parametry okna miniatur private var kolumnyGaleria:uint = 3; private var wierszeGaleria:uint = 5; private var krokGaleria:Number = kolumnyGaleria * wierszeGaleria; private var marginesLewo:Number = 10; private var marginesGora:Number = 20; //odstępy miniatur w okienku private var odstepMiniatury_x:Number = 10; private var odstepMiniatury_y:Number = 10; //początkowa wyświetlana strona private var stronaGaleria:Number = 1; //rozmiar ramki dla dużego zdjęcia i dla miniatury private var zdjecieRamka:Number = 4; private var loaderRamka:Number = 3; //zmienna ustawiona na true oznacza, że zdjęcie ma wypełnić pole wyświetlania, false oznacza dopasowanie private var wypelnijZdjecie:Boolean = false; //zmienna ustawiona na true oznacza, że zdjęcie ma być wygładzone, false oznacza brak wygładzania private var wygladzZdjecie:Boolean = true; //podobnie jak wyżej tylko dla miniatur private var wypelnijMini:Boolean = true; private var wygladzMini:Boolean = true; //numer aktualnie wyświetlanego zdjęcia private var numerZdjecie:int = -1; //pozycja Y przycisków - przyda się do ich tymczasowego usuwania private var wsteczY:Number = 590.60; private var dalejY:Number = 590.60;
public function galeria():void { //ustawiamy okno galerii na stały rozmiar stage.scaleMode = StageScaleMode.NO_SCALE;
//wywolujemy funkcję wczytywania pliku XML z opisem galerii //cała reszta funkcjonalności galerii jest inicjowane w tej funkcji zaladujXML();
//ustawiamy zawartość klipu panelZdjęcie na 1 klatkę panelZdjecie.gotoAndStop(1); }
private function zaladujXML():void { //rozpoczynamy ładowanie pliku xML z opisem galerii xmlLoader.load(new URLRequest(galeriaNazwa)); //określamy akcję na wypadek zdarzenia błędu wczytywania pliku XML xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, bladXML); //wywołujemy przetwarzanie zawartości pliku XML po jego wczytaniu xmlLoader.addEventListener(Event.COMPLETE, przetworzXML);
//funkcja wyświetlająca informację w wypadku błędu function bladXML(e:IOErrorEvent):void { galeriaTytul.text = "UWAGA Nie można załadować galerii"; e.target.removeEventListener(IOErrorEvent.IO_ERROR, bladXML); e.target.close(); } } //funkcja przetworzXML wczytuje listę zdjęć wraz z opisem, wyświetla tytuł galerii w polu galeriaTytul //określa liczbę wczytanych fotografii, oraz wywoła funkcję która wyświetli pierwszą grupę miniatur private function przetworzXML(e:Event):void { var xmlPlik:XML = new XML(e.target.data);
//usuwamy detektor zdarzen po przetworzeniu pliku XML i kasujemy wczytaną zawartość z pamięci xmlLoader.removeEventListener(Event.COMPLETE, przetworzXML); xmlLoader = null; }
//funkcja inicjujPanelMiniatury oblicza zakres indeksów zdjęć, które mają być wyświetlone na stronie o numerze podanym jako argument //wejściowy, następnie inicjuje działanie przycisków przewijania listy miniatur, na koniec wywołuje funkcję, która //wczyta miniatury private function inicjujPanelMiniatury(strona:Number):void { var odNumer:Number = krokGaleria * (strona - 1); var doNumer:Number = odNumer + krokGaleria;
//warunek, aby na ostatniej stronie wyświetlić tylko tyle obrazów ile pozostało if (doNumer > liczbaObrazow) { doNumer = liczbaObrazow; }
//właczamy lub wyłączamy przyciski if (strona == 1) { wstecz.y += wsteczY + 200; dalej.y=dalejY; dalej.addEventListener(MouseEvent.CLICK, doPrzodu);
} else if (strona==Math.ceil(liczbaObrazow/krokGaleria)) { wstecz.y = wsteczY; dalej.y+=dalejY+200; wstecz.addEventListener(MouseEvent.CLICK,doTylu); } else { wstecz.y=wsteczY; dalej.y=dalejY; //określamy akcje dla zdarzenia kliknięcia myszą na przyciski dalej i wtecz //czyli włączamy ich działanie dalej.addEventListener(MouseEvent.CLICK, doPrzodu); wstecz.addEventListener(MouseEvent.CLICK,doTylu); }
//wywolanie funkcji, która wypełni okno miniatur zdjęciami //panelZdjecie.gotoAndStop(3); wypelnijPanelMiniatury(odNumer,doNumer); }
//funkcja doPrzodu określa działanie dla przewijania listy miniatur do przodu private function doPrzodu(e:MouseEvent):void { //funkcje usuwające starą zawartość okien miniatur i powiększenia czyscPanelMiniatury();
//wyłączamy działanie przycisków dalej.removeEventListener(MouseEvent.CLICK, doPrzodu); wstecz.removeEventListener(MouseEvent.CLICK,doTylu);
//wywołanie kolejnej strony miniatur, stronaGaleria wzrasta przed wywołaniem inicjujPanelMiniatury(++stronaGaleria); }
//funkcja doTylu określa działanie dla przewijania listy miniatur wstecz private function doTylu(e:MouseEvent):void { //funkcje usuwające starą zawartość okien miniatur czyscPanelMiniatury();
//wywolanie poprzedniej strony miniatur, stronaGaleria maleje przed wywołaniem inicjujPanelMiniatury(--stronaGaleria); }
//funkcja czyscPanelMiniatury usuwa zawartośc panelMiniatury, najpierw kasowana jest zawartośc poszczególnych //loaderów miniatur, jeśli takie istnieją, a na koniec usuwane z listy wyświetlania są wszystkie ramki miniatur private function czyscPanelMiniatury():Boolean { // tutaj zmienna i w pętli zmniejsza się tylko do 1 gdyż 0 oznacza zawartość panelMiniatury, którą wygenerowaliśmy for (var i:int = panelMiniatury.numChildren-1; i>0; i--) { var dziecko=panelMiniatury.getChildAt(i); for (var j:int = dziecko.numChildren-1; j>=0; j--) { var loader=dziecko.getChildAt(j); //sprawdzamy czy zmienna loader przechowuje obiekt typu Loader, służy temu operator is if (loader is Loader) { loader.unload(); loader=null; } } //usuwamy obiekt tylko gdy istnieje if (dziecko!=null) { panelMiniatury.removeChild(dziecko); } } return true; }
//funkcja wypelnijPanelMiniatury zapełnia okno panelMiniatury miniaturami zdjęć private function wypelnijPanelMiniatury(startNumer:uint,koniecNumer:uint):void { var kolumna:Number=0; var wiersz:Number=0;
//pętla dla wszystkich zdjęć for (var i:Number = startNumer; i < koniecNumer; i++) { //tworzymy okno miniatury, w którym umieścimy miniaturę var oknoMiniatury:OknoMiniatury = new OknoMiniatury(); //nadajemy nazwę okienku miniatury, taką jak numer zmiennej i oknoMiniatury.name=String(i);
//przechodzimy do drugiej klatki klipu oknoMiniatury, która zawiera klip //animacji wyświetlany aż miniatura nie zostanie załadowana i wyświetlona oknoMiniatury.gotoAndStop(2);
//określamy położenie danego okna miniatury i dodajemy go do panelu panelMiniatury oknoMiniatury.x=marginesLewo+(oknoMiniatury.width+odstepMiniatury_x)*kolumna; oknoMiniatury.y=marginesGora+(oknoMiniatury.height+odstepMiniatury_y)*wiersz; panelMiniatury.addChild(oknoMiniatury);
//pobieramy adres miniatury z danych XML var adresMiniatury=listaObrazow[i].@MINI;
//tworzymy loader, który załaduje zdjęcie var miniLoader = new Loader(); //kopiujemy nazwę okna miniatury do nazwy loadera miniatury miniLoader.name=oknoMiniatury.name; miniLoader.x=miniLoader.y=loaderRamka; //określamy własność filters loadera, czyli efekt kolorystyczny miniLoader.filters=usunKolor(true); //miniLoader.alpha=0.75;
//okreslamy rozmiar maski która zasłoni część zdjęcia nie mieszczącą się w okienku miniatury //nastepnie dodajemy ją do oknoMiniatury var maska:Sprite=utworzMaske(oknoMiniatury.width,oknoMiniatury.height,loaderRamka,loaderRamka); //aktywujemy maskę zdjęcia miniLoader.mask=maska; oknoMiniatury.addChild(maska);
//wywolujemy detektor zdarzenia błedu ładowania miniatury //tutaj funkcja wywoływana w przypadku zdarzenia przyjmuje argument //wymaga to odpowiedniej konstrukcji tej funkcji - patrz jej definicja miniLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, bladMini(oknoMiniatury));
//wywołujemy funkcję która po załadowaniu miniatury do pamięci przeskaluje ją tak //aby mieściła się na szerokość lub wysokość w oknie miniatury, oraz ją wyświetli miniLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, wczytajMini);
//dodajemy interaktywność do miniatury dla efektu najezdu myszą //oraz dla kliknięcia - w tym przypadku załadowane zostanie duże zdjęcie miniLoader.addEventListener(MouseEvent.MOUSE_OVER, myszNad); miniLoader.addEventListener(MouseEvent.MOUSE_OUT, myszPoza); miniLoader.addEventListener(MouseEvent.CLICK, zaladujDuze);
//wywolujemy efekt kliknięcia na pierwsze zdjęcie na stronie, aby je załadować //do panelZdjecie, dzieki temu po otwarciu galerii lub nowej strony miniatur w panelZdjecie //będzie załadowana już fotografia if (i==startNumer) { miniLoader.dispatchEvent(new MouseEvent(MouseEvent.CLICK)); } //zmiana liczników kolumn i wiersza if (kolumna+1<kolumnyGaleria) { kolumna++; } else { kolumna=0; wiersz++; } //funkcja reagująca na błąd wczytywania, zwraca na funkcję której postać akceptuje addEventListener, //czyli funkcję która ma tylko jeden argument typu Event oraz jest typu void //zwracana funkcja jest wyświetla 3 klatki klipu oknoMiniatury, która zawiera stosowny tekst function bladMini(okno:MovieClip):Function { return function(e:IOErrorEvent):void { okno.gotoAndStop(3); e.target.removeEventListener(IOErrorEvent.IO_ERROR,bladMini); } }
//funkcja wczytajMini wczytuje miniaturę i wyświetla z efektem przejścia function wczytajMini(e:Event):void { //zmienne wskazują kolejno na obiekt loadera miniatury, oraz na obiekt //okna miniatury var mojaMini:Loader=Loader(e.target.loader); var mojaRamka=panelMiniatury.getChildByName(mojaMini.name); mojaRamka.zaladowano=true;
//tworzymy obiekt efektu, który będzie dodany do miniatury var mojEfekt:Efekt = new Efekt();
//pozycjonujemy okno z efektem mojEfekt.x=loaderRamka; mojEfekt.y=loaderRamka; mojEfekt.width=mojaRamka.width-2*loaderRamka; mojEfekt.height=mojaRamka.height-2*loaderRamka;
// przechodzimy do 1 klatki dla okna miniatury, która jest pusta mojaRamka.gotoAndStop(1);
//dodajemy miniaturę i efekt do obiektu okna miniatury mojaRamka.addChildAt(mojaMini,mojaRamka.numChildren); mojaRamka.addChildAt(mojEfekt,mojaRamka.numChildren);
//uruchamiamy odtwarzanie efektu mojEfekt.addEventListener(Event.ENTER_FRAME,usunEfekt); } } } //funkcja tworzy prostokątną maskę o rozmiarze rozmiarX, rozmiarY z uwzględnieniem marginesu ramki //podanego jako zmienne ramkaX, ramkaY private function utworzMaske(rozmiarX:Number, rozmiarY:Number,ramkaX:Number, ramkaY:Number):Sprite { //zmniejszamy rozmiar maski o rozmiar ramki var maskaRozmiar_x=rozmiarX-2*ramkaX; var maskaRozmiar_y=rozmiarY-2*ramkaY;
return maska; } //funkcja wywołuje wczytywanie duzych zdjęć, na poczatku czyści starą zawartość obiektu //panelZdjecie, a następnie wyświetla prosty preloader ukryty w 2 klatce klipu panelZdjecie //po załadowaniu zdjęcia wywoływana jest funkcja wyświetlająca to zdjęcie wyswietlDuze //a także dodawany jest opis zdjęcia i jego numer na liście do pól opisZdjecie i opisZdjecie2 private function zaladujDuze(e:MouseEvent):void { panelZdjecie.gotoAndStop(2); //usuwamy starą zawartość czyscZdjecie();
//usuwamy detektor zdarzeń i zostawiamy kolor dla miniatury, na którą kliknęliśmy e.target.addEventListener(MouseEvent.CLICK, zaladujDuze);
//tworzymy loader dla dużego zdjęcia var duzeLoader:Loader = new Loader(); //ustalamy numer zdjęcia duzeLoader.name=e.target.name;
//z danych XML pobieramy adres dużego obrazka var duzyAdres=listaObrazow[duzeLoader.name].@DUZE;
//wywolujemy ladowanie dużego pliku duzeLoader.load(new URLRequest(duzyAdres)); //wyswietlamy opis zdjęcia plus numer na liście i rozmiar w kilobajtach jako wartość text numerZdjecie =int(duzeLoader.name)+1; opisZdjecie.text=listaObrazow[duzeLoader.name].OPIS; opisZdjecie2.text=numerZdjecie+"/"+liczbaObrazow; } //obsługa błędu ładowania dużego zdjęcia, wyświetla komunikat, który //ukryty jest w 3 klatce klipu panelZdjęcie private function bladDuze(err:IOErrorEvent):void { //włączamy klatkę z komunikatem błędu panelZdjecie.gotoAndStop(3); opisZdjecie.text=""; //usuwamy detektory zdarzeń err.target.removeEventListener(IOErrorEvent.IO_ERROR, bladDuze); err.target.removeEventListener(Event.COMPLETE, wyswietlDuze); }
//funkcja załadowane zdjęcie skaluje i wyświetla z efektem przejścia klasy Efekt //efekt jest generowany dynamicznie jako klip filmowy, który nałozony zostaje na //obiekt zdjęcia, klip efektu zdefiniowany jest w edytorze Flash private function wyswietlDuze(e:Event):void { var mojeZdjecie:Loader=Loader(e.target.loader); //tworzymy obiekt z efektem var mojEfekt:Efekt = new Efekt();
//określamy położenie klipu z efektem tak aby nakladał sie na zdjęcie mojEfekt.x=mojeZdjecie.x-1; mojEfekt.y=mojeZdjecie.y-1; mojEfekt.width=mojeZdjecie.width+1; mojEfekt.height=mojeZdjecie.height+1;
//okreslamy rozmiar maski która zasłoni część zdjęcia nie mieszczącą się w oknie panelZdjecie //istotne gdy zdjęcia wypełniają panelMiniatury, nastepnie dodajemy ją do oknoMiniatury //dla każdego maskowanego obiektu tworzymy oddzielną maskę var maskaDuze:Sprite=utworzMaske(panelZdjecie.width,panelZdjecie.height,zdjecieRamka,zdjecieRamka); var maskaDuze2:Sprite=utworzMaske(panelZdjecie.width,panelZdjecie.height,zdjecieRamka,zdjecieRamka); //włączamy maskowanie zdjęcia mojeZdjecie oraz efektu mojEfekt
//dodajemy wszystkie niezbędne elementy do panelZdjecie - koniecznie w takiej kolejności //,panelZdjecie.numChildren); panelZdjecie.addChild(maskaDuze); panelZdjecie.addChild(maskaDuze2); panelZdjecie.addChild(mojeZdjecie); panelZdjecie.addChild(mojEfekt);
//uruchamiamy odtwarzanie efektu mojEfekt.addEventListener(Event.ENTER_FRAME,usunEfekt); } //funkcja usuwa obiekt efektu po jego jednorazowym odtworzeniu private function usunEfekt(e:Event):void { if (e.target.currentFrame>=e.target.totalFrames) { e.target.stop(); //próbujemy usunąć element, gdy nie istnieje, ignorujemy błąd, wykorzystujemy konstrukcję // try catch, blok try wykonujemy i gdy nastąpi błąd wykonujemy polecenia bloku catch //pozwala to ignorować błędy i ich komunikaty try { e.target.parent.removeChild(e.target.parent.getChildByName(e.target.name)); } catch (err:Error) { //ignorujemy błąd } e.target.removeEventListener(Event.ENTER_FRAME,usunEfekt); } } //funkcja centruje wyświetlanie zdjecia w kontenerze, ustawiając jego współrzędne //względem lewego górnego rogu private function centrujZdjecie(kontener:DisplayObject, zdjecie:Loader):void { zdjecie.x=kontener.width/2-zdjecie.width/2; zdjecie.y=kontener.height/2-zdjecie.height/2; } //funkcja skaluje zdjęcia do rozmiaru kontenera, jako argumenty wykorzystuje wymiary zdjęcia i kontenera w którym będzie umieszczone //dodatkowo uwzględnia margines ramki wokół zdjęcia //zmienna logiczna wypełnij okresla czy zdjęcie ma wypełniać calość ramki czy być dopasowane //zmienna logiczna wygladz określa czy zdjęcie ma być wygladzone po przeskalowaniu private function skalujZdjecie(kontener:DisplayObject,zdjecie:Loader,ramkaX:Number, ramkaY:Number, wypelnij:Boolean, wygladz:Boolean):void { var skala:Number; var skalaX:Number =(kontener.width - ramkaX)/zdjecie.width; var skalaY:Number =(kontener.height - ramkaY)/zdjecie.height; if (wypelnij) { //operator trzyargumentowy arg1 : arg2 ? arg3 zwraca wynik arg2, gdy arg1 jest prawdą, w przeciwnym razie zwraca arg3 skala = (skalaX > skalaY) ? skalaX : skalaY; } else { skala = (skalaX > skalaY) ? skalaY : skalaX; }
if (skala<1) { zdjecie.scaleX=skala; zdjecie.scaleY=skala; } //jeśli parametr wygladz jest true wygładzamy zdjęcie po zmniejszeniu (aby nie było przeostrzone) //konieczne rzutowanie na typ bitmapa gdyż tylko wtedy można skorzystać z własności smoothing if (wygladz) { Bitmap(zdjecie.content).smoothing=true; } }
//funkcja określa działanie dla umieszczenia myszy nad obiektem //tu zmienia kolor na kolorowy //inna opcja, parametr alpha zmienia przezroczystość private function myszNad(e:MouseEvent):void { e.target.filters=usunKolor(false); //e.target.alpha=1; } //funkcja określa działanie dla umieszczenia myszy nad obiektem //tu zmienia kolor na czrnobiały //inna opcja, parametr alpha zmienia przezroczystość private function myszPoza(e:MouseEvent):void { e.target.filters=usunKolor(true); //e.target.alpha=0.75; }
//funkcja usuwa z pamięci i z listy wyswietlania duże zdjecie private function czyscZdjecie():void { //konieczne przejście do pierwszej klatki, jesli nie jesteśmy w niej //wywołanie funkcji skończy się błędem panelZdjecie.gotoAndStop(1);
var i:int=panelZdjecie.numChildren; while (i-- > 1) { var loader=panelZdjecie.getChildAt(i); if (loader is Loader) { loader.unload(); loader=null; } else { panelZdjecie.removeChildAt(i-1); } } }
//funkcja definiuje filtr transformacji kolorów na czrnobiały lub kolorowy private function usunKolor(czarnobialy:Boolean):Array { var kolor:AdjustColor = new AdjustColor(); kolor.brightness=0; kolor.contrast=0; kolor.hue=0; if (czarnobialy) { kolor.saturation=-100; } else { kolor.saturation=0; }
var macierz:Array=kolor.CalculateFinalFlatArray(); var macierzKolor:ColorMatrixFilter=new ColorMatrixFilter(macierz); var filtrCZB:Array=[macierzKolor];
Czyli ma to być nie wycinek (np. 100x100) z dużego obrazka, tylko wycinek z thumba (miniaturki), docięty do 100x100 ? Znaczy robimy thumba - tym razem jego krótszy bok ma 100 - a to dłuższe symetrycznie docinamy do stu. Dobrze zrozumiałem?
