9 ms·

Nissan Leaf

352 points by dools 16y ago

ziadbc 16y ago
Anybody have an idea on how this was done? Javascript by hand?
- eli_s 16y ago
  svg. doc is similar to html (nodes in a tree structure) and it can be scripted(js). Animation scripted by hand or using an external lib like jq.
- cookiecaper 16y ago
  As above, it uses the Raphael JavaScript drawing and animation library.
jtchang 16y ago
There is a desc tag: <desc>Created with Raphaël</desc> http://raphaeljs.com/reference.html http://raphaeljs.com/reference.html Awesome stuff.
- SeanLuke 16y ago
  What's this then? http://www.nissanusa.com/leaf-electric-car/js/js.swf__v2.0.22.gz.js http://www.nissanusa.com/leaf-electric-car/js/js.swf__v2.0.2...
  - buster 16y ago
    Most probably they will have a Flash fallback. Didn't try the page in IE6 though..
  - gigantor 16y ago
    It's their original flash swf interface, emulated in javascript/canvas using the Raphael library
  - kristianp 16y ago
    Maybe they made it in flash, but use javascript to run the .swf file?
Johngibb 16y ago
Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;)
- InclinedPlane 16y ago
  Baby steps.
- trustfundbaby 16y ago
  You've got to convince the masses, that you can do Flash ... without flash first, before you can get them to stop using flash.
  - gloob 16y ago
    As soon as the masses decide that HTML5 = "Flash, but better", everything that is bad about Flash will rapidly become everything that's bad about HTML5. Changing the underlying technology will not change the people who use it.
    - th55 16y ago
      this is so true.
    - ringm 16y ago
      It will be worse. This stuff can't be contained with simple tools like Flashblock. Unless you want to block all Javascript by default, which will probably break 99% websites in the near future.
    - yuhong 16y ago
      At least people can do view source this time, though obfuscated JavaScript can be a pain.
- gcb 16y ago
  > Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;) Don't be silly! everyone wants faster horses! EVERYONE!
mixmax 16y ago
Well it appears that at least the linked site does need flash. If you click on features and specifications the embedded video is flash (firefox 3.6) So not quite true.
- nika 16y ago
  Give it a second and it replaces it with a javascript site. I have click to flash set up and before I could click, it replaced.
  - mixmax 16y ago
    Doesn't happen for me for some reason. It keeps on being flash.
- thristian 16y ago
  I assumed it was a <video/> element that Firefox wouldn't render because it used H.264 video, but no... it's an ordinary Flash video. How odd.
  - nitrogen 16y ago
    It seemed to play without Flash in Chrome 10.0.648.82 on Linux.
- Samuel_Michon 16y ago
  I use Firefox 3.6 on Win7 and I don't have a Flash plug-in installed. When navigating to one of the pages that contains video, FF prompts me to open or save a h.264 file with a .mp4 extension.
wmwong 16y ago
This is awesome. I was expecting to see HTML5 and was surprised when it wasn't. The doctype is strict and a lot of the interface uses JavaScript. The center navigations use svg and Raphael[1]. Either way, this is pretty sweet. And so is the car. [1] http://raphaeljs.com/ http://raphaeljs.com/
ThomPete 16y ago
Until it's possible to do audiotool.com you are not even close to be able to replace flash
- pacomerh 16y ago
  Absolutely, Audiotool is amazing. I really like what they did with the nissan site, but you can still see that it doesn't flow as smooth as flash.
- TeHCrAzY 16y ago
  The only thing you (likely) cant achieve with plain old html + javascript there is if the Flash is actually editing the audio itself (and is not just getting a server to do it). I don't think thats a very common requirement: there are other, much more straight forward barriers to replacing flash with html + js, such as lack of dev/designer skills (ie. number of people whom can do that in flash vs whom can do it in html + js).
- catshirt 16y ago
  ambitious but not impossible
  - ThomPete 16y ago
    It is impossible since you can't sync the sound properly
nika 16y ago
I'm glad to see this. I for one am looking forward to the day when javascript is at the point where it offers a level of programing ease for animations, etc, that you get with flash. (It may have happened already, last time I did lingo programming it was called lingo, and I am not conversant with the state of the art in javascript.) Or it seems that CSS is supporting animations and maybe that is a better choice over javascript? (because the browser, I presume, can optimize CSS a lot easier than javascript which can have arbitrary functionality.)
- cookiecaper 16y ago
  Flash is here to stay until someone creates a designer-oriented HTML5/JS/SVG IDE analogous to Adobe's designer-oriented Flash/AS IDE. Even after that point, it'll be a while before we see Flash head out the door. There's a lot that HTML5 doesn't address yet.
  - varaon 16y ago
    "Someone" might be Adobe: http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/ http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-p...
    - Raphael_Amiard 16y ago
      I think it would be a dream for adobe, to be able to discharge themselves of maintaining their player on multiple architectures on browser makers.
      - cookiecaper 16y ago
        Agreed. Adobe doesn't make much money off of the Flash Player, just the Flash IDE, so they'd be thrilled if they could offload Flash Player's functionality and the horrible reputation it gives them and just focus on creating a good IDE.
ck2 16y ago
Hmm flashblock is triggered for some reason but works anyway. Those menus are rather distracting and complicated for an average consumer site. ps. OT but the "Leaf" is not available in green ???
- Klonoar 16y ago
  Flashblock might be triggered due to SoundManager 2. Which is funny, considering in many cases it's probably Flash handling the audio for this, and thus the title is inaccurate.
- seanalltogether 16y ago
  http://www.nissanusa.com/ev/media/flash/soundmanager/soundmanager2_flash9.swf http://www.nissanusa.com/ev/media/flash/soundmanager/soundma...
daniel02216 16y ago
Their feedback form doesn't work in Safari. The site feels like a Flash site, but doesn't use flash, which is nice! It also works on my iPad. The 360 is a bit slow but it's there.
Skroob 16y ago
Nice and all, but the scroll bars don't work on the iPad, nor is there a way to scroll the tag list on the left. A step in the right direction though.
citricsquid 16y ago
I don't understand how we've gone from "Flash is crap for entire websites" (edit: which is almost always true) to "Flash is the devil in every situation". It has its place, Javascript will never and shouldn't try and "kill" Flash, they're different.
- wladimir 16y ago
  Well, to me it's good news, the web will be a lot snappier when it's fully integrated. No more clunky plugins. No matter what Adobe says, the Flash plugin still manages to crash a lot here, increases memory usage, and loads the CPU like crazy. There are certainly a few corner cases left in which flash remains a better fit, but it's losing territory, fast. Good work Nissan.
  - prawn 16y ago
    I'm no Flash apologist, but there was recently a HN thread about CSS-only drop shadows. Many people on fairly modern laptops reported significant slowdowns when it came to scrolling the page, animations, etc. And that was just with drop shadows. That Nissan example ran pretty clunkily on my laptop and another desktop I checked in the office. (That said, gradient transparencies always seem to doom Flash pieces to slow-hell for me.)
    - wladimir 16y ago
      True -- I didn't say flash is completely useless, just that it's losing territory. There is no structural reason why pure browser rendering should be slower, but indeed some tricks are still slow. Anyway, the quip with rendering performance is only a matter of time. With every browser release, CSS and HTML rendering performance is increased, for example, by leveraging GPU acceleration. Flash will be beaten soon, I'm sure. And at least that works for every platform, not just the ones on which Adobe decides it's important.
      - prawn 16y ago
        Platforms Adobe decides are important vs modern or whatever subset of non-MS browsers are capable of handling what you want to do... I've had a bad day dealing with HTML email newsletters so I'm probably a bit more pessimistic about it than usual, but all sides of working on the web are a serious pain in the arse!
soljin2000 16y ago
Unless ... You want to record video or audio from a user. Or run more than 5 fps in IE7 (about 25% of our users). Everyone says flash is a piece of crap but you can see from stuff like boxcar2d.com that can run for days without crashing or leaking. It's about how it's coded. There are tons of poorly programmed flashes out there but that doesn't make Flash bad. Flash has been abused but it's not the devil. far from it.
- soljin2000 16y ago
  PS the links for the video or any of the others around the car don't work.
noibl 16y ago
If by 'we' you mean Nissan, well... great. Counterexample: http://blog.phono.com/2011/02/17/how-to-build-a-voip-based-baby-monitor/ http://blog.phono.com/2011/02/17/how-to-build-a-voip-based-b... (browser-based VOIP, Flash under the hood) Bizarrely, Chrome has support for speech input on text-based forms which translates microphone input to text on their servers, but it doesn't expose direct access to the audio. Argh!
juddlyon 16y ago
Impressive, to be sure. But terms like "anything" and "ever" are hyperbolic. Flash isn't going anywhere for years.
- dools 16y ago
  Yes, unabashed, brazen hyperbole to be sure. Good headline though, I thought. The thing that really struck me the most about this is that as little as 2 years ago there would have been absolutely no chance of deploying a huge brand interactive experience without Flash. This is the first time I've seen a site that I thought was obviously Flash only to right-click and not see "Zoom in". I was pretty gobsmacked.
buro9 16y ago
There is some flash on there (a video, under Specs > Features & Specs), but this is still a very impressive demonstration of how little it is actually required to achieve these kinds of effect.
pero 16y ago
Anyone know which agency did this?
- deleted 16y ago
  [deleted]
- joelwan 16y ago
  Critical Mass
- timsco 16y ago
  Critical Mass, I believe.
deleted 16y ago
[deleted]
- deleted 16y ago
  [deleted]
gcb 16y ago
it probably took the team 10x the time to do that this way instead of flash. it will not work on 100% of the devices. but at least they got some clicks from us that they wouldn't otherway. Continuing with this rationale: if done in flash, it would have take the team 10x the time to that instead of plain html. or 200x the time if done in a simpler html format, like a wikipedia article. it would work on 100% of the devices... you would be able to use back/forward buttons, you would be able to translate on google translator and still see the site... wouldn't use all the cpu... it would load instantly for the user (well, it would be loading the rest bellow the fold while the user was reading/looking at the top part)... it would hopefully play well with screenreaders... i would still be able to use the left menu even after increasing font size... but you wouldn't have buttons that jump around.
- gcb 16y ago
  bottom line is: if the product was good, those kind of sites would not be necessary. the facts to support that are all the posts here in HN talking about A/B testing on landing pages. What gives more conversions, to good products? flashy shiny things, or to the point information about the advantages and simple call to action?
  - cellis 16y ago
    Big Brand Corps don't sell direct. They sell a brand. Selling a brand means doing this thing called "branding", which usually involves multimedia (video, sound and graphic effects).
    - gcb 16y ago
      Only because it's more efficient to sell a brand than it is to sell quality.
      - cellis 16y ago
        Actually... (heh) The brand is the quality. Branding is just reminding you of the quality.
deleted 16y ago
[deleted]
yarone 16y ago
On this site, the browser "back" button doesn't always behave as expected. Ex: Go there. Click Back. Doesn't go back. Chrome 9.
elboru 16y ago
We'll need flash until we have a GOOD IDE for those technologies...
- thenduks 16y ago
  zsh + vim?
- timsco 16y ago
  This is the biggest factor in Flash going away. In our shop, we have a guys that would never be able to code in a text editor but can bang out great looking advertising at amazing speeds (which means cheap production costs) because of the Flash IDE. If you believe that advertisers can live without animation, you have your head in the sand.
jasonlbaptiste 16y ago
The world's best flash car site... done in HTML5.
fleitz 16y ago
One should note that if you pull the site up in IE it still uses flash, which means we still need flash. Unless you're willing to say goodbye to 40% of your customers.
- Yaggo 16y ago
  Graceful degradation / progressive enhancement anyone? (Btw, Raphaël supports IE6 too.)
  - sunchild 16y ago
    Both of these principles are directly responsible for IE6 still being a supported browser.
    - eru 16y ago
      Not really. The uses that make IE6 stick around don't even degrade gracefully on IE6. They only work there.
  - 9ec4c12949a4f3 16y ago
    Someone wrote a flash -> Raphael library a while ago. Or maybe it was just regular SVG manipulation, I can't find the exact project unfortunately.
- fedd 16y ago
  i'm in ie and can't see flash...
- r00fus 16y ago
  It even pulls up Flash in Safari5 (w/ clicktoflash plugin).
  - MediaBehavior 16y ago
    Yes. But I nearly clicked on "clicktoflash" decal because it took a couple seconds to kick in.
redthrowaway 16y ago
Ambitious, but it runs very, very poorly on my mbp (chrome).
ch0wn 16y ago
I used my back button and it ... worked. Wow.
webuiarchitect 16y ago
Wow! I like that!! Much faster.. and not need of any plugin that crashes every now and then. Plus you don't lose on search engines and history management can be left to the browser.
jijoy 16y ago
Not bad but not cool . Not upto Flash
shawndrost 16y ago
Why would a manager at Nissan allow this to be built? They now have to maintain two parallel versions of their complex site. What is the non-ideological payoff?
- shawndrost 16y ago
  In case it was unclear, this is a serious question. I'm wondering why a business would build a complex HTML5 site if they're going to have to build a flash version anyway.
  - whiskers 16y ago
    I would imagine the case made was to support iPads - presumably a small segment of visitors but I'm sure the agency devs wanted to play!
    - shawndrost 16y ago
      Oh, right -- good point.
  - deleted 16y ago
    [deleted]
- hcho 16y ago
  That manager must have spotted that there's a vocal minority on the interwebs, who will be blown away by one of the versions and drum up interest to their page at a marginal cost of 0 dollars. I wouldn't have visited Nissan's web page today, or any time soon. But I did, Nissan owes that guy a nice bonus.
- gavingmiller 16y ago
  A couple of reasons: 1. It fits in with the brand: hip, innovative, and next-generation. 2. It launched at roughly the same time iAds did, which featured the leaf, which likely drew a ton of mobile traffic, and since this works on iPad & iPhone, it makes Nissan look fantastic. 3. They don't have to maintain two versions of the site, the studio that they paid to do the coding does. Big brands like Nissan have a large budget to spend on the latest and greatest, and they do it. The studios that do the development are allowed to try new things, and they do. For Nissan, they get a site that looks fantastic, comes in on budget, and garners responses like this thread. The studio that does the work gets to add a site like Leaf to their portfolio of work, and their designers and developers learn a new skill that can be transferred to other high paying work. A win for everyone really.
danenania 16y ago
Having used both (flash extensively, js less so), I agree that flash's closed plugin status completely sucks, and this is major. That said, for nearly every other aspect of developing thick client RIAs and complex visual experiences, flash/flex/as3 wins by a mile. From IDEs to the display api to as3 apis in general to the true object oriented architecture to lack of browser inconsistencies to client side storage to sockets and networking options to modular applications. Say what you want about flash. It certainly has its problems and it has certainly been abused, but let's not ignore all the areas where js is still playing catch up and will be for a long time (even it's just IE). Flash has been a lead innovator in web-based interfaces for many years. Even if it's true that it's in decline, completely discounting such an important technology only shows ignorance.
- treeface 16y ago
  "true object oriented architecture"? I agree with that, but what are you comparing it to?
  - danenania 16y ago
    HTML/Javascript
    - treeface 16y ago
      And in what way do you find JavaScript to be less than "truly" object oriented?
ryanisinallofus 16y ago
Great. A whole new and cool way to make really unusable and shitty websites.
deleted 16y ago
[deleted]
JulianMorrison 16y ago
I'm a little worried about losing what is to me one of the main advantages of Flash: that it can be blocked. So your all singing, all dancing website shuts the hell up and behaves like a sedate page full of text and static images. I mean, I can block JS, but it's irritating to have to. That's generally used for useful things like navigation. Flash marks something up as useless pizazz.
- sambeau 16y ago
  This is a worry for me too. I'm a long-term ClickToFlash user. I've enjoyed my time in a flash/ad/animation-free web but am horribly aware that it is temporary. As HTML5 takes over we will see more unstoppable content - pop-up panels, intrusive advertising etc. I just wish we could pay for the web without all this crap.
  - loire280 16y ago
    Just use a hosts file that redirects known ad sites to 127.0.0.1 if you're worried about ads. It blocks everything, though occasionally it breaks things or causes weird behavior (like silent, blank ad pages on the NPR player).
- nikster 16y ago
  Very interesting point here. Maybe Adobe's next ad campaign will feature this idea: Flash is better because you can turn it off. In fact, if you turn it off, you remove 99% of all truly annoying ads on the web. Thinking ahead, maybe we need a ClickToJS...
  - cookiecaper 16y ago
    We have one, it's called NoScript.
  - dgallagher 16y ago
    In Safari: 1. File -> Preferences -> Show Develop menu in menu bar 2. Develop -> Disable JavaScript
drivebyacct2 16y ago
I'm not exaggerating when I say that the 360 view was very confusing because it wasn't really 3d. I was dragging my mouse in so many directions, only to find, only the horizontal component affected the presented image. :(
radley 16y ago
There a huge irony to this post. Look who made the site: http://criticalmass.com http://criticalmass.com It's talent that matters, not the platform.
lyime 16y ago
Nice site. We don't need Flash anymore you say? Keep me posted when RTMP media, video/webcam/audio capture, audio analysis, content protection is supported cross browser in HTML and JS.
roryokane 16y ago
Unless there’s a vector-based action game running at a decent frame rate hidden somewhere on that site, I don’t think you’ve adequately proven your statement.
delackner 16y ago
I'm surprised no one has suggested the obvious reason why making a site like this is not necessarily "wasted extra effort" for Nissan. When Apple's iAd platform was unveiled, they demoed... a Nissan Leaf ad. That ad content had to be written in javascript, so it probably wasn't a huge leap to say hey let's push that content out to the web as well.
- gavingmiller 16y ago
  I was a developer at the studio that did this. Brands like Nissan think much more ahead than this, and the two development efforts went on in parallel (another studio did the iAd work.) In fact, if I'm not mistaken the leaf site launched before the iAd did, or at least really close together.
tomelders 16y ago
Stop.... Hoooldup. Replicating what Flash does in HTML, CSS, SVG & JS is not the way forward.
enobrev 16y ago
A lot of grandiose claims in hopes of the death of Flash around here. As though Flash has never done anything good for anyone. I agree that it's nice that the browsers are now supporting new features that allow so much well needed functionality across the board - but they're really just now catching up to what Flash has offered us for years. Forget all-flash websites. Seriously, forget them. I like the OP's site about as much as I liked flash intros from 2001 before they started adding "Skip This" buttons. I'm referring to media players, socket clients, file uploading tools worth using, vector animation, a decent programming experience that worked across the board (AS3 is actually a fun language if you give it a real shot). Where would the web be without Youtube? Where would Youtube be without Flash? How about last.fm? or Pandora? Do you remember what the web was like before flash? Real Player, anyone? Java applets? I'll take a flash game over a Java applet any day. Regardless if you use these media-centric sites personally, they changed the internet as we know it - making it accessible to normal human beings. To disregard Flash's place in that history doesn't make any sense. And it's far from over. The browsers STILL haven't gotten media playback right across the board. Everything's a big fat beta right now and IE is dragging us behind as usual. It would be nice if everyone could at least agree on a codec or two, but no. Meanwhile, flash-based media players still work just about everywhere. I'm happy that the browsers are catching up with Flash - truly. I loved developing in Actionscript, and I'll love replacing it. But these claims that Flash is somehow the bane of the internet is to deny some of the very foundations of how successful the internet has become.
- steveklabnik 16y ago
  > Where would Youtube be without Flash? http://www.youtube.com/html5 http://www.youtube.com/html5 > To disregard Flash's place in that history doesn't make any sense. Nobody is saying that Flash wasn't worthwhile, ever. It's just nice that something that used to be a large part of the web can be taken out of the hands of a company, and returned to us all. > But these claims that Flash is somehow the bane of the internet is to deny some of the very foundations of how successful the internet has become. Ehhhh I'd disagree. I certainly agree that until very recently (and not quite yet for everyone), Flash is no longer needed, and that that's a good thing. Flash is a threat to the Internet: it's in the hands of Adobe. The web should be open, and for everyone. But that's precisely _because_ the internet has become so successful. It's far too important to be left under corporate control.
51Cards 16y ago
"Say hello" to a REALLY slow running website and my hardware ain't that shabby. Running FF 3.6 It's very cool but a little too much too soon for general consumption IMO.
mcmc 16y ago
No one tell those "punch the monkey" ad authors... at least not before html5block is out.
marknutter 16y ago
I don't get why this is better than standard, non-animated text. I just want information about the freaking leaf. By all means, make the typography and design look pretty, but stop with the damn animation. I don't want to have to re-learn a new interface every I want to learn about a new product.
sjs382 16y ago
HTML5 still can't interact with a webcam...
hazelnut 16y ago
but hey, you can build ugly banners with html5 / canvas too ... and the performance will be the same. should be banish html5 too?
antirez 16y ago
What's seriously needed is an HTML5 authoring program that can be used with a GUI and zero programming skills. Otherwise Flash will be very needed in the future.
- steveklabnik 16y ago
  A HNer is working on this, actually: http://radiapp.com/ http://radiapp.com/
dbabalik 16y ago
We still do until the <device> tag arrives in town.
WesleyJohnson 16y ago
I was going to post this as a reply, but several people made the comment that them duplicating what Flash could do, even if done in HTML and JS, wasn't the right path? I can understand the hatred of Flash itself, but why the dislike for these types of sites in general? Not everything needs to be plain text, easily scanable, SEO compatible, clean, simple, etc. This site is as much about marketing and generating appeal as it is about information. I don't see anything wrong with how it was done. Someone enlighten me please. Edit: And somewhat off-topic - is it a requirement that production electrics cars have to hideous? Tesla and Chevy (Volt) seem to be the only ones that have made them actually nice to look at.
- tomkarlo 16y ago
  It's not a requirement that they look hideous, but for mass production hybrid / all-electric cars, it's kind of a requirement that they look DIFFERENT. Why? Because people who are choosing to buy a hybrid or electric usually want EVERYONE ELSE to know they got one. That's one reason the Prius has no "regular" version - if you see a Prius, and its distinctive shape, you immediately know the person bought a hybrid. With other cars, (including the Tesla) you have to see the badges on the back to know. So part of the "moral reward" for buying hybrid, paying more and sacrificing some performance is lost.
tsycho 16y ago
Anyone know how they created the scrollbar in the popup dialog boxes? It works in IE6 as well, though doesn't look as pretty as in Chrome/FF.
- mgcross 16y ago
  JScrollpane: http://jscrollpane.kelvinluck.com/ http://jscrollpane.kelvinluck.com/ Good stuff, but doesn't work with touch/mobile devices. It would have been nice if they would have detected the userAgent before calling JScrollpane, as default scrollbars do work with mobile.
TamDenholm 16y ago
Its still just as annoying even though its not done in flash...
moe 16y ago
Only on HN you submit an electric car website without further comment - and instead of discussing the car everyone starts arguing over the implementation of the website. ;-)
- wmeredith 16y ago
  This was originally submitted with a title that read, "Flash is dead forever" or something similarly sensational and was meant to point out the actual site implementation. In accordance with HN guidelines, the submissions title has been changed to reflect the given title of the actual submission.
  - mkenyon 16y ago
    This whole comment page makes so much more sense. Thanks!
doki_pen 16y ago
Chromium-9.0.597.84(0) and I see tons of flash on that page. I know because I'm using flash blocker.
damoncali 16y ago
Cool car. Oh, nevermind.
pacoverdi 16y ago
Doh! Need a facebook account to "watch the electric revolution begin". Never mind.
treblig 16y ago
It's kind of funny that they built their (very similar-looking) iAd with HTML5, and then went ahead with a Flash marketing site. Seems like there could have been some shared resources there.
paulocal 16y ago
The intro video uses the video tag to play this video: http://www.nissanusa.com/ev/media/video/nissan-leaf-intro.mp4 http://www.nissanusa.com/ev/media/video/nissan-leaf-intro.mp... No flash there. It will fall back to flash in Internet Explorer.
SolarUpNote 16y ago
Aside from the whole Flash accessibility debate, this site is REALLY cool. I'm lovin it.
NHQ 16y ago
Slick website. Ugly Car.
tocomment 16y ago
Why are all the comments about flash? The Nissan Leaf is a car.

Nissan Leaf

352 points by dools 16y ago

ziadbc 16y ago

Anybody have an idea on how this was done? Javascript by hand?

eli_s 16y ago
svg. doc is similar to html (nodes in a tree structure) and it can be scripted(js). Animation scripted by hand or using an external lib like jq.
cookiecaper 16y ago
As above, it uses the Raphael JavaScript drawing and animation library.

jtchang 16y ago

There is a desc tag: <desc>Created with Raphaël</desc> http://raphaeljs.com/reference.html http://raphaeljs.com/reference.html Awesome stuff.

SeanLuke 16y ago
What's this then? http://www.nissanusa.com/leaf-electric-car/js/js.swf__v2.0.22.gz.js http://www.nissanusa.com/leaf-electric-car/js/js.swf__v2.0.2...
- buster 16y ago
  Most probably they will have a Flash fallback. Didn't try the page in IE6 though..
- gigantor 16y ago
  It's their original flash swf interface, emulated in javascript/canvas using the Raphael library
- kristianp 16y ago
  Maybe they made it in flash, but use javascript to run the .swf file?

Johngibb 16y ago

Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;)

InclinedPlane 16y ago
Baby steps.
trustfundbaby 16y ago
You've got to convince the masses, that you can do Flash ... without flash first, before you can get them to stop using flash.
- gloob 16y ago
  As soon as the masses decide that HTML5 = "Flash, but better", everything that is bad about Flash will rapidly become everything that's bad about HTML5. Changing the underlying technology will not change the people who use it.
  - th55 16y ago
    this is so true.
  - ringm 16y ago
    It will be worse. This stuff can't be contained with simple tools like Flashblock. Unless you want to block all Javascript by default, which will probably break 99% websites in the near future.
  - yuhong 16y ago
    At least people can do view source this time, though obfuscated JavaScript can be a pain.
gcb 16y ago
> Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;) Don't be silly! everyone wants faster horses! EVERYONE!

mixmax 16y ago

Well it appears that at least the linked site does need flash. If you click on features and specifications the embedded video is flash (firefox 3.6) So not quite true.

nika 16y ago
Give it a second and it replaces it with a javascript site. I have click to flash set up and before I could click, it replaced.
- mixmax 16y ago
  Doesn't happen for me for some reason. It keeps on being flash.
thristian 16y ago
I assumed it was a <video/> element that Firefox wouldn't render because it used H.264 video, but no... it's an ordinary Flash video. How odd.
- nitrogen 16y ago
  It seemed to play without Flash in Chrome 10.0.648.82 on Linux.
Samuel_Michon 16y ago
I use Firefox 3.6 on Win7 and I don't have a Flash plug-in installed. When navigating to one of the pages that contains video, FF prompts me to open or save a h.264 file with a .mp4 extension.

wmwong 16y ago

This is awesome. I was expecting to see HTML5 and was surprised when it wasn't. The doctype is strict and a lot of the interface uses JavaScript. The center navigations use svg and Raphael[1]. Either way, this is pretty sweet. And so is the car. [1] http://raphaeljs.com/ http://raphaeljs.com/

ThomPete 16y ago

Until it's possible to do audiotool.com you are not even close to be able to replace flash

pacomerh 16y ago
Absolutely, Audiotool is amazing. I really like what they did with the nissan site, but you can still see that it doesn't flow as smooth as flash.
TeHCrAzY 16y ago
The only thing you (likely) cant achieve with plain old html + javascript there is if the Flash is actually editing the audio itself (and is not just getting a server to do it). I don't think thats a very common requirement: there are other, much more straight forward barriers to replacing flash with html + js, such as lack of dev/designer skills (ie. number of people whom can do that in flash vs whom can do it in html + js).
catshirt 16y ago
ambitious but not impossible
- ThomPete 16y ago
  It is impossible since you can't sync the sound properly

nika 16y ago

I'm glad to see this. I for one am looking forward to the day when javascript is at the point where it offers a level of programing ease for animations, etc, that you get with flash. (It may have happened already, last time I did lingo programming it was called lingo, and I am not conversant with the state of the art in javascript.) Or it seems that CSS is supporting animations and maybe that is a better choice over javascript? (because the browser, I presume, can optimize CSS a lot easier than javascript which can have arbitrary functionality.)

cookiecaper 16y ago
Flash is here to stay until someone creates a designer-oriented HTML5/JS/SVG IDE analogous to Adobe's designer-oriented Flash/AS IDE. Even after that point, it'll be a while before we see Flash head out the door. There's a lot that HTML5 doesn't address yet.
- varaon 16y ago
  "Someone" might be Adobe: http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/ http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-p...
  - Raphael_Amiard 16y ago
    I think it would be a dream for adobe, to be able to discharge themselves of maintaining their player on multiple architectures on browser makers.
    - cookiecaper 16y ago
      Agreed. Adobe doesn't make much money off of the Flash Player, just the Flash IDE, so they'd be thrilled if they could offload Flash Player's functionality and the horrible reputation it gives them and just focus on creating a good IDE.

ck2 16y ago

Hmm flashblock is triggered for some reason but works anyway. Those menus are rather distracting and complicated for an average consumer site. ps. OT but the "Leaf" is not available in green ???

Klonoar 16y ago
Flashblock might be triggered due to SoundManager 2. Which is funny, considering in many cases it's probably Flash handling the audio for this, and thus the title is inaccurate.
seanalltogether 16y ago
http://www.nissanusa.com/ev/media/flash/soundmanager/soundmanager2_flash9.swf http://www.nissanusa.com/ev/media/flash/soundmanager/soundma...

daniel02216 16y ago

Their feedback form doesn't work in Safari. The site feels like a Flash site, but doesn't use flash, which is nice! It also works on my iPad. The 360 is a bit slow but it's there.

Skroob 16y ago

Nice and all, but the scroll bars don't work on the iPad, nor is there a way to scroll the tag list on the left. A step in the right direction though.

citricsquid 16y ago

I don't understand how we've gone from "Flash is crap for entire websites" (edit: which is almost always true) to "Flash is the devil in every situation". It has its place, Javascript will never and shouldn't try and "kill" Flash, they're different.

wladimir 16y ago
Well, to me it's good news, the web will be a lot snappier when it's fully integrated. No more clunky plugins. No matter what Adobe says, the Flash plugin still manages to crash a lot here, increases memory usage, and loads the CPU like crazy. There are certainly a few corner cases left in which flash remains a better fit, but it's losing territory, fast. Good work Nissan.
- prawn 16y ago
  I'm no Flash apologist, but there was recently a HN thread about CSS-only drop shadows. Many people on fairly modern laptops reported significant slowdowns when it came to scrolling the page, animations, etc. And that was just with drop shadows. That Nissan example ran pretty clunkily on my laptop and another desktop I checked in the office. (That said, gradient transparencies always seem to doom Flash pieces to slow-hell for me.)
  - wladimir 16y ago
    True -- I didn't say flash is completely useless, just that it's losing territory. There is no structural reason why pure browser rendering should be slower, but indeed some tricks are still slow. Anyway, the quip with rendering performance is only a matter of time. With every browser release, CSS and HTML rendering performance is increased, for example, by leveraging GPU acceleration. Flash will be beaten soon, I'm sure. And at least that works for every platform, not just the ones on which Adobe decides it's important.
    - prawn 16y ago
      Platforms Adobe decides are important vs modern or whatever subset of non-MS browsers are capable of handling what you want to do... I've had a bad day dealing with HTML email newsletters so I'm probably a bit more pessimistic about it than usual, but all sides of working on the web are a serious pain in the arse!

soljin2000 16y ago

Unless ... You want to record video or audio from a user. Or run more than 5 fps in IE7 (about 25% of our users). Everyone says flash is a piece of crap but you can see from stuff like boxcar2d.com that can run for days without crashing or leaking. It's about how it's coded. There are tons of poorly programmed flashes out there but that doesn't make Flash bad. Flash has been abused but it's not the devil. far from it.

soljin2000 16y ago
PS the links for the video or any of the others around the car don't work.

noibl 16y ago

If by 'we' you mean Nissan, well... great. Counterexample: http://blog.phono.com/2011/02/17/how-to-build-a-voip-based-baby-monitor/ http://blog.phono.com/2011/02/17/how-to-build-a-voip-based-b... (browser-based VOIP, Flash under the hood) Bizarrely, Chrome has support for speech input on text-based forms which translates microphone input to text on their servers, but it doesn't expose direct access to the audio. Argh!

juddlyon 16y ago

Impressive, to be sure. But terms like "anything" and "ever" are hyperbolic. Flash isn't going anywhere for years.

dools 16y ago
Yes, unabashed, brazen hyperbole to be sure. Good headline though, I thought. The thing that really struck me the most about this is that as little as 2 years ago there would have been absolutely no chance of deploying a huge brand interactive experience without Flash. This is the first time I've seen a site that I thought was obviously Flash only to right-click and not see "Zoom in". I was pretty gobsmacked.

buro9 16y ago

There is some flash on there (a video, under Specs > Features & Specs), but this is still a very impressive demonstration of how little it is actually required to achieve these kinds of effect.

pero 16y ago

Anyone know which agency did this?

deleted 16y ago
[deleted]
joelwan 16y ago
Critical Mass
timsco 16y ago
Critical Mass, I believe.

deleted 16y ago

[deleted]

deleted 16y ago
[deleted]

gcb 16y ago

it probably took the team 10x the time to do that this way instead of flash. it will not work on 100% of the devices. but at least they got some clicks from us that they wouldn't otherway. Continuing with this rationale: if done in flash, it would have take the team 10x the time to that instead of plain html. or 200x the time if done in a simpler html format, like a wikipedia article. it would work on 100% of the devices... you would be able to use back/forward buttons, you would be able to translate on google translator and still see the site... wouldn't use all the cpu... it would load instantly for the user (well, it would be loading the rest bellow the fold while the user was reading/looking at the top part)... it would hopefully play well with screenreaders... i would still be able to use the left menu even after increasing font size... but you wouldn't have buttons that jump around.

gcb 16y ago
bottom line is: if the product was good, those kind of sites would not be necessary. the facts to support that are all the posts here in HN talking about A/B testing on landing pages. What gives more conversions, to good products? flashy shiny things, or to the point information about the advantages and simple call to action?
- cellis 16y ago
  Big Brand Corps don't sell direct. They sell a brand. Selling a brand means doing this thing called "branding", which usually involves multimedia (video, sound and graphic effects).
  - gcb 16y ago
    Only because it's more efficient to sell a brand than it is to sell quality.
    - cellis 16y ago
      Actually... (heh) The brand is the quality. Branding is just reminding you of the quality.

deleted 16y ago

[deleted]

yarone 16y ago

On this site, the browser "back" button doesn't always behave as expected. Ex: Go there. Click Back. Doesn't go back. Chrome 9.

elboru 16y ago

We'll need flash until we have a GOOD IDE for those technologies...

thenduks 16y ago
zsh + vim?
timsco 16y ago
This is the biggest factor in Flash going away. In our shop, we have a guys that would never be able to code in a text editor but can bang out great looking advertising at amazing speeds (which means cheap production costs) because of the Flash IDE. If you believe that advertisers can live without animation, you have your head in the sand.

jasonlbaptiste 16y ago

The world's best flash car site... done in HTML5.

fleitz 16y ago

One should note that if you pull the site up in IE it still uses flash, which means we still need flash. Unless you're willing to say goodbye to 40% of your customers.

Yaggo 16y ago
Graceful degradation / progressive enhancement anyone? (Btw, Raphaël supports IE6 too.)
- sunchild 16y ago
  Both of these principles are directly responsible for IE6 still being a supported browser.
  - eru 16y ago
    Not really. The uses that make IE6 stick around don't even degrade gracefully on IE6. They only work there.
- 9ec4c12949a4f3 16y ago
  Someone wrote a flash -> Raphael library a while ago. Or maybe it was just regular SVG manipulation, I can't find the exact project unfortunately.
fedd 16y ago
i'm in ie and can't see flash...
r00fus 16y ago
It even pulls up Flash in Safari5 (w/ clicktoflash plugin).
- MediaBehavior 16y ago
  Yes. But I nearly clicked on "clicktoflash" decal because it took a couple seconds to kick in.

redthrowaway 16y ago

Ambitious, but it runs very, very poorly on my mbp (chrome).

ch0wn 16y ago

I used my back button and it ... worked. Wow.

webuiarchitect 16y ago

Wow! I like that!! Much faster.. and not need of any plugin that crashes every now and then. Plus you don't lose on search engines and history management can be left to the browser.

jijoy 16y ago

Not bad but not cool . Not upto Flash

shawndrost 16y ago

Why would a manager at Nissan allow this to be built? They now have to maintain two parallel versions of their complex site. What is the non-ideological payoff?

shawndrost 16y ago
In case it was unclear, this is a serious question. I'm wondering why a business would build a complex HTML5 site if they're going to have to build a flash version anyway.
- whiskers 16y ago
  I would imagine the case made was to support iPads - presumably a small segment of visitors but I'm sure the agency devs wanted to play!
  - shawndrost 16y ago
    Oh, right -- good point.
- deleted 16y ago
  [deleted]
hcho 16y ago
That manager must have spotted that there's a vocal minority on the interwebs, who will be blown away by one of the versions and drum up interest to their page at a marginal cost of 0 dollars. I wouldn't have visited Nissan's web page today, or any time soon. But I did, Nissan owes that guy a nice bonus.
gavingmiller 16y ago
A couple of reasons: 1. It fits in with the brand: hip, innovative, and next-generation. 2. It launched at roughly the same time iAds did, which featured the leaf, which likely drew a ton of mobile traffic, and since this works on iPad & iPhone, it makes Nissan look fantastic. 3. They don't have to maintain two versions of the site, the studio that they paid to do the coding does. Big brands like Nissan have a large budget to spend on the latest and greatest, and they do it. The studios that do the development are allowed to try new things, and they do. For Nissan, they get a site that looks fantastic, comes in on budget, and garners responses like this thread. The studio that does the work gets to add a site like Leaf to their portfolio of work, and their designers and developers learn a new skill that can be transferred to other high paying work. A win for everyone really.

danenania 16y ago

Having used both (flash extensively, js less so), I agree that flash's closed plugin status completely sucks, and this is major. That said, for nearly every other aspect of developing thick client RIAs and complex visual experiences, flash/flex/as3 wins by a mile. From IDEs to the display api to as3 apis in general to the true object oriented architecture to lack of browser inconsistencies to client side storage to sockets and networking options to modular applications. Say what you want about flash. It certainly has its problems and it has certainly been abused, but let's not ignore all the areas where js is still playing catch up and will be for a long time (even it's just IE). Flash has been a lead innovator in web-based interfaces for many years. Even if it's true that it's in decline, completely discounting such an important technology only shows ignorance.

treeface 16y ago
"true object oriented architecture"? I agree with that, but what are you comparing it to?
- danenania 16y ago
  HTML/Javascript
  - treeface 16y ago
    And in what way do you find JavaScript to be less than "truly" object oriented?

ryanisinallofus 16y ago

Great. A whole new and cool way to make really unusable and shitty websites.

deleted 16y ago

[deleted]

JulianMorrison 16y ago

I'm a little worried about losing what is to me one of the main advantages of Flash: that it can be blocked. So your all singing, all dancing website shuts the hell up and behaves like a sedate page full of text and static images. I mean, I can block JS, but it's irritating to have to. That's generally used for useful things like navigation. Flash marks something up as useless pizazz.

sambeau 16y ago
This is a worry for me too. I'm a long-term ClickToFlash user. I've enjoyed my time in a flash/ad/animation-free web but am horribly aware that it is temporary. As HTML5 takes over we will see more unstoppable content - pop-up panels, intrusive advertising etc. I just wish we could pay for the web without all this crap.
- loire280 16y ago
  Just use a hosts file that redirects known ad sites to 127.0.0.1 if you're worried about ads. It blocks everything, though occasionally it breaks things or causes weird behavior (like silent, blank ad pages on the NPR player).
nikster 16y ago
Very interesting point here. Maybe Adobe's next ad campaign will feature this idea: Flash is better because you can turn it off. In fact, if you turn it off, you remove 99% of all truly annoying ads on the web. Thinking ahead, maybe we need a ClickToJS...
- cookiecaper 16y ago
  We have one, it's called NoScript.
- dgallagher 16y ago
  In Safari: 1. File -> Preferences -> Show Develop menu in menu bar 2. Develop -> Disable JavaScript

drivebyacct2 16y ago

I'm not exaggerating when I say that the 360 view was very confusing because it wasn't really 3d. I was dragging my mouse in so many directions, only to find, only the horizontal component affected the presented image. :(

radley 16y ago

There a huge irony to this post. Look who made the site: http://criticalmass.com http://criticalmass.com It's talent that matters, not the platform.

lyime 16y ago

Nice site. We don't need Flash anymore you say? Keep me posted when RTMP media, video/webcam/audio capture, audio analysis, content protection is supported cross browser in HTML and JS.

roryokane 16y ago

Unless there’s a vector-based action game running at a decent frame rate hidden somewhere on that site, I don’t think you’ve adequately proven your statement.

delackner 16y ago

I'm surprised no one has suggested the obvious reason why making a site like this is not necessarily "wasted extra effort" for Nissan. When Apple's iAd platform was unveiled, they demoed... a Nissan Leaf ad. That ad content had to be written in javascript, so it probably wasn't a huge leap to say hey let's push that content out to the web as well.

gavingmiller 16y ago
I was a developer at the studio that did this. Brands like Nissan think much more ahead than this, and the two development efforts went on in parallel (another studio did the iAd work.) In fact, if I'm not mistaken the leaf site launched before the iAd did, or at least really close together.

tomelders 16y ago

Stop.... Hoooldup. Replicating what Flash does in HTML, CSS, SVG & JS is not the way forward.

enobrev 16y ago

A lot of grandiose claims in hopes of the death of Flash around here. As though Flash has never done anything good for anyone. I agree that it's nice that the browsers are now supporting new features that allow so much well needed functionality across the board - but they're really just now catching up to what Flash has offered us for years. Forget all-flash websites. Seriously, forget them. I like the OP's site about as much as I liked flash intros from 2001 before they started adding "Skip This" buttons. I'm referring to media players, socket clients, file uploading tools worth using, vector animation, a decent programming experience that worked across the board (AS3 is actually a fun language if you give it a real shot). Where would the web be without Youtube? Where would Youtube be without Flash? How about last.fm? or Pandora? Do you remember what the web was like before flash? Real Player, anyone? Java applets? I'll take a flash game over a Java applet any day. Regardless if you use these media-centric sites personally, they changed the internet as we know it - making it accessible to normal human beings. To disregard Flash's place in that history doesn't make any sense. And it's far from over. The browsers STILL haven't gotten media playback right across the board. Everything's a big fat beta right now and IE is dragging us behind as usual. It would be nice if everyone could at least agree on a codec or two, but no. Meanwhile, flash-based media players still work just about everywhere. I'm happy that the browsers are catching up with Flash - truly. I loved developing in Actionscript, and I'll love replacing it. But these claims that Flash is somehow the bane of the internet is to deny some of the very foundations of how successful the internet has become.

steveklabnik 16y ago
> Where would Youtube be without Flash? http://www.youtube.com/html5 http://www.youtube.com/html5 > To disregard Flash's place in that history doesn't make any sense. Nobody is saying that Flash wasn't worthwhile, ever. It's just nice that something that used to be a large part of the web can be taken out of the hands of a company, and returned to us all. > But these claims that Flash is somehow the bane of the internet is to deny some of the very foundations of how successful the internet has become. Ehhhh I'd disagree. I certainly agree that until very recently (and not quite yet for everyone), Flash is no longer needed, and that that's a good thing. Flash is a threat to the Internet: it's in the hands of Adobe. The web should be open, and for everyone. But that's precisely _because_ the internet has become so successful. It's far too important to be left under corporate control.

51Cards 16y ago

"Say hello" to a REALLY slow running website and my hardware ain't that shabby. Running FF 3.6 It's very cool but a little too much too soon for general consumption IMO.

mcmc 16y ago

No one tell those "punch the monkey" ad authors... at least not before html5block is out.

marknutter 16y ago

I don't get why this is better than standard, non-animated text. I just want information about the freaking leaf. By all means, make the typography and design look pretty, but stop with the damn animation. I don't want to have to re-learn a new interface every I want to learn about a new product.

sjs382 16y ago

HTML5 still can't interact with a webcam...

hazelnut 16y ago

but hey, you can build ugly banners with html5 / canvas too ... and the performance will be the same. should be banish html5 too?

antirez 16y ago

What's seriously needed is an HTML5 authoring program that can be used with a GUI and zero programming skills. Otherwise Flash will be very needed in the future.

steveklabnik 16y ago
A HNer is working on this, actually: http://radiapp.com/ http://radiapp.com/

dbabalik 16y ago

We still do until the <device> tag arrives in town.

WesleyJohnson 16y ago

I was going to post this as a reply, but several people made the comment that them duplicating what Flash could do, even if done in HTML and JS, wasn't the right path? I can understand the hatred of Flash itself, but why the dislike for these types of sites in general? Not everything needs to be plain text, easily scanable, SEO compatible, clean, simple, etc. This site is as much about marketing and generating appeal as it is about information. I don't see anything wrong with how it was done. Someone enlighten me please. Edit: And somewhat off-topic - is it a requirement that production electrics cars have to hideous? Tesla and Chevy (Volt) seem to be the only ones that have made them actually nice to look at.

tomkarlo 16y ago
It's not a requirement that they look hideous, but for mass production hybrid / all-electric cars, it's kind of a requirement that they look DIFFERENT. Why? Because people who are choosing to buy a hybrid or electric usually want EVERYONE ELSE to know they got one. That's one reason the Prius has no "regular" version - if you see a Prius, and its distinctive shape, you immediately know the person bought a hybrid. With other cars, (including the Tesla) you have to see the badges on the back to know. So part of the "moral reward" for buying hybrid, paying more and sacrificing some performance is lost.

tsycho 16y ago

Anyone know how they created the scrollbar in the popup dialog boxes? It works in IE6 as well, though doesn't look as pretty as in Chrome/FF.

mgcross 16y ago
JScrollpane: http://jscrollpane.kelvinluck.com/ http://jscrollpane.kelvinluck.com/ Good stuff, but doesn't work with touch/mobile devices. It would have been nice if they would have detected the userAgent before calling JScrollpane, as default scrollbars do work with mobile.

TamDenholm 16y ago

Its still just as annoying even though its not done in flash...

moe 16y ago

Only on HN you submit an electric car website without further comment - and instead of discussing the car everyone starts arguing over the implementation of the website. ;-)

wmeredith 16y ago
This was originally submitted with a title that read, "Flash is dead forever" or something similarly sensational and was meant to point out the actual site implementation. In accordance with HN guidelines, the submissions title has been changed to reflect the given title of the actual submission.
- mkenyon 16y ago
  This whole comment page makes so much more sense. Thanks!

doki_pen 16y ago

Chromium-9.0.597.84(0) and I see tons of flash on that page. I know because I'm using flash blocker.

damoncali 16y ago

Cool car. Oh, nevermind.

pacoverdi 16y ago

Doh! Need a facebook account to "watch the electric revolution begin". Never mind.

treblig 16y ago

It's kind of funny that they built their (very similar-looking) iAd with HTML5, and then went ahead with a Flash marketing site. Seems like there could have been some shared resources there.

paulocal 16y ago

The intro video uses the video tag to play this video: http://www.nissanusa.com/ev/media/video/nissan-leaf-intro.mp4 http://www.nissanusa.com/ev/media/video/nissan-leaf-intro.mp... No flash there. It will fall back to flash in Internet Explorer.

SolarUpNote 16y ago

Aside from the whole Flash accessibility debate, this site is REALLY cool. I'm lovin it.

NHQ 16y ago

Slick website. Ugly Car.

tocomment 16y ago

Why are all the comments about flash? The Nissan Leaf is a car.