-1

だから私は Flash を使ってインタラクティブなグラフィックを作成してきました. HTML5に変換する以前の実験をいくつか行ったところ、問題なく動作するようでした。

メイン タイムラインのアクション スクリプトがコメント アウトされていることにすぐに気付きました。そのため、すべてのアクション スクリプトをクラスに移植し、ムービークリップをライブラリからロードすることができました。

私のプロジェクトは完全ではありませんが、ほとんどの機能を動作させてテストしました。何も起こらなかった。多くの JS コードと HTML を確認できますが、ムービークリップがステージにロードされません。1週間の仕事を無駄にしましたか？

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

AS3 は完全なプログラミングであり、javascript/css/html5 はそうではないため、AS3 を HTML5 に変換することはできません。電話アプリはプログラミングから実行されるため、AS3 を電話アプリに変換できます。HTML はプログラミングではないので機能しません。as3 はやりすぎです。

Adobe Edge 製品は、Flash 以外のアプリケーション向けです。Adobe Edge Animate は HTML5 アニメーション (javascript/css) を生成すると思います。私はユーザーではありませんが、一部の Edge 製品がベータ版であることは知っています。

于 2014-05-28T15:49:46.920 に答える
2

Flash CC は、IDE から直接 HTML5 Canvas へのパブリッシュをサポートするようになりました (内部で CreateJS ライブラリを使用)。ただし、プロジェクトにあらゆる種類の対話機能を追加するには、JS および CreateJS API スクリプトが必要です。

既存の Flash および AS3 ベースのプロジェクトを HTML5 Canvas doctype にコピー アンド ペーストまたは変換すると、AS3 コードはサポートされていないためコメント アウトされます。Javascript および CreateJS API を使用してスクリプトを書き直す必要があります。

Flash CC は、グラフィック アセットやアニメーションなどを HTML5 Canvas に直接パブリッシュできますが、スクリプトの自動変換はまだ行いません。

PS: 2 つのスクリプト言語には小さな違いがありますが、一般的に使用される API のほとんどは同じままです。

于 2014-05-31T20:32:37.333 に答える