Basics of P2P in Flash

May 31st, 2009

This videotutorial explains the basics of working with P2P (peer to peer) in Flash Player 10.

I made this tutorial with focus on simplicity of this fantastic feature of Flash. There are bunch of articles and examples in the world showing how to create your own P2P app, but most of them are very complex or hard to catch.

In this tutorial you’ll get idea how to connect two different peers and exchange data between them with ActionScript 3.0 and Flex only.

Prerequsites:
- familiarity with ActionScript 3 and Flex Framework
- Flash Player 10 Debug version installed download
- Flex Framework 3.3+ download

Videotutorial: http://flashrealtime.com/tuts/p2p-in-flash.html (20 min.) 
Try: P2P demo (run in two browsers, explained in video)
Source: download P2P.mxml.zip

Note: Programatically the main P2P logic is not to connect peers together just via NetConnection, but by defining peerIDs to NetStream.
PS: don’t forget to change your Flex Compiler settings to use Flash Player 10
Btw: nice P2P Mill Game done by my friend Pavel Šimek http://nestor.cz/mill/ 

Good Luck!

Tags: flash player 10, P2P, RTMFP
Posted in Flash Media, Flash Player, Flex, Video tutorial | 70 Comments »

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.

 

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 | 17 Comments »

“Future of Flash” - FlashGaMM conference, Kiev

October 27th, 2008

On Saturday I was speaking at FlashGaMM conference (25-26th Oct 2008 in Kiev, Ukraine) through Adobe Connect. My session covered Flash Player 10 new features, Flash CS4 new features and finally quick Device Central CS4 walkthrough - which I suppose to be the best tool ever for testing FlashLite applications. 

There were about 100 people watching in a hall on a projector and 21 more remotely via Connect.

Adobe Connect room

From the experience I can say Adobe Connect simplifies my life a lot. I’ve been developing similar app years ago. For those of you who never tried Adobe Connect - you can use it free for 3 person meeting at Acrobat.com (ConnectNow) - also great for studies.

When I first tried Device Central CS4 I have decided to make a simple game for AIR, Browser (Flash Player) and FlashLite … you can expect this in about a month as a tutorial and try as well.

Tags: adobe connect, device central, flash cs4, flash player 10, flashgamm
Posted in Conferences | No Comments »