-1

所以我一直在使用 Flash 来创建交互式图形，尽管现在世界上大多数人都反对使用 Flash。我之前做过一些转换为 HTML5 的实验，似乎工作正常。

我很快意识到主时间线上的动作脚本被注释掉了，因此设法将我所有的动作脚本移植到一个类中，并从库中加载我的电影剪辑。

我的项目不完整，但我得到了大部分功能并对其进行了测试。没啥事儿。我可以看到很多 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);
    }
}
}

感谢您的任何建议！

4

2 回答 2

2

Flash CC 现在支持直接从 IDE 发布到 HTML5 Canvas（在内部使用 CreateJS 库）。但是，它需要 JS 和 CreateJS API 脚本来为您的项目添加任何类型的交互性。

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

Flash CC 可以将您的图形资源和动画等直接发布到 HTML5 Canvas，但它还没有进行自动脚本转换。

PS：两种脚本语言有细微差别，但大部分常用的 API 保持不变。

于 2014-05-31T20:32:37.333 回答
2

他们无法将 AS3 转换为 HTML5，因为 AS3 是完整的编程，而 javascript/css/html5 不是。您可以将 AS3 转换为手机应用程序，因为手机应用程序需要编程。HTML 不是编程，所以它不起作用 - as3 做的太多了。

Adobe Edge 产品适用于非 Flash 应用程序。我认为 Adob​​e Edge Animate 将产生 HTML5 动画 - javascript/css。我不是用户，我知道某些 Edge 产品处于测试阶段。

于 2014-05-28T15:49:46.920 回答