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!!
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.
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.
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!?
its not *quite* finished (still want to add some more content to it) but its at a good place now for me to put it out there before i leave for south by southwest.
some details you may find mildly interesting:
- contains over 700 lines of code, though a more efficient programmer probably could’ve done it in much less
- rss reader dynamically grabs headlines from this blog
- projects and info are all stored in a separate XML file (which I will use to create a text-only version eventually)
- full page flash positions content with respect to browser dimensions
- executes the MovieClipLoader class to preload the image files
- uses the tween class to move the bottom content up and down, but timeline animation for the heart transition
i have the tendency to hate my portfolio designs after about a month. let’s see if this one stands the test of time.
a lot of very cool-looking sites are using video as a background to their page (arne-carlos.com for example), and luckily it turns out it’s not that hard to implement.
first you want to set up your flash movie to be full screen using Stage.scaleMode = “noScale” (check out my earlier post on this topic here). then, you want to set up your FLV code to have it “stream”, which I don’t understand too well but I just copy and paste the following code. note that if you add the smoothing = true, the video will look a bit better when it’s scaled up.
var nc:NetConnection = new NetConnection ();
nc.connect (null);
var ns:NetStream = new NetStream (nc);
holder.vid.attachVideo (ns);
holder.vid.smoothing = true;
ns.play ("videoName.flv");
now you gotta make sure that your video is scaling with the browser window, but not distorting (unless, of course, you want to be a rebel). to do this you just gotta call a function whenever the browser is resized, and set the width and height proportionately, like this one:
function onResize (){
var scaleY:Number = Math.round (100 * (Stage.height)
/ holder.vid._height);
var scaleX:Number = Math.round (100 * (Stage.width)
/ holder.vid._width);
var scaleFactor:Number = Math.max (scaleY, scaleX);
holder._xscale = holder._yscale = scaleFactor;
}
that pretty much takes care of it. if you want some more detail and an example with code you can download, check out the awesome lessrain blog.
i want to load text from an XML file, have the text fade in with the rest of the page (currently achieved through a timeline animation), and have customized scrollbars. is this possible? i seem to be running into a variety of issues.
UPDATE: I figured it out! Turns out you have to have it nested in *2* movie clips (creating the tween fade in the grandparent mc) AND make sure you are embedding the font as well.
apparently if you have more than one getURL() command attached to an object, IE executes only one of them. and it’s apparently random too. super.
i made my preloader count down from 10 like a shuttle liftoff. i think its pretty nifty, so i thought i’d share…
this.onEnterFrame = function() {
var amount:Number = this.getBytesLoaded()
/ this.getBytesTotal() *100;
loader._xscale = amount;
loadText.text = 10 - Math.floor(Math.round(amount)/10);
if(amount == 100) {
this.gotoAndPlay(3);
delete this.onEnterFrame;
}
}
make sure “export in first frame” is UNCHECKED for all symbols with a linkage id.

this issue drove me batty for an hour, because it was the same frickin preloader that i’ve used several times before (from www.gotoandlearn.com). i should’ve just hunted on the internet more vigorously in the first place, because once i searched google for “preloader not appearing” i found the culprit in the actionscript.org forums
The Man is trying to bring me down. yeah. anywho, some links i found interesting… may later be useful, if i ever finish this damn portfolio and get some time to play around a bit…
ape – actionscript physics engine
many (or all, i cant remember) of these links coming from here: open source flash
thanks again to felix, i made some progress on this. i was attaching different movies for each section to an empty movie clip, but he suggested that i instead put each section in the same movie clip and label the frames appropriately.
function loadSection(id):Void{
container.gotoAndPlay(currId + "_out");
currId = id;
}
function outAnimDone():Void{
container.gotoAndPlay(currId + "_in");
}
// .....
logo.b1.onPress = function(){
loadSection(1);
}
make sure that on the last frame of your “out” animation you have the following code IN THIS ORDER (if you put stop(); after the function call, the gotoAndPlay will gotoAndStop
).
stop(); _root.outAnimDone();
kirupa.com – transitions between external swfs
is a great article, but i want to transition between internal movie clips. i’m using attachMovie() but I can’t quite wrap my head around the logic of a button action calling a function which plays an outro and then calls another function which goes to the next section. maybe i just need to sleep on it.
i have been having a lot of issues with my tween object animations. things jumping around weirdly in cases where animations overlapped. today, the amazing Felix came to my rescue yet again and took a quick look at my code. he suggested a more efficient solution to what i had, which was creating a new tween object for movement on rollover and then another new one on rollout. that, mixed with an attempt at using ColorFX to tween the color was getting super buggy.
// create tween object, tell it to go no where
var bTweenX:Tween = new Tween(button, "_x",
Back.easeOut, xStart, xStart, 1);
//create color object
var bColor:ColorFX = new ColorFX(button.buttonText);
//button actions
button.onRollOver = function(){
bTweenX.continueTo(xEnd,tweenLength);
bColor.tint(232,184,105,100);
}
button.onRollOut = function(){
bTweenX.continueTo(xStart,tweenLength);
bColor.tint(188,93,20,100);
}
i had a great chat with one of our esteemed developers, the awesome crystal, at brightcove today. she suggested i buy the Essential Actionscript 2.0 so i did:
links she suggested:
macromedia xml news aggregator
fullasagoog
also she offered to take me to a meeting of BFPUG later this month. why did i not know about this before??
i’m giddy!! after watching the finding and using custom classes tutorial at gotoandlearn, i went and downloaded this swf decompiler. I WISH I HAD THIS BACK IN HIGH SCHOOL!! i wanted to learn flash so badly 7 years ago, and i just didn’t have the right resources or tools. man, if i had the ability to decompile swfs back then, i may have become as good at flash as i am at html.
everyone’s gone, theres nothing to do, its the day before my 10 day vacation…
i spent my afternoon here gotoandlearn. holy crap its so awesome. every topic is something i want to learn and use on my site! i have a feeling the “using custom classes” and “drag slide fade 2” tutorials will be particularly useful.
i must do this. i want a beautiful texture to take up the whole page, and flow with the size of the user’s monitor.
i asked Mel if she knew how to do this, she pointed me to these references:
david stiller’s blog
mm livedocs
Stage.scaleMode = "noScale";
Stage.align = "TL";
var stageListener:Object = new Object ();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent():Void {
//set clip coordinates
}
positionContent();



