html - 使用 Flash CC 2015 创建的 HTML5 文件的加载屏幕

Question

我只是好奇，是否可以为之前使用 Flash CC HTML5 创建的 html5 文件创建加载屏幕？如果可能（我希望是这样），我该怎么做，或者您可以向我展示这样做的参考资料（我以前读过关于 preloadJS，但从不使用它）？感谢您的回复，我很抱歉我的英语不好。

Answer 1

我有一个代码笔，其中包含如何使用 PreloadJS 的示例，它应该可以帮助您入门：

http://codepen.io/Visualife/pen/RWrmbp

HTML

<div id="progress">...</div>
<div id="progressbar">
  <div class="bar"></div>
</div>
<div id="loadStatus"></div>

JAVASCRIPT

var queue        = new createjs.LoadQueue();
var $status      = $('#loadStatus');
var $progress    = $('#progress');
var $progressbar = $('#progressbar .bar');

queue.on('fileload',     onFileLoad);
queue.on('progress',     onProgress);
queue.on('fileprogress', onFileProgress);
queue.on('error',        onError);
queue.on('complete',     onComplete);

queue.loadManifest([
  {
    id: '1',
    src: 'https://dl.dropboxusercontent.com/u/8304842/cli_iuvo/diacore/20150614_diacore-800x450-test1.mp4'
  }
]);

function onFileLoad(event) {
  $status.text('LOAD: '+ event.item.id);
}
function onFileProgress(event) {
  $status.text('file progress');

  var progress = Math.round(event.loaded * 100);
  $progress.text(progress +'%');
  $progressbar.css({'width': progress +'%'});
}
function onProgress(event) {
  $status.text('progress');

  var progress = Math.round(event.loaded * 100);

  $progress.text(progress + '%');
  $progressbar.css({
    'width': progress + '%'
  });
}
function onError(event) {
  $status.text('ERROR: ' + event.text);
}
function onComplete(event) {
  $status.text('COMPLETE');
  $progressbar.addClass('complete');
}

CSS

html, body {
  background-color: #000;
  color: white;
}

#loadStatus {
  position: absolute;
  top: 55%;
  left: 50%;
  color: #fff;
  font-family: Arial;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}

#progress {
  position: absolute;
  width: 200px;
  top: 35%;
  left: 50%;
  margin: -25px 0 0 -100px;
  text-align: center;
  font-size: 6em;
}

#progressbar {
  left: 10%;
  position: absolute;
  text-align: center;
  top: 55%;
  right: 10%;
}
#progressbar .bar {
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  background-color: red;
  height: 20px;
  display: inline-block;
  width: 0%;
}
#progressbar .complete {
  background-color: green;
}