<!DOCTYPE html> <meta charset=utf-8> <title>Scratch HTML5 vs. Flash</title> <link rel=stylesheet href=player.css> <link rel=stylesheet href=compare.css> <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> <script> $(document).ready(function() { var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160; var scratch = new Scratch(project_id); }); </script> <script> var flashLog = null; var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160; $(function() { // The flashvars tell flash about the project data (and autostart=true) var flashvars = { server: encodeURIComponent('scratch.mit.edu'), debugOps: true, debugOpCmd: 'debugFlash', project_title: '', project_id: project_id }; var params = { allowscriptaccess: 'always', allowfullscreen: 'false', wmode: 'direct', menu: 'false' }; var flashPlayer = null; var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf?brkCache="+project_id; 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; }); $('#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> </div> <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> </div> </div> <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> </div> <textarea id=flash-debug readonly></textarea> </div> <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>