What is Digg?Sponsored by Dragon Age: Origins
Join the Dragon Age: Origins development team on Facebook view!
facebook.com/DragonAgeOrigins - EA presents BioWare's new dark fantasy epic Dragon Age: Origins. '9/10' from Game Informer.
45 Comments
- Bogtha, on 10/12/2007, -1/+22> wow.. i got -5 diggs.
What do you expect? It was a totally content-free comment. Had you explained *why* you were sticking with Flash, it probably wouldn't have been buried.
> Anyways, all of us already know its about a million times easier to create this in flash.
Flash and JavaScript are totally different things. JavaScript works by using and manipulating existing web formats and protocols. Flash throws them all away and uses the browser as a cheap delivery platform.
If you think you need to choose between them, then chances are you are misusing one of them. This is true for both directions - don't use Flash to do JavaScript's job and don't use JavaScript to do Flash's job.
Unfortunately, a lot of Flash advocates don't seem to realise that the cases where Flash is actually the right tool for the job are actually a minority when it comes to websites. Being fair to both Flash and JavaScript does not mean using them both 50% of the time. In my experience, the ratio is more like 95% of the time JavaScript is the right tool for the job, and 5% of the time Flash is the right tool for the job.
This JavaScript code is for the 95% of times.
> And then also, if things go wrong in javascript code, things can get REAL bad(e.g., infinite loops).
Actually, ActionScript is based on the same specification as JavaScript, ECMA-262. There's no real distinction to be drawn here.
> Sure its possible to use js to change the backgrounds colors in real-time, but what professionally designed website do you know does that?
Digg does fading effects when editing a comment. - SuperSloth, on 10/12/2007, -2/+14You bastard! My brother is a number sign!
- gekkokid, on 10/12/2007, -1/+9man thats gonna rock with the myspace crowd, especially the pulsing background and text at the same time, really gonna ***** up some little ***** eyes,
nice code all round then - Takteek, on 10/12/2007, -0/+7Wow thats a pretty cool use of javascript. Nice for things like buttons and menus, but I don't think I'd use it for anything else than that. Actually the text tween was good too.
Oh, and to avPaul: you forgot to remove the anchor in the link... number signs are bad people. - arizonagroove, on 10/12/2007, -0/+4For those who've never done a 'view source' on digg, it makes use of scriptaculous.
- lavawalker, on 10/12/2007, -0/+4http://script.aculo.us/
Check out their demos. - sgtpinky, on 10/12/2007, -0/+3'tween' means to go from one state to another state. The 'states' can be shape, color, position, or anything like that. I am no expert, but I dare say 'tween' originates from the word 'between'.
- soleman, on 10/12/2007, -0/+3Hey now, this is ACTUALLY a very good piece of code. Of course it won't replace flash, but when your job is creating websites for the U.S. Government, something like this is nice to have.....most government websites forbid the use of Flash......so this will work nicely for me!
- DevlinD, on 10/12/2007, -2/+5Bogtha is definitely right on this one, why cant people just accept the fact that they are both good tools for their respective jobs?
For all of the stuff on that motion tween site, I would say those are all applications where I would much rather use some javascript over flash. They are just little effects that make the UI that much more appealing and if Im already using javascript in so many parts of my site or app (which I probably am because unlike Flash, javascript is free amoung its many other advantages), then why would I bother writing it in Flash.
@sandrat44
You say that you would use Flash if you were trying to sell something...man you must work on some boring ass completely irrelevant ***** if your main selling point of your app is the fact that its done in Flash.
Real professionals care about maintainability, interoperability (ie. compliance to standards), usability, in other words things that actually matter. Without question Javascript beats Flash for almost anything that I would want to put in any business application, unless Im putting some cartoon animation in there. Thats pretty much all Flash is good for, massive animations that are just simply not worth the effort to code in anything else.
The only argument that anyone can have for picking Flash is the animation factor, thats it. It does nothing else better than Javascript whatsoever. Personally I like to build apps that add value to my clients and quite frankly as long as the UI looks nice, is usable and appeasing to the eye, and the app correctly supports my client's workflows, they couldnt care less about anything else. And each of those things can be done with plain HTML, CSS, and some nice images, you really dont even need either technologies to achieve this. A little javascript would be nice for some mouse over effects but not entirely essential.
If you really have so much animation in your app that you do the whole thing in flash then you really should question whether you are providing the client with anything of actual value or giving them something that just looks pretty (or you THINK looks pretty when really all of the animation is just annoying). Clients and customers appreciate the little animations that make them forget that they are using a webapp but really, if it cant integrate with what they already have, grow with the business strategy, and add value to the business then they're not going to buy it.
And if you still use Flash but have no big animations in your app that require it, then you just picked the wrong technology for the job. - dude3609, on 10/12/2007, -12/+14wow.. i got -5 diggs.
Anyways, all of us already know its about a million times easier to create this in flash. And people who actually know what theyre talking about also know that javascript cannot replace flash. Ive seen a few articles around digg that suggest that javascript could be a possible replacement..It just simply wont happen. Javascript effects are usually only good for small uses. Try making a cartoon or a good flash game in javascript. Both of those would be about 5x smoother if they were made in flash(especially if the cartoon or game uses loads of sounds). And then also, if things go wrong in javascript code, things can get REAL bad(e.g., infinite loops).
I would rather do motion tween without the pain of coding..Sure its possible to use js to change the backgrounds colors in real-time, but what professionally designed website do you know does that? - sandrat44, on 10/12/2007, -0/+2@Bogtha
Bravo my friend, I see you referenced JS if there was a fade-in / fade-out effect that was desired and towards the end you mentioned that if that effect was not needed - which you do the color change for the a:hover - JS is not needed - HTML / CSS can do it.
The Bravo was for you keeping an open mind (and a digg on your comment). I am convinced now that you aren't a JS junkie and you can evaluate the various alternatives within the parameters of the problem at hand. I wanted to see if you'd consider the HTML / CSS option which has nothing to do with JS or Flash to gage your openness to other alternatives. I get the impression you are at a more advanced level now.
BTW - If I think I know you right, you may be familiar already with Veerle's Blog? if not, here's a link to one of her postings on a strictly HTML / CSS solution (or XHTML Strict - CSS to be exact...) http://veerle.duoh.com/index.php/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2/
Of course she did not come up with it, but I've found her explanation easy to understand for most new-comers I've had to break in when explaining it. Not saying you're a new-comer! Rather, I hope if you do find yourself having difficulty explaining to a junior designer or if you do any teaching, it might come in handy.
Well that was worth the time, and I do appreciate your follow through on my question. I'm glad we had the chance to chat about this - hey maybe it even piqued the interest of others? Perhaps a bit much to expect...
In between postings, and the nightly routine at home with a 3 year old, I did look at the posting, and ponder the code. Powerful stuff. I can think of a couple of past projects in the early days where something like this would have made a difference in the HOW. But then again back that early, browsers weren't as capable as they are today... - sandrat44, on 10/12/2007, -1/+3@Devlin
So you are a JS programmer?
You are probably a very talented JS developer - and no doubt, JS development for a developer is relatively cheap: At a minimum you can use any free text editor to code, and use any web browser to see your work. And there's lots of cheap or free graphic software to make nice images/effects with. Plus you can do your work on MAC, WIN/PC, or LINUX/PC... You don't need to pay the money to buy Flash 8 Professional, or get a Flex Server or ColdFusion Server. That's neat and dandy - If I need a JS programmer for a project I'll know where to look...
But for a PM (project manager) to base a decision solely on either a JS programmer or a Flash programmer's view can, in time, end their careers.
This is probably a great boon to JS programmers that till now had to rely on Flash or Flash programmers to do motion tweening, or has now made their work easier. And it's given those who pay your salary or the contract an alternative to consider. Bravo, to whoever made this happen, and "avPaul" for calling our attention to it.
But please, don't act like your way is "The Way". You just make yourself like a self-righteous, opinionated, full of themself programmer. Something, no PM is willing to put up with when putting a team together. Be glad that a good JS programmer has shown us all an alternative for motion tweening. - Bogtha, on 10/12/2007, -2/+4> If your only criteria for choosing one or the other is how it treats the browser, then you're making it personal...
Personal? That makes no sense. Did you actually read my comment? I don't think the browser is "owed" anything.
> I have found that because of JavaScript's "using and manipulating existing web formats" when it comes to keeping the design tight and consistent, Flash is better. Otherwise I'd be spending extra coding effort to make the UI run consistently on all browsers.
I'm trying to explain that Flash and JavaScript are totally different at every level, and you're trying to rebut me by explaining how you think one is better than the other at doing the same task. You're totally missing the point.
> What's important to remember is: this is business for most of us, most of the time. Which option delivers within the scope at the least cost?
What's important to remember is that not all businesses revolve around making the cheapest thing that can possibly work. Some businesses actually value quality, and producing a second-rate website with a shoddy user interface isn't good enough, even if you can get it done a little quicker and cheaper. - Bogtha, on 10/12/2007, -0/+2"Tween" isn't anything specific to Flash. I remember using graphics packages in the 80s that had tweening features for animation. It's basically just getting the computer to calculate all the intermediate points of an animation for you.
http://en.wikipedia.org/wiki/Tweening - Bogtha, on 10/12/2007, -0/+2> I'm going to make some assumptions about you, if I'm wrong, feel free to correct me. You are a web designer who's made many sites using mostly JS for UI effects.
Yeah, that's pretty accurate.
> You are now asked to develop a site with a tabbed navigation bar at the top with items,of the site's pages with a rollover effect that causes the tab to lighten up compared to the tabs adjacent to it and when the user clicks an item, when they arrive at the page, the tab they selected needs to remain in an active state.
Navigation is almost always a job for HTML CSS JavaScript. Unless you are doing something unusual like complex visualisation, Flash shouldn't be used for navigation. For example: middle click on something to open in a new tab doesn't work. Shift-click to open in a new window doesn't work. Tabbing to individual links doesn't work (or it might in the latest version, but the latest version isn't available on every platform). Link checkers won't check links in Flash. And so on. If I cared to spend the time, I could come up with a long list of hundreds of things that work with HTML CSS JavaScript, but simply won't work with Flash, simply due to the fact that Flash isn't designed to interoperate with the rest of the web in that way.
How I'd implement it:
The navigation would be a normal HTML list, with each link being a normal A element inside an LI element.
On loading the page, the load event handler would find the #navigation element, looping over each child element and attaching the hover/focus event handlers to each of them.
The hover/focus event handlers would use something like the "Fade Anything technique", which is pretty simple JavaScript that fades elements from one colour to another. All it does is calculate the intermediate colours and loop through them in a function given to setInterval().
Marking the currently selected page as being active is a server-side job, basically you just figure out what page you are displaying and use <span class="current"> instead of <a href="...">. How exactly you do this is highly dependent upon what you are using for the server-side stuff, some frameworks will do this kind of thing for you automatically.
User-agents without JavaScript, without Flash, without CSS and without images all work fine with this code, it's totally backwards compatible and accessible.
In fact I've done this exact thing hundreds of times, except I don't normally bother with the fading, I use instant colour change most of the time. That means you don't even need any JavaScript, it can all be done with CSS. - LucasVB, on 10/12/2007, -0/+1Except for the background color change, they worked fine here. Using Opera 9.
- InternetUser, on 10/12/2007, -0/+1Examples don't work in Opera .. ?
- pucosk, on 10/12/2007, -1/+2It does work for me in (8.54). But it spikes CPU to 100% instantly and doesn't go down until the tab is closed. So I vote for lame. Nice proof of concept but nothing special.
- Mooseknuckle, on 10/12/2007, -1/+2I'm actually wondering how long it will be before javascript standards finally catch up with the times, and start implementing these types of things more natively so we wont have to spend hours home-baking our own, or having to rely on others to create libraries and canned objects for us to use.
I've been slow and hesitant to fully embrace striptalicious, Dojo, or Prototype for that reason. The web-programming world is growing so quickly, I find it tough to imagine w3c not eventually coming up with standard for this ... - andywaite, on 10/12/2007, -0/+1I'm not familiar with Flash - what does 'tween' mean?
- sgtpinky, on 10/12/2007, -0/+1I found a bug. Go down to the yoyo() example in the easing function section, and press the start button a few times. I think 'yoyo' is a good term to describe the effect of the bug :-)
- Kethinov, on 10/12/2007, -0/+1Did you miss the part where I said "no browser has yet to fully implement it - not even Firefox?"
- dude3609, on 10/12/2007, -0/+1"W3C spec'd Javascript + CSS + SVG is capable of everything that Flash is."
Doesnt matter what js is 'capable' of. Its how good it does it, and about how things are made.
Although, i'm still waiting to see a javascript 3d engine such as 3d wolfenflash( http://www.glenrhodes.com/wolf/myRay.html ). But if you say js can do it..... - dude3609, on 10/12/2007, -0/+1I am, and i think some people may have mis-understood me or probably took me a bit wrong.. Sorry.. I already know that js and flash have their different purposes, and i already know that actionscript can create infinite loops as well, but when creating simple things in flash, theres not much need to worry about messing up(is what i meant). Usually you dont get infinite loops out of js for simple simple things either, but i meant things such as infinite loops or even the code not working above when i reffered to just using non scripting based animation tween as opposed to really complex javascript effects. Theres things that js can do that flash can do, we all already know this. It's just hard for 'some' people to realise that it won't become the next flash.
- Bogtha, on 10/12/2007, -0/+1> The Bravo was for you keeping an open mind (and a digg on your comment). I am convinced now that you aren't a JS junkie
Oh hell no. In fact I get annoyed at the people who abuse JavaScript as much as I get annoyed at the people who abuse Flash :).
> you may be familiar already with Veerle's Blog?
Yeah, I'm subscribed to Veerle, although I'm permanently backlogged when it comes to reading weblogs. I don't always agree with the technical side of her designs (e.g. I think all the image replacement techniques are a collossal waste of time that do nothing but introduce bugs - try loading her website with images switched off in a browser that supports CSS and you'll see the navigation links disappear), but in general she's a great designer. - Kethinov, on 10/12/2007, -0/+1W3C spec'd Javascript + CSS + SVG is capable of everything that Flash is. No browser has yet to fully implement it - not even Firefox.
- dude3609, on 10/12/2007, -0/+1I think its more of people just finding out that js can create 'flash-like' effects, but what they dont realise is that every language has their purpose, and js is deffinately not for creating alot of things that flash can make. Although it can, and i'm still waiting to see a machine that can run off of a 3d engine such as this http://www.glenrhodes.com/wolf/myRay.html built in flash.. People keep saying how js can do exactly what flash can.
js is just meant for more simple things(e.g., digg spy) without the need for cracking open your wallet for flash and a few expensive actionscript books. - sandrat44, on 10/12/2007, -0/+1@ Boghta
I'm going to make some assumptions about you, if I'm wrong, feel free to correct me. You are a web designer who's made many sites using mostly JS for UI effects.
You are now asked to develop a site with a tabbed navigation bar at the top with items,of the site's pages with a rollover effect that causes the tab to lighten up compared to the tabs adjacent to it and when the user clicks an item, when they arrive at the page, the tab they selected needs to remain in an active state. Visitors to site will have both the Flash control or plugin and have scripting turned on, and the site needs to be ADA Section 508 compliant (it's for a Federal Gov. agency - I'm thinking of soleman's delimma). It should deliver the effect mainly for newer browsers but should provide for an alternative rendition or not break on older browsers. How would you implement this? Don't need the code or anything here, just which path you'd take.
Thanks. - sandrat44, on 10/12/2007, -1/+2> This JavaScript code is for the 95% of times.
Sounds like a generalization - What do you mean?
Sorry, if you felt you were being picked on, It just sounds as if you were making generalizations or rules of thumb - and I'm just saying - evalute each when they pop-up as alternative implementations within the scope of your project and don't just dismiss them out of hand based on such statements or generalizations. Yes, the more experienced you are at such projects you do get better at knowing which implementation (JS or Flash) works better for which TYPE OF project. You must have worked on projects where JS was the better alternative, and from your perspective, your statement made sense.
If we asked a Flash developer, they would probably say Flash can be implemented 95% of the time.
boils back down to for those overseeing a project: evaluate each alternative implementation to meet the scope of the project. Reality could be that most developers are both the PM (project manager) and developer (do we still use the term Analyst/Programmer?) - If you're a JS programmer, I might find your analysis a bit biased, until I had chance to have a sit down and learn more about you.
> don't use Flash to do JavaScript's job and don't use JavaScript to do Flash's job
Actually, they do intersect in some areas in terms of how you could implement a project feature.
For example: This site - Digg - What we're seeing right now on this commenting UI. It can be implemented in Flash as well.
Question: Two alternative implementations of the same quality, features (or Scope) of this UI - JS and Flash - Which implementation would you choose and why?
You don't really need to answer this - Just demonstrating a point. I like them both, and for each job or project where they'd both be able to implement a requirement or feature, I'd evalute them at that time for that project.
So... Someone figured a way to motion tween in JS? Fantastic! They should be commended on their efforts! If it can't be used now, no problem, as with all other discoveries it may lead to other things that are much better! This seems like it has the POTENTIAL (if it can deliver - I haven't seen it yet) to provide a motion tweening solution where Flash is not an option (like soleman mentioned - the Organizational policy forbids it?) - PaulOwen, on 10/12/2007, -2/+2Does anyone still call flash misuse "flashturbation" ?
- krzyk, on 10/12/2007, -0/+0There is a similar library called Alladin http://alladyn.art.pl/eng/index.html
- avPaul, on 10/12/2007, -0/+0While the "is JavaScript Unflashionable?" debate here has been interesting to read, it's not related to what made me Digg this guy's code in the first place. What impressed me about Philippe's code was his code! Compared to some other well know JS fx libraries this guy's code is really clean and well thought out (not to mention well documented). As for how much of it I'd actually use, at the moment none of it because he's put no copyright release in it. If he does release it, I doubt there would be any place on a client's site where it would be appropriate. I've got a few things of my own where it might be cool to use, though. The biggest value in it for me, though, has just been reading through it trying to figure out what kind of design decisions Philippe made and why he chose to do things the way he did. Good code is always fun to pull apart just to see how it all works.
- avPaul, on 10/12/2007, -0/+0Dang! Sorry about that # thing playing URL tag along. Next time I'll be more careful. Of course now it's made it pretty easy to see who just ripped the text right out of a Digg feed for their blog. I particularly like the ones who wrap a little extra verbiage around my one-sentence review so it looks like theirs except they didn't catch the # link (and probably never even visited the site). Bunch of posers ...
- Bogtha, on 10/12/2007, -1/+1> It just sounds as if you were making generalizations or rules of thumb - and I'm just saying - evalute each when they pop-up as alternative implementations within the scope of your project and don't just dismiss them out of hand based on such statements or generalizations.
I am saying that in my experience the projects where Flash is actually the right tool for the job are about 5%. I am not saying that anybody should be using Flash 5% of the time. I am making an observation, not a rule.
When I said "This JavaScript is for the 95% of times", I was responding to the claim that this JavaScript code that has been linked to is unnecessary when Flash is available. I was saying it's for the majority of the time when you go with JavaScript and not Flash, not that you should use JavaScript 95% of the time.
> Yes, the more experienced you are at such projects you do get better at knowing which implementation (JS or Flash) works better for which TYPE OF project.
My point is that it's not a case of "works better". My point is that for practically all projects, one is *clearly* the right tool for the job and one is *clearly* the wrong tool for the job, with a world of difference between them. There are a few cases where either could be used, but they are few and far between.
> You must have worked on projects where JS was the better alternative, and from your perspective, your statement made sense.
I've worked on plenty of projects of both types. You still seem to be under the impression I am saying that JavaScript is 95% good and Flash is 5% good. I am not. I'm trying to explain the distribution of projects that call for one or the other. I am saying that of the projects that I've worked on (and there have been a lot, in a wide range of industries), Flash was almost always the wrong tool for the job.
> If we asked a Flash developer, they would probably say Flash can be implemented 95% of the time.
There's a massive difference between "can be" and "should be". You *can* use Flash to do a lot of things. Doesn't mean it's a good idea.
> For example: This site - Digg - What we're seeing right now on this commenting UI. It can be implemented in Flash as well.
Can be? Sure. Should be? No way. If somebody seriously suggested that to me, I'd laugh them out of the room. Talk about ***** up the user interface. Flash is unquestionably the wrong tool for the job in this case.
> Question: Two alternative implementations of the same quality, features (or Scope) of this UI - JS and Flash - Which implementation would you choose and why?
My whole point is that you *can't* have alternative implementations of the same quality in both. One is invariably a stupid choice that dramatically lowers the quality of the end result. Sometimes it's JavaScript. Most of the time it's Flash.
I don't say these things because I use JavaScript more than Flash. I use JavaScript more than Flash because what I say is true. - inactive, on 10/12/2007, -0/+0Just check out the Related Projects on the Prototype JS Framework page: http://prototype.conio.net/
Script.aculo.us is listed. And all require Prototype. - c0uchm0nster, on 10/12/2007, -2/+1the number twelve looks like... your brother?
http://www.itsnumber12time.com - cwcheang, on 10/12/2007, -2/+1"January 28, 2007"
The future is here - macewan, on 10/12/2007, -2/+1nice, thanks for the link
- mike6496, on 10/12/2007, -3/+1we could do easy JavaScript tweens nine or ten years ago with Dreamweaver 1.0.. and it didn't take long to figure out how much JavaScript wasn't ideal for this task.
- TheDeuce, on 10/12/2007, -4/+2you said tween
- sandrat44, on 10/12/2007, -6/+3>>Flash and JavaScript are totally different things. JavaScript works by using and manipulating existing web formats and protocols. Flash throws them all away and uses the browser as a cheap delivery platform.
So what? If your only criteria for choosing one or the other is how it treats the browser, then you're making it personal... "It ain't personal, it's business!"
I have found that because of JavaScript's "using and manipulating existing web formats" when it comes to keeping the design tight and consistent, Flash is better. Otherwise I'd be spending extra coding effort to make the UI run consistently on all browsers.
What's important to remember is: this is business for most of us, most of the time. Which option delivers within the scope at the least cost? I'm sure they can both do many of the same great things, but at what cost?
Now, when I'm not trying to sell something... Sure it'd be neat to have some fun trying to find out what each could do - That's how we stay sharp and know which to pick for the job.
Dismissing either option would be foolish - knowing each, devine. I'll digg this one although I'm sure there are other such topics out there, but this is the one that came in on my RSS feed at this time. - karnivore, on 10/12/2007, -3/+0I really do not understand people who have fun bashing Flash. I love the way people seem to think the fact that Flash is geared towards Design and Animation is a bad thing, makes me laugh!!
Many companies want to deliver an experience when you visite their site, not just display information in an efficient way. And that is big business, and takes alot more skill that writing some CSS. Programmers are given alot of credit for writing CSS and xhtml but at the end of the day all that work is there just to make it work!!! With Flash the challenge is to make it look interesting and deliver and experience, which is more important to some people. - fredsanford2006, on 10/12/2007, -5/+0kills me when stuff like this makes the front page time and again. trying to reinvent the wheel and making it exponentially more complicated has no business taking up space like this.
- schleufer, on 10/12/2007, -7/+1Examples and code are cool, but do we really need another method for lame people to make stupid looking sites? Lemme just throw this out there: take a look at any myspace page. When people get free crap, they just create more crap.
If that javascript actually contained real-life examples, it might be more helpful to people. For example, the fade effects that Digg uses in spy view. - dude3609, on 10/12/2007, -25/+12kinda neat.. sticking with flash though. thanks anyways
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2009
— Content created and posted by Digg users is