- From the Edit menu, select the Share This Project Online option to display the Upload to server dialog box.
- Enter the requested information. Most of it should be self-explanatory, such as Your Scratch web site login name, Password, Project name, and Project notes.
Note
We created a login to the Scratch web site in Chapter 3. If you did not create a username and password, then click the Create account link.
- Scratch allows us to label our projects with tags. Select the tags that best describe the project. I'm sharing pong, so I'll label my project as a game.
- Type additional tags to identify the project if necessary. These can be anything you like. I'm going to enter pong as a tag.
- Click OK to upload the project to the Scratch web site. A status message displays while the project uploads.
- When the project upload completes, an Upload Succeeded message displays. Click OK to accept the message.
You can now view your project online. Go to http://scratch.mit.edu in your web browser, and look for your project in the Newest Projects category.
If, for some reason, you're unable to find your project on the front page of the Newest Projects gallery, then log in to your Scratch account to display your project list. Click on the project to play it online.
Congratulations! You contributed your first project to the Scratch community with the click of a button.
Prior to uploading the project, we were prompted to describe our project with information, including the title, a description, and the tags. The information we entered will help our projects be found on the Scratch web site.
It seems like every site we visit uses a tagging system as a user-defined classification system. Scratch is no exception.
The problem with most tagging systems is that they rely entirely on user-entered data, which means tags are duped and inconsistently used. For example, I may use the "game" tag one time and the "games" tag another time. Because our goal is to quickly label and identify items with tags, this is a problem.
Scratch helps us out a little bit by providing several default tags for Animation, Art, Game, Music, Simulation, and Story. By selecting one or more of these broad categories, we begin to consistently label our projects.
We're able to refine our description with user-specified tags. So, if our game happens to be about fishing, we could specify "fishing" as a tag. If your project promotes an ideal or argues for a position on an issue, you could use the "propaganda" tag. Just checking to see how closely you're reading. Anything goes as a tag.
On the Scratch web site, we can browse popular tags via the tag cloud. The following screenshot shows a tag cloud from the Scratch web site:
The most popular tags are represented with a large font size and are bold. Notice any similarities between the tag cloud and the default tags in the share dialog? The most popular tags on the web site are also the default tags. Click on any tag to browse all projects associated with that tag.
It's likely that you will change a project after you've uploaded it to the Scratch web site, and you will want to update the version of the project on the web site. However, Scratch doesn't have an update button.
So, what do you do?
Share the project using the Share! button. When prompted for a Program Name, enter the same name that you used the first time you shared the program. This will update your project on the Scratch web site.
In order to view the updated project on the Scratch web site, you may need to clear your Java cache. On Windows, right-click on the java icon in the system tray and select the open console option. Type x to clear the cache.
Close the console and view your project again. Don't forget to refresh the page in your browser.
There are a couple of problems that may pop up when you share your project on the Web. Let's take a look at two issues, as of Scratch 1.3.1.
If you're a Firefox user, then the Scratch application may be too small when you view it on the Scratch web site. For example, the right and bottom edges of the stage will not be visible.
To work around this problem, zoom in on the page by simultaneously pressing the Ctrl and + keys until the stage is fully visible.
Alternatively, you can resize the page by selecting View | Zoom | Zoom In from Firefox's menu.
You may experience a problem with a variable on the stage reverting to its original position on the stage. For example, the variable may move from the center of the stage to the top-left corner.
This is a known issue with a workaround.
Before you upload your project, make sure all the variables are visible on the stage. Then, create a script that hides the variable when the flag is clicked.
Save the project and upload it.
Tags make it easy for other users to find our project, but there's a lot of competition for views on the site. To promote our projects, we may choose to link to them from our own web site.
Scratch provides the HTML snippets to embed the project as an image or a Java applet on our web site in the same way you embed YouTube videos.
Whether you have a Joomla!, Moodle, or regular web page, you can embed your Scratch project; we embed a project the same way. We add the HTML snippet from the Scratch web site into the HTML code of our web page. All content management systems or blogs provide a way to do this. Consult your documentation for assistance.
I'll demonstrate the process using a WordPress blog post. Even if you don't have WordPress, you'll be able to follow along for most of the process.
When we add or edit a blog post in WordPress, the default editor displays a WYSIWYG (what you see is what you get) editor. To embed the project, we need to work in the HTML view.
Note
If you don't have a WordPress installation or an account but want to follow along, then visit http://wordpress.com and sign up for a free blog account to promote your Scratch projects.
If you find yourself wondering what HTML means, then you probably won't feel any better to learn that it stands for Hypertext Markup Language. It's the code that tells a web browser what to display when you visit a web page.
Fortunately, you can perform this task without any real knowledge of HTML. Knowing how to copy and paste will get the job done.
Open your game on the Scratch web site and scroll down the page until you see the heading Link to this Project. Click the Embed link to display the HTML snippets that you need to copy into your blog post.
Copy either the image or the applet code, and paste it into the HTML view of the blog's post editor. Click on the HTML tab to see the post's code view. See the following screenshot for an example using WordPress:
If we embed the Java applet into our blog post, then users will be able to play the game without leaving our site. The following screenshot shows a Java applet embedded in a blog post at my site, http://www.badgerfiles.com.
Note that with the applet, we have the flag and stop controls.
If we embed our project as an image, then our post displays as a link that takes the user to the Scratch web site to play the game. The following screenshot shows what the embedded image looks like:
The embedded image does not display the flag and stop controls.
How you decide which method to use is a matter of preference. Do you want to keep visitors on your site or send them to the Scratch web site? Embedding the Java applet keeps visitors on your site.
There is a technical consideration that may make the choice easy. Not everyone will be able to embed a Java applet. Some web hosts, such as the free wordpress.com accounts, do not allow users to embed Java applets. Therefore, embedding an image is the only option.
Want to share your project on Delicious, Facebook, Digg, Twitter, MySpace, Slashdot, or any other popular social network site? No problem. Each project page contains an AddThis.com button that's also listed under the Link to this Project section.
To share a project, hover the mouse over the BOOKMARK button to display a list of popular sites.
If you don't see the network you want, click on the More… button to display a new window of options.
To share your project, click on the service name. The AddThis.com widget will prompt you for a username and password so that it can log in to the service and post the project link to your profile.
Presumably, we already have friends, connections, and followers on our social networks. Therefore, adding our Scratch project is one way we can attract views, comments, and fans to our creative works.
Another way you can cultivate viewers is to entice other people to subscribe to the Really Simple Syndication (RSS) feed of your projects. An RSS feed notifies subscribers when you post a new project.
Note
The best way to learn about RSS is to use it. Start with this Common Craft video: http://www.commoncraft.com/rss_plain_english.
There are numerous RSS readers available, but Google Reader is a popular example. You can learn more at http://www.google.com/reader. Firefox also contains a built-in RSS reader called Live Bookmarks.
Expecting to attract RSS subscribers as a new Scratch programmer may not be realistic, but computer clubs or organizations can use RSS as a way for members to receive automatic project notifications from other members.
A user's page in Scratch displays a list of projects with a Subscribe link. If you visit my user page at http://scratch.mit.edu/users/mike_b, you will see a list of all the projects that we've created in this book.
When you click on the Subscribe link, how your computer interprets the content will depend on how your computer reads RSS feeds. In most cases, you will be prompted to add the feed to your RSS reader.
In worst-case scenarios, the content of the feed will display and you will need to manually add the URL of the feed to an RSS reader. The following screenshot shows the RSS feed for my recent projects, as seen from the Mozilla Firefox web browser:
I'd like to point out a few items. In the browser's address bar is the URL of my project feed: http://scratch.mit.edu/feeds/getRecentUserProjects/223532. You can paste this URL into any RSS reader and gain instant access to my projects' feeds without visiting the Scratch web site.
Next is a Subscribe to this feed using drop-down list that contains a few RSS readers. I use Google, so that's the one I selected from the list. After you click on the application to read your feed, click on the Subscribe link, which is currently obstructed by the drop-down list in the screenshot.