-
1. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
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
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
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
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...
-
5. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
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
-
6. Re: Edge Text Effects in Chrome not Working - from Dan Carr / Inspire Mag article
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!