Fixed

Eventually, by ignoring the misleading example code and forgetting all about the confusing way they explained it, I got my SWF to dynamically resize within the browser window, embedded in html. Ironically, this is what it was doing before I went to the trouble to embed it in the html page in the first place, but if I had not, there would have been no way to be sure that the visitor has the appropriate Flash Player version (see previous post).

Anyway, in case you were wondering, or ever need to know for one of your own projects, here is what I did:

Inside the Flash, do this:
stage.scaleMode = StageScaleMode.SHOW_ALL;

Inside the code generator, choose 100% width and height. Put this in the style tags inside the head.

HTML, BODY, DIV { width:100%; height:100%; margin:0px; padding:0px; border:none; overflow:hidden}


And you're done!

Finishing touches

Immediately after beginning to show Micro/Macro to a lot of different people, some issues came to light. As a perfectionist, each issue freaked me out substantially, but most of them I've been able to move through. But sometimes the solution only creates new problems, and it’s hard to tell whether it was worse before I “fixed” the problem, or if it’s worse now! It seems like there will be no end to these last-minute details.

Admittedly, some of them are relatively minor. For example, a couple of people mentioned that it was hard to roll over the smaller structures in the “Organelles” tab to see the molecular structure, such as the ribosomes. This is true, because the ribosomes are around 20 nm, which equates to about a 1/16 of a centimeter on the screen. They way I’d written the code used the Movie Clip as the rollover (rather than having it be a button with a hit state), so what I did was to add a larger square over each ribosome to increase the area that could be rolled over. Then I made the larger square transparent, so that it would be invisible in the final published version.

However, the worst problem was (and still is) the issue of embedding the SWF in an HTML page. Before doing this, the SWF was accessible on its own as a “shockwave object,” by following a link from my website, or the user could go directly to it. The problem with this was that if the user had a previous version of Flash Player than 9, it would not read Actionscript 3.0, and while the timeline would play, all scripts would be ignored. The result was a terrible jumble of looping, zooming, flashing drawings and tables. Yikes! So, clearly it was necessary to embed it in an html page that could detect the user’s version of Flash Player, and if it’s lower than 9, provide alternative content and a link to upgrade the version or download it if no flash player is present at all.

And this I did, using the swfobject code generator and download of a javascript file. Easy! Finally, something that is straight-forward and painless. Or so I thought.

But, then people started complaining about having to scroll up and down to access all of the necessary navigational buttons. This is a big problem. The first thing we learned about web design is to avoid making users scroll; personally, I hate having to scroll. Because there is no way to be able to predict how large every potential user’s browser window will be, I wanted to make the SWF resize in such a way that it will always be 100% visible regardless of the size, and maintain its aspect ratio (not to stretch/distort).

There are options that look like they would do that inside of the code generator at the swfobject site, but including them had no effect on my resulting html page. There were a few hints that something would have to be modified from within the FLA, so I found out the parameter for this (SHOW_ALL), and added it. And having added this condition to the FLA, it worked in Safari, after I changed the dimensions I was entering from actual pixel size to 100% for both width and height. But this caused Firefox to display nothing, just background color.

Obviously, not all users will be using Safari. In fact, only 3% of users are, while Firefox has about 46% and various versions of Internet Explorer have about 43%. I was kinda neutral on Safari as a browser before, but now it’s my favorite because it’s the only one that will listen to a damn thing I say. But not so with Firefox, and I don’t even know what would happen with Internet Explorer, because they don’t make a version for Mac OSX, which is my operating system. Looking for these statistics, I discovered a new browser I hadn’t even heard of, called Chrome (from Google—I’d probably like it actually). Will it display my content? Will the content resize under the conditions I have? I will be finding out, I guess!

Anyway, I read all of the FAq’s, and I couldn’t find the answer to the resizing issues I was having. I went to the “discussion” tab to ask about it, and they told me to get lost.
“What you want to do involves a combination of HTML parameters (whether you
are using SWFObject or not) and internal flash methods. I would suggest that
a general Flash forum / online tutorials would be your best FIRST point of
call on getting your swf to behave as you want, and then we can help if
there are specific HTML parameters / issues you are having embedding your
flash file on your page with SWFObject (e.g. Firefox requiring extra CSS to
display 100% sized flash files).

Respectfully, we try to keep these lists very narrow to deal with issue just
centred around SWFObject issues and bugs, and you will find more available
help elsewhere for general flash questions.

Kind regards,”
(-name omitted-)

I know he wasn't trying to be a jerk, but I don’t understand why he didn’t think I was asking about “specific HTML parameters / issues you are having embedding your flash file on your page with SWFObject (e.g. Firefox requiring extra CSS to display 100% sized flash files).” They said that they “can help” with those issues. Here’s what I asked:

“Which scale parameter should I choose? I thought that "showall" sounded like it would work, but it doesn't seem to be doing anything, because adding it has no effect. I am testing in FF and Safari.”

Clearly they don’t understand that my presentation is in a matter of days. Clearly, stating upfront that I didn’t have much development experience was a mistake. Take home message: never give anyone any reason to doubt you.

The Protein Data Bank for medical illustrators.

Proteins: they have an unbelievable range of functions, and each function relates directly to their shape and size. The Protein Data Bank provides extensive information about the structure. But what about the size? This blog entry will address one of the features provided by the PDB for visualizing proteins, and show you can use it to get the size info.

Let’s start with a molecule that may be familiar: kinesin. Kinesin is a protein that “walks” along microtubules, carrying vesicles and other organelles along with it. It is a dimer with two globular heads that bind to the tubulin subunits, each with a neck linker that catalyzes ATP, and a long helical chain with an organelle-binding domain at the top. The molecule is about 30 nm tall altogether (I read most of that in this book: Bittar, E. E. (1991). Structural biology (1st ed.). London, England: JAI Press LTD; some of it was told to me in a cell biology class here at UIC).

The PDB can be accessed at http://www.pdb.org . Going to “advanced search” and entering the word Kinesin, with the query type “molecule name” yields 23 structure hits. The PDB tends to break complicated molecules like kinesin down into their functional subunits, and I was not able to find a crystal structure for the entire kinesin molecule. Additionally, confusion can arise from the availability of mutated structures to view. So, use caution in selecting which entry to use as a reference. The abstract from the original article is linked to the PDB, so if you’re not sure about the structure, read that for more information.

I chose the structure “2kin” which is the structure of part of a monomer of rat kinesin. It is the neck and globular head domain. Jmol: takes you a page with an embedded JAVA applet. The molecule, by default, is shown with the ribbon model. This model can be rotated by dragging with the left mouse button. The mouse wheel enables zooming in and out; hovering reveals a text box telling you which amino acid residue you are hovering over.

Now for the exciting part: the right-click functions. There are many features here, and I’m just going to go over the ones that, at first glance, seem most useful to the scientific artist community. One of these menu items is Save with the option to create a JPEG or PNG, or – 3 D modelers, take notice—a VRML or Maya 3D model. I haven’t yet tried bringing either of these into 3DS Max or Maya, but it may prove to be fast and convenient.

As for size info, this can be obtained pretty painlessly. Here’s how: right-click, go to Measurements > Distance units nanometers. Then, right-click and choose “Click for distance measurement.” You can still left-click and drag to rotate. Once you pick the dimension you want to measure, just click once at one location, and again at the other location. A dashed line will be drawn from the first point to the second, and the distance between them will be displayed in white text, in nanometers. (The nanometer is the unit of choice for me, when talking about protein dimensions like these. The Angstrom is something of an out-dated term, and picometers will usually be quite a high number because they are very small units, at 10^-12.) In this case, measuring two points at the widest part of the globular subunit reveals that it is 6.4 nm wide. Easy, right?

And now for the weird part: right click and choose Style>Stereographic>Cross Eyed Viewing. This splits the image into two views, and I kid you not, if you cross your eyes and play around with the distance your head is away from your monitor, you will see a 3D image, that can be rotated by clicking and dragging. It’s kinda like those Magic Eye posters from the 90’s, only with those I know you were supposed to look “through” them. Good times.

I hope this entry has given you a useful tool for your workflow; I know it will fit right in to mine.