htmlflash-ccpreloadjs

Loading Screen for HTML5 File created with Flash CC 2015


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.


Solution

  • 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;
    }