2015-09-14 114 views
0

我只是好奇,是否有可能創建一個HTML5文件的加載屏幕,這是以前用Flash CC HTML5創建的?如果可能的話(我希望是這樣),我該怎麼做,或者你可以告訴我這樣做的參考(我之前已經閱讀過preloadJS,但從來沒有使用它)?謝謝你的迴應,我爲我的英語不好而感到抱歉。加載HTML5文件使用Flash CC 2015創建的文件

+0

可以請你確認,你想: - 一個swf播放的載入畫面? - 將現有的Flash加載屏幕轉換爲javascript/html5動畫? – Visualife

+0

我使用Flash CC 2015創建html5 canvas動畫(發佈到HTML5),但後來我意識到花了一些時間來顯示整個canvas動畫,所以我認爲我需要一個加載屏幕,(我不' t想要把swf文件作爲加載屏幕,它必須是一個JavaScript文件,html5文件或任何圖像文件,如.gif)。我找到一個名爲PreloadJS的庫,但我不知道如何使用它/將它放在我的文件中。感謝您的回覆,.. – Arfian90

回答

1

我有一個與如何使用PreloadJS這應該幫助你開始一個例子codepen:

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; 
} 
+0

哇!它像我期望的那樣工作,非常感謝你@Visuallife,你真的救了我的命。我可以使用你的代碼並修改它一點嗎? – Arfian90

+0

不客氣,當然,幫助自己。 – Visualife

+0

再次感謝,我真的很感激它, – Arfian90