Flash rules for setting up gallery sites.

Recently, Laura and I have decided to move from our suburban loft to a downtown loft, right in the heart of Nashville. Lucky for us, we decided to sell our place during what seems to be the worst time in history to sell a home. So I decided I’d build a little site for our house, www.limitedwave.com/204/. I had a few requirements:

1. Load images from an XML list (or close approximation)
2. Display one interface, rich in photos, to house all property details and the video tours. Then a separate page for the photo gallery.
3. The site needed a visual floorplan / video tour component.

To solve these riddles as always I went straight to Flash. I’d been wanting to figure out how to build a swf that would scale naturally in all directions, display full scale images with smoothing and friendly aspect ratios, and also maintain propering spacing for things like nav items and such when the browser gets resized.

Components/functions:

Scaling Background Images – get the class HERE
For this I used classes from www.blog.noponies.com. These were spot on scripts written here, and were easy to implement. Awesome stuff. And the author – Dale is his name I think, and he hails from New Zealand. I need to drop some duckets in his pay pal account pronto, as I’ve used his classes more than once lately. Anyways…after includeing the class, the implement looks about like this:

var newBrowserBg:NpFullBrowserBg = new NpFullBrowserBg();
newBrowserBg.loadBgContent(path+imageArray[index]);
newBrowserBg.minStageScaleY = 505;
newBrowserBg.minStageScaleX = 319;
newBrowserBg.useStageScaleMin = true;
addChildAt(newBrowserBg,0);

 
newBrowserBg.addEventListener(NpFullBrowserBg.BG_LOADED, handleLoadedEvent);
newBrowserBg.addEventListener(NpFullBrowserBg.PROGRESS, handleProgress);

Once I’m ready to have some backgrounds changing, I call the images by using a simple timer:

var imagesTimer:Timer = new Timer(12000, 1);
imagesTimer.addEventListener(TimerEvent.TIMER, changeImage);
imagesTimer.start(); 
function changeImage(e:TimerEvent):void {
if (index >= imageArray.length) {
index = 0;
}
imagesTimer.reset();
newBrowserBg.alignX = .5;
newBrowserBg.alignY = .5;
newBrowserBg.loadBgContent(path+imageArray[index]);
caption_mc.caption_txt.text=descArray[index];
index++;
imagesTimer.start();
}

Upon looking back at my code – it looks like I got a little lazy and put my images into an array, rather than an xml file (which is really the norm, just not here). No worries, everything ends up in an array eventually right?
Simple one line instantiation of an array in Flash:
var imageArray:Array = new Array(“0.jpg”, “1.jpg”, “2.jpg”); 

Flexible Layout – get the class HERE
I got this class from www.blog.noponies.com also. Like I said…I gotta drop some cash on that guy fast!  Anyways – this is a tremendously cool class that I use to manage browser scaling. It lets you basically set up a stage in which you can attach named clips to it proportionally. In the code you just import the class, then:

var stageTest:NpFlexLayout = new NpFlexLayout(stage);
stageTest.addTarget(midPanel_mc, {x:.5, y:.5, minX:-50, useClipRegPoint:false});

That’s it. noponies makes it so easy it rocks. In this case, “stageTest” is the object which is getting clips added to it – its your stage. “midPanel_mc” is the clip I’m adding to the stage. The X hook is set to 0.5, and the Y hook is set to 0.5 which means this item will always appear in the middle of the vertical and horizontal spans. He makes it even easier by adding lots of controls for this class to get your stuff positioned just right. Offsets are great as is the choice to use the clip registration point or not. Noponies = pioneer.

Timers
I should note that I make extensive use of timers in this project. I have timersto triggers open/close animations….timers listening for user interactions…timers swapping out images and such, they’re everywhere.

Setting up a timer is simple. I have a toggle switch for showing and hiding the nav bar. Here’s the code for setting up a timer in AS3:

var showNavToggleTimer:Timer = new Timer(9000, 1);
showNavToggleTimer.addEventListener(TimerEvent.TIMER, showNavToggle);
showNavToggleTimer.start();
 
function showNavToggle(e:TimerEvent):void {
hidePanel_btn.play();

Rather simple, very useful.

Custom Functions
As with any project of decent size and function, I needed to write a bunch of custom functions to pull this interface off. Its a rather complicated fla file that I’m not too proud of! I just did it all in one weekend, and all the code is in the fla as opposed to in classes. I’m not posting the fla here but will be glad to share it if someone asks.  Anyways – there is a pile of code that handles the basics of the interface that I won’t go into here, but its of worth to note it. 

Video System / Custom Event Listeners / Custom Handlers
This is where the project took an interesting turn. At some point I decided to use external swf files to load in the video pieces. It was because I had a solid little video player and it just made things simpler to have it in one fla file outside the main interface fla. So I did. I was just looking for who made the little video player script I use and I don’t see any clues as to where I found it. I’ll keep looking and when I figure it out I’ll edit this appropriately. If that video player is yours lemme know so I can credit you.  The video stream is easy enough:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var stream:NetStream = new NetStream(nc);
stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
stream.play(“video/living1.flv”);

Set a meta listener for control:

var metaListener:Object = new Object();
metaListener.onMetaData = theMeta;
stream.client = metaListener;

And then add the stream to an object:

var video:Video = new Video();
video.attachNetStream(stream);
video.width = 507;
video.height = 283;
video_mc.addChild(video);
stream.addEventListener(NetStatusEvent.NET_STATUS, netstat);

‘netstat’ is a function for getting theNetStatus events, ie control.

Then of course there is a ton of code to produce the video player interface. That’s a whole other conversation – constructing a video interface. I’ll tackle that one later.

The custom event dispatcher is used to make sure any video that’s playing anywhere gets stopped when interface changes occur. This is the code on the button that starts the play sequence for the ‘living1′ video clip:

living1_btn.addEventListener(MouseEvent.CLICK, showLiving1);
function showLiving1(event:MouseEvent):void{
stage.dispatchEvent(new Event(“stopAllVideo”));
vidHolder.gotoAndPlay(“living1start”);
}

Then – in the video player fla (external) we add a listener and a function to shut down video playback:

stage.addEventListener(“stopAllVideo”, stopAllVideo);
function stopAllVideo(event:Event):void {
    stream.pause();
nc.close();
}

That’s about it for video.

Image Gallery – get the classes HERE
The image gallery needed to be separate from the main interface because I wanted the image browsing experience to be more traditional. Naturally, noponies had some classes that perfectly fit the bill. Apparently I am the poster boy for noponies.com on this project. I was just checking that site for the NpScrollingPanelRect class that I used, but can’t find it. If you want it ask in a comment.

—

I think that’s it for this project, or at least that’s it for this post.