Ultimate Start-Up Space Microsite Summary and Development Process
For those interested in my development process feel free to continue reading. Those that are not can probably stop here, don't really want to bore anyone with the process of my development.
To start off, I got the initial brief for the microsite in early November. It was a pretty rush project since it had to be launched in early December which means around 3 weeks of development time after factoring in time needed for debugging, changes and client's approval. Getting a microsite out in 3 weeks isn't exactly the hardest thing to do, it's the elements of what needs to be implented that frightened me.
Here are some elements I implemented into the site:
- Dynamic resizing of the site based on the browser's screen size
- Legal age restriction upon typing the ultimatestartupspace.com.sg and it's subdomain
- Preloading and rendering of videos and images at run-time
- Dynamic URL implementation ( SEO ) of the entire site and individual public submission
- Simulated 3D rendering of panels in gallery that builds based on the number of entries within the database
There are quite a number of elements that was integrated within the site that is of great difficulty. I'm going to specifically mention about the gallery section as it was quite a breakthrough for me. You'll probably need to refer to the site here while reading to get a clearer picture.
This was the initial problems I faced:
- How do I create a dynamic 3D panel gallery that populates accordingly based on the number of entries that I have in the database?
- How will I load the images and videos into the 3D gallery smoothly?
- How can I achieve the kind of user experience that you would get when you see video on youtube?
- How should I program it such that each user submission would get it's own URL and by typing in the URL they would be linked directly to that particular entry on the site. Which could then enables user to share the entry on facebook.
I began by fragmenting the various problems into even smaller portions.
I first started to build the 3D simulation of the gallery. After experimenting with Papervision 3D and Flash's internal 3D engine, I decided to use mathematics to create the 3D effect as that would be the only way to create the intended seamless effect. Here are the following steps that I took:
Creation of Gallery Positioning and Animation:
When the conclusion was made to use mathematical calculations to do up the gallery, I came up a concept of enabling 13 fixed panels to display the gallery. Upon entering the gallery panel section, only 7 panels are seen. However in the background, 6 panels ( 3 on each side ) act as backup to load the content of the subsequent submissions. And by indicating a defined position of x, y and z ( done through scaling ) the positioning and animating of the gallery was done.
Implanting Content on to Panels:
The next tricky thing was to implant the content on to the panel. How am I going to load panels dynamically based on the number of submission and not cause a lag? I can't possibly load 100 submissions at the background ( if let's say there's a 100 entries at a particular stage ). Thus I started playing with the notion that individual content for the panel would be loaded on the two ends of the hidden gallery panels. I then formulated a mathematical solution to solve the dynamic loading issue, however it's going to be too complicated to explain so I shall skip it.
I spent quite some time experimenting the possibilities of various options before I managed to pinpoint the exact mechanics. See example below.
Example:
8-9-10-11-12-13-1-2-3-4-5-6-7
Remember there are 13 panels regardless of how many entries there are. Panel 1, 2, 3, 4, 11, 12 & 13 are the visible at the point where users enter the gallery.
8-9-10-11-12-13-1-2-3-4-5-6-7
Panels 5 & 10 would need to already have content loaded depending on the direction where the user click to navigate through the gallery.
8-9-10-11-12-13-1-2-3-4-5-6-7
Thus we would have to do our loading and unloading of the content at panels 6 & 9.
Enabling video to the Panel:
Okay. So now we have the dynamic content ( image & copy ) and the panels moving. Unlike the dynamic content I could not attach a video to each individual panel as that would cause the site to overload ( 9 x 3mb video = 27mb to load ). Thus each video is attached individually when the play button is clicked and preloaded on the fly. However that is not the end of the story. With only one loader to load when user transits from one video to the next, there is not enough time for the loader to unload the old and load a new video again. Thus I created two loader to interswap the loading and unloading of videos so that it would load correctly and smoothly.
I believed there should be a better way to do this though. Feel free to let me know your thoughts on this.
Dynamic URL for the Gallery Section:
Now that everything is in working order, I'm just left with the dynamic URL integration and linking of the gallery overview and panel mode. With the variables that I had done up previously, it's just a matter of putting the right keys into the correct locks. Hard for me to really explain in detail here but it was pretty interesting since I use SWFaddress instead of query string to get the dynamic URL with the legal age restriction page.
I'm pretty much done with my explanation on my development process. The entire process was not as smooth as I had inscribed. There was in fact damn a lot of hiccups during development. Hope it's informative for anyone that's interested. =D
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment