Monday, January 17, 2011

Embed the Scratch experimental viewer on your website.

Many people know that scratch is moving to a flash based platform. MIT has created an experimental viewer but at the moment only those who sign up to use it can access it. I will tell you how you can embed the flash version on to your website.

First of all you might as well sign up to use the experimental viewer as this will make it much easier to embed in a web page. Navigate to the project you want to embed and view it in the experimental viewer. Right click on the edge of the viewer (not on the flash object) and look at the page source.

You should see something like this
<div class="frame" id="div">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://macromedia.com/cabs/swflash.cab#version=6,0,40,0"
  id=Scratch WIDTH="100%" HEIGHT="100%">
 <PARAM NAME=movie VALUE="/static/experimental/Scratch.swf?owner=what-the&
projectname=1003864&userid=369503">
 <PARAM NAME="bgcolor" VALUE="#000000">
 <PARAM NAME=quality VALUE=medium>
 <PARAM NAME="allowScriptAccess" VALUE="always">
 <param NAME="wmode" VALUE="opaque">
 <EMBED src="/static/experimental/Scratch.swf?owner=what-the&projectname=
1003864&userid=369503"
  bgcolor="#000000"
  WIDTH="100%" HEIGHT="100%"
  allowScriptAccess="always"
  wmode="opaque"
  TYPE="application/x-shockwave-flash">
 </EMBED>
 </OBJECT>
<div class="popup"></div>
 
 
You should see something like this
<EMBED src="/static/experimental/Scratch.swf?owner=what-the&projectname=
1003864&userid=369503"
 
Copy the username, project number and userid into this code in red.
<div class="frame" id="div">
<EMBED 

src="http://scratch.mit.edu/static/experimental/Scratch.

swf?owner=username&projectname=projectnumber&userid=userid"
        bgcolor="#FFFFFF"
        WIDTH="100%" HEIGHT="100%"
        allowScriptAccess="always"
        wmode="opaque"
        TYPE="application/x-shockwave-flash">
    </EMBED>
</div>
 
If done correctly it should look like this.



Because of this websites source code the player has been resized.
Save it as .HTML in notepad. Play around with it add some text above and below. Give the frame a set size to control the size of the flash player.

2 comments:

Scratcher said...

Awesome. This is useful.

Nitez Productions said...

Interesting... too bad it shows your source code :/