在Flash CC中转换为HTML 5画布时缺乏输出

Lack of output when converting to HTML 5 canvas in Flash CC

本文关键字:5画 布时缺 输出 HTML Flash CC 转换      更新时间:2023-09-26

所以我一直在使用Flash来创建一个交互式图形,尽管现在世界上大多数人都不建议使用Flash。我之前做过一些转换到HTML5的实验,看起来效果不错。

我很快意识到主时间轴上的actionscript会被注释掉,所以我设法将我所有的actionscript移植到一个类中,并从库中加载我的影片剪辑。

我的项目还没有完成,但我得到了大部分的功能工作,并给了它一个测试。什么也没有发生。我可以看到很多JS代码和HTML,但我的影片剪辑从未加载到舞台上。我浪费了一周的工作吗?

HTML5画布接受什么?我不认为我的代码过于复杂

这就是我的班级……(我的。fla只是几个空帧)
package {
import flash.display.Stage;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class App extends MovieClip {
    var debtcapital:Number;
    var mergers:Number;
    var equity:Number;
    var syndicated:Number;
    var globally:Number;

    var piesize:Number; 
    var wedge1:Number;
    var wedge2:Number;
    var wedge3:Number;
    var wedge4:Number;




    function App() {
        stop();
        var button:rightBtn = new rightBtn;
        this.addChild(button);
        button.x=390;
        button.y=90;
        var button2:leftBtn = new leftBtn;
        this.addChild(button2);
        button2.x=90;
        button2.y=90;

        button2.addEventListener(MouseEvent.CLICK, onClickPrevSlide);
    function onClickPrevSlide(event:MouseEvent):void{
    gotoAndStop(currentFrame-1);
    }
    button.addEventListener(MouseEvent.CLICK, onClickNextSlide);
    function onClickNextSlide(event:MouseEvent):void{
    gotoAndStop(currentFrame+1);
    }
        addEventListener(MouseEvent.CLICK, makePie);
    }
    public function makePie(e:Event):void {
        function valueToPercent($value:Number, $min:Number, $max:Number):Number {
        var myPercent:Number;
        var difference:Number = $max - $min;
        myPercent = (($value - $min) / difference)*360;
        return myPercent;
    }
    if(currentFrame == 1){
            debtcapital = 4131;
            mergers = 7620;
            equity = 6882;
            syndicated = 2728;
            globally = 21362;
        }
        if(currentFrame == 2){
            debtcapital = 6863;
            mergers = 11185;
            equity = 9925;
            syndicated = 3469;
            globally = 31442;
        }
        if(currentFrame == 3){
            debtcapital = 9739;
            mergers = 13344;
            equity = 10884;
            syndicated = 4930;
            globally = 38897;
        }
        if(currentFrame == 4){
            debtcapital = 6131;
            mergers = 4620;
            equity = 1882;
            syndicated = 7728;
            globally = 20362;
        }
    var firstwedge:Number = Math.round(valueToPercent(debtcapital, 0, globally));
    var secondwedge:Number = Math.round(valueToPercent(mergers, 0, globally));
    var thirdwedge:Number = Math.round(valueToPercent(equity, 0, globally));
    var fourthwedge:Number = Math.round(valueToPercent(syndicated, 0, globally));
    wedge1 = firstwedge;
    wedge2 = secondwedge;
    wedge3 = thirdwedge;
    wedge4 = fourthwedge;
        piesize = globally / 400;

        var wedge1start = -90
        var wedge1end = wedge1start + wedge1
        var wedge2end = wedge1end + wedge2
        var wedge3end = wedge2end + wedge3
        var wedge4end = wedge3end + wedge4

        var drawings:Sprite = new Sprite();         
        var coin:Coin = new Coin;

        this.graphics.clear();
        drawings.graphics.lineStyle(3, 0xFFFFFF);
        drawings.graphics.beginFill(0xFF0000, 0.2);
        this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge1start, wedge1end, 0x000000);
        this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge1end, wedge2end);
        this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge2end, wedge3end);
        this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge3end, wedge4end);
        this.addChild(drawings);
        drawings.graphics.endFill();
        this.addChild(coin);
        coin.x=stage.stageWidth/2;
        coin.y=stage.stageHeight/2;
        coin.scaleX = piesize / 140;
        coin.scaleY = piesize / 140;
        this.addChild(coin);

        this.swapChildren(drawings, coin); // swaps two objects


    }

    public function drawSegment(target:Sprite, x:Number, y:Number, r:Number, aStart:Number, aEnd:Number, color:uint=0x0, step:Number = 1):void {
            // More efficient to work in radians
            var degreesPerRadian:Number = Math.PI / 180;
            aStart *= degreesPerRadian;
            aEnd *= degreesPerRadian;
            step *= degreesPerRadian;
            // Draw the segment
            target.graphics.moveTo(x, y);
            for (var theta:Number = aStart; theta < aEnd; theta += Math.min(step, aEnd - theta)) {
                target.graphics.lineTo(x + r * Math.cos(theta), y + r * Math.sin(theta));
            }
            target.graphics.lineTo(x + r * Math.cos(aEnd), y + r * Math.sin(aEnd));
            target.graphics.lineTo(x, y);
    }
}
}

谢谢你的建议!!

他们不能将AS3转换为HTML5,因为AS3是完整的编程,而javascript/css/HTML5不是。您可以将AS3转换为手机应用程序,因为手机应用程序会运行编程。HTML不是编程的,所以它不起作用——as3做得太多了。

Adobe Edge产品适用于非flash应用程序。我认为Adobe Edge Animate将生成HTML5动画- javascript/css。我不是Edge的用户,我知道一些Edge产品还在测试阶段。

Flash CC现在支持直接从IDE发布到HTML5 Canvas(使用内部CreateJS库)。然而,它需要JS和CreateJS API脚本来为你的项目添加任何类型的交互性。

当你复制粘贴或转换任何现有的基于Flash和AS3的项目到HTML5 Canvas文档类型时,AS3代码会被注释掉,因为它不支持。你需要使用Javascript和CreateJS api重新编写脚本。

Flash CC可以将你的图形资源和动画等直接发布到HTML5 Canvas中,但它还不能自动进行脚本转换。

PS:这两种脚本语言有细微的差异,但大多数常用的api保持不变。