Use arrow keys to go to the bar, drink beer and run to the toilet before time is out. How many beers could you stand? This is the first game by the Falanxia team I currently work with.

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

Screenshot 6

Screenshot 7

Screenshot 8

Screenshot 9

Screenshot 10

As you may know from this blog, I recently wrote a few paragraphs about progress of the project. And there is even MumboJumboT’s Twitter stream with more detailed tweets. But — believe me, it’s hard to tell — now I am not very happy with the results and I have to confess I failed on several places.

First, as usual, I was way too optimistic. I thought I’d be able to code more and harder, but it was not really possible for several reasons. Just a few hours before I started the project I had finished another long term job and hence I was somewhat tired. Our kids were sick two days as well and on the end I was lazy too :) As you may know I planned to create a blabbing machine. And… Failed. Sorry about that, next time I’ll think twice before I start a project like this one.

But! I think even with my failures I’ve got something for you. The MumboJumboT project lite. Very lite. If you’re interested, I’d be glad to show you my humble Adobe AIR application, which you can install by clicking the badge here.

So what is it all about?

This is just an eye candy and mainly a tutorial AIR app. You can click links below to read more on how the project was done and meanwhile you can play with it.

MumboJumboT allows you to:

• Load a sample song (thanks to Jakub Steiner aka Jimmac for The Sphere song from his Organic album, the other song done by me),

• Load your very own Ogg Vorbis file (info on Xiph.org as well),

• Play an Ogg file — actually it was not possible before, because Flash knows just MP3s. If you don’t want to get into dirty details on the Wiki page, you just need to know Ogg provides much higher quality on lower bitrates. The playback is done by Branden Hall‘s Ogg Vorbis Alchemy port, heavily altered by me for purposes of this app,

• Somewhat visualize the playback.

That’s pretty much for now, so let’s continue on the code stuff.

MumboJumboT code

You can read everything about the project’s code on the documentation page of the MumboJumboT project. Please don’t forget to visit its GitHub repository.

What you will learn:

PureMVC and Startup Manager

PureMVC is a cool Model-View-Controller framework aimed to help you to create cleaner code in several languages. And its Startup Manager is a good way how to put initialization of your application in a queue, while following each Proxy requirements.

• Application facade (Documentation and code)
• Application mediator (Documentation and code)
• Loading and queue of proxies (Documentation and code)

Config files

Here you can see my Proxy helping to easily parse config XML settings. The online flavour allows you to merge parsed settings with FlashVars. You can localize the app from the config XML as well, you know, it’s not a good thing to have any static text in the SWF (it obviously doesn’t apply to the logging output).

• Config proxy (Documentation and code)

AIR Updates

Adobe AIR platform allows applications to self-update when there’s a new version available. See the code below to see how to do that:

• Checking for updates (Documentation and code)

Away3D

Away3D is a well known 3D library. And its new Lite flavour finally provides hardware acceleration via Flash 10 postcards in space acceleration features.

• Spinbox (Documentation and code)
• Spinbox Mediator (Documentation and code)

OGG Decoding

As I wrote above, thanks to Branden Hall I was able to use Ogg Vorbis files in the app, even it was not possible before.

• Ogg Vorbis Decoder (code)
• Sample Proxy (Documentation and code)

Advanced mouse controls

You can see there’s a somewhat sick mouse handler allowing you to drag-and-rotate so called Spinbox.

• Mouse Proxy (Documentation and code)

Skinning

Here you can see how to skin the app with my vancura-as3-libs library. Download the skin folder here.

• About Panel (code)
• Load Panel (code)
• Play Panel (coe)

Mocking up

Just to revisit what was written in previous articles, here’s an archive of PSD files you can download. Just in case you’d be interested on how the GUI part was done.

You can watch a screencast of the mocking up on Vimeo.

Legal stuff

Licensed under Attribution-Share Alike (CC) license. OGG Alchemy Decoder by Branden Hall and Xiph.org Foundation. More info RaveIN font by Jakub Steiner aka Jimmac.

Unfortunately on the first day I was not really working as hard as I would need. Mainly because I finished a large project yesterday morning and I was not so fresh. I need to concentrate more during next few days, so I won’t be a promising looser.

But there were few things I’ve successfully done. First, I made a Twitter account. Pretty sweet, huh :]

Then there was the logotype. The application is based on a concept of a robot blabbing nonsense. Because I’ll use Away3D library, everything will be somewhat raw – boxes and angles everywhere. That should be OK for a robot, except Eva from Wall-E nearly all robots are made of boxes.

Logo

I was not entirely happy with boxy look, so I needed to make it softer somehow. Hence I added the key to the right side. My robot, MumboJumboT, will have a similar key, hopefully rotating while playing.

Twitter

Then I needed to come up with a Twitter background and of course an avatar. Here’s a screenshot of current state of MumboJumboT’s Twitter home:

Click the image to see the full resolution.

As promised, here you can have PSDs I created.

Source code

Yesterday I was also happy to prepare a functional AIR source base I can use now. It’s deployed to the GitHub repo I’ve prepared for the project.

So now it’s the second day and I need to continue. Today I want to prepare all graphics assets I will need. Watch the MumboJumboT’s Twitter stream at @mumbojumbot for more information about the progress.

Update

MumboJumboT project is done. Read more here.

I love this kind of projects: you got a limited time – 7 days should be enough to prepare a small application. Game, audio or video stuff, you name it. When you work alone, you could manage your time more precisely, there’s no one who tells you what to do and what you should avoid. It’s solely your work and you can do whatever you want to – but it has to be done before the deadline, which can’t be moved in any circumstances.

This time I’ll prepare a small audio application. No business plan, no desires to sell it. No visible sight of making money of it. Just simple fun. This app was on paper for too long and this contest made me start it.

The app will mix samples in a never-ending stream of blabs. Everything will be mixed randomly from predefined settings, adjustable by you. And most importantly you’ll be able to make your very own generator by recording audio from your computer’s Line In or Microphone input.

I want to show you some of technologies I developed during last few years. GUI widgets with loadable skins, audio processing (I made few multitrack sequencers and mixers), a slice of 3D rendering. All Model-View-Controller via PureMVC.

I want to use these technologies if you’re interested to know:

• Air 2.0 beta
• Ogg Vorbis / Alchemy
• PureMVC
• Away3D Lite
• PopForge
• BulkLoader
• DestroyToday’s Scale9Bitmap (slightly changed by me)
• Greensock TweenMax
• and a small help of my libraries.

If you want to take a few lessons from ActionScript and these areas, this project is a lovely place to start. I did not tell you? Everything I am going to produce here will be licensed as Creative Commons, open for everybody. And that doesn’t apply only to source codes, I am talking about assets, source PSDs, illustrations, samples etc.

So if you’re interested in what I am going to come up with in next 6.5 days, enjoy me on the voyage. It will be a rather fast, but very fun trip. Watch this place and Twitter stream at @mumbojumbot.

Update

MumboJumboT project is done. Read more here.

What does it do? Read the docs here: here and point your browser to the git repo.

Features

Currently these features are covered:

Core functions

• MorphSprite class
• QBitmap class
• QSprite class
• QTextField class
• QVideo class
• Stats class
• FPS class
• GlobalStage class
• ModalWindow class
• Drawing()
• Bitmapping()
• addChildren()
• removeChildren()
• duplicateMovieClip()
• addEventListeners()
• removeEventListeners()
• assign()
• clone()

Easy Far wrapper:

• Far
• FarHelperItem

More features coming soon: skinnable widgets, remoting and more. Watch this space for more information.

How to get the SWC

There are several ways to get the library for use in your project.

Binary distribution

In case you’re lazy or you don’t have all required components to compile it on your machine, you can grab the SWC here.

Compilation from source

You can compile the SWC very easily. In simple words you just need to launch ./compile.sh file. I wrote it on OSX, but it should work fine on a Linux machine as well. The only issue, actually, is the Windows machine. Since I don’t have access to any Windows installation around here, you have to figure out how to compile it. Just take a look at the compile.sh file and you’ll see what’s going on there.

The library uses several 3rd party components: * Greensock Tweening Platform (known as TweenNano, TweenLite and TweenMax) * Printf-AS3, an article here. * Vanrijkom Flashlibs * Uni fonts by miniml.com

All these files are downloaded from internet and not included in the source package. Hence you’ll get the most up-to-date SWC if you compile.

Of course you need Adobe Flex SDK. In my compile.sh script I use FlexSDK4 beta, which is not out yet, but works pretty well for me.

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.

Prosím čtěte před spuštěním kostky: Právě jsme s Kaplickem zjistili, že vám kostka pravděpodobně shodí browser, pokud nemáte nejnovější Flash Player. Aktuální build je 9.0.98.0, verzi vašeho pluginu zjistíte zde a aktuální betu Flash Playeru stáhnete zde.

Click the image to launch Flash.

Nemůžu se nepodělit o své nadšení, popravdě nečekal jsem, že to s ní půjde tak hladce. Již minule jsem dal k dispozici zdroják na animující se koberec, ale vzhledem k tomu, že jsem nepřibalil samotný Papervision, tak to asi nikdo z vás nezkompiloval (pokud si nestáhnul PV3D z SVN nebo jiného zdroje).

V dnešním balíčku naleznete i kompletní aktuální knihovnu a okomentovaný zdroják. Jediné co potřebujete, je Adobe Flash CS3 (a unzip).

Pokud máte nějaké dotazy, formulář níže je vám k dispozici.

Programátory asi totiž moc nezajímá, jak se obrázky a zvuky z Flexu exportují. Není totiž žádná možnost jak nastavit kvalitu a kompresi přidávaného obrázku či zvuku, používají se základní hodnoty – které navíc ani nejsou nikde popsané, řekl bych, že se obrázky komprimují na 70 % JPEG.

Flex je naštěstí docela soudný a tak dokáže rozpoznat, kdy je vhodné obrázek komprimovat bezztrátově PNGem a kdy ho prohnat JPEG kompresí. Kdekdo by ale asi docela ocenil, kdyby to bylo možné někde vyladit. Není. U obrázků se to dá přežít, u zvuků je to ale horší. MP3jku, do které se váš zvuk zkomprimuje, nijak neovlivníte. To mi přijde jako opravdu největší amatérismus.

Co s tím?

Naštěstí je zde metoda, jak toto vše nastavit – potřebujete na to Flash. Zkrátka si připravíte SWF se všemi potřebnými třídami s obrázky a zvuky a použijete interní komprimaci Flashe, která se – bohudík – dá nastavit odjakživa.

Ale je tu problém: průhledné obrázky. Ve Flashi jsme si všichni zvykli používat průhledné obrázky komprimované JPEGem, aniž bychom přemýšleli, jak to vlastně s tou kompersí je. Popravdě – to je jasná věc – průhledný JPEG neexistuje. Jak to tedy Macromedia vyšpekulovala?

Pokud do Flashe nacpete průhledný PNG a necháte ho při exportu komprimovat jako JPEG, Flash ho rozloží na dva obrázky: barevný 24bitový a 8bitovou alphu ve škále šedi. Oba zkomprimuje jako JPEG a Flash Player to pak při přehrávání zkombinuje a pustí na obrazovku.

Jenže tohle přesně neumí Flex. Při embedování nepochopí, co to ty dva obrázky vedle sebe v SWF jsou a hodí chybu, ze které se moc nedozvíte. Dnes mi zabralo půl dne, než jsem na to přišel.

Řešení?

Jsou dvě: nepoužívat JPEG pro kompresi průhledných obrázků (a tedy komprimovat do PNGu, který umí 8bitovou alphu odjakživa) anebo počkat, co s tím Adobe udělá. Napíšu jim bug report.

Včera jsem se pustil do 3D ve Flashi a dost mne to vzalo. Klikejte, zdroják je zde.

Click the image to launch Flash.

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.

Actually I was just one of participants in a competition for a mascot illustration. You know, great prizes: books from FriendsOfEd, some textures and sounds if I my memory works. And well maybe one of Adobe’s applications. But unfortunately Aral Balkan, owner of the site, changed his mind just after competition deadline. Long after the deadline. He canceled it. Since then I blacklisted all competitions just to stay sane, if you ask.