Welcome to Our Community

Wanting to join the rest of our members? Feel free to sign up today.

Sign Up

Javascript or flash for animation?

Discussion in 'Web Design Forum' started by skyvia, Jan 24, 2011.

  1. skyvia

    skyvia Banned

    Hi everyone,

    I am trying to improve the animation of an ad on our web site. Currently it uses very simple javascript. However, I have seen easing performed with javascript on various web sites, and until now, I only thought you could do those types of techniques with flash. I was wondering what other cool tricks can be achieved with js?

    Also, which do you think is the better method for web ads: transparent swfs or javascript? sources to good tutorials?

    My goal is for something simple and professional, nothing too crazy.

    Thanks in advance for the help.
     
  2. EDCWebDesign

    EDCWebDesign New Member

    Javascript is definitely more SEO friendly, using jQuery you can implement some professional effects with a minimum of coding.
     
  3. AdamC

    AdamC New Member

    Flash would need more space on your server and it could take more time to load (not to mention the users who may not have Flash installed on their computer), but I think it would be easier to do the animation of your banner through Flash. With Javascript, if you are not careful coding the animation of your banner you could open yourself up to all sorts of unexpected mistakes. I can give you some tutorials for both and you should choose the tool you prefer.
    Banner Animation tutorials:

    Flash Tutorial - Banner
    Animating with Javascript - An article to get you started on Javascript animation
     
  4. kathygreen

    kathygreen New Member

    Hey,
    Yeah in terms of SEO friendliness JS is much better.
    Cheers.
     
  5. G.Weaver

    G.Weaver New Member

    Definitely Jquery

    For simple animations (or even some more complex ones) of elements on a website I would say jQuery. It's a javascript library which allows you to write javascript in layman's terms. With a couple of lines you can give things a little bit of flair.

    As others have mentioned flash can't be indexed by search engines. Additionally flash won't render on an ipad/iphone which is important with the way things are going.

    If you are feeling adventurous you might even look at some css3 animations. Eventually you might not even need jquery/js when these are fully supported.

    A simple example would be this nice little hover animation on my website which raises the work when you mouseover.

    My function looks like this

    HTML:
            $('.imgWrap a').hover(function(){
                $(this).stop().animate({'top':'-10px'},200); },
            function(){
                $(this).stop().animate({'top':'0'},400);
            });
    The forms can be fired if you click on a link in the top right. That's all jquery too, even down to the submission and validation of the forms without refreshing the page. jQuery really does open up a world of possibilities, you can do some pretty complex stuff.

    Hope this helps, if you have any more questions give us a shout.
     
  6. JohnLeather

    JohnLeather New Member

    Search engines have been able to read text from flash files and have been able to do so for some time now.

    What it won't be able to understand any hierarchy. So if the flash file content appears as if it contains many pages it will be treated as 1 page so it is limiting in that respect.

    Given that this is an animation with minimal text I very much doubt the Flash vs JS argument is a valid one in respect to SEO. In fact, Javascript has it own problems when it comes to SEO.

    Official Google Blog: Google learns to crawl Flash

    Now back to the topic in hand, the tween effect is mathematical and so it is possible to achieve this in any programming language that allows you to change the position of any object be it image or text.

    In fact, in flash I don't even use tween class as this is only a few lines of code.

    Something like the code below is all you need in a loop:
    speed = 5;
    object.x += (targetX - object.x) / speed;
    object.y += (targetY - object.y) / speed;

    As it get closer to the target, the distance value is smaller and so it gives the apparence of easing in.

    If you change the += to just = then it wobbles back and forth to target acting like an elastic effect.

    Implementation is all about coming up with a formula rather than constraints of the language being used in the majority of cases.

    As for Flash Vs Javascript, stick with Javascript as iOS doesn't support Flash in the browser. Flash will eventually die off anyway.
     
  7. naturalelixirinfo

    naturalelixirinfo New Member

    Knowing about both flash and animation will be more affective for animation. Flash helps to relate how the motion will be. javascript helps to be more technical. Johnleather shared good information.
     

Share This Page