6 Replies Latest reply on Nov 22, 2013 10:50 AM by doobreywotsit

    Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article

    doobreywotsit

      I've been working with the tutorial in the September issue of Adobe Inspire to create text effects with Edge Animate - see link:

       

      http://www.adobe.com/inspire/2013/09/edge-text-effects.html

       

      I can get it to work well in IE and Firefox but nothing much happens in Chrome.

       

      Anyone any idea where I may be going wrong?

       

      My problem is with the section specifically relating to using Edge Animate - the other parts of the tutorial work OK in Chrome when using a plain HTML file but I'm interested mainly in adding the text effects to existing Edge compositions.

        • 1. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
          seriouscodecreator Level 2

          If anyone has a working example of these text effects in Edge Animate, I would be forever in your debt.

           

          Bob

          • 2. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
            DDcreams Level 1

            Most likely this is a webkit issue, I would check if you get the same result from Safari,

             

            If so then something your doing along the way (I just skimmed the tutorial) is most likely done differently between the Webkit (Chrome/Safari) and Trident/Gecko (IE/Firefox) applications

            • 3. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
              doobreywotsit Level 1

              Here's an example based on the tutorial - just open in the different browsers to see the problem:

               

              http://www.wizinnovation.com/edge/boardWithSVG.html

               

              DDcreams mentions a problem with webkit browsers which I expect is correct - I have no idea where to start to try and fix it though!

               

              Here's a paste of the edgeActions:

               

              /***********************

              * Adobe Edge Animate Composition Actions

              *

              * Edit this file with caution, being careful to preserve

              * function signatures and comments starting with 'Edge' to maintain the

              * ability to interact with these actions from within Adobe Edge Animate

              *

              ***********************/

              (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

                       // Load text animation JS

                       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

                       });

                      

                       var textAnimation = {

                                 params: {

                                           fontStyles: {

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

                                                     'font-size': 60,

                                                     'color': '#9080c7',

                                                     'stroke': '#fff',

                                                     'stroke-width': 1

                                           },

                                           letterSpacing: -2,

                                           wordSpacing: 24,

                                           easing: 'backIn',

                                           duration: 550,

                                           delay: 15,

                                           type: 'letters'

                                 },

                                 canvas: null,

                                 text: null,

                                 addCanvas: function(div){

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

                                 },

                                 addText: function(txt, styles, params){

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

                                           $.extend(this.params, params);

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

                                 },

                                 animate: function(type){

                                           this.text.animate(type);

                                 }

                       };

                      

                       sym.setVariable("textAnimation", textAnimation);

                      

                       // Draw the text animation

                       function init(){

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

                                 sym.play(0);

                       }

                      

                    });

                    //Edge binding end

                    

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

                       // insert code here

                       var styles = {

                           "font-family": "Microgramma, Arial"

                       };

                        sym.getVariable("textAnimation").addText("Text Goes Here!", styles);

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

               

               

                    });

                    //Edge binding end

               

               

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

                       // insert code here

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

                    });

                    //Edge binding end

               

               

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

                       // insert code here

                      var styles = {

                           "font-family": "Eurostyles, Arial"

                       };

                        sym.getVariable("textAnimation").addText("Some more text!", styles);

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

                    });

                    //Edge binding end

               

               

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

                       // insert code here

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

                    });

                    //Edge binding end

               

               

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

                       // insert code here

                        sym.play(0);

                    });

                    //Edge binding end

               

               

                 })("stage");

                 //Edge symbol end:'stage'

               

               

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

                

                 //Edge symbol: 'text_animation'

                 (function(symbolName) {  

                

                 })("text_animation");

                 //Edge symbol end:'text_animation'

               

               

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

              • 4. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
                DDcreams Level 1

                Well I didn't realize you were using SVG, am I to assume that all the text is run by SVG format? If so that may very well be the issue, I have avoided SVG ( even though as a programmer they are awesome <3 )

                 

                Due to browser support, they are difficult... so I can't speak to all the oddity's due to cross browser, If I was to look into the issue I would start with SVG and read exactly what problems you might encounter using the format from others...

                1 person found this helpful
                • 5. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
                  elainecc Adobe Employee

                  Hi, doobreywotsit-

                   

                  If you take a look at the Inspire mag article, it looks like the Canvas version (which you're using in your code) works just fine on Chrome.  I also looked at your animation in Chrome (v.31.0.1650.57 m), and it looks like it's playing some but not all of your text animation.  Does the console give you any ideas as to what might be happening?

                   

                  Hope that helps,

                   

                  -Elaine

                  1 person found this helpful
                  • 6. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
                    doobreywotsit Level 1

                    Hi Elaine,

                     

                    The code is copied identically from the Inspire mag article and so I was (possibly naively) just expecting it to work.  Part of the code in the article works OK but not when it's published through an Edge Animate composition it does not (but only in Chrome).

                     

                    The console doesn't give any clues as to what might be wrong but I think DDcreams has hit the nail on the head in that it's probably best to avoid SVG just right now.  It's a shame that Dan Carr didn't properly test his code before he published it.

                     

                    Very much reminds me of the early days of Flash when there were some great examples of how you could use it but none of it could ever really be used in a live environment although many people tried!