Even though there is a Scratch project website where the Scratch community uploads its projects, there is also an alternative method to embed Scratch within your own website.  Since TeachMeProgramming.com is also teaching HTML5, we are happy to show you how to embed your Scratch applet using HTML5.  Read on to find out more.

Pre HTML5 versions support the <applet> tag, however, this tag is deprecated in HTML5.  HTML5 encourages the use of the <object> tag instead, which is brand new, that can be used to embed media in your website, such as videos and audio.

You will need 2 files in addition to your Scratch projects in the same directory as your HTML5 file:

1. ScratchApplet.jar
2. soundbank.gm

The following code is used to embed a sample applet:

In the code above, the name of the Scratch project is "abc-song.sb" and is assigned to the attribute "value".  The applet's dimensions (height and width) are configurable.

You can view the sample HTML5 by clicking on the image.

Enjoy!

Comments  

 

-1 #4 MC 2014-01-08 18:51

It works on this website on Chrome.

The source code can be viewed in this file.

http://teachmeprogramming.com/media/html5applet.html

Quote

 

 

-3 #3 UsedtoWork 2014-01-08 18:38

This used to work for HTML5.

Until we find out why it isn't working, we can rely on the old embed version that can be found here.

http://www.passyworld.com/passyPDFs/HowToEmbedScratch.pdf

Quote

 

 

-2 #2 Jan 2014-01-08 18:21

I get a ClassNotFoundEx ception although I did it the way you explained it. Any idea what the problem might be?

Quote

 

 

-2 #1 EmBee 2012-04-16 10:07

Awesome!!!

In one night (albeit a very long night) I made my first animation and uploaded it to a website! AMaZinG

Great instructions! Thanks for this code snippet!

Quote

 

Refresh comments list
RSS feed for comments to this post.

Add comment

JComments