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.

One of the first projects introducing my subpixel icons.

Click the images below to view
full resolution screenshots.

Joybook editor – editing a text box. Click to zoom.

Joybook editor – editing an image. Click to zoom.

Joybook editor – Cover and Music panel. Click to zoom.

Joybook editor – Main panel. Click to zoom.

Joybook editor – My Media panel. Click to zoom.

Joybook editor – Shared Media panel. Click to zoom.

Joybook editor – Upload panel. Click to zoom.

Project Information screen. Click to zoom.

Project Icon screen. Click to zoom.

Save Project screen. Click to zoom.

Add a Page screen. Click to zoom.

Assets. Click to zoom.

Icons:

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.

In the following mockups you can see how I usually work. Because I know programmers very well, I always create a set of images with a legend on all states (hovers, animations), distances between elements etc. Only this approach makes me believe the mockup will be successfully converted to HTML. But obviously I usually want to be a part of team working on a HTML/CSS template.

Click the images below to view
full resolution screenshots.

Homepage – guest user. Click to zoom.

Detail – video – registered user. Click to zoom.

Detail – photobank – registered user. Click to zoom.

Thumbnail list. Click to zoom.

Advanced search, administration. Click to zoom.

Ordering. Click to zoom.

Registration. Click to zoom.

Text page. Click to zoom.

Homepage – administration. Click to zoom.

Header details – registered user. Click to zoom.

Header details – guest. Click to zoom.

Footer details. Click to zoom.

Of course there’s more mockups, these few are just the most interesting.

Click the images below to view
full resolution screenshots.

Login screen. Click the image to see the full resolution screenshot.

Tree content structure. Click the image to see the full resolution screenshot.

Tree content structure. Click the image to see the full resolution screenshot.

Folder Editor. Click the image to see the full resolution screenshot.

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

Click the images below to view
full resolution screenshots.

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

Icon set. Click the image to see the full resolution.

User list screen. Click the image to see the full resolution.

User detail screen. Click the image to see the full resolution.

Menu. Click the image to see the full resolution.

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

Restriction Profiles. Click the image to see the full resolution.

List of Calls screen. Click the image to see the full resolution.

Phone Detail screen 1. Click the image to see the full resolution.

Phone Detail screen 2. Click the image to see the full resolution.

Function Keys screen. Click the image to see the full resolution.

User Detail screen. Click the image to see the full resolution.

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

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

Click the images below to view
full resolution screenshots.

Homepage. Click the image to see the full resolution.

Subpage, infographics. Click the image to see the full resolution.

Subpage, infographics. Click the image to see the full resolution.

Subpage, infographics. Click the image to see the full resolution.

Click the image below to view
full resolution screenshot.

Click the image to see the full resolution.