Discuss Scratch

chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

Edit 2:
Nope, thumbnails still not working

@novice27b has also provided a javascript version which is probably easier to use:
https://scratch.mit.edu/discuss/post/2575955/
————————————

One of the questions I get asked most frequently on my profile is how I created my animated project thumbnail. I used to have a pretty good explanation of how I did it, which used @MegaApuTurkUltra's awesome GUI Thumbnail Hacker.

Unfortunately, his tool now seems to be broken for me, giving me “java.net.SocketException: Socket is closed” - no good!
(NB I would still suggest trying his tool if you are unfamiliar with programming outside of Scratch)

So, I did some digging around and found this piece of Ruby code, written by @novice27b:
require "socket"
require "openssl"
 
file = File.binread('FILE PATH TO ANIMATED GIF GOES HERE - MUST BE UNDER 1MB')
id = 'PROJECT ID GOES HERE (THE END PART OF YOUR PROJECT URL)'
sessid = 'SCRATCH SESSION ID GOES HERE - CHECK YOUR BROWSER COOKIES TO GET THIS VALUE'
 
socket = TCPSocket.open("scratch.mit.edu", 443)
ssl = OpenSSL::SSL::SSLSocket.new(socket)
ssl.connect()
 
message = "\
POST /internalapi/project/thumbnail/#{id}/set/ HTTP/1.1\r\n\
Host: scratch.mit.edu\r\n\
Cookie: scratchcsrftoken=; scratchsessionsid=#{sessid}\r\n\
Content-Length: #{file.bytesize}\r\n\r\n"
 
ssl.write(message)
ssl.write(file)
 
while ( (c = ssl.getc) != "}" )
   print c
end
 
puts
(For anyone interested, I've also hosted the code on gist here.)

You will notice that there are 3 variables which you need to set, I'll guide you through these now:

File:
This is the full file path to your file.
You can easily get this by opening file explorer (or the Mac equivalent), copying and pasting the folder path at the top and adding the name of your file.
Make sure to also include the file extension (because this is for animated gif files, your file extension will be .gif)
Also, your animated gif must be under 1MB for Scratch to accept it.



ID:
This is the id of the Scratch project that you want to set the thumbnail for.
You can get your project id by simply copying the number at the end of your project url

eg.
https://scratch.mit.edu/projects/124823106/ <- 124823106 is the ID of this project

Session ID:
This is a value used by Scratch to determine who you are (otherwise anybody could set anyone's project thumbnails)
It's stored in a cookie called “scratchsessionid” by your browser.
Every time you log back into Scratch, this value changes (so you will need to update your code again if you log out and back in)
Don't be scared if it's long!

How to get your scratch session ID in Chrome:
Step 1:



Step 2:



Step 3:



WARNING: Never post your full Scratch session ID online - keep it secret

Putting it all together
Your final code with your inputs should look something like this:

require "socket"
require "openssl"
 
file = File.binread('C:\Users\USERNAME\Documents\Thumb.gif')
id = '124823106'
sessid = '".eJxV****************(Censored)******************oACIY"'
 
socket = TCPSocket.open("scratch.mit.edu", 443)
ssl = OpenSSL::SSL::SSLSocket.new(socket)
ssl.connect()
 
(--Snip--)

Running the code:
To run the code, you will need to install Ruby:
First, save your edited file in a place you can remember (eg. your documents) and give it a file extension of .rb (This is the file extension used for Ruby files)
Then, click on the file in file explorer to run it.
A console window will briefly open, display some text and close itself.
To check it was successful, refresh “My Stuff” and see if you can see your animated thumbnails - changes should always show up the next time you refresh.

Disclaimer:
  • The scratch team has stated that any projects with animated thumbnails will be marked NFE - this means they cannot be put on the front page (ie. it can't be curated, featured, top-loved, etc.); neither will they come up in project search results
  • Animated project thumbnails may cause your profile page to lag whilst loading
  • As stated above, never post your full Scratch session id online - keep it private, as if it were your password

Last edited by chooper100 (May 1, 2017 18:38:47)

chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

Other points not covered in the first post:

Creating an animated gif:
To create my animated gifs, I create a Scratch project, record it as a movie and then convert it to a gif:

Recording your Scratch project:
See this tutorial here:
https://scratch.mit.edu/projects/119672701/ (by @-DoodlePaw-)

For options, you can turn off sound as gif files do not have sound.

Converting your .flv file to a .gif file:
For it to work as a thumbnail, you need to use a .gif file - you will need to convert the .flv file Scratch produced into a .gif file.
I recommend using this converter.

Setting an unshared project as your featured project:
See this tutorial here:
https://scratch.mit.edu/projects/31250106/ (by @Babissimo)

Last edited by chooper100 (Nov. 12, 2016 23:09:19)

MegaApuTurkUltra
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

Thanks for sharing this!

I was going to make a new thumbnail hacker and fix the error but I'm really bogged down by everything right now

^ it's joke
SCRATCHERNUMBERONE
Scratcher
87 posts

Animated Project Thumbnails in Scratch

Really nice!

card100
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

MegaApuTurkUltra wrote:

Thanks for sharing this!

I was going to make a new thumbnail hacker and fix the error but I'm really bogged down by everything right now
You should, not everyone can do ruby

Thanks for the tutorial! Going to try it. If only a website could run like @MegaApuTurkUltra 's exe.

-card100



Search all posts by me by searching on Google:
as;dflasdfpa98qweryhasdfvpiajnsdfvoaphsdnfajo
chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

card100 wrote:

Thanks for the tutorial! Going to try it. If only a website could run like @MegaApuTurkUltra 's exe.

Yes, a web-based tool would have been ideal.
Unfortunately, with JS you can't send requests to the Scratch API due to cross origin requests being blocked (this is a standard security feature)
gh22213
New to Scratch
2 posts

Animated Project Thumbnails in Scratch

What file extension would the ruby file be?
chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

gh22213 wrote:

What file extension would the ruby file be?
Ruby files use .rb

EDIT:
Now updated main tutorial to include better instructions for running the code

Last edited by chooper100 (Nov. 16, 2016 04:46:57)

chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

Btw should we request to get this ITopiced?
IcyCoder
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

chooper100 wrote:

Btw should we request to get this ITopiced?
Sure why not.

Because JS is the future (echos) future future futur futu fut fu f
jokebookservice1
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

chooper100 wrote:

card100 wrote:

Thanks for the tutorial! Going to try it. If only a website could run like @MegaApuTurkUltra 's exe.

Yes, a web-based tool would have been ideal.
Unfortunately, with JS you can't send requests to the Scratch API due to cross origin requests being blocked (this is a standard security feature)
I'm going to start working on a userscript, so that people will have a web based tool

You won't convince somebody with annoying sarcasm; yet that's exactly what I probably just did in the post above.
chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

jokebookservice1 wrote:

I'm going to start working on a userscript, so that people will have a web based tool

Am looking forwards to seeing it working
jokebookservice1
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

nvm, I need to put the file in the body of the message somehow

Last edited by jokebookservice1 (Nov. 26, 2016 14:01:16)


You won't convince somebody with annoying sarcasm; yet that's exactly what I probably just did in the post above.
card100
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

jokebookservice1 wrote:

nvm, I need to put the file in the body of the message somehow

-card100



Search all posts by me by searching on Google:
as;dflasdfpa98qweryhasdfvpiajnsdfvoaphsdnfajo
jokebookservice1
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

card100 wrote:

jokebookservice1 wrote:

nvm, I need to put the file in the body of the message somehow
With from data, you usually have a name=“something” type=“file”, does anybody know how to make it just send the file without the name? Or hwat name should I use? (I will switch to AJAX if I have to)

You won't convince somebody with annoying sarcasm; yet that's exactly what I probably just did in the post above.
chooper100
Scratcher
500+ posts

Animated Project Thumbnails in Scratch

jokebookservice1 wrote:

With from data, you usually have a name=“something” type=“file”, does anybody know how to make it just send the file without the name? Or hwat name should I use? (I will switch to AJAX if I have to)

tbh (assuming you aren't using JQuery) I'd just create an xml http request through js rather than messing around trying to get the whole process working through forms alone (so you'd use the form.submit event rather than the action property on the form

At any rate however, I suspect you might want to create a separate topic if you want help programming this (as you will get less exposure on this topic)
jokebookservice1
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

chooper100 wrote:

jokebookservice1 wrote:

With from data, you usually have a name=“something” type=“file”, does anybody know how to make it just send the file without the name? Or hwat name should I use? (I will switch to AJAX if I have to)

tbh (assuming you aren't using JQuery) I'd just create an xml http request through js rather than messing around trying to get the whole process working through forms alone (so you'd use the form.submit event rather than the action property on the form

At any rate however, I suspect you might want to create a separate topic if you want help programming this (as you will get less exposure on this topic)
Fair point; thanks! I think I'll go learn some Ruby to fully understand the requests made in this thread, and then do some XMLHttpRequests.

You won't convince somebody with annoying sarcasm; yet that's exactly what I probably just did in the post above.
kinggregg1617
New to Scratch
1 post

Animated Project Thumbnails in Scratch

help me
MegaApuTurkUltra
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

kinggregg1617 wrote:

help me
Elaborate please?

^ it's joke
Sigton
Scratcher
1000+ posts

Animated Project Thumbnails in Scratch

I'm trying to install the dependencies, and there appears to be no gem called ‘socket’. What's the name I'd use to install it?

Sigton

EDIT: I can't get openssl working either; it claims to be unable to create the makefile or something of the sort, which it suggested may be due to missing header files. Help would be appreciated (I have the devkit installed).

Last edited by Sigton (Jan. 9, 2017 21:22:38)


Powered by DjangoBB

Standard | Mobile