HTML5 and Flash

[FlashLackey]

I know where you're coming from. I've never enjoyed the nature of browser-based work. But, remember that other people might enjoy it just as much as you enjoy avoiding it. To each their own.

Besides, more people purposely trying not to work with flash will only drive up demand for us. There is no shortage of flash work that I can detect and a shortage of enthusiastic flash devs only means higher rates for flash work. So, hats off to flash sucks!

[ihoss.com]

I've been playing with the <canvas>, and it is very quick in Chrome, but not as fast in Opera or Firefox (I don't have Safari, so I can't test it there). One of the cool new features is combining <video> and <canvas>, for example adding video to a Wolfenstein clone: WolfenTube (Runs quickly in Chrome, but only displays video in Firefox).

[MyFriendIsATaco]

The "normal" web you're talking about -- the template site with the flash ad banner and God-forbid the flash timeline knicknack garbage around the edges -- is a piece of crap and everyone knows it. So you're talking about work that was outsourced to the Philippines five years ago or more.

So anything that doesn't use Flash isn't a "normal" website? That's absurd. We don't ever use any templates, and I wouldn't classify our work in that category. We build practical websites for businesses. Flash isn't always practical or necessary.

This is all coming from a Flash developer. I'm sure you've seen me stirring up topics in the AS3 forums. I LOVE AS3, the language. I hate the platform for some reason. I wish more languages were as elegant as AS3. Just when it comes down to it, I feel that Flash has it's place in the market and that's it, then there's the rest of the web.

So I'm not giving any biased responses here, I can see things from both sides of the fence. As a company, we develop both "normal" and Flash websites at an extremely high level. So I feel that I'm a decent judge for my clients whether Flash is a good idea or a bad idea. It's not like we'd be talking a client into doing something not in Flash because we're not capable, or vice-versa. I'd rather push them in the direction that is best suited for their needs, and in most cases, that is a site without Flash.

[joshstrike]

So anything that doesn't use Flash isn't a "normal" website?

No -- that wasn't at all what I meant. I mean that when it is deployed on the "normal" web, Flash is usually superfluous at best, distracting and ugly at worst. I confess I find the way it's deployed in ads and widgets alongside unnecessary JS on the FlashKit homepage to be among the more irritating examples of this kind of hodgepodge mess...

My read of "normal", too, might be different from what you meant. I don't think any custom, non-template site is normal in this day and age. The median site -- the "100 IQ" of the web, where most of the information and opinion out there is actually stored -- is the modded wordpress or drupal site or store. I turn away 80% of prospective clients or more these days, because they simply don't need (or don't want to pay for) a bespoke site. A well-executed template will do just fine, and they can get it done for $25 an hour instead of $100. Then there are those cases where a template is not enough, but Flash is unnecessary because the website is informational as opposed to decorative or logic-driven in nature...and in the rare event that one of those involves doing something interesting / socially worthwhile / career advancing / etc., I'll take a swing at it...

But I think this is interesting:

I LOVE AS3, the language. I hate the platform for some reason.

Because I think that there's a very common revulsion to Flash among the general population, and especially among a certain type of coder. (99% of the time, they're the same people who refuse to use Macs. Not sure how or why that is...but what can I say? When I was a 12 year old kid, I coded in hypertalk, pascal and later, perl. Some kids learned C++. Most didn't know how to use a word processor. Maybe I'm just lazy.)
Anyway, I think that attitude toward Flash comes from what's usually implied by Flash, and from its average usage on the normal web. So that's what I was trying to say about "normal". Whereas, I think when Flash is employed, it shouldn't be recognizable as such to the average user. It should just look like a really, really nice and smooth web site.

Check out this site I just finished, for example, which degrades very cleanly. It could have been done with JS, instead of Flash, admittedly; but it would probably have taken twice as many lines of code, and obviously would have had to rely on screen fonts, which was not desirable for a firm whose entire branding rests upon one color and a very carefully selected combination of typefaces:
http://www.vickmanassociates.com

You might think it's absurd to do a site like this in Flash, and 99% of the time I would agree; but for this one, the client wanted a level of typographic precision that could scale and work in ways that just would not have been possible to create evenly across all platforms in JS, at least not by manipulating the DOM. The cost difference for doing it in Flash was negligible, anyway. But I don't think this is what most people associate with "Flash sites" -- I would be surprised if 1 in 5 visitors to the site even thinks about it or realizes it was done with AS3.

[MyFriendIsATaco]

Yeah, to me, that site is unnecessarily done in Flash. It didn't even need Javascript, except for the gallery maybe. I personally don't even like to require Javascript for sites, but I guess that comes from some of the higher standards in the Fortune 500 world. They're picky clients out there. Motorola just recently (within the past year) dropped support for IE5.5. Lots of their stuff can't rely on Javascript or Flash for usability.

For the every day casual site, that usability isn't always a big concern, but when it comes down to the companies that DO care, and understand what screen readers are, and a good chunk of their audience may or may not be using them, working with multi language sites managed from a central CMS. You'll see where it becomes a bit of a headache for Flash. Flash is flexible in it's own way, but HTML is more flexible in it's own way too that Flash will never achieve. They are just different.

(If that brand was so picky on their fonts, you should have made them NOT blurry. )

[MyFriendIsATaco]

Oh, and another thing, you didn't even implement SWFAddress on that site. That alone is a HUGE usability issue. How do you link someone to James Vickman's profile page? You can't without telling someone the story on how to get there. If that was done in HTML or something of the sort, that wouldn't even be an issue.

[joshstrike]

Whoa! Before you get carried away bashing it, I have my own implementation of internal addressing. When google crawls the site, it finds that profile page at:
http://www.vickmanassociates.com/James_A._Vickman
A user with Flash following that link finds that Flash automatically loads directly to the correct subsection. As for rewriting the URL bar with JS... I find it a little bit shady and a lot of users disable that in their security preferences anyway...
Also, the HTML-only and Flash sides of the site are both fed from the same CMS.

As for the fonts being blurry... what kind of monitor / resolution are you looking at them on? They're anti-aliased...but there's no reason they should appear blurry unless your monitor is interpolating half pixels.

In any case, how would you have preserved the fonts in a way where the data was dynamic, without using Flash?

[gerbick]

It's a bit blurry here... 1680x1050 (2) via DVI and my browser window is (outside dimension) 1460x790 in one monitor.

[MyFriendIsATaco]

Rewriting the url bar is not shady, it's using the hash. The #. That isn't shady at all, and whomever told you that is an idiot. I didn't even know it was possible to disable that. It's been a feature of basic HTML since as long as I can remember. It's a spin off of the old <a name="top"></a>, <a href="#top">Go to top!</a> thing. Just a normal hash anchor.

I'm not talking about the search engines crawling for the pages, I'm talking about general users. Or even the site owner sending someone a link to their contact page. If he doesn't keep a list of all the links, it's impossible. He'd have to guess or ask you. Most people when they send a link, they select the address bar and send it, then expect the person they linked to, to be seeing the exact same thing.

As for the fonts, I'm running a 1920x1080 via DVI, so they should be crisp and clear. Are you making sure everything is on whole pixels at all times? Even if it's anti-aliased, it matters. Or it could just be Flash's ****ty font rendering. Sometimes Flash just doesn't like certain fonts. I guarantee that font will look nicer in Photoshop.

And for preserving the typeface... I wouldn't. Look at all the other HTML based sites out there. Everyone uses the standard web safe fonts, and they all look fine and work great. As a web designer, you accommodate for that. There are drop in solutions to make fancy headlines that render with Flash like sIFR, or there are serverside solutions that generate an image representation, or there are even ones that draw to canvas objects on the fly. Either way, they're all drop in. Just configure it, and it works.

[joshstrike]

Right then... I'm glad you guys pointed this out. I guess this looks a lot blurrier on a large screen (PC?) than it does on my 15" macbook.
Since this is by far the most text-heavy flash site I've ever done (which was kind of the point, in a weird way), I'm new to laying a lot of small type in Flash. Aspects of it were a monster to get right...the goal at the outset was to set of re-flowing field classes along the way that could be used in future scenarios.

Anyway, I've set all the fields to advanced antialiasing... I'd appreciate if you guys would take a look now and tell me if that cleans it up substantially on your monitors. I'm not sure if I prefer it or what. On my screen, it looks less letter press now and more like a web page... but if this resolves blur on the majority of monitors, then it's worth it... and obviously, not a lot of macbooks going on in the legal profession...

Thank you both for the feedback...

Taco, I hope we can agree to disagree on the relative merits of these things.

[gerbick]

You might want to set your quality to "best" - take a read

[MyFriendIsATaco]

Fonts look 100% better now. It's actually crisp. I'm on a Mac too, so it's not a PC vs Mac issue here. It's Flash.

And no worries about the disagreeing. Everyone does their own thing. There's a need for Flash developers, I don't deny that. And like I said, I'm a heavy Flash developer, and have been using Flash for literally half of my life, and I don't promote it too heavily unless absolutely necessary.

But hey, if it works for you, awesome. I just have a horrible taste of Flash in my mouth. Gerbs can attest to that.

[gerbick]

Better.

[joshstrike]

Ahh you guys rock. Thank you for the harsh crit. I made a big mistake to take it personally at first glance. I think in fact it made the site much better. Taco, I implemented a little bitty subset of the swfaddress code to get the back button / address bar rewrite working. I do so few sites of this nature...i.e. "multi-page" flash...that the last time I did it, I think it was 2005, there was no solid technique for hacking the back button. I remember my friend JMParsons going off about how he almost had it worked out. But now it's working smooth as silk, and I'm glad I know more about it.

And thanks for drilling me on the anti-aliasing issue. I would not have caught it, and it's obviously a major improvement; the client agrees.

But hey, if it works for you, awesome. I just have a horrible taste of Flash in my mouth. Gerbs can attest to that.

Why, though??? Is it the IDE that's got you down...? I'm only working in Flex these days, except to bundle up little .swc libs... I loathe having to actually launch Flash itself. But I'm in love with the language. Lookit... ******************** -- SNIP (-JS)
...this is my baby in development ...quarter million lines of code and only 478k... is there any other way you could do something like that and have 90% of web users able to access it?

[MyFriendIsATaco]

It's not just the IDE. I only use Flash to compile. It's the actual Flash engine. All of the crappy quirks, crappy performance, bugs, inconsistencies, blah blah blah. Like your issue with fonts. Fonts are just absolutely terrible in Flash. Some font outlines work nicely, others don't. Some break kerning and/or leading. It's just a disaster lots of times. I can't think of any recent mishaps, I've been too busy with other stuff these past few weeks.

For our latest Flash/Ajax/Python mess: http://www.koldcast.tv Nothing on that site is fun or easy. There is still one really strange Flash rendering bug in their player, and I'll give you $50 if you can find what I'm talking about. But it's all the little annoyances like that that irritate me with Flash. Things just... don't work like they should all the time without any real reason.

[joshstrike]

That site definitely does not look like it was fun or easy. It looks like a slog through a lot of hierarchical data that no one really enjoyed...
uhm...not a big fan of the css background changes that are going on while navigating through the flash module. Like, why not have made the flash mod 100% wide and letterbox on the page? There's something odd about the interface being small and centered and in the same place the video will be...like, I imagine someone giving two conflicting directives "the video must be this size, in flash, centered" and "we want the nav to be right over the video"... ah, am I way off here?

Functionally, it works okay for me, but I suspect this is the bug you're talking about...this went nuclear when the load hit apparently as I was mousing out of the video...

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at tv.koldcast.video.views.modules::BasicScreenOverla y/set totalTime()
at tv.koldcast.video.views.modules::NetworkVideoModul e/updatePlayProgress()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at tv.koldcast.media::VideoHTTPMedia/positionInterval()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at SetIntervalTimer/onTimer()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at tv.koldcast.video.views.modules::NetworkVideoModul e/hideOverlays()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at gs::TweenLite/complete()
at gs::TweenLite/render()
at gs::TweenLite$/updateAll()

Btw. I accept paypal, checks and cash... =)

[MyFriendIsATaco]

Actually, no, that's not the error, but I'd be happy if you PM'd me steps to recreate that. The issue is purely a rendering issue that doesn't throw any errors like that.

To recreate the issue I know of, you MUST be on a 1440px wide monitor, viewing a video in full screen, and looking at the post roll menu. There's a gradient stripe at the top of the screen that stretches across. It's a Bitmap stretched with the nice and fancy ScaleBitmap class. Now, between the sizes of like, 1400 and 1500px wide, the Bitmap breaks and disappears. But under 1400 it's fine, and above 1500 it's fine. So it has nothing to do with the width limit of any Bitmap object, because if that were the case, it'd stay broken on even larger sizes. I just need to recreate that gradient with code and scrap the Bitmap. Oh well.

And for the disorganization, we're fully aware. The site is a mess, and we took over after a really terrible development agency built v1. They were originally running on EE, and we're in the long process of porting the entire site over to Python and Django, plus slapping new skin on as we go. It's hard for them to move quickly and just go for a full out redesign because they need to constantly keep pushing new features to keep their investors happy. Without investors, the site doesn't exist, so everyone sucks it up and we work with the mess until it'll eventually be all fixed.

[MyFriendIsATaco]

Oh, and the reason that the CSS background is separate is because the entire front end of the site is run off of SWFAddress. SWFAddress is literally running any and all navigation on the site. They also have several different versions of their player to use in different locations. Different embed codes, and for use on different portions of their site. So basically everything is modularized. I can create a new version of their player by just selecting which modules I want, and recompiling. Done deal. Now the mess comes from everything being run from SWFAddress. All navigation logic, whether it's changing the address bar or not is handled that way. Event dispatches and one central navigation controller. This way it works in every version of their player, regardless of where it's deployed. Then over on the main website, there are SWFAddress events running in Javascript as well to handle all the ad rotations, comment system, the big thumbnail scrollers, etc, etc, etc.

Like I said... a big mess that we're knee deep in porting to an entirely different language.

[joshstrike]

Hm. That error goes ballistic with progress updates every time you've opened one video, then used return-to-guide, then go to another video and start to play it. My guess is it fails to run a destruction function that would dereference the first video's BasicScreenOverlay, and that's still taking events and trying to apply them to a dereferenced graphic within itself. Is the progress evt listener to the overlay weak referenced or explicitly removed?
The swfaddress model makes some sense for this, obviously internal addressing is a huge issue in this kind of thing... but the structure of the change-module feels a little choppy... (no faders or motion =)...and the CSS tend to hit late, which gives it a feeling like the page just reloaded completely... which kind of undermines the whole reason for using swfaddress in the first place, rather than getURL, like youtube does... (?)
I'm wondering if the way those modules are flipped-between isn't also the heart of the problem that's allowing the old videos to stay referenced...

[MyFriendIsATaco]

I'll have to look into that bug. I haven't personally encountered it, which is odd. Maybe it's something new that has surfaced recently in an update.

I'm also in the process of writing a TransitionManager class to handle transitions between scenes. What makes it so hard is the nature of deep linking. You are able to jump to any point, from any point. A simple fade in/out is simple, but we're doing a sliding technique where the page slides to the left and the new one slides in from the right. And the opposite direction for if you navigate "backwards". The harder part is determining if you're navigating forwards or backwards, so there needs to be logic to capture what the last page was, then determine based on that to do the transition. Not that big of a deal, but an after thought in the grand scope of things.

The CSS probably seems like a delay due to the image being loaded on request. So it's not cached, and you're seeing the load time. That'd be the same way in Flash too, unless we implemented some preloading, but that'd be a mess with the scale of things. We can't preload in 50 images.

And trust me, I hate the whole idea of it being done in SWFAddress. I would much rather have their site done with typical pages. But they are extremely firm minded on wanting it all done in Flash and not having page reloads. It's become more and more of a nuisance for accurate statistic tracking. But... whatever. Gotta do what we gotta do.