Color Theme
Select your color scheme.
About the Background
The background is interactive. Click and play with it. Or use the following controls:
Select your color scheme.
The background is interactive. Click and play with it. Or use the following controls:
To experience more of Rain's creative site, we got you something that you could play.
What you got here is a platform you can tweak. We doesn't stop only from giving you toys to play
but might as well give us something that we can share with others.
After this will be the start of your own creative exploration.
Welcome to Rain Creative Lab.
For people to appreciate the technology and innovation behind the site, I think its better that we explain a little bit about what really goes on behind the scene.
The site utilize and combines 3 major technology: CSS/HTML, Javascript(Jquery) and Flash. We may likely to say we don't just use them as 3 separate technologies, but rather integrate them to create that one seamless and unique experience.
Flash has been an essential element of the site. It carries majority of the site's aesthetic values. We decided to refrain from being too conformist with regards on how we use flash, and seek to provide that degree of variation and interactivity. In order to achieve a unique experience that ties both the brand design of Rain and its vision, we decided to use Papervision and Actionscript 3. Papervision (PPV) provides us with that kick-ass effect of space and dimension with the combine help AS3 for interactivity. We took the code base from one of our creative experiments we didn't use in the past, tweak it to suite our creative requirements. The same code-base was used on one of our Augmented reality project prior to our launch.
We decided to keep it simple so that it won't affect the loading time of the site. Primitives don't consume too much space when compiled, thus making that continuous effect when the site is viewed and loaded. In order to create that splash of colors in the site, Flash talk to our Javascript engine via ExteralInterface API to provide the themes to use. It was an amazing API but we faced various setbacks regarding this technology and its implementation.
We did a lot of trial and error just to make it behave properly. These setbacks doesn't only shed light on how browser renders flash with javascript communication behind it, but enable us to understand how to tackle such issues with various variability involved. It was mind boggling yet challenging experience.
ExternalInterface API is a great piece of technology but should be taken seriously. The site relies heavily on this API to communicate to various layers of the site (Pixel Space, Theme Preview and Flash Background), and synchronize all the elements in the site (Yes, including the HTML and CSS). We won't say that we fully utilize the API as we want to keep things simple and straightforward, but simple things really make it happen.
Pixel space is an interactive site themer that enable the user to change the background of the site. However, we don't just want to change the background we want something interesting and interactive. Pixel space is a dynamic parabolic pixel board that enables user to visualize the theme of the site (Hmm, we did some computation to create that effect). Made from Papervision and AS3, we make it a point that i doesn't consume to much processing power but still delivers that unique creative experience.
Pixel space appears on top of the Site built in HTML and CSS, overlaying the elements with complete smooth transition. Pixel space is also responsible in displaying the controls for customization to appear after certain time. The controller is made from HTML/CSS. We decide to use this so that we don't sacrifice loading time when the user access this feature. The Controller houses a Flash color theme bands that enable the user to choose from the available themes. When the user hits the USE THIS THEME, The flash talks to another separate flash (Pixel Board) to change it's colors. Pixel space is not PURE flash. Its a combination of both. This feature showcases what can be done using ExteralInterface API to interact with various layers of flash. Smart and ingenious. But we decided to cover the whole concept so that the user won't even realize these layers. Our goal was simple -- Create that immersive experience that blurs the boundaries between technologies.
Having multiple layers of Flash and HTML causes tons of performance issue. However, sometimes, you need to play your available cards right to solve this. By providing clear transitions, we make sure that we load off unnecessary elements to reduce the load. These are done using transitions combining Javascript and Flash.
We want to make sure that the site can be searched and be viewed by users without sacrificing that loading time we usually experience with flash website. In order to achieve this goal, we decided to use HTML and CSS. The site runs on our own CMS to control the content appearing in the site. HTML/CSS provided us with a creative canvas where we can play with our own content utilizing CSS and Javascript technology.
In order to achieve that unique experience, we combine the technology and turn it upside down. These practices haven't been explored and utilized so we decided to try it out for a change.
This is how everything stack up on each other. Just to illustrate to you the layers of the site and how they interact with each other.
The site is just the beginning of our roadmap to this technology. This is a glimpse of what's to come. What's next with Rain? We are coming up with what we call Social Branding, Phase 2 of our site that realize the whole creative circle, Augmented Reality, and Visual tweets and the full execution of Pixel Space.
There are so many things for us to do, and we are all excited with what we can do with these integrating technologies.
I hope this shed a light on what we have done in this project. We are hoping to see others do things as well.
For comments and suggestions, questions, email us at: isuggest.thing@raincreativelab.com
Experience, experiment, immerse.
