Topic: Behind the Scenes
Designing a Custom Flash Player for Brightcove
ABOUT BRIGHTCOVE
Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.
Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).
However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...
Continue reading "Designing a Custom Flash Player for Brightcove"
Refreshing Healthy Child: Managing Growing Content & Purpose
Viget had the opportunity to design a new online home for Healthy Child Healthy World two years ago when they were in the middle of a big rebranding endeavor. The outcome was a success and we launched a site that reinforced/helped spread the HealthyChild.org message of understanding environmental health risks for children. We were fortunate to continue our relationship with HealthyChild and have had the opportunity to support the site since launch. But two years is a long time, especially on the web. In that 24 month period, online trends are guaranteed to change, user expectations are bound to grow, and client goals/dreams will expand as they get a footing in the opportunities their newly redesigned site offers them.
Continue reading "Refreshing Healthy Child: Managing Growing Content & Purpose"
The Making of VigeTurf - Design
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the design.
The Big Picture
The Vigeturf project required some branding, detailed packaging design, functional web design, and loads of intensive illustration. Coming up with a plan of action and then creating a simple style/brand guide ensured we had structure around what we wanted to accomplish with the different pieces of the project.
Mood Board
Stephanie, Hilary, Brian, and I kicked-offed the project with an initial brainstorm meeting to lay down expectations and decide exactly how we wanted to push the project in both the web and print arena. Since we were building this concept-turned-product from scratch, we had the luxury of dictating exactly what we needed on the site as well as a rough sketch of the assets that would be included in the packaging upfront. With the basics put into place I moved on with a quick mood board to convey my initial ideas. I immediately gravitated towards classic brands like Hendrick's Gin with refined filigree elements. At the same time, I wanted to make sure that there was a touch of whimsy since we were creating a product that reminded me of something that you might have purchased in a general store back in the day.
The Making of VigeTurf - Design Build
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the design build.
There are a lot of design elements on the page that act as decoration I decided to cut the design up into two large background images. The obviously problem with creating large background images is that it increases the size of the site especially with the Flash element, Flickr feeds, and displaying the user created images. Since this was a fun, internal site that needed to be put up quickly, we tried our best to compress the images down and make CSS sprites for all the other smaller elements. For the main background I left some extra "paper" on the bottom in case the content scaled and saved the image as a JPEG to keep the file size smaller. Unlike the main content, the footer content would likely never change so that image is a fixed size and since it sits on top of the repeating wood texture, I made it a transparent PNG in case the main content ever pushed it down.
All the other elements on the page, such as icons and buttons, are found in one big background image and then CSS background positioning is used to give the coordinates of what part of that big image should be displayed. So that brings the total number of images I used for the layout to about 4 images (I'm not counting a couple really small repeating background images). Not bad! One could argue I could've gone even further and condensed those images into a bigger sprite. If you don't know about CSS sprites there are a lot of good resources on how to make them, such as this A List Apart article, and Yahoo has suggested using CSS sprites in their Best Practices for Speeding Up Your Website. Speaking of Yahoo, another useful tool I used was their YSlow plugin for Firebug. YSlow can give you stats on the performance of your page and I used it to check the size of the site.
Take an in-depth look at how the other pieces came together.
The Making of VigeTurf - Flash
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the Flash.
Uploading/Saving Photos
The actionscript side of uploading photos is very simple, but more involved for Matt who had the mighty task of putting the entire site together and did an awesome job. I just referenced the FileReference class, which will tell your OS to open a file browser window when you call FileReference.browse(). Because of security restrictions in Flash player 9, you need to send the file to a remote server before you can access it. This changes in Flash player 10, where you can directly access files at runtime (woohoo!).
Once the image was fully clipped, I simply took a snapshot of the stage and saved it out as a byte array. Using Adobe's Jpeg encoder class, I saved the image back to the server, where Matt returned the unique (and fun!) url's.
Grass
The blades of grass were probably the most fun part of this project. I was so excited about the task of making interactive grass that I started messing around with it that night. (You can see the grass in an earlier version here.) All of the blades are individually drawn using the AS3 drawing API and are given a random height and angle to look like nice, organic grass. All the blades are placed into a movie clip because, later, I will need to convert that movieclip into a bitmap to enable erasing.
The interaction with the mouse pointer was a bit tricky, and the result was not perfect, but the effect works (right?!). When the mouse pointer passes over the blade, it sticks to the pointer until you bend the blade to 45 degrees in either direction. At that point, the blade stops following the pointer and a tween takes over to get that "snap back" effect. That effect is handled using a simple tween that sends it back to its original rotation. The ease on the tween is set to "Elastic EaseOut" to get that great pendulum-like bounce (I used the TweenLite tweening library from GreenSock, which has become my tweening class of choice). When first envisioning the grass, I pictured very life-like blades that bow organically instead of the stiff bend they have now, but I quickly abandoned that idea after Steph said I couldn't take several weeks to perfect it because it had to be done by the holidays. Picky picky.
Exploring Our Process: Zymetis Redesign from Start to Finish
One of my favorite aspects of being a web designer is the opportunity to learn about a wide variety of interesting clients. Zymetis, a company that is as passionate about biotechnology and the environment as I am about design, has been no exception. Every meeting with them was an enthusiastic adventure into the world of science and sustainable fossil fuel alternatives. The project gave me new insight into the world of bio-fuels. 
Continue reading "Exploring Our Process: Zymetis Redesign from Start to Finish"
Designing Through the Dog Days of Summer
When it comes to designer assignments, our ideal at Viget is to have one designer lead a project from start to finish – and in most cases they do. But the reality is that limited designer availability, summer vacations, or competing priorities have challenged us to find alternatives for certain projects. Respecting each other's design vision is imperative when we tackle these situations by re-allocating portions of the design responsibilities, which we just succeeded in doing with Interventional Paws.
We addressed this non-profit's simple redesign by having one designer do mood boards, another do design comps, and a third to build-out in ExpressionEngine.
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS