我只是好奇,是否有可能創建一個HTML5文件的加載屏幕,這是以前用Flash CC HTML5創建的?如果可能的話(我希望是這樣),我該怎麼做,或者你可以告訴我這樣做的參考(我之前已經閱讀過preloadJS,但從來沒有使用它)?謝謝你的迴應,我爲我的英語不好而感到抱歉。加載HTML5文件使用Flash CC 2015創建的文件
0
A
回答
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;
}
相關問題
- 1. 使用adobe flash創建windows(.exe)文件
- 2. 使用Visual Studio 2015創建apk文件
- 3. 用c#創建flash文件#
- 4. 使用javascript檢查flash文件加載
- 5. .sh添加html5模板創建文件
- 6. 未註冊HTML5畫布的觸控事件使用Flash CC創作
- 7. Flash - 爲Flash CS5創建組件文檔
- 8. 無法加載Webview包含PDF文件,Flash文件轉換爲HTML5 Android
- 9. 如何使用flash創建,追加和讀取txt文件as3
- 10. 放大的WebView加載Flash文件
- 11. 使用PHP創建和下載文件
- 12. 使用JavaScript創建文件並調用下載文件
- 13. 在HTML5中使用JavaScript創建文本效果(如Flash)
- 14. PHP創建文件並下載文件
- 15. MySQL - 通過加載的配置文件創建my.cnf文件
- 16. 如何加載/創建Excel文件?
- 17. rdfstore-js創建/加載本地文件
- 18. 加載外部文本文件到Flash - 網址不加載
- 19. Flash CC - HTML5畫布:幻燈片導航
- 20. 加載Flash文件(.swf文件)的WebView在android系統
- 21. 使用文件創建iCloud文件夾
- 22. 使用PowerShell加載文件文件?
- 23. 下載一個使用HTML5文件空間API在Chrome上創建的文本文件
- 24. 如何加載使用Pimage創建的最新文件夾?
- 25. 在Flash中按順序加載文件?
- 26. Flash AS3加載SWF文件到橫幅
- 27. Flash builder basic - 嘗試加載air.swf文件
- 28. flash加載多個xml文件
- 29. 使用biopython創建沒有創建任何文件的文件
- 30. HTML5和下載的文件
可以請你確認,你想: - 一個swf播放的載入畫面? - 將現有的Flash加載屏幕轉換爲javascript/html5動畫? – Visualife
我使用Flash CC 2015創建html5 canvas動畫(發佈到HTML5),但後來我意識到花了一些時間來顯示整個canvas動畫,所以我認爲我需要一個加載屏幕,(我不' t想要把swf文件作爲加載屏幕,它必須是一個JavaScript文件,html5文件或任何圖像文件,如.gif)。我找到一個名爲PreloadJS的庫,但我不知道如何使用它/將它放在我的文件中。感謝您的回覆,.. – Arfian90