Question

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

我在静态文本框中有一个格式化的数字，如下所示：5,000,000我希望在30帧的过程中将其补间到20,000。我希望在整个场景过程中将相同的文字补间到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（）方法返回一个语言敏感的字符串代表这个数字。

这似乎可以解决问题，但后来我不得不担心浏览器兼容性以及如果我没有指定区域设置会发生什么。理想情况下，由于德国广告只会显示给浏览器/操作系统上有德语区域设置的人，我可以在没有指定任何区域设置的情况下调用该方法，并且可以从用户的计算机上读取它。我想有可能有德国人看到英文广告的情景，但我

然而，在toLocaleString() 5,000,000上，它有关于早期版本的FF默认为西方阿拉伯数字的大警告，所以它让我怀疑完全使用该方法。

最后，我有一个有趣的事实，即翻译人员几乎肯定会将5.000.000转换为toLocaleString()为德语。因此，我可以避免使用private static String doHttpPost(String urlString, String requestString) { try { URL url = new URL(urlString); URLConnection conn = url.openConnection(); conn.setDoOutput(true); OutputStreamWriter wr = new OutputStreamWriter(conn.getOutputStream()); wr.write(requestString); wr.flush(); // Get the response BufferedReader rd = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line; String response = ""; while ((line = rd.readLine()) != null) { response += line; } wr.close(); rd.close(); return response; } catch (IOException ex) { System.err.println(ex); return ex.toString(); } }，因为我已经有了本地化的文本。因此，如果有可能编写一个可以补间任意格式化数字的简单Javascript函数，我认为这样就可以了。也许：

取出起始编号和翻录格式，保存
补间号码
在每次帧更新时，将格式重新注入其中

从JS的角度来看，可能不是那么难，但是在我厌倦的地方，我会在Animate / Flash和/或CreateJS / TweenJS中做到这一点？

Answer 1

至于使用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/

Answer 2

尽管兰尼提供了一些很好的数据，但我想准确地说明我最终要做的工作。

首先，你需要以某种方式获得对你将要补间的对象的引用。当您在Flash中制作动作并编写Javascript时，this绑定到舞台，或者您正在编辑的MovieClip或Graphic： http://createjs.com/html5ads/#Scope

您可以使用实例名称访问对象，这些对象是在对象的属性上在Flash中定义的，然后将其放置在舞台上。网上的一些消息来源表示它是基于符号名称或其他一些，但我没有发现情况。

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

请注意，如果您想要访问里面一个MovieClip的内容，您需要在舞台上为您的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（），但这符合我的确切要求。希望它能帮助别人。

Flash / Animate CC补间格式化数字

2 个答案: