我刚刚使用Flash〜Adobe Flash ProfessionalСС2014（内嵌HTML5 Canvas）对网站制作和发布进行了一些实验。
因此，起初我创建了一个类似.FLA项目的3页网站，并将其发布到本地。而且一切正常。因此，我使用脚本的图像的西里尔名称-但在InternetExplorer上本地没有遇到任何问题。但是Opera Browser说easyljs-0.7.1.min.js：13 Uncaught发生了错误。这很可能是由于在读取具有本地或跨域图像的画布像素数据时的安全限制。好的，它无法到达图像，没问题。
我进一步将代码上传到免费托管，因此它也不是问题-它是免费的。
所以发布后我得到了HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AITS</title>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="AITS.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.AITS();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1366" height="768" style="background-color:#15424D"></canvas>
</body>
</html>
和JavaScript文件
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 1366,
height: 768,
fps: 24,
color: "#15424D",
manifest: [
{src:"images/img1.png", id:"img1"},
{src:"images/img2.png", id:"img2"},
{src:"images/img3.png", id:"img3"},
{src:"images/img4.png", id:"img4"},
{src:"images/img5.png", id:"img5"},
{src:"images/img6.png", id:"img6"}
]
};
// symbols:
(lib.img1 = function() {
this.initialize(img.img1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,777,350);
(lib.img2 = function() {
this.initialize(img.img2);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,823,681);
(lib.img3 = function() {
this.initialize(img.img3);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,438,326);
(lib.img4 = function() {
this.initialize(img.img4);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,256,256);
(lib.img5 = function() {
this.initialize(img.img5);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1080,500);
(lib.img6 = function() {
this.initialize(img.img6);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,651,589);
(lib.Info_but = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("INFO", "96px 'Georgia'", "#CC6600");
this.text.textAlign = "center";
this.text.lineHeight = 98;
this.text.lineWidth = 408;
this.text.setTransform(288.4,-91.4,1.463,1.463);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.instance = new lib.img4();
this.instance.setTransform(-128,-128);
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("EguggTwMBdBAAAMAAAAnhMhdBAAAg");
this.shape.setTransform(182.9,-0.1);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("rgba(255,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_1.setTransform(182.9,-0.1);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("rgba(102,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_2.setTransform(182.9,-0.1);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("rgba(255,255,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_3.setTransform(182.9,-0.1);
this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("rgba(204,0,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_4.setTransform(182.9,-0.1);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-128,-128,720.6,256);
(lib.house = function() {
this.initialize();
// Слой 1
this.instance = new lib.img3();
this.instance.setTransform(-138.7,-79,0.634,0.485);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-138.7,-79,277.5,158);
(lib.BUTTON_CITY = function() {
this.initialize();
// Слой 1
this.shape = new cjs.Shape();
this.shape.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-158,-71.9,316.1,143.9);
(lib.Photo_but = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("PHOTOS", "61px 'Georgia'", "#FFFF66");
this.text.textAlign = "center";
this.text.lineHeight = 63;
this.text.lineWidth = 290;
this.text.setTransform(610.1,-61.8);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("A4rrOMAxXAAAIAAWdMgxXAAAg");
this.shape.setTransform(615.4,-24.8);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
this.shape_1.setTransform(615.4,-24.8);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f().s("#000000").ss(1,1,1).p("AMlrOIMHAAIAAWdI4sAAI4rAAIAA2dINcAAIX0AAIMHWdAAALPIMl2dArPrOILPWdA4rLPINc2d");
this.shape_2.setTransform(615.4,-24.8);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("AYsLPIsH2dIMHAAIAAWdgAAALPIMl2dIMHWdgAAALPIrP2dIX0AAIslWdgA4rLPINc2dItcWdIAA2dINcAAILPWdg");
this.shape_3.setTransform(615.4,-24.8);
this.instance = new lib.BUTTON_CITY();
this.instance.setTransform(615.4,-24.8);
this.instance.filters = [new cjs.ColorFilter(0.61, 0.61, 0.61, 1, 0, 0, 0, 0)];
this.instance.cache(-160,-74,320,148);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_3},{t:this.shape_2}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(456.3,-97.7,318.1,145.9);
(lib.BOOKING_BUT = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("BOOKING", "67px 'Georgia'", "#CC6600");
this.text.textAlign = "center";
this.text.lineHeight = 69;
this.text.lineWidth = 416;
this.text.setTransform(-0.7,-48.2);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.instance = new lib.house();
this.instance.setTransform(3.9,-0.6);
this.instance.filters = [new cjs.ColorFilter(0.44, 0.44, 0.44, 1, 142.8, 142.8, 142.8, 0)];
this.instance.cache(-141,-81,282,162);
new cjs.ButtonHelper(this.instance, 0, 1, 1);
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("A7VsvMA2rAAAIAAZfMg2rAAAg");
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("rgba(231,225,219,0.427)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("rgba(142,185,206,0.757)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("rgba(255,255,51,0.529)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("rgba(255,102,153,0.42)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-208.8,-82.6,420.3,235.9);
// stage content:
(lib.AITS = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
this.stop();
this.btn1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame4.bind(this));
this.btn2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame3.bind(this));
this.btn3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame2.bind(this));
function fl_ClickToGoToAndPlayFromFrame2()
{
this.gotoAndStop(1);
}
function fl_ClickToGoToAndPlayFromFrame3()
{
this.gotoAndStop(2);
}
function fl_ClickToGoToAndPlayFromFrame4()
{
this.gotoAndStop(3);
}
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(4));
// Слой 4
this.instance = new lib.img2();
this.instance.setTransform(149.7,137.6,0.745,0.745);
this.instance_1 = new lib.img6();
this.instance_1.setTransform(177.9,135.2,0.857,0.857);
this.text = new cjs.Text("Email: 7675575@mail.ru", "96px 'Georgia'", "#FFFFFF");
this.text.textAlign = "center";
this.text.lineHeight = 98;
this.text.setTransform(343.2,417.2,0.588,0.591);
this.text.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
this.text_1 = new cjs.Text("Viber/WhatsApp : +79167675575", "96px 'Georgia'", "#FFFFFF");
this.text_1.textAlign = "center";
this.text_1.lineHeight = 98;
this.text_1.setTransform(447.5,304.3,0.588,0.591);
this.text_1.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance}]},1).to({state:[{t:this.instance_1}]},1).to({state:[{t:this.text_1},{t:this.text}]},1).wait(1));
// BUTTONS
this.btn1 = new lib.BOOKING_BUT();
this.btn1.setTransform(673,529.8);
new cjs.ButtonHelper(this.btn1, 0, 1, 2, false, new lib.BOOKING_BUT(), 3);
this.btn3 = new lib.Info_but();
this.btn3.setTransform(214.3,286.9,0.584,0.633,0,0,0,0.5,-1.3);
new cjs.ButtonHelper(this.btn3, 0, 1, 2, false, new lib.Info_but(), 3);
this.btn2 = new lib.Photo_but();
this.btn2.setTransform(553.9,368.7,1.107,1.107,0,0,0,158.8,47.1);
new cjs.ButtonHelper(this.btn2, 0, 1, 2, false, new lib.Photo_but(), 3);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.btn2,p:{x:553.9,y:368.7}},{t:this.btn3,p:{x:214.3,y:286.9}},{t:this.btn1,p:{x:673,y:529.8}}]}).to({state:[{t:this.btn2,p:{x:582.1,y:460.9}},{t:this.btn3,p:{x:979.4,y:198.2}},{t:this.btn1,p:{x:1087.3,y:565.7}}]},1).wait(3));
// Слой 5
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(7,7,7,0.408)").s().p("EhqtAxaMAAAhizMDVbAAAMAAABizg");
this.shape.setTransform(683,401.6);
this.shape._off = true;
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1).to({_off:false},0).wait(3));
// BG
this.text_2 = new cjs.Text("COPYRIGHT В© 2018 AITS , Montenegro, Budva, Lazi ", "16px 'Bernard MT Condensed'", "#FFFFFF");
this.text_2.textAlign = "center";
this.text_2.lineHeight = 18;
this.text_2.setTransform(681,725.6);
this.text_2.shadow = new cjs.Shadow("rgba(255,255,102,1)",0,0,1);
this.text_3 = new cjs.Text("AITS BUDVA RENTALS", "96px 'Bernard MT Condensed'", "#FFFFFF");
this.text_3.textAlign = "center";
this.text_3.lineHeight = 98;
this.text_3.setTransform(681,0);
this.text_3.shadow = new cjs.Shadow("rgba(255,255,153,1)",0,0,21);
this.instance_2 = new lib.img5();
this.instance_2.setTransform(0,85.4,1.265,1.265);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]},1).wait(3));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(671,372,1398,765);
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;
我认为链接可能会出现问题-我使它们像
一样直接显示<script src="http://aits.do.am/AITS.js"></script>
对于HTML文件，在JS文件中直接链接到图像。 但是$ @＃％不会起作用。
我收到此错误-就像它仍然是旧的西里尔字母名称...脚本无法加载它们
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B52.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B58.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B59.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B513.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55_1.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
easeljs.min.js:12 Uncaught TypeError: Cannot read property 'naturalWidth' of undefined
at c.Fill.b.bitmap (easeljs.min.js:12)
at a.b.beginBitmapFill (easeljs.min.js:12)
at new lib.Photo_but (AITS.js:147)
at new lib.AITS (AITS.js:271)
at handleComplete (AITS.html:31)
at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a.dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a._sendComplete (preloadjs.min.js:12)
at LoadQueue.a._loadNext (preloadjs.min.js:13)
虽然我将图像块的负载更改为
lib.properties = {
width: 1366,
height: 768,
fps: 24,
color: "#15424D",
manifest: [
{src:"http://aits.do.am/images/img1.png", id:"img1"},
{src:"http://aits.do.am/images/img2.png", id:"img2"},
{src:"http://aits.do.am/images/img3.png", id:"img3"},
{src:"http://aits.do.am/images/img4.png", id:"img4"},
{src:"http://aits.do.am/images/img5.png", id:"img5"},
{src:"http://aits.do.am/images/img6.png", id:"img6"}
]
};
第二大是未定义问题的naturalWidth'
mb可能会有帮助-我使用嵌入式播放和停止功能制作了动画，现在在加载此类动画时出现错误：
CANVAStry.js:98 Uncaught ReferenceError: fl_ClickToGoToAndStopAtFrame is not defined
at lib.CANVAStry.frame_0 (CANVAStry.js:98)
at a.b._runActions (tweenjs-0.5.1.min.js:17)
at a.b.setPosition (tweenjs-0.5.1.min.js:17)
at a.b.setPosition (tweenjs-0.5.1.min.js:17)
at lib.CANVAStry.b._updateTimeline (movieclip-0.7.1.min.js:12)
at lib.CANVAStry.b._tick (movieclip-0.7.1.min.js:12)
at a.b._tick (easeljs-0.7.1.min.js:13)
at a.b.update (easeljs-0.7.1.min.js:13)
at init (CANVAStry.html:21)
at onload (CANVAStry.html:29)
!!!非常感谢您的帮助！