Convertir un projet en .html

Convertir un projet en .html

Dans ce tutoriel, il va être appris comment convertir un projet Scratch (.sb2 ou .sb3) en HTML (.html).

Une fois la conversion réalisée, nous allons avoir un fichier .html qui pourra être ouvert facilement sur un navigateur, avec ou sans connexion internet. Flash Player n'étant plus supporté et ne pouvant plus être utilisé globalement pour regarder son projet Scratch sur un navigateur internet, voici une nouvelle possibilité de lire son projet Scratch.

Le convertisseur Turbowarp Packager

Pour pouvoir convertir son projet Scratch, il est possible d'utiliser le convertisseur TurboWarp Packager du site Turbowarp créé par @GarboMuffin.

Importer son projet

Pour commencer, il faut donner une référence vers le projet au convertisseur, voici plusieurs possibilités :

Prendre l'ID ("Identity Document", peut être traduit "Pièce d'identité" en français, dans ce cas, c'est la suite de chiffres dans l'adresse internet d'un projet) du projet Scratch et la coller dans la première zone ou insérer l'adresse du projet ;
Choisir un projet téléchargé sur l'appareil dans un dossier ;
Renseigner une adresse internet où le projet est hébergé et par laquelle il pourra être importé afin de faire la conversion.

Choisir les options de conversion

Il y a aussi de nombreuses options disponibles, les voilà :

Choisir d'activer par défaut le Mode Turbo sur le projet après la conversion. Si cette option est cochée, le Mode Turbo sera toujours activé. On peut également choisir la fréquence d'image (FPS) du projet.
L'interpolation pour rendre certains projets plus fluides.
Une meilleure qualité d'image en ayant une résolution supérieure à 480x360 pixels.
Clones infinis : supprime la limite de 300 clones par projet.
Remove fencing : permet aux sprites de se déplacer hors champ.
Remove Miscellaneous Limits : supprime les limites des variables : son, taille du stylo…
Après la conversion, il n'est plus possible au projet de deviner le nom d'utilisateur de celui qui le regarde. C'est pourquoi une option permet de choisir le nom d'utilisateur qui sera utilisé, il est possible d'écrire n'importe quel nom d'utilisateur.
Customiser la taille de la scène.
Afficher un texte personnalisé sur l'onglet du navigateur avec le projet Scratch en HTML. Par défaut, c'est le nom du projet qui est affiché. Cela donnera ce que l'on peut faire avec la balise <title></title> en HTML.
Il est possible de choisir un "Favicon" pour le fichier HTML du projet. Un "Favicon" est l'icône du site internet qui est dans la plupart des navigateurs affichée sur les onglets. Nous pouvons décider de ne pas en importer, il n'y en aura donc aucun de visible ou sur certains navigateurs le "Favicon" de base.
Nous pouvons choisir une image d'arrière-plan pour le projet une fois la conversion effectuée. Le projet ne prendra pas l'ensemble de l'espace disponible pour faire voir le contenu HTML, il est donc possible de choisir une image au lieu des bandes qui remplissent les côtés.
Il y a la possibilité de choisir si l'on veut qu'il y ait une barre de chargement du projet (les côtés ne sont pas arrondis, c'est simplement une barre toute droite) ainsi qu'un texte et une image l'accompagnant.
Il est possible de décider si nous voulons que le projet commence automatiquement dès qu'il est chargé ou de le faire se commencer uniquement quand le drapeau vert est cliqué par celui qui visite le projet.
Nous pouvons choisir d'ajouter un bouton permettant de voir le projet en plein écran (nous ne verrons plus les onglets du navigateur, etc). Si cette option est cochée, le bouton sera par défaut en haut à droite, la position ne peut pas être changée.
Par défaut, le fichier HTML du projet ne contient pas les boutons "Stop" (aussi nommé "Arrêter", comme son nom l'indique, c'est pour arrêter le projet) et le drapeau vert (il permet d'exécuter le projet à partir du début à tout moment), nous pouvons décider de les ajouter avec cette option.
Il est de même possible d'ajouter un bouton pour que l'on puisse introduire un Sprite que l'on peut choisir.
Il y a la possibilité d'étirer le contenu visible du fichier HTML afin qu'il puisse prendre l'ensemble de l'espace (il n'y aura pas de bandes de couleurs sur les côtés, le fond d'écran ne sera pas visible). Nous pouvons choisir si nous voulons étirer uniquement l'image de chargement ou l'image de chargement et le projet.
Cette autre option nous propose en l'occurence de garder le pointeur de souris par défaut de l'ordinateur, de le cacher quand le fichier HTML est ouvert et l'onglet actuel ou bien de le changer pour une image personnalisée que nous pouvons choisir sur notre ordinateur (pour un super pointeur de souris, privilégier l'extension de fichier .png et une image faisant 32 pixels par 32). Une autre sous-option nous permet de verrouiller le pointeur de souris quand l'utilisateur clique sur le projet.
Il y a maintenant la possibilité de changer l'apparence des variables comme nous le souhaitons, option pratique pour adapter la variable d'un score au style du jeu par exemple. Par défaut la couleur de fond est un noir translucide, nous pouvons changer cela et choisir une couleur opaque. Nous pouvons désormais choisir la couleur du texte de la variable et cacher les bords de celle-ci.

Convertir et télécharger

Enfin pour convertir votre fichier il suffit de sélectionner "Plain HTML (standalone, works anywhere)" puis de cliquer sur le bouton rouge (Package).

Le convertisseur HTMLifier

Pour pouvoir convertir son projet Scratch, il est possible d'utiliser le convertisseur HTMLifier créé par @Sheep_maker.

Instructions

Attention :

Il est recommandé par HTMLifier lui-même d'utiliser TurboWarp Packager, car il offre de meilleures performances.

Ouvrir le site Web HTMLifier.
Charger le projet.
Si le projet se trouve sur le site Web de Scratch, copier l'ID du projet (la dernière série de numéros dans le lien. Par exemple, si le lien est https://scratch.mit.edu/projects/123456 l'ID est 123456) et le coller là où il est écrit "a project ID on Scratch. Project ID:" (en français "un ID de projet sur Scratch. ID du projet :").
Si le projet n'est pas sur le site Web de Scratch et que vous avez le fichier .sb, .sb2 ou .sb3, sélectionner "selecting a file on your computer:" (en français "en sélectionnant un fichier sur votre ordinateur :"), puis cliquer sur "Choisir le fichier" pour choisir le fichier.
Si le fichier de projet est hébergé sur un site Web externe, sélectionner "a project file hosted online. URL to the file:" (en français "un fichier de projet hébergé en ligne. URL du fichier:") et fournir un lien vers ce fichier de projet.
Il est possible de modifier les paramètres facultatifs.
Cliquer sur "HTMLify".

Utiliser le fichier .html

Pour ouvrir votre fichier .html une fois téléchargé, il y a plusieurs possibilités. Il est premièrement possible de se rendre dans l'explorateur de fichiers de l'appareil, sur le dossier dans lequel le fichier a été téléchargé, puis de cliquer sur l'icône ou le nom de ce fichier .html.
Sinon, il existe aussi sur certains navigateurs, des gestionnaires de téléchargements où il va normalement falloir juste avoir à cliquer sur le nom ou l'icône du fichier .html pour qu'il s'ouvre. Il n'est pas possible de retrouver le fichier sur un autre navigateur que celui avec lequel la conversion a été effectuée. Une connexion internet n'est pas nécessaire pour exploiter le fichier.

Cet article fait partie de la catégorie des tutosTous les articles de cette catégorie :

() non ou exclusif () (tutoriel)

() ou exclusif () (tutoriel)

Afficher un score avec un sprite (tutoriel)

Afficher un texte avec le stylo (tutoriel)

Ajouter un highscore (tutoriel)

Animation d'un sprite (tutoriel)

Bases du stylo (tutoriel)

Calculer les FPS (tutoriel)

Chercher les nombres premiers (tutoriel)

Chronomètre pausable (tutoriel)

Collisions et hitbox (tutoriel)