FPP

Yesterday evening I remembered that I needed to find out how to make the escape key quit a flash panorama, and also a show/hide button for the panorama navigation controls. But I remembered after shutting my PC down. I had been wanting to ask this question(s) since working on my pano website, a couple of weeks ago now. I knew I'd just forget it again, so I wrote a reminder on a piece of tissue (I don't have any 'normal' paper around by my PC), and put it on my keyboard.

So this morning I saw my reminder, and looked into this. Rather than just asking the question on the Flash Panorama Player Forums, I thought it would be a good idea to first see if the answer(s) was already available. I checked the forums first, and found this thread, where someone was asking a similar question to me. The answers there referred to javascript and script inside flash, but didn't explain how you write or access javascript or flash using FPP.

So next I checked the FPP blog, the website, the Google Groups Group (no point me adding a link there as you must have purchased FPP to be able to access it), and the Tutorials/Examples that come with FPP. However, I couldn't see anywhere on any of these how to add script to FPP. I also did some Googling, but didn't find anything helpful.

I was going to post a message on the FPP forums asking how you add script or functions to FPP, but then reading the thread about Closing the SWF from Hotspot more carefully, I noticed that the last post was actually asking this same question. This post was made on 26^th March, and hadn't been answered. There seemed little point in me asking the exact same question.

So I took a look at the FPP plugins folder, and opened (in Flash CS4) the .fla file for the openFullscreen plugin. Initially it opened with a view of the stage (or whatever it's called), which was just a grey box with an open and close graphic outside it. I tried to find out how to see the code view, and eventually found it under Window > Actions.

Looking at the code, I thought that this must be what 360VT.co.uk was talking about when they said the script inside flash. So now I had some flash code, I could edit it to hopefully do what I wanted. To test my edits, I was going to export the flash code to a SWF file (the file format FPP seems to use for plugins), and then upload this file to the local copy of my pano website. But then I remembered that to get the browser to download the new version of the file each time I made an edit and saved it out as a SWF, I would have to clear the browser cache each time before refreshing the page.

So instead I downloaded the relevant files from the local copy of my website, onto my desktop. I then changed the file paths in the HTML and XML, to point to the correct files instead of the website files. I then loaded up the HTML file in my web browser, and checked everything was working correctly. When everything was working correctly, I edited the XML file to also include the SWF of my plugin, which I had modified from the openFullscreen plugin. I refreshed the page, and found my plugin didn't work.

But the way it didn't work was that I got a message saying that Alert wasn't a recognised class or object, or something to that effect anyway. In my plugin, I had just changed it so that on a key press it would alert 'hi', so I could see the plugin was working. The message that alert wasn't supported when I pressed a key served the same purpose anyway - it showed that the plugin registered the key press and fired the function as I wanted.

Next I changed my function to check if the event's keyCode was 27 (this corresponds to the 'Esc' key), and if it did, then to fire the doClose function that was part of the openFullscreen plugin's code I hadn't deleted. Unfortunately, after making this change, nothing seemed to happen when I pressed 'Esc'.

I needed some way of debugging, so I checked my Actionscript file for my custom Adobe File Info XMP Panel, and saw it had

import mx.controls.Alert;

So I added this line into the flash file for my FPP plugin, but after refreshing the page, Alert.show still didn't work.

I remembered seeing something about debugging in the FPP documentation for the Hotspots plugin, so I checked that. That said to download the Flash Tracer plugin for Firefox. I went to the website, and found that the latest version works with the Firebug plugin. So I downloaded and installed the debug version of Flash, installed the FBtracer plugin, changed my Flash code to use trace instead of Alert.show, and tried again.

Now I could see my trace in Firebug, which just output the KeyCode of the key pressed. I could see the correct key was being pressed, so I checked the doClose function, and found it wasn't what I wanted. I changed my function to just do the closing window bit from the doClose function, i.e.

if (ExternalInterface.available) {
   ExternalInterface.call("eval", "window.close();");
  }

I tested this, and got an error about not being able to call a function that communicates with the internet (I think it actually means the browser since no calls to 'http' URLs were made at all). The ExternalInterface calling eval looked a bit strange, so I checked the correct way to communicate with javascript from Flash, which is more like .

ExternalInterface.call("window.close");

So I changed my Flash code to just call a javascript function named 'j'. I added the j function to my javascript, which just alerted 'hi', so I could check it worked. But I still got the same security error as before.

I wrote most of the blog post so far, then it was lunch.

After lunch I got the plugin working on my local copy of my pano website. I had a bit of trouble getting the files to update, first I had forgotten to change a constant that contained the site address, so this meant it was loading everything from the live website instead of my local website. Then I found I'd hard-coded the site address in some places instead of using the constant, so I had to update that. Then lastly I remembered that I was using wp-supercache, so the page was always refreshing from the cached page (which was using the address of the live site for all static files).

So I logged into the Wordpress admin panel and disabled super-cache, and finally I could now get the page to refresh and reload all the static files. Weirdly, when I checked my Nginx config for the site, it didn't have any rewrite rules in it to do with supercache, so I'm not sure how it worked?

Anyway, my FPP plugin worked okay on the live site, and I could execute the javascript to remove the flash object from within flash.

Next I took my tried commenting out bits of the existing openFullscreen plugin code, starting with a bit that said

function newPano (link:Object) {
 pano = link;
}

But then the plugin didn't work, and I got an error when the pano loaded. I looked at the other FPP plugins provided with FPP, but none of these seemed to use a newPano function. But I couldn't see any consistent way in which they hooked into the load event of FPP plugins provided with FPP either.

So I did some googling and found Understanding Basic Flash Panorama Player Plugin Architecture, which says that you do need a function named newPano, and FPP will fire it automatically when the pano is loaded.

So next I tried copying my code and pasting it into a new Flash file (since I didn't need the graphics on the stage included in the openFullscreen plugin). I now got an error (when exporting the SWF in Flash CS4) about not being able to find flash.display.InteractiveObject. Strange since the openFullscreen file didn't have any problem, despite being the exact same code (in the Actions view of Flash CS4 at least). I tried just commenting out the line

import flash.display.InteractiveObject.*;

and now it exported okay. I found I could also comment out some of the classes I didn't need importing as well.

After getting the escape key to close the pano okay, I now needed to add something to allow you to hide or show the panorama controls. Looking into this, it seemed that it should be done using the XML for hotspots. Using this blog post, the documentation that comes with FPP, and the aforementioned forum thread, I managed to get a button that when clicked faded out the other buttons. I added the following properties to the global tag:

  <global onEnterFullscreen="full.alt=exit fullscreen" onExitFullscreen="full.alt=enter fullscreen" onOver="glow=3.1,600;glowColor=#339933;glowBlur=30; tint=0.5,200;tintColor=#339933; depth=20" onOut="glow=0,600;tint=0,600;" fadeHotspots="left.alpha=0,1000; right.alpha=0,1000; down.alpha=0,1000; up.alpha=0,1000; zoomOut.alpha=0,1000; zoomIn.alpha=0,1000;" hideHotspots="left.visible=0; right.visible=0; down.visible=0; up.visible=0; zoomOut.visible=0; zoomIn.visible=0;">

and then I modified the fullscreen button (which I was using to test my hiding buttons function like so:

<spot id="full" alt="enter fullscreen" smartScale="1" static="1" align="BC" salign="BC" staticX="225" staticY="-5" url="http://static1.360vrs.con/pano-content/images/black_f.png" onClick="fadeHotspots(); timer+=1,1000,,hideHotspots"/>

Next I decided to look at other sites to see how they deal with hiding and showing the pano controls, but the show/hide button looks like, and where it should be positioned. But looking at Panoramablog.com and Panoramas.dk, I found they both have small controls in the bottom right corner, rather than large centered controls that can be shown or hidden (which is what I was planning).

So I decided to just copy them, and have permanent controls in the bottom right hand corner. It took me quite a while to figure out how to do that and get the icons aligned nicely though.

After doing that I went out in the garden, and saw a Dung fly on a daffodil that looked like it might not mind being photographed (it wasn't sunny and was quite cold (as usual), so it probably didn't have much energy. I wrote some more of this blog post, then I put my macro kit (450D, MP-E, MT-24EX) together, and went out to take a photo of it. But it had started to rain (again) so I didn't even bother trying to get a photo of the dung fly.

In the evening I watched Lost, which was ultimately Desmondy and Widmoreish, and processed some more Korea photos.

The weather was a mixture of clouds and sun, with mostly sun, but a strong wind.

Food
Breakfast: Blackcurrant Jam Toast Sandwich; Cup o' Tea.
Lunch: Smoked Ham with Dijon Mustard and Mixed Salad Sandwich; Banana; Slice of Sultana Flapjack; Mint Club; Cup o' Tea.
Dinner: Jacket Potato; Baked Beans & Sausages; Grated Mature Cheddar Cheese; Ground Black Pepper. Pudding was a slice of Chocolate Cake that Clare and L made today. Coffee; some Easter Egg.