Question

I recently came across this site. http://beta.rallyinteractive.com/. The site uses some fairly complex/awesome animations. They are using only one script file that is minified. I expanded their script using chrome and tried to figure out how exactly they are achieving their animations. I have three questions:

• Are their any resources out their that can point me in the right direction on how to create such cool animations.
• Are they just using Html5 canvas element and no scripts like Raphael.js?
• Is it worth it to learn the how to create canvas animations or do you think there is going to be some sort of Flash IDE that will take away the complexities of learning the API?

Thank you,

Tyrone

Answer 1

If you look at the page source, they have commented a list of javascript files they use.

<!--
    <script src="/static/js/flush/events/Events.js"></script>
    <script src="/static/js/flush/events/GlobalEvent.js"></script>
    <script src="/static/js/flush/events/GlobalEvents.js"></script>
    <script src="/static/js/flush/events/MouseEvent.js"></script>
    <script src="/static/js/flush/display/Stage.js"></script>
    <script src="/static/js/flush/display/Sprite.js"></script>
    <script src="/static/js/flush/display/TraditionalSprite.js"></script>
    <script src="/static/js/flush/geom/Point2D.js"></script>
    <script src="/static/js/flush/utils/Tween.js"></script>
    <script src="/static/js/flush/utils/Ease.js"></script>
    <script src="/static/js/flush/utils/Utils.js"></script>
    <script src="/static/js/flush/color/HEXColor.js"></script>
    <script src="/static/js/flush/color/HSVColor.js"></script>
    <script src="/static/js/flush/color/RGBColor.js"></script>
    <script src="/static/js/rally/sprites/BioIn.js"></script>
    <script src="/static/js/rally/sprites/BioShare.js"></script>
    <script src="/static/js/rally/sprites/BioTweet.js"></script>
    <script src="/static/js/rally/sprites/BigTweet.js"></script>
    <script src="/static/js/rally/sprites/BigShare.js"></script>
    <script src="/static/js/rally/sprites/NavArrow.js"></script>
    <script src="/static/js/rally/CountText.js"></script>
    <script src="/static/js/rally/BottomBar.js"></script>
    <script src="/static/js/rally/Refresh.js"></script>
    <script src="/static/js/rally/DribbbleLink.js"></script>
    <script src="/static/js/rally/Icons.js"></script>
    <script src="/static/js/rally/TriangleMask.js"></script>
    <script src="/static/js/rally/Triangle.js"></script>
    <script src="/static/js/rally/Rally.js"></script>
    -->