The Involver Media Player is coded in pure ActionScript 3 (to save space and hence bandwidth), with a help by PureMVC, BulkLoader, TweenMax libraries and a lot of my own open source classes.

Today you can meet this player on Facebook and other social networks. I worked on this player for several months and I think the request was successfully fulfilled. As you can see below, the feature set is pretty comprehensive.

Features:

• Skinning with custom loaded skins saved as SWFs, easily compiled in Adobe Flash (no Flex and AS3 coding needed, so it’s very easy to prepare new skins),
• Color theming of all skin elements (via config XML),
• Configuration from config XML, overriding any settings via FlashVars and remoting,
• Plugins (external in remote SWFs, internal bundled with player),
• Advanced system and network error recovery,
• Logging locally via LocalConnection, trace() and remotely to logging remoting endpoint,
• JavaScript events to invoke on a certain event (play, pause, stop, checkpoint spotted, plugin widget clicked, etc.),
• Player can be fully controlled from JavaScript,
• Full playback support (play, pause, skip, seek, load progress, playback progress, volume, mute),
• Full playlist support (sequential playback, random playback, intro playback),
• Fullscreen support,
• Titles, logos and other graphics on screen while playing, with animation and precise positioning,
• Mouse wheel support to control volume and/or seeking,
• Set checkpoints in video and playlist to call a function or plugin,
• Plugins can add custom buttons to the toolbar, footer and “More” screen,
• Advanced animation when resizing player window,
• Plugin tickers during video playback,
• Preroll / postroll plugins and actions,
• Popup blocker handler and ticker,
• Galleries of images and videos,
• Carousel to navigate images and videos,
• Facebook application plugin,
• Discussion plugin (with a playback ticker),
• Link plugin (with a list of links and playback ticker),
• Playlist navigator plugin,
• Image viewer plugin,
• Slideshow plugin,
• RSS reader plugin,
• Share this video plugin,
• Signup plugin,
• Stream listing plugin.

Examples:

• Basic player with two plugins
• Larger player with two plugins
• Scaling full window player (opens a new window)
• Player with mouse click handler to show a page
• More plugins
• Notification bar handled by the Link plugin
• Notification bar handled by the Quiz plugin
• Notification bar handled by the RSS plugin
• A lot of plugins, try resizing browser window after clicking “More” button (opens a new window)
• Color theming from configuration XML
• Muppets skin by Alex Schleifer
• Theming Muppets skin by Alex Schleifer
• Sunkist skin by Sunkist Soda

We thought isometric view would be awesome for a game of this type. My part of this job was to bring to life the whole client side, except drawings (done by Vladimír ‘Frognfly’ Chalupa) – that means all user interface graphics, icons, animations, Flash, Papervision3D and interactivity is my work.

I really enjoyed this job as I was able to do what I love, from scratch to finish. While designing skinning core, I developed a new skinning library I will open for public use soon. Watch my space on GitHub.

Click the images below to view
full resolution screenshots.

Initial game screen. Click the image to see the full resolution screenshot.

Basic screen elements. Click the image to see the full resolution screenshot.

First game mockups. Click the image to see the full resolution screenshot.

Overall map with an already bought house and current avatar position. Click the image to see the full resolution screenshot.

Original overall map. Click the image to see the full resolution screenshot.

Original character designer screen, page 1. Click the image to see the full resolution screenshot.

Original character designer screen, page 2. Click the image to see the full resolution screenshot.

Defect window. Click the image to see the full resolution screenshot.

Jackpot window. Click the image to see the full resolution screenshot.

Casino window. Click the image to see the full resolution screenshot.

Help a Friend window. Click the image to see the full resolution screenshot.

Job window. Click the image to see the full resolution screenshot.

New Message window. Click the image to see the full resolution screenshot.

Taxi window. Click the image to see the full resolution screenshot.

Jail window. Click the image to see the full resolution screenshot.

Webcafe window. Click the image to see the full resolution screenshot.

Animated preloader preview

Click to see the preloader preview.

Unfortunately the project is not alive anymore. However all these subprojects were pretty complex and made me much better programmer.

Click the images below to view
full resolution screenshots.

Click the image to see the full resolution.

I designed user interface and interaction, programmed client-side Flash and server-side Drupal administration system. On the end everything you can see here is my work, except the content of course.

Click the images below to view
full resolution screenshots.

Click the image to see the full resolution.

Click the image to see the full resolution.

Click the image to see the full resolution.

Click the image to see the full resolution.

The visual quality and animation experience scales nicely with hardware being used. So when your computer is not powerful enough, you won’t see so many animations. But well, the site is rather old now, so I suppose you got it with all bells and whistles.

Site is bilingual, so choose your language in the footer.

Click the images below to view
full resolution screenshots.

Initial screen. Click the image to see the full resolution.

Menu overlay. Click the image to see the full resolution.

About Us section. Click the image to see the full resolution.

Video player. Click the image to see the full resolution.

Audio player. Click the image to see the full resolution.

Image viewer. Click the image to see the full resolution.

Když jsem svůj krátkozraký příslib psal, právě končila zima a já si říkal, že se k článku a hlavně focení dostanu, sotvaže trošku vyleze sluníčko – zkrátka aby krabice vypadala co nejvíc sexy. Jenže jsem si nabral ukrutné množství práce, na krabici se mezitím snášel prach, já se uklidňoval, že ještě pořádně sluníčko nesvítí a že tedy není kam spěchat. Ale časem mi začínalo být jasné, že se k tomu asi nedohrabu. Teď už sluníčko nesvítí vůbec, začíná podzim a já se musím přiznat, že jsem hrozně líný něco o té krabici napsat. Kdybych měl víc času (a hlavně kdybych byl někdo jiný, někdo, kdo rád píše a najde si na to volnou chvíli), tak bych vám nadatloval stohy textu o tom, jak velká a potřebná změna ten přechod z PC byl. Ale jelikož já jsem já a já jsem líný až se hory zelenají, bude z toho prd.

No ale něco bych přeci jen měl: sem tam, když se objeví volná hodinka, bych vás rád seznámil se zajímavými programy, které ke své práci potřebuji a bez kterých bych se už asi neobešel. A kdybych byl já opravdu já, přesně v tomto okamžiku bych tento zápis ukončil, poklepal bych si na rameno, že jsem zase něco napsal a slíbil bych vám i sobě, že to co nejdřív dopíšu. Ale protože chci projednou překročit svůj stín, rovnou se vrhnu po nohou do prvního programu. A tím je… (ta da dá)

Charles Web Debugging Proxy

Cože? Charles? To je mi ale podivné jméno pro program, říkáte si asi. A to jste ještě neviděli jeho ikonku – vlastně tedy už viděli tady nalevo. Inu věřte, že Charles je jedním z nejdotaženějších programů, s jakými jsem měl tu čest kdy pracovat. A navíc není ani drahý – a lze jej docela dobře používat i jako trialware. A ta podivná ikonka s džbánkem z Karlových Varů je už jen navýsost vyladěná třešnička na dortu. Když začnete Charles používat (popravdě řekl bych, že vám bude téměř neustále běžet v minimalizované podobě), začnete se na ten květovaný džbánek těšit. Tedy rozhodně je to jedna z nejvíc nejoriginálnějších ikon, jaké jsem kdy viděl.

Ale zpět k funkcionalitě. Pokud děláte weby (a to asi děláte, protože jinak byste tento článek asi nečetli) – a pokud jsou ty weby navíc flashové, pravděpodobně jste se již dostali do situace, kdy jste potřebovali mít přehled o toku dat z a do vašeho prohlížeče. Zkrátka co, kdy a jak rychle se stahuje do počítače nebo cpe zpátky na internet. Prostě jak probíhá komunikace klient – server. Anebo jste jednoduše potřebovali nasimulovat pomalý modem, abyste mohli precizně vyladit ten děsně povedený flashový preloader, který jste právě připravili pro projekt, na kterém pracujete.

Na to všechno se Charles výborně hodí. Než jsem na něj narazil (ještě když jsem se řadil mezi uživatele platformy PC), sháněl jsem nějaký jednoduchý packet sniffer. nečekal jsem, že by někdo naprogramoval něco až tak dokonalého, co by mi dokázalo splnit všechny tužby (a dovolilo mi psát takové preloadery, jaké teď píšu, hehe). Původně by mi naprosto stačilo, kdyby sniffer ukazoval, jaké soubory se odkud tahají a jestli zrovna aplikace neposílá něco ven. Však to asi znáte, ve Flashi se moc chybových hlášek nedočkáte, všechny testy chyb si musíte naprogramovat sami.

Našel jsem Charlese. On to všechno umí. A mnohem, mnohem víc! Sedí jako proxy server mezi aplikací a internetem. Aplikace je zpravidla prohlížeč, flashový plugin (který vlastně využívá síťové funkce prohlížeče) nebo jakýkoliv program, takže např. i multiplayer hra, klientská aplikace pro přehrávání internetového rádia nebo třeba nějaká věc napsaná v Adobe AIR.

Charles je schopen tuto komunikaci dekódovat. Proti packet snifferu se liší tím, že nedekóduje vše, co chodí z a na síťovou kartu (tzn. všechny protokoly), ale pouze protokoly HTTP a HTTPS (případně tyto protokoly visící na jiném portu, než na jaký jsou stavěné – 80, resp. 443). Charles tuto komunikaci zachytává a loguje, analyzuje a filtruje její obsah a počítá podrobné statistiky. Ve výsledcích můžete vyhledávat, můžete je filtrovat a třídit.

To všechno samozřejmě umí i jiné sniffery, Charles se ale liší jedním (obzvláště pro flashaře) důležitým detailem: umí dekódovat AJAX, XMLHTTP, SOAP a AMF komunikaci. SOAP používá Microsoft ve svých WebServices, AMF0 a AMF3 je “remotingový standard původně od Adobe. Charles také analyzuje HTML, JS a CSS soubory, dokáže zobrazit obrázky, které jsou stahovány, ukáže vám metadata SWF a FLV souborů. Umí i několik video formátů.

Výše zmíněné SOAP a AMF záznamy dokáže procházet a dokonce editovat. Můžete tak jednotlivé příkazy zopakovat, aby na ně některá strana znovu zareagovala. Tak můžete ladit některé těžce dosažitelné kritické situace. Příkazy můžete ukládat na disk a opět načíst.

Velmi jsem si oblíbil funkci mapování lokálních serverů na servery virtuální. Pokud máte někde na lokálu web http://localhost/mujweb, jednoduše si ho můžete přesměrovat na http://mujweb.cz. Dokud Charles běží, všechny vaše dotazy na mujweb.cz jsou přesměrovány na web server běžící na vašem počítači. Deployment je pak o poznání jednodušší, protože si např. můžete napevno nastavit adresy pro flashový remoting uvnitř vaší flashové aplikace (nebo lépe v jejích konfiguračních souborech).

Jak jsem již řekl, Charles umí zpomalovat komunikaci, dokáže tak simulovat pomalé modemy. Může být použit jako proxy pro celou vaší síť (užitečné je to např. pokud potřebujete ladit na více počítačích najednou – já tak například ladil Q-city. Velmi jednoduše lze nastavit blacklisty na některé adresy – a to i pomocí masek. Výborná funkce je vynucení vypnutí cachování všech souborů v prohlížeči. Tak lze obejít známý problém Flashe, kdy se SWF soubory zpravidla cachují vždy a cache je pak nutno vymazávat ručně (nebo jí v prohlížeči vypnout).

A to nejlepší nakonec: jak jsem již psal, je velice dobře použitelný i v neregistrované verzi (musíte občas odkliknout otravné okénko) a je k dispozici pro Mac OS X, Windows i Linux.