在Flash CC中转换为HTML 5画布时缺乏输出
Lack of output when converting to HTML 5 canvas in Flash CC
所以我一直在使用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保持不变。
- 在指令控制器中使用$attrs时出现问题
- 从桌面读取python文件时高亮显示代码
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 在循环中分配json值时,值被覆盖
- JQuery使计数器每次更改时都会增加
- 如何在生成下载文件时显示加载动画
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 将PHP变量传递给jQuery时遇到问题
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 单击F5时如何停止页面加载
- 使用压缩的JavaScript文件(不是运行时压缩)
- 跟踪在页面加载时应用内联样式的JavaScript
- HTML表单提交时未执行外部函数
- 当在堆栈底部添加ImageView时,我想删除RelativeLayout中的顶部ImageView,但它正在删除整个布
- 用铯画三角形时出错
- 我正在一个HTML5画布上工作,并试图在上面画圆圈,但当我试图使用循环时,一切都消失了
- 从另一个函数绘制时,画布线不保留
- 当使用“destination-in”时,只有最后画的东西才会渲染