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.
FoodBreakfast: 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.