Prezident Barack Obama a Flash

November 5th, 2008

Ano, zní to poněkud zvláštně, ale ti z vás, kteří sledovali včerejší duel o tom kdo se stane nejmocnějším mužem světa nemohli přehlédnout, že se zpravodajské servery docela ‘vyřádili’ ve flashových aplikacích na zobrazovaní průběhu voleb.

To, že je taková RIA aplikace ideální pro volební statististiky dokazuje jeho využití ve světe. CNN oznámilo, že volby na jejich webu sledovalo 27 milionů lidí = 27 milionů používajících Flash aplikaci v jeden den.

Můj kolega Serge Jespers z Adobe napsal: “I’m sure you’ll agree that this election has been historical in many ways. It’s also been an election that really used multimedia and the internet to the max with Obama being clearly in the lead. The internet gave the candidates a whole new “channel” to work with. Posting live updates on Facebook and Twitter and posting commercials on YouTube. Never before could a presidential candidate reach so many people.”

Menší přehled RIA Flash volebních aplikací:

CNN

Idnes.cz

Aktuálně.cz

To že se pro Flash rozhodli v podstatě všechny vyznamné zpravodajské servery dokazuje, že je Flash technologie stabilní a robusní i pro tak masivní globální aplikace.

Já osobně doufám, že se v brzké budoucnosti bude na internetu pohybovat víc obdobných aplikací a že se nebudou týkat pouze jednorázových akcí jako jsou volby, ale i bežných životních záležitostí jako např. statistik spotřeby domácnosti - voda, elektřína, internet, telefon …

O tom jak udělat krásné animované grafy ve Flexu si povíme příště.

Posted in Uncategorized | 1 Comment »

Pixel Bender - 1. úvod

November 2nd, 2008

V následující sérii dílů se vám pokusím odkrýt taje rozšiřování grafických možností Photoshopu CS4, AfterEffects CS4 a Flash Playeru 10. Jedná se o tzv. “Ohýbač pixelů”.

Pixel Bender je jazyk pro vytváření HW nezávislých grafických filtrů. Pixel Bender Toolkit je jednoduché vývojové prostředí pro psaní kernelových skriptů, které se v ideálním případě provedou pomocí GPU.

Ukázka: Deformer filter

Předem bych chtěl říct, že jsem zastánce kreativity a některé moje články nemusí být obaleny dostatečnou omáčkou a polopatickým postupem, za to přesně ukazují postup, který bych byl rád kdybyste si opravdu vyzkoušeli naprogramovat a následně vám věci do sebe krásně zapadnou. Proto opravdu doporučuju, zvlášť při psaní filtrů, kde si nejste jistí, kód opsat a patričně otestovat a vždy si trošku pohrát a zinovovat. 

1. Pixel Bender je součástí všech kolekcí CS4, stáhnout si jej však můžete již nyní zde (verze: Windows, Mac), nainstalujte jej a spusťte:

2. Načtěte obrázek (File -> Load Image 1) a dejte Create New Filter

kernel NewFilter
<   namespace : "Your Namespace";
    vendor : "Your Vendor";
    version : 1;
    description : "your description";
>
{
    input image4 src;
    output pixel4 dst;
 
    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());
    }
}

Kernel (jádro) začíná metadaty, následuje tělo obsahující vstup+výstup a evaluatePixel, což je funkce, která se provadí v každém framu a která zpravidla pracuje se vstupem a výstupem. V tuto chvíli nám stačí znát pouze tuto funkci.

3. Jednoduchý příklad prohození barev

kernel BarevnyFiltr
<  namespace : "Tomuv Playground";
    vendor : "Tom Krcha";
    version : 1;
    description : "Muj filtr";
>
{
    input image4 src;
    output pixel4 dst;
 
    void
    evaluatePixel()
    {
        float2 aktualni_pozice = outCoord();
        float4 aktualni_pixel = sampleNearest(src, aktualni_pozice); 
 
        // cervena bude mit hodnoty modre
        aktualni_pixel.r = aktualni_pixel.b;
        dst = aktualni_pixel;
    }
}

Můžete přistupovat k následujícím parametrům:
aktualni_pixel.r|g|b|a|y|x|y|z|w|s|t|p|q

i kombinovaně (tzv. swizzling):

aktualni_pixel.rgb = aktualni_pixel.bgr;

4. Parametry
S parametry přichází opravdové hraní. Rozšíříme náš příklad o sílu zelené barvy:

kernel BarevnyFiltr
< ... >
{
    ...
 
    parameter float power
    <
        minValue:1.0;
        maxValue:5.0;
        defaultValue:1.0;
    >;
 
    void
    evaluatePixel()
    {
        float2 aktualni_pozice = outCoord();
        float4 aktualni_pixel = sampleNearest(src, aktualni_pozice); 
 
        aktualni_pixel.g *= power;
        dst = aktualni_pixel;
    }
}

Po spuštění nám Toolkit vytvoří slider, který je propojený s parametrem.

5. Kompatibilita Pixel Benderu s grafickými kartami (k datu vydání článku)

6. Pixel Bender ve Flash Playeru 10

Pomocí Pixel Bender Toolkitu si můžeme vyexportovat binární soubor *.pbj a použít tak filtr přímo ve Flashi. Flash Player však neobsahuje tentýž PB runtime jako Photoshop či After Effects, ale je optimalizovaný pro grafickou kompatibilitu se zbytkem FP, což ho částečně zbavuje některých možností a hlavně vykreslování pomocí GPU. PB filtry se v FP10 vykreslují pomocí CPU nikoliv GPU, což ovšem neznamená, že by to bylo nepoužitelné - naopak - používání PB ve Flashi je až neuvěřitelně rychlé a osobně ho doporučuji před předchozí technikou - aplikací trasformačních matic na BitmapData apod.

Jak naimportovat filtry Pixel Benderu do Flashe si ukážeme přístě. Stejně tak využití ve Photoshopu a AfterEffects až budou ke stažení trial verze.

Pokud vás Pixel Bender zaujal, doporučuju jako inspiraci Pixel Bender Exchange.

Tags: filter, flash player 10, pixel bender
Posted in pixel bender | 9 Comments »