p2gStereoStage™ Flash Applet

proggies2go


Using the p2gStereoStage™ Applet

p2gStereoStage™ features a variety of user options to make your 3D stereoscopic viewing experience as pleasant as possible. All functions can be controlled with a button bar underneath the image or video display. Depending on the web designer's preference, this button bar may or may not be visible. Clicking anywhere on the display quickly shows or hides the button bar.

Help: CaptionsMediaPlayerDisplayAnaglyphAbout[F] [X]

 

“Captions” Pane

Shows a text caption for the current image or video, usually consisting of a brief explanation or a copyright notice. <TOP>

“Media” Pane

Contains thumbnail images representing the scenes in this presenta­tion. Mousing over the thumbnails and clicking them lets you select other scenes. If you lose your way, click the [?] button to move back to the current scene. <TOP>

“Player” Pane

Allows you to control the presentation at your own pace. [Play], [Pause], and [Stop] work pretty much like you're used to from other media players. [Prev], [Next], and [First] move you to the previous, next, and first scene respectively.

The “Seek” slider shows the progress of the current animation or video clip. Drag the slider thumb with the mouse to pause and move within the current clip. You can also control the volume or mute audio alltogether, if the current presentation has sound.

The player can be controlled with the numeric keypad, too: [5] toggles between “play” and “pause”. [1] stops and rewinds the current media. [4], [6], and [7] move you to the previous, next, and first scene. [F] switches the display to fullscreen mode. Depending on your browser, you probably need to click the applet at least once for the keypad to work. In fullscreen mode the keys will be inactive. This Flash security feature prevents applets from hijacking your screen. The [Esc] key will always cancel fullscreen mode. <TOP>

“Display” Pane

Here you can select the stereoscopic display mode you're most comfortable with. The “Convergence” slider lets you control the stereo depth, e.g. to correct uncomfortable violations of the stereo window after the fact. This slider also controls focus when “time-for-space animation” is selected. Slide it to the left to focus on near objects and to the right to focus on farther away items. The “TFS Fade-In” and “TFS Fade-Out” sliders also let you manipulate “time-for-space animations” for best results.

Check the “Fullscreen” box to escape the limitations of the browser page and enjoy a cinematic 3D stereo experience. Uncheck the box, or press the [Esc] key to return to the web page. Check “Stretch to fill” to utilize every last bit of available screen real estate at the expense of aspect ratio. Go ahead and play with the options; you'll get the hang of them quickly… <TOP>

“Anaglyph” Pane

Switches the display to anaglyph (“funny glasses”) mode and lets you select the most comfortable color settings for your glasses. Please note, the presentation author may have pre-selected the best setting for each scene. If this bothers you, check “Don't override my colors” to stay in control.

Check “Swap left/right colors” if the filters on your glasses are reversed, e.g. cyan/red instead of the standard red/cyan, or if you're more com­fortable wearing your glasses backwards to com­pensate for your eyes' different color dominance.

Although the p2gStereoStage™ applet doesn't support the newer, pat­ented ColorCode 3-D® amber/blue filters, it can render the much older blue/yellow color scheme instead (not patented). Owners of ColorCode 3-D® glasses can get a reasonably good 3D quality by swapping the filter colors. <TOP>

“About” Pane

You'd probably agree that I should be allowed to “see my name in lights” for all the pro-bono work I invested in p2gStereoStage™<TOP>

[F] Button, [X] Button

Clicking [F] quickly switches to fullscreen mode and back. [X] closes the currently open pane and aligns the button bar with the bottom of the applet. <TOP>

p2gStereoStage™ is the world's first “multi-everything” 3D stereoscopic media player for the World Wide Web. Webmasters and bloggers can now easily combine very differ­ent types of audio-visual source media into unified, polished presentations to play any­where and in any size. From a lowly stereo image on some web page all the way to a full-blown cinematic 3D extravaganza with hundreds of scenes: Let p2gStereoStage™ handle your 3D stereo display on the web. Best of all: It's FREE to all non-commercial fans of stereo­scopic imagery.

Take a few minutes to read this page and look at the various presentation samples I prepared for you before rushing to download p2gStereoStage™. In order to get the most out of p2gStereoStage™, you need to know what it can do. This harmless little proggie is a powerful presentation tool indeed – but it also has some limitations you should be aware of before spending time on setting up a presentation that doesn't look right…

Initially, most samples are presented in a small window for red/cyan anaglyph glasses – but you are always in control! The buttons at the bottom of the display let you quickly change settings to whatever you are most comfortable with.

Thanks to Aidan O'Rourke, the photographer and creative allrounder from Stockport, U.K., for his contribution to the making of p2gStereoStage™. Take a look at this cool presentation of Aidan's photo art, or visit him at www.aidan.co.uk for more photographic gems. <TOP>


“Multi-Everything” Features

Multi-Media: The p2gStereoStage™ applet can play still images, animated images, video streams, and audio in a variety of configurations. By design, the visuals are supposed to be 3D stereoscopic in nature, but conventional 2D imagery can, of course, also be shown. Presentation authors can “mix and match” 3D/2D visuals and audio to their heart's content. <TOP>

Multi-Platform: With the player implemented as an Adobe Flash® applet (Flash 10), your 3D stereo presentation can be played on pretty much any modern computer, regardless of operating system. <TOP>

Multi-Source: p2gStereoStage™ opens JPG, JPS, PNG, and GIF images as well as FLV Flash video and MP3 audio files. 3D stereoscopic visuals (i.e. images and videos) can be side-by-side stereo pairs with cross-eyed or parallel arrangements, KMQ-style over/under stereo pairs, or individual files for the left and right eye view. The applet also extracts greyscale views from existing red/cyan anaglyph images.

Still in the experimental stage is a facility to generate pseudo-stereo views from 2D video. Video clips exhibiting a reasonably stable sideways motion, e.g. 2D “Pulfrich” videos, will be excellent candidates for this. Non-stereo visuals can still take advantage of the applet's “smart” multi-sound mixing capabilities (see below). <TOP>

Multi-Format: The applet can show stereo media in a variety of popular 3D stereoscopic formats. The very same stereo source (which is the point, isn't it?) can be processed on-the-fly to 22 different anaglyph flavors: red/cyan, cyan/red, blue/yellow, yellow/blue, green/magenta, magenta/green, full color, half color, optimized half color, Dubois, and greyscale.

Cross-eyed or parallel free­viewing, mirror-assisted freeviewing, KMQ-style over/under displays, and time-for-space animation (“wiggle” stereo) are also part of the display arsenal. Presentation authors can “suggest” preferred viewing modes and stereo window adjustments, while users can override these settings to whatever they're most comfortable with. Play with the applet on this page to try the different options. <TOP>

Multi-Sound: MP3 audio can be arranged on up to 11 “smart” soundtracks. The audio streams are mixed live, i.e. as the presentation plays, to create a dense movie-like sound canvas. “Smart” means, the audio can be configured to deliver a consistent mood accross entire blocks of scenes – whether the show plays in a linear fashion, or the user bounces around different scenes using the “Media” pane. Adding “smart” soundtracks to your presentation can turn a simple photo album – stereoscopic or not – into a full blown cinematic extravaganza. <TOP>

Multi-Size: p2gStereoStage™ can be embedded in a web page as small as 452 x 250 pixels without jumbling up its user interface – or smaller still, if the UI is not to be used. Your audience may leave the confines of the page with just one mouse click and enlarge p2gStereoStage™ to take over the entire screen. Inbetween those extremes, anything is possible. The applet always resizes itself dynamically, thereby maintaining the original aspect ratio of the source visuals. Alternatively, images and video can be stretched to take over the applet's entire display space. <TOP>

Multi-Color: The user interface of p2gStereoStage™ has (so far) 14 built-in color schemes that can be activated with just one setup parameter. In other words, you don't have to spoil your elaborate page design with an “off” color like my <proggies2go>™ orange seen here – you can match the applet's UI to your site. Try the blue, green, and silver color schemes. <TOP>

Multi-Purpose: Webmasters can deploy p2gStereoStage™ in a variety of ways. In its simplest form, the applet can be embedded in a page strictly as a design element, i.e. like a plain image, albeit a 3D stereoscopic one. Have a look at a red/cyan anaglyph or a cross-eyed sample. If the availability of viewer options is no concern, you should look at my p2gStereoPhoto™ applet, which contains the identical 3D stereoscopic rendering subsystem as p2gStereoStage™, but a much less elaborate UI and no audio.

The next step up is, combining a series of pictures to a simple photo album. Change only two parameters in the setup, and your photo album becomes a no-frills slide show. Personally, I prefer the “simple photo album” and the “no-frills slide show” setups to create collections of antique stereo cards. This example of WWII stereo cards is presented with kind permission of Dr. Dieter Vorsteher of the Deutsches Historisches Museum (German Historical Museum) in Berlin.

However, with just a few more tweaks of the setup file to add some subtle animation, and a little music for good measure, our slide show begins to take on a video-like quality, with virtually no effort at all. So far, we have invested about 30 minutes in playing around with a few pictures, including all the typing in the applet's XML setup files. Now it's time to go Hollywood!

Before you look at the demo, you need to understand that the soundtrack was not created ahead of time with an expensive multi-track software. The dense sound canvas you're about to hear is mixed live by p2gStereoStage™ from about two dozen individual 22.05 kHz MP3 files. In addition, the photos are synced to the narration. The applet's 10-track-audio feature alone is so useful, I can see many webmasters deploying p2gStereoStage™ for regular 2D photos, too. By-the-way, the photos in the show were taken with two $1.95 disposable cameras stuck together with double-sided tape. Considering the source materials, this turned out to be a really cool show. <TOP>

Multi-Media Revisited: Everything that has been said about photos in the previous paragraphs applies to FLV Flash video, too. Provided there is enough on-line bandwidth, you can have p2gStereoStage™ play a single video movie, a string of video clips, or a blend of video clips and animated images. Once again, you have 11 “smart” soundtracks (10 x MP3, 1 x FLV) to impress your audience with a full-blown cinematic 3D stereo extravaganza – and you don't need $1,000.00 worth of professional software to pull it off. All it takes is p2gStereoStage™, a plain text editor, and some commonly available freeware proggies to prepare the source files.

However, especially when it comes to video, a few words of caution are in order: With 3D stereoscopy, the requirements for running a smooth presentation pretty much double. Your audience may not have the bandwidth, memory, or processing power to actually enjoy your show! For some of my demos on this page, for example, I have pushed the envelope by incorporating side-by-side video at a resolution of 1200 x 348 pixels, streaming at 1,000 kbps! With my equipment, this still looks decent even in fullscreen mode. You be the judge how it looks on your machine! Perhaps you'd and let me know? <TOP>


Installing p2gStereoStage™ On Your Server

Download and un-rar the p2gStereoStage™ package. Upload the p2gStereoStage folder to your server and browse to the windowed.html or embedded.html file. The sample setup should run right “out of the box”. If you don't have a local test server, download the p2gStereoStage™ stand-alone demo application (MS Windows only). The stand-alone demo already contains my p2gChinchilla™ HTTP presentation server and is configured ready-to-run.

To run p2gStereoStage™ presentations in a separate window, copy the file windowed.html and open the copy in your text editor. The HTML code is marked with instructions in 5 places. Modify the code according to your needs, and your presentation will size itself to any browser window when the copied page is loaded. Please note, it's up to you to provide the JavaScript code to open and style the window. The entire affair should take you no longer than five minutes. To embed p2gStereoStage™ in a page of your own, open the file embedded.html with your text editor. There are 4 sections clearly marked with BEGIN… and END… for you to copy and paste to your own HTML page. Don't forget to modify the code (paths, applet dimensions) after you paste it. Again, I did all the work for you already – a few minutes is all it takes.

A word of advice: Before making presentations with your own media, I suggest you first follow my easy instructions above and get the applet to run off your server, on your own pages, but with my sample presentation. This way – if something doesn't work right – you know the problem must be in your presentation XML, and not somewhere else.

To make presentations with your own media, open the sample.xml file in the media folder with a text editor. As you can see, there aren't many XML tags, and they are almost self explanatory. For details on each setting, open Presentation.xml in the #INFO folder, which has detailed explanations for all tags and their attributes. Learning curve: about one half hour. If you don't have any stereoscopic 3D photos yet, you can learn an easy method to take stereo photos with any off-the-shelf camera. To prepare media for a show, I find the following freeware 3D programs useful:

StereoPhoto Maker       Post-processing for stereo photos, to get the view alignment and the placement in the stereo window right.
StereoMovie Maker       Similar to StereoPhoto Maker (it's by the same author), but for video clips.
Free Video To Flash Converter       The name says it all: it's free, and it converts video clips to the FLV Flash video format required by p2gStereoStage™.

You can also find a lot of interesting 3D photo stuff by browsing the offering of stereoscopy.com for tons of information about all things 3D. Don't forget the 3D Photography Websites web ring by RingSurf. This web ring, too, is a good starting point to learn more about stereo photography. <TOP>


Licensing Requirements

Many long hours went into creating this utterly unique 3D stereoscopic multi-media presentation tool, yet p2gStereoStage™ is still FREE to all non-commercial webmasters and bloggers. However, you must provide a backlink to <proggies2go>™ from any page the applet is shown on. I also require that the media you display are in good taste by commonly accepted standards. That's all. You have to agree, a small price to pay for the privilege of having “killer” 3D stereo presentations on your web site or blog. Please to negotiate a license fee if you want to use p2gStereoStage™ in a commercial application.

FREE:
Download p2gStereoStage™ applet for your web site (includes applet, documentation, sample code, demo)
Download p2gStereoStage™ stand-alone application (also includes p2gChinchilla™ HTTP presentation server)


<TOP>

<proggies2go>™ Site Map:

<proggies2go>™ Start Page
p2gChinchilla™: FREE HTTP Presentation Server and OpenLaszlo DHTML Application Runtime (Microsoft Windows).
p2gStereoStage™: FREE Cinematic 3D Stereo Photo, Video, and Multimedia Player Applet (Adobe Flash 10).
p2gStereoPhoto™: FREE Multi-Format Stereoscopic 3D Photo Viewer Applet (Adobe Flash 10).
Beginner's Crash Course In Taking 3D Stereo Photos with the “Cha-Cha” or “Rock'n'Roll” method.
RSS News Feed (Bill's Blog): Volker “Bill” Schuelbe's Web Programming Tips for HTML, CSS, JavaScript, OpenLaszlo, Flex, and Perl.
Bill's Résumé: CV of Volker “Bill” Schuelbe, Veteran Programmer and Web Designer.
Legal Notice: Publisher's Imprint.