Flash/Animate CC Tween格式编号

Question

我正在使用Animate CC（erstwhile Flash CC）来制作一些我以HTML5格式导出的广告（<canvas>和CreateJS东西）。他们的整体工作非常好。

我有一个格式化的数字，在静态文本框，就像这样：5,000,000，我想它补间，比方说，20,000，超过30帧的过程。我希望在整个场景过程中将相同的文本填入5,000和1,000,000等等。

在我有限的Animate CC体验中，我设法避免使用任何Javascript，但我想我现在需要。所以，我的问题：我该怎么做？

---

我就这样做的方法的想法：

由于我使用CreateJS，它具有TweenJS库作为它的一部分，也许我可以只使用了渐变？在我的时间表的不同点上做出小动作？不知道所有这些工作如何，以及大量的在线参考是针对ActionScript 3甚至AS2的。示例代码将不胜感激。

如果我进入Javascript，那么我会怎么做数字格式的问题。我可以调整数字为5000000 -> 20000，并在每个帧更新插入逗号，这是一种方法。但是，为了使事情更加复杂，这些广告将被翻译，并且不同的区域设置会被混合使用。所以用英文你会得到5,000,000，用德文你会有5.000.000，当然。

由于我们在浏览器中的JavaScript说话，我知道这不下面的方法Number.prototype.toLocaleString()的：

的的toLocaleString（）方法返回一个字符串，这个数字的语言敏感 表示。

这似乎是它会做的伎俩，但后来我不得不担心浏览器兼容性和如果我不指定区域设置会发生什么。理想情况下，由于德国广告只会显示给在浏览器/操作系统上拥有德语区域设置的用户，因此我可以在不指定任何语言环境的情况下调用该方法，并将其从用户的计算机上读取。我想有可能有一个德国人看到英文广告的情景，但我不是，担心它。

但是，在MDN page对于toLocaleString()它有关于FF的早期版本默认为西方阿拉伯数字的巨大警告，所以它让我怀疑完全使用该方法。

---

最后，我有一个有趣的事实是，译者几乎肯定会采取5,000,000并将其转换成5.000.000德国。所以有可能避免使用toLocaleString()，因为我已经有了本地化的文本。所以如果可以写一个简单的Javascript函数来调用任意格式化的数字，我认为这样做会有效。也许：

• 以起始编号和RIP格式化了它，将它保存
• 吐温数
• 在每一帧更新，注入格式回到它

可能不是很难从JS的角度来看，但我被困的地方是我该如何在Animate/Flash和/或CreateJS/TweenJS中做到这一点？

Answer 1

虽然兰尼提供了一些很好的数据，但我想确切地说明我最终做了什么来完成这项工作。

首先，您需要以某种方式获取要补间的对象的引用。当您在Flash的行动和编写JavaScript，this势必舞台，或到MovieClip或图形您正在编辑： http://createjs.com/html5ads/#Scope

您可以使用它定义在其实例名称访问对象一旦将其放置在舞台上，该对象的属性就会闪烁。有网友在网上表示，它是基于的符号名称或其他的，但我还没有发现是这种情况。

// Get a reference to the object you want to tween 
var obj = this.anInstanceName; 

需要注意的是，如果要访问东西是内一个MovieClip，你需要给你的影片剪辑在舞台上的实例名，然后去了MovieClip内，给一个实例名称您目标对象。然后，您可以沿着层次结构走下去：

// Get a reference to the nested object you want to tween. 
var obj = this.movieClipInstanceName.nestedInstanceName; 

现在您可以补间相关对象的任何数值属性。对于我来说，因为我想补间文本，所以我在对象上设置了一个附加属性并对它进行了补缀，然后格式化并将它复制到文本属性中，就像我一样。

能够指定补间持续的帧数，而不是毫秒，所以我通过useTicks标志是有用的。

obj.counter = 0; 
createjs.Tween.get(obj, {useTicks: true}) 
    .to({counter: 100}, 30) // <- 30 frames, this number is ms without useTicks 
    .on("change", formatNumber); 

function formatNumber(event) { 
    obj.text = obj.counter.toLocaleString(); 
} 

---

以上是普遍适用的。否则，这是我最终使用的工作代码。它应该能够放入HTML5 Canvas项目中的Flash Action中，并且可以正常工作。

// Figures for tweening 
var textStart = "2,000"; 
var textEnd = "6,000,000"; 

// Locate our target text box 
var target = this.myTextBox; // replace "myTextBox" with your instance name 

// Get our formatting data and so on 
var data = this.getFormatData(textStart); 

// Set up the text box 
target.number = data.number; 
target.text = textStart; 

// Get the raw number we're tweening to 
var endNumber = this.getFormatData(textEnd).number; 

// Create the tween 
createjs.Tween.get(target, {useTicks: true}) 
    .to({number:endNumber}, 30) 
    .on("change", format); 

//Formatting function, gets called repeatedly for each frame 
function format(event) { 
    var rounded = Math.round(target.number); 
    var formatted = formatNumber(rounded, data.format); 
    target.text = formatted; 
} 

// UTILITY FUNCTIONS: 

// Takes "###,###,###" or somesuch 
// Returns a raw number and a formatting object 
function getFormatData(formattedNumber) { 

    var toString = "" + formattedNumber; // in case it's not a string 
    var reversed = toString.split('').reverse(); // get a reversed array 

    // now walk (backwards) through the array and remove formatting 
    var formatChars = {}; 
    for (var i = reversed.length-1; i >= 0; i--) { 
     var c = reversed[i]; 
     var isnum = /^\d$/.test(c); 
     if (!isnum) { 
      formatChars[i] = c; 
      reversed.splice(i, 1); 
     } 
    } 

    // get the actual number 
    var number = parseInt(reversed.reverse().join('')); 

    // return the data 
    var result = {number: number, format: formatChars}; 
    return result; 
} 

// Takes a raw number and a formatting object and produces a formatted number 
formatNumber(number, format) { 
    var toString = '' + number; 
    var reversed = toString.split('').reverse(); 
    var index = 0; 
    while (index < reversed.length) { 
     if (format[index]) { 
      reversed.splice(index, 0, format[index]); 
     } 
     index++; 
    } 

    var finished = reversed.reverse().join(''); 
    return finished; 
} 

这fiddle演示格式，并在评论中有更多的解释。

还有其他方法可以做到这一点，比如toLocaleString（），但这符合我的确切要求。希望它能帮助别人。

Answer 2

至于补间使用TweenJS格式的数字，你可以补间非格式化的数量，并在“变”中，创建一个格式化版本做你需要的东西：

createjs.Tween.get(obj, {loop:true}) 
    .to({val:10000}, 4000) 
    .to({val:0}, 4000) 
    .on("change", formatNumber); 

function formatNumber(event) { 
    // Round and format 
    var formattedNumber = (obj.val|0).toLocaleString(); 
} 

这里是一个简单的小提琴：http://jsfiddle.net/m3req5g5/