1 Reply Latest reply on Apr 4, 2014 12:00 AM by hemanthR

    Problem with text animation

    leodsirs

      Ive followed this article :

      http://tv.adobe.com/watch/companion-videos-for-inspire/web-typography-text-effects-in-edge -animate-cc-and-edge-reflow-cc/

       

      But I cant get it working. Is anyone can help me to find my error ? In the console i got this message:

      Javascript error in event handler! Event Type = timeline edge.3.0.0.js:5821

       

       

      I got for the base stage this code :

       

      (function ($, Edge, compId) {

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

       

       

         //Edge symbol: 'stage'

         (function(symbolName) {

           

           

            Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

               // insert code to be run when the composition is fully loaded here

               yepnope(

                   {

                       

               nope: [

               'libs/raphael/raphael-min.js',

               'libs/textfx/Text.js',

               'libs/textfx/svg/SVG.js',

               'libs/textfx/svg/SVGText.js',

               'libs/textfx/svg/SVGTextBlock.js'

               ],

               complete: init

                       

                        });

                       

                        //Fire init function when yepnope has loaded the files

                       

                        function init() {

               // Create the canvas for the text animation

               textAnimation.addCanvas(sym.$("text_animation"));

               sym.play(0);

                       

                        }

                       

                        //-----------------------------------

                       

                        // Create an object to control the animation canvas

                        var textAnimation = {

               // Default styles and parameters

              params: {

               fontStyles: {

               'font-family': 'Arial, sans-serif',

               'font-size': 75,

               'color': '#000000',

               'stroke': 'none',

               'stroke-width': 0

                },

                  letterSpacing: 0,

                  wordSpacing: '25',

                  easing: 'backIn',

                  duration: 550,

                  delay: 50,

                  type: 'letters'

               },

               canvas: null,

               text: null,

                       

               addCanvas: function ( div ) {

               // Create canvas only once

               this.canvas = new Text.SVG(div);

               },

                       

               addText: function( txt, styles, params ) {

               // Update styles and params

                         $.extend(this.params.fontStyles, styles);

                         $.extend(this.params, params);

                       

               //Draw the text

                         this.text = this.canvas.addText(txt, this.params);

               },

                       

               animate: function( type ){

                         this.text.animate(type);

                           }

                        };

                        sym.setVariable("textAnimation", textAnimation);

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {

               // insert code here

               var styles = {

                         "font-family": "open-sans, sans-serif"

                        };

                        sym.getVariable("textAnimation").addText("OPEN SANS", styles);

                        sym.getVariable("textAnimation").animate("slideLeftIn");

       

       

            });

            //Edge binding end

       

       

         })("stage");

         //Edge symbol end:'stage'

       

       

         //=========================================================

        

         //Edge symbol: 'text_animation'

         (function(symbolName) {  

        

         })("text_animation");

         //Edge symbol end:'text_animation'

       

       

      })(jQuery, AdobeEdge, "EDGE-22863274");

       

       

      I hope anyone could help me. Thanks !