http://www.massgeneral.org/cancer/
This project was a new challenge for me. MGH wanted to enhance the Flash animation I developed last year by including a video to play on page load, with controls hidden until the user’s cursor rolls over the video.
I coded their video players too, so I figured, piece of cake! WRONG. A few of my usual tricks for this kind of interaction failed me when any rollover of a button on the controls resulted in the whole menu slipping away right under my cursor. Seems calling “onRollOver” of one button also calls the “onRollOut” of another, even if they happen to be on top of each other. Eventually I settled on a cursor coordinates check that runs every frame and tests to see if the mouse is over the x & y bounds of the video. If so, and the menu isn’t already showing, call showMenu(), but if not, call hideMenu().
Some Actionscript2 code for you: (uses the awesome Tweener class)
function hideMenu(){
Tweener.addTween(videoHolder.menu, {_y:227, time:1, transition:”easeOutSine”});
hideVolume();
}
function showMenu(){
Tweener.addTween(videoHolder.menu, {_y:192, time:1, transition:”easeOutSine”});
}
function mouseTest(){
if (_xmouse > 400 && _xmouse 13 && _ymouse < 245){
if(!menuIsOpen){
showMenu();
menuIsOpen = true;
}
}
else{
if(menuIsOpen){
hideMenu();
menuIsOpen = false;
}
}
}
videoHolder.onEnterFrame = mouseTest;
As always, I welcome your more efficient solutions!!
Season Two starts June 7th, and to get you excited we’ve got a new Z Rock page design: http://www.ifc.com/zrock/.
The kids love it.
As you loyal friends and readers already know, I’ve been designing pages/video players/graphics for IFC.com for over 2 years. I am happy to say IFC.com has been nominated for a Webby for Best Movie & Film site!!! YAY! I am so proud of these folks; a girl couldn’t ask for a cooler group of people to work with.
Please vote for the People’s Voice: UPDATE: IFC WON THE PEOPLE’S VOICE! HOORAY!!!
HOORAY!! Hours upon hours and days upon days of blood, sweat and tears (or at least several achey wrists and fingers) have finally come to fruition! I am so proud of the latest incarnation of IFC.com.
I worked with a fabulous team, many of whom I met in person for the first time only last week at the launch celebration! My responsibilities included the design of the Media Lab Studios pages, both the main page and the templates for all upcoming contests, as well as converting most of the Web Series pages over to the new templates. As if that wasn’t challenging enough, there was plenty of opportunity for new creativity in designing the customized background images.
Some selected works:
The Stagg Party
Little Big Planet
Z-Rock
Absolut Indies
Getting Away With Murder
Get Hit (my favorite background image)
And, somewhat unrelated, Facebook apparently knows me all too well, but consequently fails at actually advertising to me. Yes, I am aware of the new IFC.com. And YES, I LIKE FREEZEPOP ALREADY!!
I am very proud to brag about my small part in helping develop this beautifully designed and infinitely resourceful website, the new www.massgeneral.org. Though I had nothing to do with the design itself, I absolutely love it. My role was Flash Developer. Basically, if there’s a flash animation on the site, chances are I spent several hours pulling out my hair figuring out why something wasn’t working right.
Finding the flash pieces on this huge site might be a little bit like an easter egg hunt, so let me try and point out some of the larger ones:
- First, there’s the home page, of course. This animation has been hard-coded using primarily timeline animation, and the original prototype included some nifty parallax movement but unfortunately these first run images didn’t support it. Hopefully next time they want to update their leading image I’ll be able to get my hands on foreground and background images and show you what I mean.
- The second flash piece on the site you may encounter is on the home page for the Centers (Heart Center, Cancer Center, etc). This animation loads from an XML file, making it easy for MGH to go in and load their own images and copy and links.
- The most complicated flash widget I’ve ever done is The Patient Experience (check it out on the Cancer Center page). It also loads all it’s data from an XML file, includes 4 different types of slides including an audio slide, automatic thumbnail creation, etc. …and was a pain in the ass to debug.
- And then… deep in the site somewhere there are multimedia players: video, audio, and image slideshows. I made those too.
This was the largest project I’ve worked on in a developer role, and it was also my most challenging. Big thanks go out to MGH for their kindness and patience as I struggled and learned a lot throughout this last year. Also HUGE congrats go out the the entire development team, each of whom took on whole new challenges to create this very complex site.
Filed under: work
Check out the newest web series from IFC, documenting the life and work of photographer Ellen Stagg: http://www.ifc.com/thestaggparty (NSFW)
My job is awesome.
I was invited to discuss the various work I’ve done for the Massachusetts General Hospital website at their montly web developer’s lunch meeting. At first, I didn’t think I had anything interesting to say, but they mentioned there would be free sandwiches so I said ok.
Anyway, I created a presentation to give a little taste of flash to the less technically-inclined, as well as some code and tips for those with a bit more flash experience. The presentation itself is even created in flash! And here it is!
For those of you visiting this page now who happened to be at that meeting, welcome to my blog! I hope you had some fun and maybe learned a little something, please feel free to email me with any additional questions.
Not long ago, IFC recruited me to design pages for a couple of sponsored time slots and short film contests. One is Absolut Indies, whose design mirrors the style of the amazing site for their “In An Absolut World” campaign (located here). I loved working on this design; I’m a big fan of dark backgrounds and gradients it seems. But, wow, creating realistic-looking 3D boxes with text is a whole lot tricker than it looks!
The second sponsored event on IFC.com is brought to you my Scion and Rooftop films. Check out the home page for the event, and also the contest page, both designed by yours truly, of course.
IFC is using Brightcove’s Consumer Generated Media Campaign to facilitate the contest entry and video upload process, and the Compact Minimizing template player on the home pages.
Both these contests are ending soon, so if you wanted to enter, GET ON IT PEOPLE!
This latest project, for the Massachusetts General Hospital Vascular Center, is a bit different than my usual work in that I played the role of flash developer rather than designer. I had 2 months to complete the 3 animations: Meet the Team, Visit the Locations, and Illustrated Conditions. The design and illustration was entirely handled by the amazing MGH Marketing Team, so I had the opportunity to flex my nearly atrophied flash actionscript muscles.
I needed to make sure that the content was easily editable by someone with little or no flash experience, so I used XML files to contain the data. I also was faced with some new challenges (for me anyway). I handled the Send to a Friend feature with an external SWF that calls an ASP file and then sends an email. I created the Print feature in a similar way, again using ASP to load the content from the XML files to create a text only page. This could also be used to link screen readers to the content of the flash movies an accessible format.
It was great, though a bit challenging at first, to dive back into Actionscript after a long hiatus. I developed my new portfolio with many of the skills I exercised on this MGH project, in the hopes of attracting more Flash design and development business. Hear that, internet people? I want flash work!! Please!?
update: IFC updated their website and left this and Rooftop Films out of it 
. screenshots will be available in my next portfolio design.
i just finished up this quick project for IFC called IFC Flashback. like so many other pages i’ve designed for IFC, it uses a Brightcove compact tabbed player embedded in an html page. i had a particularly great time working with the logos they gave me to create a retro look for the page, and different styles for each decade. check it out and watch some greg the bunny episodes while you’re there.
last year I was lucky enough to be able to redesign the entire sportskool.com website. and, if you saw the original design, you’d know this was no easy task. but, after several months of work by an amazing team of people the site looks pretty freakin awesome!
things about this site that rock:
- the backgrounds for the sports pages & home page (designed by yours truly)
- using one single title Brightcove player per page. usually i work with bulky players, it was refreshing to have some breathing room on this design.
- the Brightcove/Storymaker slideshow on the sports pages.
while i was working for brightcove, i helped design a little tool called Aftermix. i worked closely with both the lead designer and the developers to design the user interface for the titles, transitions and effects menus. well, thank you Jaime for informing me that Aftermix won an MITX Award for “Best Rich Media Application.” nice.
congrats to the entire Aftermix team, they are great guys and i miss working with them!
Filed under: work
before this project, i never had the pleasure of taking a second glance at tabloid magazines. remarkably, there’s a certain style they ALL adhere to. do the designers for the inquirer and the like go to some special tabloid design school? are they educated in only gaudy colors, obnoxious fonts, and hideous photo selections? it’s amazing really.
anyway, check out the teaser site for the new york comedy troupe here: http://www.ifc.com/series?aId=21510. the full mini-site (is that an oxymoron?) debuts in two weeks, with clips from the first season and a bunch of extra stuff!
Filed under: work
check out this scary page at IFC.com. http://www.ifc.com/static/sections/after_dark/.
this page is another example of a branded brightcove player designed by yours truly. i like to design using the compact tabbed player because it fits inside the page a little better than the tabbed player (still it’s a little too big – doesn’t allow for any other columns of content to either side) and it’s less confusing than the minimizing player. so, though it’s not an ideal, its quick and easy to build and does allow for a decent amount of flexibility.
I was designer and developer for www.blueh20group.com. (actually it’s been live for a while but I was so busy I forgot to brag.)
I built the site using HTML and CSS, and one flash animation on the home page. This flash piece required a bit of actionscript to set the timer function and to fade out each frame before going to the next, even when clicking through in non-sequential order.
One snag I ran into: I wanted to use a serif font (times new roman) on several elements of the page, including the menu. For some reason though, in html this font renders differently than it does in photoshop, at least on a mac. What’s going on here? is there another serif font i should be using?
Anyway, thanks to bluewater communications group for being awesome clients! I’m very happy with the final result. I hope you like it
Filed under: work
I haven’t had time to update my portfolio in a while (and i seem to have misplaced my original FLA file) so I am throwing up this list of additional projects I’ve worked on since January:
- Lifeskool.tv
designed and built entire site using HTML, CSS, and embedded Brightcove player - whudafxup.com
worked with a small team to complete site designs & animations, and designed downloads - tour.thetruth.com
worked with the truth team again, helping with design and timeline animation - rooftop film festival
designed and built page using IFC template and embedded Brightcove player - r.kelly “trapped in the closet”
designed page using provided imagery and embedded Brightcove player - bluewater communications group
designed and developed entire site using HTML, CSS, and Flash - rainbow media networks animation
just a small animation for a booth at a conference, developed using flash and XML
Filed under: work
my design for IFC was grabbed for this NY Times article: http://www.nytimes.com/2007/08/06/business/media/06stream.html. they must like it right?
