Przyznam, że wyniki trochę mnie zaskoczyły… zresztą nie tylko mnie, bo obstawiało kilka osób i wszystkie celowały w okolice 10 -20%. W czasie badania można było zauważyć, że odsetek osób posiadających kamery był znacznie większy w godzinach wieczornych niż porannych. Wynika stąd, że komputery służbowe są mniej multimedialne.

Oczywiście wyniki te mogą różnić się od rzeczywistych, gdyż badanie wykonane było w bardzo krótkim okresie czasu, w zaledwie kilu serwisach (każdy serwis ma swój określony target, np. ludzie młodzi, klienci biznesowi) i wymagało posiadania flash playera w wersji 9.0 lub nowszej (około 98% komputerów wg Adobe). Mimo to postanowiłem podzielić się tą wiedzą.

Dziękuję za pomoc w przeprowadzeniu badania Mariuszowi Górskiemu, który był odpowiedzialny za php/mysql i zestawienie wyników.

Problem sierotek przewija się przy pracy nad stronami internetowymi od bardzo dawna. Jest wiele rozwiązań tego problemu w php (skrypty, pluginy WordPress, itp.), natomiast nie spotkałem się jeszcze z rozwiązaniem dla ActionScript (3.0). Okazało się ono stosunkowo proste, jednak nie możliwe do zastosowania we wszystkich przypadkach. Podobnie jak w html, wstawiamy pomiędzy spójniki a następujące po nich wyrazy, znaki twardej spacji ( ) w miejsce spacji miękkich. Pole tekstowe musimy wypełniać jako pole html (htmlText), gdyż inaczej ciąg   nie zostanie potraktowany jako twarda spacja. Wystarczy do tego proste wyrażenie regularne w AS3:

poletekstowe.htmlText = str.replace(/\s+([aiouwzAIOUWZ])\s+/g, ” $1 ”);

Wszystko działa znakomicie w przypadku korzystania z fontów systemowych (use device fonts). Niestety Flash nie embeduje znaku twardej spacji w przypadku pól z antyaliasem. Być może dało by się ten problem jakoś rozwiązać, np. łamiąc automatycznie w odpowiednich miejscach wiersze znakiem końca linii, jednak uniemożliwiło by to justowanie tekstu. Tak więc jeżeli przewidujemy w naszej flashowej aplikacji problem wiszących spójników, od razu nastawiajmy się na korzystanie z fontów systemowych.

Aby uniknąć konieczności zapamiętywania czy też szukania powyższego wyrażenia regularnego, napisałem prostą klasę w AS3. Klasa przenosi do nowej linii litery a, i, o, u, w, z. Oto przykład uzycia.

import com.woszkowski.tools.StringTool;
poletekstowe.htmlText = StringTool.suppressSingleLetters(str);

Pliki do pobrania:
StringTool – klasa do usuwania wiszących spójników oraz przykład uzycia

Linki:
skaldy.com – pomoc w rozwiązaniu problemu
sierotki wordpress plugin – plugin do wordpressa autorstwa Artura Kępy

Stereoskopia
A konkretnie anaglify, czyli wyświetlanie specjalnie przygotowanych obrazów i oglądanie ich za pomocą okularów, dających wrażenie przestrzeni trójwymiarowej. Efekt ten możemy bardzo łatwo uzyskać za pomocą Papervision3D lub innego engine’u 3D. Renderujemy obraz z dwóch przesuniętych względem siebie w poziomie kamer, kopiujemy kanał czerwony jednej z nich, kanały zielony i niebieski drugiej i powstałe obrazy nakładamy na siebie. Istnieją trzy rodzaje okularów: czerwono-niebieskie, czerwono-cyjankowe i czerwono-zielone. Nie wiem jeszcze które nadają się najlepiej do oglądania tworzonych w ten sposób obrazów, ale już zostały zamówione, więc wkrótce własne przykłady i wyniki eksperymentów.

Tymczasem przykłady innych:
http://mrdoob.com/#/56/
http://mrdoob.com/#/57/
http://lab.benstucki.net/archives/AnaglyphTest/anaglyphtest.swf

YouTube Flash API / filmy w wysokiej jakości
YouTube stworzył API dla Flasha oraz Javascriptu , pozwalające na zamieszczanie na swoich stronach filmów bez standardowego playera. Nawigację możemy teraz tworzyć we własnym zakresie. Najważniejsze, że “chromeless player” pobierany jest spod adresu gdata.youtube.com, gdzie znajduje się plik crossdomain.xml, zawierający upragniony wiersz <allow-access-from domain=”*”/>. Oto przykład, że to wszystko na prawdę działa:
http://woszkowski.com/ytapi/

Inną nowością od YouTube są filmy w lepszej jakości. W ustawieniach konta pod pozycją Jakość odtwarzania filmów wideo (http://pl.youtube.com/video_quality_settings) możemy włączyć opcję “Mam szybkie połączenie. Zawsze odtwarzaj film wideo z wyższą jakością, jeżeli jest dostępna.“. Od tego momentu filmy będą odtwarzane z większym biterate’em oraz z większą częstotliwością próbkowania dźwięku. Jednak nadal będzie to kodowanie Flash Video. YouTube oferuje również nieoficjalnie filmy w standardzie H.264. Do ich oglądanie potrzebujemy Flash Playera w wersji 9.0.115. Aby oglądać filmy w tym standardzie, wystarczy na końcu adresu dodać “&fmt=18″. Oto przykłady tego samego filmu w różnych jakościach:
Jakość standardowa: http://www.youtube.com/watch?v=RZYIfUdIyfs (pod warunkiem, że w ustawieniach YT nie ustawiliśmy domyślnie wysokiej jakości)
Jakość wysoka: http://www.youtube.com/watch?v=RZYIfUdIyfs&fmt=6
Kodek H.264: http://www.youtube.com/watch?v=RZYIfUdIyfs&fmt=18

Yahoo Maps Flash API
Tym razem komponent dla Flex Buildera. Yahoo wypuściło komponent oraz API do swoich map. Umożliwia on bardzo łatwe kontrolowanie mapy z poziomu AS3. Warto zwrócić uwagę na to, że Yahoo Maps są już bardzo dokładne dla naszego regionu i nic nie stoi na przeszkodzie, żeby częściej z nich korzystać.

Umap
We wcześniejszym biuletynie opisywałem komponent G Map, umożliwiający obsługę Google Maps z poziomu Flasha. Tym razem AFC zaprezentowało komponent UMap, umożliwiający kontrolę z opziomy AS3 map OpenStreetMap oraz Microsoft Virtual Earth. O ile OpenStreetMap jest bardzo niedokładny na obszarze Polski, to Microsoft Virtual Earth charakteryzuje się taką dokładnością , że komponent UMap staje się godny polecenia.

AIR 1.0 i Flex Builder 3
Adobe wypuściło oficjalne wersje Adobe Integrated Runtime oraz Flex Buildera 3. Jeżeli chodzi o AIR, to mimo, że słyszymy o nim już od dłuższego czasu, jest to dopiero pierwsza oficjalna wersja. Flex również jest dosyć młodym narzędziem, jednak w tym przypadku doczekaliśmy się już wersji nr 3. Zmiany w porównaniu z dwójką nie są duże.

Zdecydowanymi liderami okazały się algorytmy:
- Power: f(x) = (x+(1-x)*0.03)^2
- Fast power: f(x) = (x+(1-x)/2)^8

Tak więc aby jak najbardziej zniwelować negatywne odczucia użytkownika wywołane oczekiwaniem na załadowanie gry, strony, prezentacji, zainstalowanie oprogramowania, etc., powinniśmy stosować tego typu nieliniowe algorytmy postępu.

Wizualizacja wszystkich algorytmów jednocześnie.

Kod źródlowy: src-single.zip [355kB]
Źródło: Rethinking the Progress Bar

Tak więc zacznijmy od tego, co wartego uwagi wydarzyło się na przełomie grudnia 2007 i stycznia 2008 roku.

WOW – engine 3D podstawowych zasad fizyki

Kilka miesięcy temu światło dzienne ujrzał Box2dFlash – engine dla AS3, umożliwiający symulację podstawowych zasad fizyki (grawitacja + oddziaływanie między przedmiotami). Tym razem przyszła pora na przestrzeń 3D – engine WOW. Duże wrażenie robią przykłady użycia: kule zamknięte w obracającym się sześcianie, spadające na ziemię obrazki czy też obrazek oblewające kule niczym kawałek płótna. Osobiście jestem ciekaw, czy biblioteka jest bardziej zjadliwa, niż Box2dFlash.

Video w rozdzielczości HD w najnowszej wersji Flash Playera (9.0.115)

Żeby zdać sobie sprawę o czym piszę, proponuję od razu na samym początku zobaczyć ten przykład (klikając dwa razy w film przechodzimy do trybu fullscreen). Oczywiście trzeba mieć zainstalowanego Adobe Flash Playera w wersji 9.0.115. Niezłe, prawda? W dodatku całkiem płynnie chodzi. Zastanawiacie się jaki ogromny bitrate musi mieć to video? Otóż jest to video w rozdzielczości 1280×720, formacie mp4 500kbps… czyli nieco więcej niż mają filmiki z YouTube!!! Fakt, można się przyczepić, że w momentach gdy sporo się na ekranie dzieje widać ślady sporej kompresji, jednak i tak całościowy efekt jest zdumiewający.

Google maps prostsze niż kiedykolwiek – komponent dla Flash

Dzięki komponentowi G Map, stworzonemu przez firmę Advanced Flash Components, możemy w banalny sposób korzystać z funkcjonalności Google maps, przede wszystkim na stronach opartych w 100% na technologii flash. G Map umożliwia stawianie markerów, rysowanie linii i kształtów oraz nakładanie warstw, czyli dodawanie własnej funkcjonalności na mapę. Flash developerów ucieszy na pewno fakt, że wstawienie komponentu i dodanie np. własnego punktu na mapie to zaledwie kilka linijek kodu.

Statystyki penetracji wersji Flash Playera z grudnia 2007

Adobe Flash Player w wersji 9.0.0 lub nowszej jest zainstalowany na ponad 94,3% komputerów w Europie. W Stanach Zjednoczonych ten odsetek jest jeszcze większy i wynosi 96,8%. Co to oznacza? Że praktycznie całkowicie możemy przerzucić się na AS3.

Prognozy liczby urządzeń wspierających Flash Lite na rok 2008

Rynek urządzeń mobilnych rozwija się w ekspresowym tempie. Liczba rodzajów telefonów i urządzeń jest wręcz astronomiczna. Dlatego tworzenie aplikacji i gier na te urządzenia jest wyjątkowo uciążliwe. Nadzieją jest na pewno Flash Lite. Rozpowszechnienie tego rozwiązania było by zbawieniem dla developerów, gdyż aplikacje i gry napisane pod Flash Lite działają na każdym urządzeniu, które tą technologię wspiera, podobnie jak to jest ze stronami flash działającymi na różnych przeglądarkach oraz systemach operacyjnych. Prognozy na ten rok są optymistyczne. W Europie środkowej w 2008 roku będzie niemal 25 mln. urządzeń wspierających Flash Lite, z czego ponad 6 mln. w Polsce. Pewną barierą może być to, że dużo z nich nie ma Flash Lite‘a zainstalowanego fabrycznie jednak mam nadzieję, że będzie to bariera to przeskoczenia a w roku 2009 problem ten zupełnie zniknie.

Wrapper, czyli napisz stronę w HTML i wyświetl ją we Flashu

Ciekawe rozwiązanie, które ma na pewno sporą przyszłość, choć wg mnie w trochę innej postaci. Na razie głównym celem Wrappera jest zachowanie identycznego wyglądu strony htm niezależnie od przeglądarki. Dodatkowo flash udostępnia nam kilka dodatkowych opcji, jak gradienty oraz filtry. Polega to na tym, że stronę piszemy w html (proponuję zobaczyć źródło tej strony), następnie za pomocą javascript, całość podmieniana jest jednym wielkim flashem a treść przekazywana do niego. Nie spodziewał bym się jednak przełomu w dziedzinie webmasterki. Osobiście chciałbym zobaczyć Wrappera, jako komponent lub bibliotekę, umożliwiającą ładny rendering kodu html we wnętrzu strony flash.

Na koniec w zasadzie ciekawostka, gdyż wymaga dość skomplikowanej zabawki…

Idealna technologia do przeprowadzania relacji sportowych

Przepis jest następujący:
- kręcimy film za pomocą dość specyficznej kamery, która mam nadzieję od razu zespala obraz z wielu obiektywów w jedną panoramę,
- nakładamy całość na sferę,
- wrzucamy do Papervision3D,
- oprogramowujemy ruch myszki,
- sami decydujemy w którą stronę się patrzymy!
Ciekawe kiedy obejrzę w tej technologii np. relację z Tour de France.

*Mała adnotacja. Autorem zdjęć oraz producentem tego sprzętu jest firma Immersive Media.

Tradycyjnie przygotowałem z tej okazji kartkę:

Kartki świąteczne są dla mnie poligonem doświadczalnym. Pewnie dlatego rzadko kiedy trafiają w gust odbiorców. Tym razem pod nóż poszła nowa wersja biblioteki Papervision3D oraz biblioteka Box2DFlash. Papervision3D 2.0 oferuje cieniowane materiały. W bombce użyłem cieniowania Phonga. Box2DFlash służy do symulacji grawitacji oraz oddziaływania między sobą przedmiotów. Dzięki niej bombka się buja. Efekt jest całkiem fajny, wymaga jednak chyba dość dobrego procesora.

Zapraszam również do obejrzenia kartki – gry, którą oprogramowałem dla Netizens, czyli firmy w której pracuję. Tutaj również wykorzystałem Box2DFlash.

Dla przypomnienia kartki z poprzednich lat.

Rok 2006 – kartka również w 3D, jednak engine dość prymitywny, w całości albo w części mojego autorstwa (nie pamiętam).

Rok 2005 – posadź swoją choinkę i zostaw na niej życzenia… dla kogoś szczególnego, dla siebie lub dla ogółu.

• minimalizujemy liczbę obiektów, efektów i animacji na ekranie
• usuwamy obiekty z listy wyświetlania zamiast robić je niewidocznymi
• wyrzucamy co się da przed pętlę
• przed wejściem w pętlę przypisujemy obliczane w pętli wartości do zmiennych
  np. zamiast:
  for(var i:int=0 ; i<myArray.length ; i++)
  {
  //some code…
  }
  piszemy:
  var len:int = myArray.length;
  for(var i:int=0 ; i<len ; i++)
  {
  //some code…
  }
• bezwzględnie używamy strong typing
• usuwamy z kodu wszystkie trace lub w opcjach publikacji włączamy omit trace actions
• unikamy porównywania różnych typów danych
• zamiast funkcji getter / setter używamy zmiennych typu public
• w pętlach zamiast i++ używamy i+=1 (tak, dla mnie to też był szok )
• stosujemy pętle for each zamiast for in
• stosujemy “”+k zamiast k.toString()
• tworzymy tablice poprzez k = [1,2,3] zamiast k = new Array(1,2,3)
• stosujemy optymalne algorytmy (to raczej oczywiste)
• staramy się używać typu int zamiast Number (zwłaszcza jako wskaźnika do tablic lub pętli)
• nie piszemy długich funkcji, gdyż flash player ma wtedy problem z alokacją rejestrów
• jeżeli tylko się da, używamy operacji logicznych zamiast arytmetycznych
  np. zamiast:
  var mutiplyResult:int = anAge * 8;
  piszemy:
  var mutiplyResult:int = anAge << 3;

Tutaj znajdziecie prezentację oraz przykłady, których autorem jest Cedric Tabin, prowadzący sesję Optimizing ActionScript 3 performance na Adobe MAX Barcelona. W dużej mierze opierałem się właśnie na nich.

Aby w AS2 wygenerować obrazek w postaci JPG i zapisać go na serwerze lub dysku, musieliśmy najpierw wysłać wszystkie dane (bajt po bajcie) do skryptu php, który to generował plik. Jak łatwo się domyślić, za każdym razem trzeba było przesłać astronomiczną liczbę danych. Np. generując kolorowy obrazek 640×480, trzeba było przesłać ok. 921kB danych. W przypadku AS3 i JPEGEncodera, również musimy przesłać dane najpierw na serwer a następnie z serwera na dysk lokalny. Przesyłamy już jednak skompresowane dane, czyli kilkanaście lub kilkadziesiąt razy mniej.

Do komunikacji Flash <-> PHP zostało wykorzystane AMFphp. Jest to narzędzie RPC (zdalne wywoływanie procedur) dla PHP. AMFphp znacznie ułatwia wymianę danych, zapewnie elementarną autentykację i można go w prosty sposób rozbudowywać.

JPEGEncoder można wykorzystać na wiele sposobów. Pierwsze pomysły jakie się nasuwają, to generowanie avatarów i kartek. Ja wpadłem na inny pomysł, którego wersję beta można znaleźć tutaj:

Już niedługo bardziej rozbudowana wersja. Miłej zabawy.