WEBESTEEM | BATTLE AREA | FORUM
art & design
webesteem magazine | nr 2 | prezentacje
art & design
art & design
Ulotka

Jarek
Kubicki
Udało nam się zrealizować punkt po punkcie wszystkie nasze zamierzenia. Strona wygląda dokładnie tak, jak miała wyglądać.

Szkice

szkic nr 1

szkic nr 2

szkic nr 3

szkic nr 4

Jarek Kubicki

Autoportret "w stylu Beksińskiego"

Jarek: siedzenie nocne

Krzysztof Kubicki

Krzysiek: siedzenie dzienne

Krzysiek przy komputerze

Krzysiek: siedzenie nocne

Bartosz Hervy

Krzysiek i Bartek

Piotr Kempa

Piotr i boski tablet Mistrza

Piotr u Beksińskiego w domu

Wernisaż

Wernisaż: część oficjalna

Wernisaż: Krzysiek i Bartek

Wernisaż: Krzysiek

Zdzisław Beksiński

Zdzisław Beksiński i żona Jarka

Pracownia komputerowa Zdzisława Beksińskiego

Pracownia Zdzisława Beksińskiego

Plakat

Plakat

Plakat
duży format: 2000x1426

Case study

Beksinski.pl
- case study

Zapewne wielu z Was zdziwiłby telefon od człowieka, który najpierw informuje, że dzwoni z Toronto w Kanadzie, a potem przedstawia się jako manager Zdzisława Beksińskiego... Mnie zdziwił...

 

Właśnie taki telefon odebrałem w połowie czerwca 2003 roku. W trakcie rozmowy okazało się, że jest do zrobienia strona mająca głównie prezentować prace artysty, ale również umożliwiająca sprzedaż przez sieć limitowanych kopii grafik. Czasu było niewiele gdyż datę uruchomienia strony ustalono na 1 sierpnia. Czyli mieliśmy półtora miesiąca na wszystko. W ciągu następnych dwóch dni skompletowałem ekipę do tego projektu - mojego brata Krzyśka, z którym dwa miesiące wcześniej robiliśmy Annabel dla Marka Drohwicza - Krzysiek zajął się całym AS prezentacji. Do php udało mi się namówić Piotra, a muzykę (a dokładniej: mix) podjął się zrealizować Bartosz Hervy z Gothic Art.

Najpierw odbyło się kilka spotkań w trakcie których ustaliliśmy dokładnie co robimy, strukturę, kwestie techniczne typu: komunikacja flash - baza danych, system obsługi sklepu itp. Po 5 dniach wszystko mieliśmy wypisane, rozrysowane i ustalone. I łudziliśmy się, że te ustalenia nie zmienią się w trakcie realizacji projektu.

Grafika i animacje Flash : Jarek Kubicki

Miałem chyba podobne uczucia jak Peter Jackson przystępujący do ekranizacji trylogii Tolkiena... jak tu się zmierzyć z legendą by fani nie zjedli mnie żywcem? Na ile pozwolić sobie na własną kreację? A może pozwolić grać samym obrazom? Beksiński fascynował mnie od dawna, pomyślałem więc: dlaczego by tej fascynacji nie wykorzystać? Nie pasowała mi minimalistyczna grafika ograniczona do menu... Do tego pompatyczna muzyka Preisnera... Nie ukrywam - chciałem się na tym projekcie wyżyć, w końcu takie zlecenie to wielka rzadkość. Więc stanęło na tym, że grafika będzie dość bogata, mająca wraz z muzyką budować atmosferę.

Nie jestem fanatykiem zaczynania projektów od szkicowania. Czasem kartka i ołówek same znajdują się w rękach, gdy ich trzeba a czasem jest to zbędne komplikowanie sobie życia w imię "wyższych idei". W tym wypadku, gdy strona miała być nieomal obrazem, bez szkiców się nie obeszło.

Od samego początku chodziła mi po głowie idea "ożywienia" obrazów Beksińskiego. Miały stanowić ilustrację do poszczególnych działów strony. Dlatego dużą część layoutu poświęciłem właśnie na ten cel. W trakcie szkicowania doszedłem do kompozycji całości: spodobał mi się pomysł ostrej ingerencji w klasyczny, prostopadły układ wszystkiego w sieci - stąd ten duży fragment jakby kartki papieru pod agresywnym kątem. Miał to być jednocześnie element leżący w konwencji malarza, a jednocześnie na tyle inny, żeby mógł stanowić względnie neutralne tło pod prezentowane na nim ilustracje będące fragmentami obrazów.

Wybrany szkic, jeszcze bardzo ogólnikowy zamieniłem na dużo bardziej dopracowany, ale ciągle szkic.

Wtedy też pojawiła się kwestia menu i szerzej: całej usebility strony. Niby nie ma tu wątpliwości: ma być jak najłatwiejsza dla użytkownika. Ale czy aby na pewno? A może właśnie celowo utrudnić zadanie, zmusić odbiorcę do wysiłku? Jak wiele kwestii związanych z tym projektem i ta została rozstrzygnięta na zasadzie: "a dlaczego by nie?". Zwłaszcza, że mieliśmy dużą swobodę - klient był bardzo otwarty na wszelkie pomysły. To też duża rzadkość.

Razem z Krzyśkiem siedzieliśmy i kombinowaliśmy na zasadzie: czy da się zrobić żeby to robiło tak i tak? - Jasne, że się da. - A żeby się jeszcze obracało i zmieniało kolor? - Jasne, że się da...

Wtedy powstał ten "chory" pomysł na menu. Cała idea opierała się na wrażeniu "lepkości" obiektów tworzących menu. Sam proces "uwalniania" się miał irytować, drażnić... wzbudzać emocje, może nawet negatywne. Czyż nie podobnie jest w przypadku prac Beksińskiego?

Klient, a raczej osoba go reprezentująca i nadzorująca prace, od razu zaakceptował ideę i mogłem przystąpić do wykonania projektu.

Zacząłem od skanowania wielkiej ilości kartek ze starych książek, kartoników innych, już nie pamiętam nawet, jakich drobiazgów. W Photoshopie zacząłem to ze sobą składać łącząc to z fragmentami z obrazów Beksińskiego. Było też trochę ręcznej roboty tabletem przy detalach, domalowywanie fragmentów itp. Ogólnie jednak nie zajęło to wiele czasu, około 6-8 godzin.

Krzysiek przygotował próbną demonstrację systemu menu - jeszcze zupełnie go nieprzypominająca. Ale dawało już to wyobrażenie jak to będzie wyglądało. No i przekonało mnie, że jednak da się to zrobić.

Załadowanie grafiki do flasha nie było w zasadzie żadnym problem. Zabawa zaczęła się przy próbach "ożywienia" obrazów... nie wiem co mnie podkusiło żeby się wpakować w robienie "odlatujących ptaków" w pierwszym screenie, ale przekonało mnie to, że się zdecydowanie nie nadaję do robienia animacji poklatkowych .

Gdy tylko projekt "przeszedł", przystąpiłem do zrobienia zajawki strony - miała wisieć na serwerze do czasu uruchomienia właściwego serwisu. W trakcie robienia tej niewielkiej grafiki rozstrzygnęło się wiele kwestii typu muzyka (synchronizacja, sposób ładowania jej do prezentacji), kompresja itd. Bardzo się to przydało przy późniejszej pracy, ponieważ te sprawy mieliśmy z głowy już na początku.

Równolegle powstawały dodatkowe elementy związane z promocją strony: plakat i ulotka informujące o wernisażu tej strony - to kolejny pomysł, który został zaakceptowany przez klienta.

Jak to często bywa praca nad grafiką trwała do późnych godzin nocnych w przeddzień (a właściwie - w dzień) prezentacji...

Flash i Action Script : Krzysztof Kubicki

Kiedy Jarek poinformował mnie o Beksińskim, miałem za sobą tylko Annabel i zaledwie pół roku doświadczenia w AS. No nic, w końcu z Annabel poszło nieźle, więc nie było powodów do paniki.

Pamiętam jak na pierwszym spotkaniu dyskutowaliśmy nad tym, co można zrobić, co by fajnie wyglądało. Każdy rzucał jakimś pomysłem, a kiedy widziałem na sobie pytające spojrzenia "można?" ja tylko mówiłem "można, można".

Wybraliśmy kilka, a ja stanąłem przed problemem nawigacji. Na szczęście były wakacje, więc mogłem się temu całkowicie poświecić. Pierwsza wersja wyglądem przypominała pająka, którego odnóża przyczepiały się, naciągały a następnie odrywały przyczepiając bliżej myszki. Zwłaszcza Piotrowi bardzo się to spodobało, postulował, aby dodać funkcje opiekowania się tym pajączkiem, dokarmiania - takie Tamagochi . Było zabawnie ale nie oto chodziło. W projekcie Jarka nawigacja to był jakiś sznurek z nawleczonymi punktami, który "jakoś" by się poruszał. Na pająku opanowałem funkcję curveTo(), na której oparty jest cały system. Wszystko fajnie, tylko jak połączyć te linie tak, aby nie było żadnych zagięć? Tutaj dużo było wydziwiania na kartce. Stanęło na punktach "przelotowych", przez które przechodzi linia. Oprócz tych widocznych jest jeszcze koło 10 takich punktów. Każdy następny odcinek krzywej Beziera jest oparty na poprzedniej - punkty controlX, controlY są to te same punkty poprzedniej krzywej, ale symetryczne względem punktu przelotowego i jeszcze z odpowiednim współczynnikiem. Dzięki temu linie są gładkie i nie ma żadnych zagięć. "Lepkość" punktów ma dwa progi: kiedy myszka wjeżdza na pole punkty, i kiedy wyjeżdża - są to dwie różne wielkości. Dodatkowo sąsiednie punkty również przesuwają się w kierunku najechanego punktu. Ruch każdego punktu jest jednostajnie opóźniony, nowe współrzędne to oczywiście random() co sprawia wrażenie że sznurek "żyje" lub pozycja myszki przy najechaniu. Obsługa ruchu i całej interakcji jest zrealizowana w każdym punkcie osobno, generowanie oraz cały algorytm wygładzania linii to już jedna funkcja.

Baza danych musiała być uniwersalna, aby i Piotr w PHP-ie i ja w AS moglibyśmy bez przeszkód mieć do niej dostęp. Wybór padł oczywiście na XML. Galerie to też Flash, jednak numer wgrywanego obrazu jest przesyłany do zmiennej przez PHP (w kodzie PHP : ...flash.swf?name=<?php...).

Cała reszta to proste guziki MC albo loadMovie() i żonglowanie swapDepths(), można o tym przeczytać wszędzie.

Materiały, z których korzystałem to przede wszystkim flashowy Reference, Help a potem internet i różnego rodzaju Forumy i serwisy. No i mój osobisty dysk z Papiurami, czyli różnego rodzaju pdfami (rozdziałami z książek itp.).

Muzyka : Bartosz Hervy

Przyjąłem to wyzwanie z radością, nie często się pracuje z muzyką Preisnera nad stroną Beksińskiego. Choć wiedziałem, że nie będzie to łatwe obrabiać dzieła tak bardzo skończone.

Na początku siedzieliśmy w czwórkę myśląc nad koncepcją, Jarek pracował nad grafiką, a ja zastanawiałem się co przyniesie połączenie Beksińskiego z Preisnerem, ba wszyscy się zastanawialiśmy. Efekt chyba przeszedł nasze najśmielsze oczekiwania...

Przeszło dwa dni spędziłem tylko na słuchaniu czterech płyt Preisnera, które miałem "pociąć" na potrzeby strony. Godziny z słuchawkami na uszach aby wybrać te najlepsze, najbardziej pasujące do dzieł Beksińskiego, dźwięki. Nie było to łatwe ponieważ czułem, że te 6 fragmentów, które miały być muzyczną ilustracją do podstron musi być wyjątkowe. Dodatkowo, wszystkie dzieła Preisnera są niesamowite, ale też mało przewidywalne trudno było z nich wyodrębnić fragment, który bez trudu można zaloopować. Po parunastu godzinach w programach edytujących udało się uzyskać najbardziej mroczne i zarazem najbardziej pasujące do obrazów mistrza fragmenty, które to zostały przyporządkowane wydarzeniom na stronie www. Idea była taka żeby każdy kawałek trwał około 40 sekund i był podzielony na dwie części: początek i rozwinięcie, które, miało delikatnie się loopować nie zwracając uwagi odbiorcy na ciągle ten sam motyw. Mam nadzieję, że się udało. Pamiętam moment, kiedy wstawiliśmy to na stronę i odsłuchaliśmy pierwszy raz, to było to coś, co spowodowało przejście dreszczy na naszych plecach: dźwięki dopełniały grafikę, grafika dopełniała dźwięki. Obraz i muzyka stanowiły jedność.

PHP : Piotr Kempa

Zrobić system prostego sklepu, bez obsługi koszyka i śledzenia klientów? Właściwie nic prostszego - mała baza w mySQL, interface przez akcję z flash'owego formularza. Do tego baza obrazów pozwalająca na późniejszą edycję - czyż trudno to zaimplementować w mySQL i dorobić proste interface'y?. Dlaczego więc nie zdecydowałem się na mySQL? Powody są dwa. Po pierwsze - po naradach z Krzyśkiem, który miał używać bazy obrazów do dynamicznego generowania galerii uznaliśmy, że najwygodniejszym sposobem będzie pobieranie z serwera pliku xml i przetwarzanie go w actionscript. Właściwie ten powód sam już w sobie wystarcza, ale dodatkowym było to, że robota miała być "prestiżowa" więc w sumie wypadało użyć czegoś tak modnego jak xml...

Skoro już słowo się rzekło i baza obrazów miała być w xml'u to właściwie i baza klientów mogła też być. A skoro już ma się do zrobienia dwie bazy to w sumie normalny człowiek myśli: lepiej zrobić ogólny system, taki na każdą okazję i obsadzić go w tych dwóch rolach (a jak już czas pokazał i w innych).

Dalej było już z górki. Php ma na szczęście support xml'a właściwie nawet niezły (choć może nie taki jak java no ale nie narzekajmy). W gruncie rzeczy miałem wielką ochotę wykorzystać domXML ale nie do końca mam do niego zaufanie w php 4.3 (a ten był ostatni w czasie tworzenia Beksińskiego) a do wyjścia php5 jeszcze troche czasu i musiałem obejść się smakiem. No wiec pozostał zwykły expat, jak się nie ma, co się lubi...

Jak już robić xml i to na przyszłość to najlepiej zrobić to na obiektach, od czasu php4 wygląda to już całkiem różowo. Choć znów można zrzędzić i czekać na php5 gdzie wsparcie oop zaczyna mi przypominać wymarzony c++ :)

W dużym skrócie - powstał jeden wielki obiekt, który zawierał wszystkie podstawowe funkcje obslugi bazy - odczyt/zapis xml, dodawanie, usuwanie, edycja, wyswietlanie rekordów w html (jako tabeli wszystkich) i pojedynczego rekordu (do edycji), sortowanie, etc. Właściwie z perspektywy czasu najbardziej żałuję, że do konwersji xml<->html nie użyłem xslt tylko męczyłem się na piechotę w php (niedopatrzenie naprawione w nowej wersji użytej w nowym dziele kubicki.info - coming soon to a computer screen near you). Wracając do tematu - obiekt ten można założyć na każdą prostą strukturę rekordu, co też zaraz uczyniłem tworząc bazy klientów i obrazów.

Do tego należało jeszcze dołożyć system akcji wywoływanych przez interface bazy, które wykorzystywały metody obiektu i voila, system zarządzania galerią gotowy! No, nie licząc może takich drobiazgów jak zabezpieczenie wszystkiego hasłem, dopracowanie html'a, stworzenie css (z olbrzymim udziałem Jarka) itd. Aby uruchomić sklep należało jeszcze tylko zrobić interface dla Krzyśka i actionscript aby mógł wysyłać dane klienta do bazy, wysyłanie maila do klienta i wyciąganie od niego potwierdzenia, wszystko to uwieńczone wysyłaniem triumfalnego maila do obsługi sklepu pt. "sold!".

Po integracji z reszta pracy system zastartował prawie od razu i już można było dodawać obrazy do galerii. Baza działa po dziś dzień, narazie bezawaryjnie (praise the Lord!). Jak już pisałem udało się stworzyć coś na tyle ogólnego w konstrukcji że po niewielkich przeróbkach znalazło już zastosowanie w kilku innych aplikacjach.

To tyle na temat php, pozostaje nam tylko pogrążyć się w cichym i pokornym oczekiwaniu na wersję 5 (i xslt 2.0!)...

Podsumowanie

Chyba wyszło nieźle... strona miesiąca na Webesteem, wyróżnienie w Favorite Website Award... A przede wszystkim - udało nam się zrealizować punkt po punkcie wszystkie nasze zamierzenia. Strona wygląda dokładnie tak, jak miała wyglądać.

Ostatnim aktem realizacji tego projektu był wernisaż w restauracji Chimera na Warszawskiej starówce oraz wizyta u Zdzisława Beksińskiego w domu. Zwłaszcza ten ostatni punkt programu zrobił na mnie duże wrażenie - to niezwykły człowiek, bardzo inspirujący.

Od siebie dodam tylko, że duży wpływ na powodzenie projektu miała fantastyczna atmosfera, w jakiej powstawał. Może powodem tego był fakt, że jedyną zapłatą (ale za to jaką!) były limitowane kopie dzieł artysty? Czyli - temat kasy nie istniał.

Korzystając z okazji chcę podziękować Krzyśkowi, Piotrowi i Bartoszowi za ambitne i kreatywne podejście z ich strony.

Jarek Kubicki

Autorzy: Jarek Kubicki, Krzysztof Kubicki, Bartosz Hervy, Piotr Kempa

 

art & design
webesteem magazine | nr 2 webesteem magazine is a part of webesteem.pl  |  copyright © 2001-2004 webesteem.pl  
art & design