0

i am just curious, is it possible to create a loading screen for a html5 file, that was created before with Flash CC HTML5? If it's possible (and i hope it is), how can I do that, or maybe you can show me the references to do it (i have read about preloadJS before, but never use it)? thanks for your response, and i'm sorry for my bad english.

Arfian90
  • 71
  • 1
  • 12
  • can you please confirm, do you want: - a swf to play as the loading screen? - to convert an existing flash loading screen to a javascript/html5 animation? – Rich Sep 15 '15 at 15:32
  • i'm using Flash CC 2015 to create a html5 canvas animation (published to HTML5), but then i realised that it took some time to show the whole canvas animation, so i think, i need a loading screen, (i don't want to put a swf file as a loading screen, it must be a javascript file, html5 file or any image file like .gif). I found a library called a PreloadJS, but i don't know how to use it/put it in my file. Thanks for your response,.. – Arfian90 Sep 16 '15 at 04:04

1 Answers1

1

I've got a codepen with an example of how to use PreloadJS which should help you get started:

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;
}
Rich
  • 970
  • 2
  • 16
  • 42