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