Progressive Enhancement with Flash
One of the main tenets of good Web design is the principle of progressive enhancement. In general, the idea goes like this: make sure the user can access a web site’s essential content regardless of browser. It shouldn’t matter whether the user visits your site with Internet Explorer, Firefox, Safari, Netscape, or pick your favorite flavor. In fact, the site’s content should be accessible even without JavaScript or peripheral plugins like Flash Player. Once the basics are covered, use CSS to enhance the visual design. Then, and only then, introduce the whizz-bang stuff — nifty rollovers, AJAX interactivity, Flash — and do it in a way that doesn’t penalize users who don’t have (or choose to disable) the needed machinery.
Sound pretty neat? I’ve seen a few examples of this online and at conferences, so I delved into this topic myself to see how much fun it might be. Turns out it can be somewhat challenging, but definitely fun to see the results. I put together an example in order to explore the basic mechanics of this form of progressive enhancement — a slideshow SWF that takes its cue from the HTML in which it appears — and turned it into a three-part series on CommunityMX.com. The first part is free and covers how to get the HTML from the Web page itself into the SWF. The follow-up articles go into how to parse that HTML in AS2 and AS3. CommunityMX offers free trial memberships, so if you aren’t interested in becoming a subscriber, you can wait until the follow-up that interests you gets posted (not sure yet when that will be), then sign up for the trial membership. Of course, if you want to subscribe, that would be cool too!
March 3rd, 2008 at 12:12 am
// I am a designer and NOT a programmer. Forgive me for my lack of knowledge. My problem is. I am playing my flash file loacally. So the SWF file and FLV file will be in a folder on my desktop. I had on script working, but because it’s not linked to my local path, the video skips and repeats during playback. I guess it’s streaming…
The second path works great with the local path set, but does not goto my label. It just stops at the end of the movie. I would apreciate any help. Thanks.
//This is the script that worked, but the video plays horrible
var nc:NetConnection = new NetConnection();
nc.connect(null);
var my_ns:NetStream = new NetStream(nc);
vidPlayer.attachVideo(my_ns);
my_ns.play(”Jordan_Sparks_snipit.flv”);
this.onEnterFrame = function() {
if (my_ns.time >= 15) {
gotoAndPlay(”video_out”);
delete this.onEnterFrame;
// This script works great but does not goto my label
var nc:NetConnection = new NetConnection();
nc.connect(null);
var my_ns:NetStream = new NetStream(nc);
vidPlayer.attachVideo(my_ns);
my_ns.play(”test_flv/Jordan_Sparks_snipit.flv”);
this.onEnterFrame = function() {
if (my_ns.time >= 15) {
gotoAndPlay(”video_out”);
delete this.onEnterFrame;
March 3rd, 2008 at 8:47 am
Kelly,
Well, from what I’m seeing, your two blocks of code are nearly identical. The only change, in fact, is the location of the FLV file, as specified as the parameter of the
NetStream.play()method. If your video looks better when played as a result of the second block, it suggests to me that you have two FLV files, and that the FLV located in the test_flv folder is encoded for better playback.The result of your
MovieClip.onEnterFrameevent handler is the same in both cases: both send the playhead to a frame with the label “video_out” … have you double-checked that you have a frame with that label in the timeline that contains this code?Are you using this technique within a scenario of progressive enhancement? I ask, because this blog entry is about progressive enhancement, and other readers might be confused by the topic of your questions. (Maybe you were thinking progressive download, where video or some other file loads progressively, versus streaming?)
March 3rd, 2008 at 12:33 pm
Sorry, I didn’t mean for this to be part of the “Progressive Enhancement with Flash”.
Answer to your last response. The video is the exact same file in each example i gave. When I shut off auto play (in the parameters) the video does not play.
these are the three conditions I am using.
1. ns.play(”Jordin Sparks - No Air.flv”); with auto play on
Result is duel sound “underwater sound” and it loops correctly
2. ns.play(”Jordin Sparks - No Air.flv”); with auto play off
Result is that video does not play, but hear audio and it loops
correctly
3. ns.play(”file://Jordin Sparks - No Air.flv”); with auto play on
Result is that video plays great but does not go to video_out
which does work for #2 condition.
Thanks for reponding so quick!!
March 6th, 2008 at 9:31 am
Kelly,
Your code is showing the use of
NetConnectionandNetStream, but you’re also mentioning the Parameters tab, which tells me you’re using the FLVPlayback component. These are two distinct mechanisms for displaying video, which almost certainly explains why you’re hearing doubled-up audio. If you’re using FLVPlayback, you don’t need to use any ActionScript at all, unless you want to loop — and if so, then you only need to handle theFLVPlayback.completeevent. Does that make sense?