2013-10-28 20:00:20 +00:00
<!DOCTYPE html>
2013-11-14 20:08:52 -05:00
< meta charset = utf-8 >
< title > Scratch HTML5 vs. Flash< / title >
2013-10-28 20:00:20 +00:00
2013-11-14 20:08:52 -05:00
< link rel = stylesheet href = player.css >
< link rel = stylesheet href = compare.css >
2013-10-28 20:00:20 +00:00
2014-09-08 16:39:21 -04:00
< script src = http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js > < / script >
< script src = http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js > < / script >
2013-10-28 20:00:20 +00:00
2014-03-10 21:04:56 -06:00
< script >
2014-02-19 20:33:55 -07:00
$(document).ready(function() {
2013-11-14 20:08:52 -05:00
var project_id = location.hash & & parseInt(location.hash.substr(1)) || 10000160;
2014-02-19 20:33:55 -07:00
var scratch = new Scratch(project_id);
});
2013-11-14 20:08:52 -05:00
< / script >
2013-11-04 06:11:05 +00:00
2013-11-14 20:08:52 -05:00
< script >
var flashLog = null;
2014-02-19 20:33:55 -07:00
var project_id = location.hash & & parseInt(location.hash.substr(1)) || 10000160;
2013-11-14 20:08:52 -05:00
$(function() {
// The flashvars tell flash about the project data (and autostart=true)
var flashvars = {
server: encodeURIComponent('scratch.mit.edu'),
debugOps: true,
debugOpCmd: 'debugFlash',
2014-01-29 15:36:10 +00:00
project_title: '',
2013-11-14 20:08:52 -05:00
project_id: project_id
};
2013-11-04 06:11:05 +00:00
2013-11-14 20:08:52 -05:00
var params = {
allowscriptaccess: 'always',
allowfullscreen: 'false',
wmode: 'direct',
menu: 'false'
};
2013-11-04 06:11:05 +00:00
2013-11-14 20:08:52 -05:00
var flashPlayer = null;
2014-05-12 19:52:36 +00:00
var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf?brkCache="+project_id;
2013-11-14 20:08:52 -05:00
swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0",
"http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
flashvars, params, null, function(e) {
$('#flash-scratch').css('visibility', 'visible');
if (e.success) flashPlayer = e.ref;
2013-11-01 22:44:51 -04:00
});
2013-11-04 06:11:05 +00:00
2013-11-14 20:08:52 -05:00
$('#trigger-green-flag, #overlay').click(function() {
flashPlayer.ASstartRunning();
});
// Stop button behavior
$('#trigger-stop').click(function() {
flashPlayer.ASstopRunning();
});
flashLog = $('#flash-debug');
var jsLog = $('#js-debug');
interp.debugOps = true;
interp.debugFunc = function(opCount, opName, args) {
var text = opCount + ': ' + opName + '(' + args.join(', ') + ')';
jsLog.val(jsLog.val() + text + "\n");
};
// Setup synchronized scrolling
flashLog.scroll(function() {
jsLog.scrollTop(flashLog.scrollTop());
});
jsLog.scroll(function() {
flashLog.scrollTop(jsLog.scrollTop());
});
});
function debugFlash(opCount, opName, args) {
var text = opCount + ': '+opName+'('+args.join(', ')+')';
flashLog.val(flashLog.val() + text + "\n");
}
< / script >
< div class = container >
< div id = player-container >
< div class = "arrow vertical" id = up > < / div >
< div class = "arrow vertical" id = down > < / div >
< div class = "arrow horizontal" id = left > < / div >
< div class = "arrow horizontal" id = right > < / div >
< div id = player-header >
< div id = player-header-preload > < / div >
< div id = player-header-version > HTML5< / div >
< button id = toggle-fullscreen tabindex = 1 > < / button >
< button id = trigger-stop tabindex = 3 > < / button >
< button id = trigger-green-flag tabindex = 2 > < / button >
2013-11-04 18:52:33 -08:00
< / div >
2013-11-14 20:08:52 -05:00
< div id = player-content >
< div id = container > < / div >
< div id = overlay > < / div >
< div id = preloader >
< div id = preloader-progress > < div id = preloader-progress-bar > < / div > < / div >
< div id = preloader-caption > Loading project… < / div >
< div id = preloader-details > < / div >
< / div >
2013-11-01 22:44:51 -04:00
< / div >
2013-10-28 20:00:20 +00:00
< / div >
2013-11-14 20:08:52 -05:00
< textarea id = js-debug readonly > < / textarea >
< div id = project-picker >
< span id = address-hint > http://scratch.mit.edu/projects/< / span > < input id = project-id placeholder = 10000160 > < button id = go-project > → < / button >
< / div >
< / div > < div class = container >
< div id = flash-scratch >
< p > Oh Noes! Scratch project cannot display.< br > Flash player is disabled, missing, or less than version 10.2.< / p >
< a href = http://www.adobe.com/go/getflashplayer >
< img src = http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt = "Get Adobe Flash player" target = _blank >
< / a >
2013-10-28 20:00:20 +00:00
< / div >
2013-11-14 20:08:52 -05:00
< textarea id = flash-debug readonly > < / textarea >
< / div >
2014-02-19 20:33:55 -07:00
< script src = js/util/Timer.js > < / script >
< script src = js/util/OffsetBuffer.js > < / script >
< script src = js/util/Color.js > < / script >
< script src = js/util/Rectangle.js > < / script >
< script src = js/Sprite.js > < / script >
< script src = js/Reporter.js > < / script >
< script src = js/Stage.js > < / script >
< script src = js/sound/WAVFile.js > < / script >
< script src = js/sound/SoundDecoder.js > < / script >
< script src = js/sound/SoundBank.js > < / script >
< script src = js/sound/NotePlayer.js > < / script >
< script src = soundbank/Instr.js > < / script >
< script src = js/IO.js > < / script >
< script src = js/primitives/VarListPrims.js > < / script >
< script src = js/primitives/MotionAndPenPrims.js > < / script >
< script src = js/primitives/LooksPrims.js > < / script >
< script src = js/primitives/SensingPrims.js > < / script >
< script src = js/primitives/SoundPrims.js > < / script >
< script src = js/primitives/Primitives.js > < / script >
< script src = js/Interpreter.js > < / script >
< script src = js/Runtime.js > < / script >
< script src = js/Scratch.js > < / script >
