Journal
Em Flash Sizing
16 December 2005 › 16 comments
Snazzy Scalability
Demo: See Example Here (View Source)
In the comments on my previous article about Em Image Sizing, it was noted that while that method works just fine, it makes images somewhat jagged and pixelated when sizing text up or down. In the comments, it was mentioned that styling Flash dimensions in Ems with CSS is also possible. I took a look at the tutorial, which was in German, and came up with a little bit easier way of doing it, without the necessity of adding a class to the object tag, or specifying dimensions on a fall-back image:
<object type="application/x-shockwave-flash" data="seattle.swf">
<param name="movie" value="seattle.swf" />
<param name="menu" value="false" />
<img src="seattle.jpg" alt="Seattle Skyline" />
</object>
So, this allows for some really lean mean XHTML code, which works in all browsers and is completely valid. The object tag can be styled directly, as can the image within it. Due to the great compression of Flash, the SWF file is only 53kb, whereas the image itself is 65kb. It defies logic, yet it somehow is a lighter download by using Flash than without. Here is the example CSS:
body { font-size: 62.5%; }img { height: 30em; width: 75em; }object { height: 30em; width: 75em; }
That’s pretty much all that’s required. The rest of the text and CSS in the example are simply there to make the demonstration a bit more presentable. If this were being done on a larger scale site, you would of course want to use descendant selectors to specify exactly which images or objects you are referring to. I am not sure about the overall practicality, but I could see this having huge implications for sIFR being implimented more seamlessly.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Lea
Nathan, this is great. Much better than the previous method in that there is a fallback image, and for people who do increase the image, the scaling isn’t as harsh. Good work!
#2 Nathan Smith
Yeah, and the nice thing is, even the fall-back image can be scaled via CSS too, so there’s really no drawback and nobody misses out. And, I’m not sure how Macromedia did it, but the Flash file is actually about 10kb smaller than the real JPG that I embedded in the SWF! Gotta love that, a win-win situation.
#3 david
HO HO, you got it. I have been ‘flashing’ for a while and always new flash had a great resizing engine and file size renderer. this needs to get in the hads of Shaun Inman or MIke Davidson. I’m pretty sure there is something really simple that can be done to sifr in this vein to help that methods scaling.
what i want to find out though is how to do this without haveing tohave flash. or rather being able to download a source from somewhere and having it pull in the image specified in a certain area. that way it WOULD be practical to use this method because you could use it anywhere on a page.
I have created image galleries that dynamically pull in images in flash but you have to code and call the images from inside flash. I know you ca, but have never experimented with seting outside variables that are passed to flash telling it what info to pull into itself. maybe a combo of php/java and flash.
my theory: inside a flash file AS(action script)
flash_movie.sendAndLoad(this_page.php, flash_movie ,GET)
flash_movie.loadMovie(“variable_from_GET_Method”+”.jpg”)
then on this_page.php:
if(isset($_GET[‘flash_said_give_me_image_name’]{
$variable_from_GET_Method=”seattle.jpg”
}
there has to be a way of doing that. then anyone else would merely have to have the flash file and code in the image targets in the php without having to open flash at all. Again im not sure of the practicality of this but it would enable people to do this without too much work. I’ll snoop arround and see what i can come up with. Man Nathan, now you got me doing work :)
#4 Wesley Walser
SIFr for images David?
Albeit not quite as useful.
Nice article Nathan, good follow up on the previous post.
#5 david
no, Wesley, not image replacement for images, that doesn’t make any sense. following the previous article we are tring to figure out how to use flash for a practical use in scaling images with the text.
my point is only a possible demonstration of how to create a single flash file that could be used throughout the page and call different images, without the person ( much like sifr ) having to go into flash and code anything. using flash’s ablity to communicate with the server and a server or client side script like php/java. I know it can be done. we(or I) where just thinking out loud. sry if i confused the points.
man i should really reread my post before submitting. I am not a fool guys. my previous post i said ‘new’ instead of ‘knew’
#6 david
http://blog.deconcept.com/flashobject/
lol this was in a forum i was talking in. knew i wasnt crazy. take a read through that article especially this.
script type=”text/javascript”
var fo = new FlashObject(“movie.swf”, “mymovie”, “200”, “100”, “7”, ”#336699”);
fo.addVariable(“variable1”, getQueryParamValue(“variable1”));
fo.addVariable(“variable2”, getQueryParamValue(“variable2”));
fo.write(“flashcontent”);
/script
again i removed the brackets so it could be shown here.
now theoretically the lines “fo.addVariable(“variable1”, getQueryParamValue(“variable1”));” could be the variable name of an image to load into the flash movie!!!
#7 Allan White
Very interesting approach. I like FO and sIFR, and the demo for this technique performs so well! Snappy. It would indeed be nice to see a comprehensive approach for using these techniques together.
David, I think your technique would be useful – but only for Really Important Images. Without multiple image versions laying around, it’d be too much work (IMHO) to justify the benefit. Still, for, say, homepage images, I could see it being useful.
BTW authors: great to see quality design and discussion coming from Christians – thank you and keep it up.
#8 Nathan Smith
Allan: I agree, the practicality and usefulness of this might be a bit limited, simply because of the amount of work necessary for every single image – both SWF and fall-back JPG. I just thought I’d throw it out there, so people could make use of it if they wanted to. Thanks for the compliment about Christian discussion. I just try to do the best with what God’s given me. Yet, when looking at résumés and client lists like yours, I feel a bit intimidated!
#9 Kyle Talbott
Nate: Your thoroughness could not go w/o notice, and compliment.
When pulling from a db, wouldn’t it be just as easy to use PC-DTR* to get the image? I’m just thinking off the cuff, as I am sketching my new site designs off the clock…
*http://www.artypapers.com/csshelppile/pcdtr/
#10 Nathan Smith
Kyle: You’re right. For text image replacement, PC-DTR would be better. My reasoning for experimenting with Flash image sizing in Ems wouldn’t be so much for nice fonts. Is is mainly to be used for scaling up images with less pixelation. This was a drawback of the previous method I had tried. A possible situation in which it might be helpful would be a presentation to people who are visually impaired, yet not blind, necessitating a zoom layout.
#11 Kyle Talbott
If I could have expounded on my comment I would have, but instead, I sat on it to see the response.
Nathan, I actually think that it would be a great solution for scalable type. I’m going to tool with it, but I’d rather have the pro’s do it up right with a new, scaleable version of sIFR. I’ve got some beautiful type that I’d like to see scale nicely.
If I get anything clean and lean (eg. as clean as the code in sIFR) then I’ll flaunt the wares, in the interim, it will probably look like Torsten’s solution.
#12 Nathan Smith
Kyle: Cool, sounds like a plan. Let me know if you expand on the Flash’ems implimentation further. The concept seems like a good one. Now we just have to figure out how to impliment external control over text, so that owning Flash is not a requirement for using the technique. Possibly: Flash / JavaScript Kit?
#13 Mark Wubben
Hi Nathan, thanks for posting this. A problem with this technique might be dealing with word-wrapping, but I’ll look at it when I start experimenting withh the Flash code for sIFR 3.
#14 Nathan Smith
Mark: Good point. Stretching text vertically or horizontally without the other aspect following suit would make for some very ugly typography indeed. I am looking foward to seeing what you guys cook up in sIFR version 3.
#15 Torsten
Nathan: thanks for mentioning me in your example. it’s great how much interest our em-flash-scaling-technique aroused.
i did the first examples of my version over a year ago and was satisfied, when it worked. so i didn’t developed it further. the rest of site had to be done …
i like the idea of implementing it in future versions of sIFR. i’m looking forward to see the new version.
#16 Nathan Smith
Torsten: You’re welcome. I wanted to make sure I gave proper credit where it was due. I am also surprised how much interest this has generated, especially since it landed on CSS Beauty. I am also curious to see how it affects sIFR.