FlashPanos

Submitted by FlashPanos fan and FPP user doubledrop.

This exercise has been written to help other novice users of FPP like myself, and who are struggling with the full screen function.
A full screen button is mentioned in the FPP documentation, and many users add it. However I could not get it to work, and it took me 2 weeks of trying to find the solution.

As with many FPP hurdles it is actually quite simple and logical, but until you find that solution it can be insurmountable. So here is a step-by-step method to embed a constrained FPP pano within an HTML page, including a full-screen button which toggles Flash Player to take over the whole of the screen.

These instructions don't contain any advanced techniques or special code. I'm taking the time to post it as many good people at FlashPanos and in the FPP forum helped me along my way when i was struggling to make this apparently simple feature work. There's a massive hurdle if like me you're inexperienced with HTML, hopefully i will explain it for you in plain English.

I'm not a technical writer or an expert in FPP, just a jobbing photographer trying to learn a tiny bit of code to make my art better, here goes...

Here's a working example of this tutorial.

And here's the full FPP XML:

It is deliberately simple with just the one button that triggers the full screen command. If you are building a tour of many scenes it works identically and needs no extra lines or commands for the additional rooms.
I have added the rollover tooltip using the line alt="click for full screen on/off", but that's optional and you don't have to -- though it does help explain to the enduser so useful i feel.

i'm using the onClick="fullscreen(-)" command, though you can use it with empty brackets onClick="fullscreen()" instead. my understanding it that this way the function works for more versions of FlashPlayer. [ed. note: see the fullscreen documentation at this site for more info on the workings of the fullscreen FPP parameter]

To simplify this tutorial i've kept every associated file in the same folder. For bigger tours and customised navigation where you've made your own buttons you're best to make a few folders, perhaps ones called "plugins", "buttons", "images", and so on. Everything will work the same just remember to have the correct path in your XML. For the example above if i had a folder called "plugins" then the edit would be:

layer_20 = plugins/hotspots.swf

It's simple stuff i know, but until someone points it out you can be baffled!

Next we have the HTML coding. This was the thing i realised after 14 nights of headbanging that i was doing wrong.
Firstly here's the full code, then i'll try and explain where it comes from:

I use SWFobject to generate the inital code which takes my pano and constrains it into a predetermined window on a HTML page. Above, mine is 1024 x 576 (video kids will recognise that pixel count!). If you don't have SWFobject you need to go get it and follow its own lessons before you continue here. There's documentation and everything you need in Denis' instructions that you got with FPP.

Based on the code you've generated with SWFobject you're going to edit it with some extra lines. You'll need to use a plain text editor -- I use the free TextWrangler application for Mac, and there are many others.

So, what i've added to the SWFobject initial code was these lines:

I copied them all from an open source Adobe instruction page here, and edited my own pano's name in "kitchen.swf" where necessary.

When you've done those edits in TextWrangler (or you could just copy and paste mine from above and change the .swf to your own name, then save as HTML unix - i don't know why, was advised by a mate, but it works so i don't monkey with it!) make sure that HTML file is in the same folder as all your other assets for this pano; call it index.html for simplicty.

If you're on Mac and using iWeb to make a HTML page with other graphics as well as your FPP, then you copy that HTML into your pasteboard and use the INSERT / HTML SNIPPET command and paste your code into there. It will make you the correct size window that you specified earlier in SWFobject, and will show its boundaries for your layout, but it won't render the working pano yet.

Publish your page to a folder on desktop and add the 2 files that SWFobject needs: swfobject.js and expressintall.swf.

That's it! You've got everything now and can test it in a browser from your desktop -- just drag the index.html file onto Safari or whatever browser and you should get your constrained pano; Click on the full screen button and it should pop out lovely. Either use ESCAPE key or press the full screen button again to return to the constrained view.

So you can publish that now to the world using your FTP application... Just make sure everything's in the same folder and you've earned yourself a beer...

doubledrop

ps:
textwrangler free from here:
http://www.barebones.com/products/textwrangler/download.shtml
There's loads of similar freewares but that was the one recommended to me by a mate.

As of this writing, SWFobject parts from here:
http://swfobject.googlecode.com/files/swfobject_2_0.zip
http://swfobject.googlecode.com/files/swfobject_generator_1_1_air.zip
http://swfobject.googlecode.com/files/swfobject_generator_1_1_html.zip

And of course, FPP's instructions that are part of the FPP bundle should be local to you already...