Detailed editor instructions

First of all, you should know that the use of the editor may seem a bit complicated at first sight. But don't worry, as you use it, it becomes quite intuitive.

I advise you to follow this tutorial at least once in order so that you don't get lost.
Also, to understand more easily what is explained, I advise you to open the project in another tab and to test at each step what is explained in this tutorial.

Navigating the different areas of the project

First of all, you should know that there are several areas in the project:

The first area is the main menu which appears automatically when you click on the green flag. It allows you to choose between viewing the animation or editing it.

If you click on “Play” or on the thumbnail, you arrive in a second area which is the “main player” of the animation. With this player, you can watch the animation with the sound and you can see where you are in the animation thanks to the slider that appears when you move the mouse. On the other hand, in the main player, you cannot skip to another part of the animation with the progress bar because it is not compatible with the sound management. To exit the player, you can wait for the end of the animation, or click on the “Quit” button that appears at the top right of the screen when you move the mouse. You can also quit the player by pressing the “q” key.

Finally, when you click on the “Edit” button of the main menu, you arrive in the “editor” which is itself divided into three parts.

The central screen is called “current scene”.

By moving the mouse to the left border of the scene, you arrive in the “Node Menu”. You can leave this menu by moving your mouse to the right.

The third part of the editor is the “time menu”. You can access it by moving your mouse to the top border of the screen of the current scene. To exit, move your mouse down.
From this menu you can click on the “Home” button to return to the “Main menu”.

Create a new animation

To start a new animation, open the “Node Menu”, then click on the “Go to parent” button until the button disappears. Once this is done, the word “Root” should be displayed in red in the top left corner of the screen. Now click on the “Delete Node” button to delete the current animation and start a new one.

Note, however, that the soundtrack that is played in the animation is not reset and that you must manually change the sound called “Audio” that is located in the “Pen” sprite of the scratch editor. You can remove the soundtrack by deleting the existing one or replacing it with your own. In the second case, rename your soundtrack “Audio” so that it can be read by the program.
In case you have opened the scratch editor to modify the sound, remember to go back to the normal page before putting the project in full screen, otherwise the project could be very slow to run.
If you want to stay on the scratch editor page before switching back to full screen mode, go to the “stage” code first, otherwise all the code contained in the “Pen” sprite will slow down the execution of the project.

Explanations related to the creation and management of nodes

Now, I will first explain how to create drawings and text and how to organize them, then in a second step you will learn how to animate them.

Creating a simple drawing

To create a simple drawing, go to the “nodes menu” and click on the “create drawing” button, which is green. A dialog box will appear. Enter the name you want to give to your drawing. Be careful: the name must be less than thirteen characters long and must not have already been used for another node in the project.

Once you have given the name, the appearance of the “Nodes menu” changes. Sliders and buttons appear on the left side of the menu. These allow you to adjust the size, color, saturation, brightness and transparency of the pen. At the bottom right of the menu, a colored circle appears on a black background: it is a preview of the pen's appearance that helps you make your adjustments.

Further down, a slider called “History” allows you to select the colors you have used previously. Below the slider, you can find the “plus” and “minus” buttons that allow you to navigate through the color history. The “Delete” button next to it is used to remove colors from the history that you will not use again.

Once you have set your pen settings to your liking, you can exit the “Node Menu” and go to the “Current Scene”. Once you have done this, there are two ways to draw:

The first way is to click, hold, and drag the mouse to where you want to draw. This method allows you to create abstract shapes like curves for example. However, it generates a lot of data to store and process, which makes the project slower to run and the animation less fluid. If possible, use the second way to draw.

The second way requires you to hold down the space key while you draw. Click once to place the first point, then click again to draw a straight line from the previous point to the new point. You can place multiple points in a row as long as you hold down the space key. Be careful not to hold down the mouse click when you move your mouse in this mode, or the data created will be as heavy as in the first method.

You can use the “arrow up” and “arrow down” keys to change the pen size directly from the current scene, without having to go back to the “node menu”.

By clicking the “z” key, you can undo the last strokes you drew.

Finally, to leave the “drawing” mode, go to the “node menu” and click on the “Edit” button. When you do this, the “Edit” button changes its appearance to the “Draw” button. Clicking the “Draw” button returns you to drawing mode so you can continue the drawing you started.

Changing the appearance of a node

The drawing you have just created is an object that we will call “node” in the rest of this tutorial. There are 3 types of nodes in this project:

Drawings, Texts, and Groups

Don’t worry, we will see later how to use the “text” and “group” nodes.

Each node, regardless of its type, has its own parameters:
An offset, A zoom, An angle, A color offset, and A visibility

These properties can be changed when the node is in edit mode.

A node is in edit mode when, in the current scene, there is a blue dot at the intersection of the vertical blue line and the horizontal blue line. This blue point is very important because it represents the center of your node. In the rest of this tutorial, we will call it the “center blue point”.

“Group” nodes are always in edit mode. “Text“ nodes are always in edit mode, unless you are in the process of adding a new line to your text node. Finally, ”drawing“ nodes are only in edit mode if you are not in drawing mode.

As a reminder, you can leave the drawing mode by clicking on the ”Edit“ button in the nodes menu.

The ”Offset“ property defines the position of the node in the scene. So when you go to the current scene, you can move the node by clicking and dragging the ”center blue dot“. The ”arrow keys“ can also be used to move the current node. You can also reset the offset to the default value by clicking on the ”Reset Offset“ button in the ”Node Menu“.

The ”Zoom“ property defines the size of the node in the scene. So you can increase or decrease the size of the node in the current scene by clicking somewhere other than the ”center blue dot“ and then moving your mouse closer to or further away from the ”center blue dot“ while holding down the click.

If you do the same thing while holding down the ”space“ key, you can change the proportions of the node by width and height. However, this feature doesn't work very well and isn't very useful unless you want to flip the node vertically or horizontally.
You can also reset the zoom value to the default value by clicking the ”Reset Zoom“ button in the ”Nodes menu“.

The ”Angle“ property allows you to rotate the node in the current scene. To do this, you must hold down the ”a“ key, click somewhere other than the blue dot and then rotate the cursor around the ”center blue dot“ while holding down the click. You can also reset the angle to its default value by clicking the ”Reset Angle“ button in the ”Node Menu“.

Note: As you may have noticed, the zoom and angle are set relative to the center blue point. When you draw, write text, or place an element somewhere in the scene, be aware that where it is located in relation to the central blue point will determine how it will be zoomed and rotated.

The ”color“, ”saturation“, and ”luminosity“ sliders on the right side of the node menu allow you to adjust the color shift of the node.

Finally, the ”Hide“ or ”Show" button on the right side of the node menu lets you hide or show the node.

Create more complex drawings

Now that you know how to create simple drawings and edit node properties, you can learn how to create more complex drawings that include text, different planes, and articulations. To do this, you first need to understand how to arrange nodes in the “Node Menu”.

As mentioned earlier, there are three types of nodes:

The “Drawings”, which we already know, and whose name appears in green at the top left of the screen.

The “Texts”, which we will explain later, and whose name appears in blue at the top left of the screen.

And finally, the “Groups” whose name appears in red on the top left of the screen.

Groups are special nodes that have the ability to contain other nodes. They are a bit like folders on a computer that can hold files but also other folders. So they allow you to organize the nodes in your project in an clever way.

When you created a new animation, a node called “Root” was automatically created. This node will contain all the other nodes in your animation.

Since for now you have just created a drawing node, you are currently in the node of that drawing. This can be verified by the fact that the name of the node you are in is always displayed at the top left of the screen.

To access “Root”, you must go to the “Node Menu” and then click on the “Go to Parent” button until “Root” is marked at the top left of the screen.

Once you've done this, the name of the drawing you made earlier should appear in the left side of the Nodes menu. This area contains the list of nodes contained in the current group, in this case “Root”. So the fact that your drawing is listed here means that it is contained in the “Root” group.

By clicking on an item listed in a group, you can go inside the corresponding node. Then, to return to the parent group that contains the current node, simply click on the “Go to parent” button.

Only when you are in a group can you create other nodes with the colored buttons at the bottom right of the “Node Menu.

Try creating a second ”drawing“ node from ”Root“ and draw something on it. Then go into ”Edit“ mode to move the drawing you just created. You may notice that it is in the foreground of your previous drawing.

Then go back to ”Root“ and look at the node menu. You may notice that both of your drawings are now listed. Left to the list, there is also an arrow that goes from the word “background” to the word “foreground”. This tells in which rendering layer the nodes of the list are.
According to this indication, the second drawing node you’ve created is closer to the foreground than the other node, which corresponds to what you’ve just experienced while moving the new node around.

Now, while still in the Nodes menu, press and hold ”space“. At the same time, click on the icon for your second drawing, hold it down and move it up the list. Once it's moved up, release the mouse click and stop pressing ”Space“.
Now that the order of the list has changed and your second drawing is positioned near the ”Background“ side of the arrow, go back to your second drawing node and try moving it again. You'll notice that this time the node is behind the first node, just like indicated by the order of the nodes in the list.

Next, go back to ”Root“ and create a new group by clicking the ”create group“ button. Give this group a name. You can then notice that the name of the group you just created is displayed in the top left corner of the screen, which means that you are in it.

Now let's create a text in this new group by clicking on the ”Create text“ button. Again, we need to choose a name for the node. Once inside the text node, on the left you will find the sliders allowing you to adjust the size and color of the text you are going to write. A preview is displayed at the bottom right of the menu.
Once you have made your settings, click on the ”Add text“ button and enter the line of text you wish to write. The node menu will automatically close and the text you have written will be displayed on the current scene and follow your mouse cursor.
At this point you can still use the up and down arrows on your keyboard to change the size of the text. Move your mouse cursor to decide where to place the text and then click the screen to validate.
You can then click ”Add text“ again to add new lines of text.
By clicking ”z“ you can delete the last lines of text you added.

To summarize, at this point, the ”Root“ node now contains two drawings and a group that itself contains a text node. You can check by navigating through the nodes as we learned.

Now let's try to put one of the two drawings we created into the group that contains the text node.
To do that, hold space and pick one of the drawing nodes as if you wanted to change its order in the list. Move the picked node over the group node and release your mouse click. The selected node disappears. You can then verify that it is now listed in the group you dropped it in.

Now that you are in the group you created, try moving the current node, changing its zoom or rotating it. You may notice that all the nodes you’ve put in the group, that is to say the drawing and the text, undergo simultaneously the transformations that you apply to the group.

This is the feature that makes group nodes so convenient. They allow you to apply transformations to all the nodes in them, which enables the possibility to create things like articulations for instance.

If you want to move a node out of a group, go inside the node in question and click the ”Move upwards“ button. You will see that the node is no longer in the group that previously contained it.

Now let's see how to create clones of nodes.
For our example, we will copy the group we just created and its contents.
To do this, first go inside the node you wish to copy. Then click on the ”Copy“ button in the Node Editor or press the ”c“ key.
A message at the top right of the screen will appear indicating that the current node is being copied.
You must then select the location where you want to clone the copied node. This destination cannot be the copied node itself or any of the nodes it contains. So go back to ”Root“ and press the ”Paste“ button or press the ”v“ key. Then look at the last item in the ”Root“ list. This is the clone of the object you copied. Click on this new node to go inside and try moving it to see that it is a duplicate of the node you copied.

If you want to delete a node, go inside the node you wish to delete and click the ”Delete“ button in the Nodes menu.
Please note that if the deleted node is a group, then all nodes in the group will be deleted as well.

When your animation contains many nodes, it can be difficult to remember which node corresponds to which element in the current scene. The solution to this issue is to go to the current scene and hold down the ”s“ key. The contents corresponding to the current node will start to oscillate between white and black.

Also, because nodes in groups undergo transformations, and may be hidden by other nodes, it can be difficult to draw or add text under these conditions. To draw in a drawing node without having to worry about all of this, you can click the ”Hide structure“ button at the bottom left of the node menu when you are in drawing mode or when you are in a text node. For drawing nodes, this temporarily cancels all transformations and for both drawing and text nodes, it hides the other nodes until you are finished drawing or writing.

When the list of nodes in a group is long, a slider appears next to it to navigate through the list. You can also navigate through the list with your mouse wheel by hovering over the list.

Finally, the last feature of the node menu is the ”Rename node" button, which allows you to give a new name to the current node.

Animation Part

Now that you've understood all the features of the node menu, we're going to really start creating an animation using the “time menu”.

At the moment, when you go to the current scene, the name of the selected node is displayed at the top left and next to it is marked “Time: zero” this means that what is displayed on the screen corresponds to what will be displayed at time zero of the animation.

By default, anything you create or change in the “Node Menu” applies at the time that is selected and remains in the animation indefinitely if there are no further changes in the future.

Find the slider and buttons in the “Time menu” that are associated with the word “Step”. The slider allows you to set the size of the time steps to zero point one seconds, one second, or ten seconds.
Set the slider to select “one second” and then click the “plus Step” button five times to advance the time by five seconds. Exit the menu to display the current scene.

Nothing seems to have changed except that the top left corner now says “Time: five”. Now select the node of your choice and move it somewhere else in the current scene.
Go back to the time menu and look at the frieze shown at the top part of the menu. You can see that at time five, a green dot has appeared in the “Global” line and another green dot has appeared in the “Offset” line. If you place your mouse cursor over the point on the “global” line, the name of the node you have just moved is displayed.
The frieze indicates that at time five, the offset of the node has been changed. The green color indicates that this change corresponds to the node that is currently selected and to the time selected.
The frieze can also be used to move through time. When you hover over it, a blue line and a number appear. Click somewhere in the timeline and you will be teleported to the corresponding time.

Use the “Step minus” button or the frieze to return to time zero. Make sure that the slider at the top of the time menu is set to “Speed: one” and then click the “Play from here” button to the right of it.

You are now in the editor's player and you can see your first animation: The node you chose starts from its initial position at time zero and moves to the indicated position at time five in five seconds.

You can do further tests with other nodes and other properties such as angle, zoom, or color offset for example.
You can also add several successive changes to the same node: for example, go somewhere at time five, then go somewhere else at time seven, then go somewhere else again at time ten…

You can also try to hide an object at a given time and make it reappear at another time. To do this, select the times with the time menu, then use the “Hide” and “Show” buttons in the node menu.

As you add changes in time, the time menu frieze becomes more complex. There are orange and purple dots. The orange dots indicate properties of the current node that are changed at a time other than the current time.
The purple dots appear only in the “Global” row and indicate that properties of other nodes are changed at the corresponding time.
You can hover over these dots with your mouse to see which nodes are affected.
Below the frieze, there are “plus” and “minus” buttons that allow you to zoom in and out of the frieze. You can also use the mouse wheel to do the same thing when you hover over the frieze. Next to the plus and minus buttons, there is also a slider that allows you to move around the frieze.

As you can see, the animations created with this project work with key points in time. When you change a property of a node at a given time, you create a key point for that node's property at that time.

The program computes the intermediate parameter values between consecutive keypoints so that the values of the given parameter change smoothly from one keypoint to the next.

Now, you might ask yourself how you can create a key point of a particular property at a given time without having to change its value? For example, you might want a node not to change its position from time tree to eight and then change its position from time eight to ten.

To do this, there is a first way to do it that requires you to do things in order.
Start by placing the node where you want it at time three. Then go to time eight, and in the time menu, click the “Save offset” button.
You have just created a key point for the node's position at time eight. Since the key point value for the offset at time three is the same as the key point value for the offset at time 8, the node will not change position in this time frame. You can then go to time 10 to make the node move from time eight to time ten.

But now, let's imagine that there is already an offset key point at time three as well as at time ten. The program will calculate an intermediate position at time eight which will not be equal to the position at time three. To solve this problem, you can copy the key point of time three and paste it at time eight.

To do this, you must first go to time three. Then you have to check that the time editor contains the buttons “Current only” and “Saved Only”.

If instead you see the buttons “Whole branch” or “All properties”, you have to click on them to change what is displayed.
Then click on the “Copy” button in the time menu or press the “c” key. A message appears in the menu indicating what you have copied.
You can then go to time eight and press the “paste” button on the time menu or click the “v” key. This will copy the key points from the node copied at time three to the same node at time eight.

There are a few things to note about copying and pasting of key points:

First, you cannot copy properties from one node and paste them into another node.

The “Current only” and “Saved Only” buttons are used to define the type of copy and paste to be performed.

If a button displays “Saved Only”, it means that only the key points will be copied. If the button instead shows “All properties”, then the values of all properties in the node will be copied even if they are not current key points. At the time you will paste it, key points will be created for each property in the node.

If a button displays “Current Only”, it means that only the properties of the current node are considered. If the button instead displays “Whole branch” and the selected node is a group, then the properties of the nodes inside the group will also be considered.

You can combine the alternatives of these two buttons to create multiple copy-paste variants.

When you go to a point in time where keypoints for the current node are saved, the “save” buttons for the currently saved properties are replaced by red “delete” buttons. By clicking one of these buttons, you can delete the keypoint corresponding to the indicated property.

Please note that the “save property” and “delete property” buttons are also affected by the “Current Only”/“Whole branch” button so that you can choose to save or delete a given property in all notes contained in the current group.

You can shift all key points of all nodes and all properties that are located after the selected time at once. To do this, use the “Shift +” and “Shift -” buttons. The shift duration is determined by the “step” slider.

When you create a node in the Nodes menu at a time other than zero, the node is hidden by default at time 0 and remains hidden until the time of creation.

If you press the “play from here” button in the time menu and select a time other than 0 or a speed other than 1, the animation will start without sound, but you will be able to change the time during the animation by clicking on the progress bar that appears when you move the mouse.

The thumbnail of the animation is automatically modified as soon as a node is created or deleted. The “Set thumbnail” button in the time menu allows you to choose the current moment as the animation's thumbnail.

In the same way, the “Set Name” button in the time menu allows you to define the name of the animation.

Avoid bad handling, bugs and latency

Before leaving, I will give a few pieces of advice in order to avoid unfortunate situations caused by latency, glitches and bad handling.

To avoid the project being too slow, don’t have too many browser tabs opened at the same time.

If you use the project with the scratch editor open, the project may be very slow.

When you have opened the scratch editor of the project and you want go back to the full screen mode, remember to go back to the normal page first, otherwise the project might be very slow to run.
Otherwise, if you want to stay on the scratch editor page before going back to full screen mode, go to the “stage” code first.
By experience, going in full screen mode while being in the code section of the “Pen” sprite will slow down the project execution.

You can stop the project and click on the green flag again to restart the project without deleting what you have done, but be careful not to do this when an action is in progress (a drawing not finished, or a cloning in progress for instance).

In any case, do not refresh your project page or your changes will disappear.

If you have used the project and want to save your changes, the scratch editor may not offer to save the project because you have not modified the project code itself. In this case, just move a block of the project without changing the structure and the save option will appear.

Remember that this “animation maker” is just a scratch project and not a professional editing software. It would be possible that there are bugs that I was not able to detect. Also, when using the project, you might accidentally make some bad manipulations (deleting an important node for example). Therefore, if you work on an animation for a long time, consider saving a backup of your project from time to time. To do this, go to the editor, click on “File” > “Save to your computer”.
In case of problems, you will thus be able to retrieve your backup by clicking on “File” > “Load from your computer”.

To conclude

Now you theoretically know pretty much everything that you need to in order to create animations with this project. However, becoming comfortable with the editor will take a little practice.
Do not hesitate to try things with it and to share the result as a remix. I would be glad to review it and to give feedback !

If you have a question about the use of the editor and you can't find the answer in this tutorial, don't hesitate to ask me on my profile so that I can help you.

Also, If you have any suggestions on how to better explain the use of the editor, feel free to contact me and/or make your own tutorial.

Thank you for following this tutorial until the end. I hope that this will help you to create wonderful pen animations. I can’t wait to discover your creations !

Instructions détaillées de l'éditeur (En Français)

Tout d’abord, sachez que l’utilisation de l’éditeur peut à première vue sembler un peu compliquée. Mais ne vous inquiétez pas, en l’utilisant, tout cela devrait devenir assez intuitif.
Je vous conseille de suivre ce tutoriel au moins une fois dans l’ordre afin de ne pas être perdu.
Aussi, pour comprendre plus facilement ce qui est expliqué, je vous conseille d’ouvrir le projet “Animation Maker” dans un autre onglet et de tester à chaque étape ce qui est expliqué au cours de ce tutoriel.

Naviguer dans les différentes zones du projet

Tout d’abord, il faut savoir qu’il existe plusieurs zones dans le projet :

La première zone est le “menu principal” qui apparaît automatiquement lorsque vous cliquez sur le drapeau vert. Elle permet de choisir entre le visionnage de l’animation ou son édition.

Si vous cliquez sur “Play” ou sur la miniature, on arrive dans une seconde zone qui est le “lecteur principal” de l’animation. Avec ce lecteur, vous pouvez visionner l’animation avec le son et vous pouvez voir où vous en êtes dans l’animation grâce au curseur qui apparaît lorsque vous bougez la souris. En revanche, dans le lecteur principal, vous ne pouvez pas vous déplacer dans l’animation avec le curseur car ce n’est pas compatible avec la gestion du son. Pour quitter le lecteur, vous pouvez attendre la fin de l’animation, ou cliquer sur le bouton “Quit” qui apparaît en haut à droite de l’écran lorsque vous bougez la souris. Vous pouvez aussi quitter le lecteur en appuyant sur la touche “q”.

Enfin, lorsque vous cliquez sur le bouton “Edit” du menu principal, vous arrivez dans “l'éditeur” qui est lui-même divisé en trois parties.

L’écran central est appelé “scène courante”.

En déplaçant la souris tout à gauche de la scène, vous arrivez dans le “menu des nœuds”. Vous pouvez partir de ce menu en ramenant votre souris vers la droite.

La troisième partie de l’éditeur est le “menu temporel”. Vous pouvez y accéder en déplaçant votre souris vers le haut de l’écran de la scène courante. Pour en sortir, déplacez votre souris vers le bas. Depuis ce menu, vous pouvez cliquer sur le bouton “Home” pour retourner dans le “menu principal”.

Créer une nouvelle animation

Pour commencer une nouvelle animation, ouvrez le “menu des nœuds”, puis cliquez sur le bouton “Go to parent” jusqu’à ce que le bouton disparaisse. Une fois cela fait, le mot “Root” devrait être affiché en rouge dans la partie en haut à gauche de l’écran. Cliquez maintenant sur le bouton “Delete Node” pour supprimer l’animation courante et repartir de zéro pour créer une nouvelle animation.

Notez cependant que la bande son qui est jouée dans l’animation n’est pas réinitialisée et qu’il faut manuellement changer le son appelé “Audio” qui se trouve dans le sprite “Pen” de l’éditeur scratch. Vous pouvez enlever la bande son en supprimant celle existante ou bien la remplacer par votre propre bande son. Dans le second cas, renommer votre bande son “Audio” pour qu’elle soit lue par le programme. Dans le cas où vous avez ouvert l’éditeur scratch pour modifier le son, pensez à retourner sur la page normale avant de mettre le projet en plein écran, sinon, le projet pourrait être très lent à s’exécuter.
Si vous voulez rester sur la page de l’éditeur scratch avant de remettre de mode plein écran, allez d’abord sur le code du “stage”, sinon tout le code contenu dans le sprite “Pen” ralentira l'exécution du projet.

Explications liées à la création et à la gestion des noeuds

Dans un premier temps, vous allez apprendre à créer des dessins et du texte et à les organiser puis dans un second temps vous apprendrez à les animer.

Créer un dessin simple

Pour créer un dessin simple, allez dans le “menu des noeuds” puis cliquez sur le bouton “create drawing” qui est vert. Une boîte de dialogue apparaît alors. Inscrivez-y le nom que vous voulez donner à votre dessin. Attention : le nom doit avoir moins de 13 caractères et ne pas avoir été déjà utilisé pour un autre objet dans le projet.

Une fois le nom donné, l'apparence du “menu des noeuds” change et de nouveaux curseurs et boutons apparaissent sur le côté gauche du menu. Ces derniers permettent de régler la taille, la couleur, la saturation, la luminosité et la transparence du stylo. En bas à droite du menu, un cercle de couleur apparait sur fond noir : il s’agit d’une prévisualisation de l’apparence du stylo qui vous aide à faire vos réglages.

Plus bas, un curseur appelé “History” permet de sélectionner les couleurs que vous avez déjà utilisées précédemment. En dessous du du curseur, vous pourrez trouver les boutons “+” et “-” qui permettent de naviguer dans l’historique des couleurs. Le bouton “Delete” situé à côté sert à supprimer de l’historique les couleurs dont vous n’avez plus besoin.

Une fois que vous avez réglé votre stylo comme bon vous semble, vous pouvez sortir du “menu des nœuds et vous rendre sur la “scène courante”. Une fois cela fait, il existe deux manières de dessiner :

La première manière consiste à cliquer, maintenir le clic, et glisser la souris là où vous voulez dessiner. Cette méthode permet de créer des formes abstraites comme des courbes par exemple. Par contre, elle génère beaucoup de données à stocker et à traiter, ce qui rend le projet plus lent à s'exécuter et l’animation moins fluide. Si possible, privilégiez la deuxième manière de dessiner.

La seconde manière requiert de maintenir la touche espace pressée pendant que vous dessinez. Cliquez une fois pour placer un premier point, puis cliquez ailleurs pour dessiner une ligne droite entre le point précédent et le nouveau point. Vous pouvez placer plusieurs points d’affilée tant que vous maintenez “espace” enfoncé. Attention à ne pas maintenir le clic de souris lorsque vous déplacer votre souris dans ce mode, sans quoi les données créées seront aussi lourdes que pour la première méthode.

Vous pouvez utiliser les touches “flèche haut” et “flèche bas” pour modifier la taille du stylo directement depuis la scène courante, sans avoir besoin de retourner dans le “menu des noeuds”.

En cliquant sur la touche “z”, vous pouvez annuler les derniers traits que vous avez dessiné.

Finalement, pour quitter le mode “dessin”, allez dans le “menu des noeuds” et cliquez sur le bouton “Edit”. En faisant cela, le bouton “Edit” change d’apparence et devient le bouton “Draw”. Cliquer sur le bouton “Draw” permet de revenir en mode dessin et de continuer le dessin précédemment commencé.

Changer les paramètres d’apparence d’un noeud

Le dessin que vous venez de créer est un “noeud” du projet. Il y a 3 types de noeuds dans ce projet :
Les dessins
Les textes
Les groupes
Nous verrons plus tard comment utiliser les nœuds de type “texte” et “groupe”.

Chaque noeud, quel que soit son type, possède des paramètres qui lui sont propres :
Un décalage
Un zoom
Un angle
Un décalage de couleur
Une visibilité

Ces propriétés peuvent être modifiées lorsque le nœud est en mode “édition”.
Un nœud est en mode édition lorsque dans la scène courante, il y a un point bleu au niveau de l’intersection entre le trait bleu vertical et le trait bleu horizontal. Ce point bleu est très important car il représente le centre de votre nœud. Dans la suite de ce tutoriel, nous allons donc l'appeler le “point bleu central".

Les nœuds de type “groupe” sont toujours en mode édition.
Les noeuds de type “texte” sont toujours en mode édition, sauf si vous êtes en train d’écrire un texte.
Enfin, les noeuds de type “dessin” ne sont en mode édition que si vous n’êtes pas en mode dessin. Pour rappel, on peut quitter le mode dessin en cliquant sur le bouton “Edit” dans le menu des noeuds.

La propriété “Décalage” définit la position du nœud dans la scène. En allant sur la scène courante, vous pouvez donc déplacer le nœud en cliquant et en faisant glisser le “point bleu central”. Les touches de “flèches directionnelles” peuvent aussi permettre de déplacer le nœud courant. Vous pouvez également remettre la valeur de décalage par défaut en cliquant sur le bouton “Reset Offset” dans le “menu des noeuds”.

La propriété “Zoom” définit la taille du nœud dans la scène. Vous pouvez donc augmenter ou diminuer la taille du nœud dans la scène courante en cliquant autre part que sur le “point bleu central” puis en rapprochant ou en éloignant votre souris du “point bleu central” tout en maintenant le clic enfoncé.
Si vous faites la même chose tout en maintenant la touche “espace” enfoncée, vous pouvez modifier les proportions du nœud selon leur largeur et leur hauteur. Cependant, cette fonctionnalité ne donne pas des résultats très appréciables et n’est pas très utile à moins de vouloir retourner le nœud verticalement ou horizontalement.
Vous pouvez également remettre la valeur de zoom par défaut en cliquant sur le bouton “Reset Zoom” dans le “menu des noeuds”.

La propriété “Angle” vous permet de tourner le nœud dans la scène courante. Pour faire cela, vous devez maintenir la touche “a”, cliquer autre part que sur le point bleu puis faire tourner le curseur autour du “point bleu central” tout en maintenant le clic enfoncé. Vous pouvez également remettre la valeur d’angle par défaut en cliquant sur le bouton “Reset Angle” dans le “menu des noeuds”.

Attention : Comme vous avez peut-être pu le remarquer, le zoom et l’angle se règlent par rapport au point bleu central. Lorsque vous dessinez, écrivez du texte, ou placez un élément quelque part dans la scène, ayez conscience que l’endroit où il se situe par rapport au point bleu central déterminera la façon dont il subira les zooms et les rotations.

Les curseurs “color”, “saturation”, et “luminosity” qui sont sur le côté droit du menu des noeuds permettent de régler le décalage de couleur du nœud.

Enfin, le bouton “Hide” ou “Show” se trouvant sur le côté droit du menu des nœuds permet de cacher ou de montrer le nœud.

Créer des dessins plus complexes

Maintenant que vous savez créer des dessins simples et modifier les propriétés des nœuds, vous pouvez désormais apprendre à créer des dessins plus complexes qui comprennent du texte, différents plans, ainsi que des articulations. Pour celà, il faut tout d’abord comprendre le fonctionnement du rangement des nœuds dans le “menu des noeuds”.

Comme dit précédemment, il existe trois types de noeuds :

Les “Dessins”, que l’on connaît déjà, et dont le nom apparaît en vert en haut à gauche de l’écran.
Les “Textes”, que nous allons expliquer par la suite, et dont le nom apparaît en bleu en haut à gauche de l’écran.
Et enfin, les “Groupes” dont le nom apparaît en rouge à gauche de l’écran.

Les groupes sont des nœuds un peu spéciaux qui ont la capacité de renfermer d’autres nœuds. C’est un peu comme les dossiers d’un ordinateur qui peuvent contenir des fichiers mais aussi d’autres dossiers. Ils permettent donc d’organiser les nœuds du projet de manière intelligente.

Lorsque vous avez créé une nouvelle animation, un nœud s'appelant “Root” a automatiquement été créé. Ce nœud va contenir tous les autres nœuds de votre animation.

Puisque vous venez de créer un dessin, vous êtes actuellement dans le nœud de ce dessin. Cela est vérifiable par le fait que le nom du nœud dans lequel vous vous trouvez est toujours affiché en haut à gauche de l’écran.

Pour accéder à “Root”, vous devez aller dans le “menu des nœuds” puis cliquer sur le bouton “Go to parent” jusqu’à ce que “Root” soit marqué en haut à gauche de l’écran.

Une fois cela fait, le nom du dessin que vous avez réalisé précédemment devrait apparaître dans la partie gauche du menu des nœuds. Cette zone contient la liste des nœuds contenus dans le groupe courant, en l'occurrence “Root”. Donc le fait que votre dessin y soit listé signifie qu’il est contenu dans le groupe “Root”.

En cliquant sur un élément listé dans un groupe, vous pouvez accéder à cet élément. Ensuite, pour revenir au groupe parent, cliquez simplement sur le bouton “Go to parent”.

C’est seulement en étant dans un groupe que l’on peut créer d’autres nœuds avec les boutons colorés en bas à droite du “menu des nœuds.

Essayez de créer un deuxième nœud de “dessin” depuis “Root” et dessinez-y quelque chose. Ensuite, passez en mode “Edit” pour déplacer le dessin que vous venez de créer. Vous pouvez remarquer que ce dernier est au premier plan par rapport à votre précédent dessin.

Retournez ensuite dans “Root” et observez le menu des noeuds. Vous pouvez remarquer que vos deux dessins figurent désormais dans la liste et que votre deuxième dessin est plus proche du “foreground” de la frise à gauche, ce qui correspond à ce que vous venez d’expérimenter.

Maintenant, en restant dans le menu des nœuds, appuyez sur “espace” et maintenez la touche appuyée. En même temps, cliquez sur l’icône de votre deuxième dessin, maintenez le clic et déplacez le vers le haut de la liste. Une fois que ce dernier est remonté, lâchez le clic de la souris et cessez d’appuyer sur “Espace”.
Maintenant que l’ordre de la liste à changé et que votre deuxième dessin est positionné près de “Background” sur la frise, retournez dans votre deuxième dessin puis essayez de le bouger à nouveau. Vous remarquerez alors que cette fois-ci, le nœud se met derrière le premier dessin, conformément à l’ordre de la liste.

Ensuite, retournez dans “Root” et créez un nouveau groupe en cliquant sur le bouton “create group”. Donnez un nom à ce groupe. Vous pouvez alors remarquer que le nom du groupe que vous venez de créer est affiché en haut à gauche de l’écran, ce qui signifie que vous êtes dedans.

Maintenant, créons un texte dans ce nouveau groupe en cliquant sur le bouton “Create text”. À nouveau, il faut choisir un nom pour le nœud. Une fois Une fois à l’intérieur du noeud de texte, on retrouve à gauche les curseurs permettant de régler la taille et la couleur du texte que l’on va écrire. Une prévisualisation s’affiche en bas à droite du menu.
Une fois les réglages effectués, cliquez sur le bouton “Add text” puis inscrivez la ligne de texte que vous souhaitez écrire. Le menu des nœuds se ferme alors automatiquement et le texte que vous avez écrit est affiché sur la scène courante et suit le curseur de votre souris.
À ce moment, vous pouvez encore utiliser les flèches “haut” et “bas” de votre clavier pour modifier la taille du texte. Déplacez le curseur de votre souris pour décider d’où placer le texte puis cliquez l’écran pour valider.
Pour pouvez ensuite cliquer sur “Add text” pour ajouter de nouvelles lignes de texte.
En cliquant sur “z”, vous pouvez supprimer les dernières lignes de texte que vous avez ajoutées.

Pour résumer, le nœud “Root” contient désormais deux dessins et un groupe qui contient lui-même un texte. Vous pouvez vérifier en naviguant dans les nœuds comme nous l’avons appris.

Essayons maintenant de mettre un des deux dessins que nous avons créés dans le groupe qui contient le noeud de texte. Choisissez un des dessins et allez dans le nœud correspondant. Réinitialisez son offset, son angle et son zoom en utilisant les boutons du “menu des nœuds” suis retournez dans “Root”. Ensuite, maintenez “espace” pressé et prenez un des deux nœuds de dessin comme si vous vouliez changer leur ordre dans la liste. Amenez le nœud que vous avez choisi au-dessus du nœud de groupe puis lâchez le clic de votre souris. Le nœud sélectionné disparaît alors. Vous pouvez alors vérifier qu’il est désormais listé dans le groupe dans lequel vous l’avez lâché.
Vous pouvez cliquer sur le dessin pour le replacer comme vous le souhaitez puis retourner dans le groupe qui le contient.

Maintenant que vous êtes dans le groupe que vous avez créé, essayez de déplacer le nœud, de modifier son zoom ou de le faire tourner. Vous pouvez alors remarquer que tous les nœuds que vous avez mis dans le groupe (le dessin et le texte) subissent les transformations que vous appliquez au groupe.
C’est la particularité qui rend les groupes si pratiques. Ils permettent d’appliquer des transformations à tous les nœuds qu’ils contiennent.

Si vous souhaitez sortir un nœud d’un groupe, allez dans le nœud en question et cliquez sur le bouton “Move upwards”. Vous pouvez alors constater que le noeud n’est plus dans le groupe qui le contenait auparavant.

Voyons maintenant comment créer des clones de noeuds. Pour notre exemple, nous allons copier le groupe que nous venons de créer ainsi que son contenu. Pour faire cela, vous devez vous trouver dans le groupe en question. Ensuite, cliquez sur le bouton “Copy” de l’éditeur des nœuds ou pressez la touche “c”. Un message en haut à droite de l’écran apparaît alors et indique que le nœud courant est copié. Vous devez ensuite à l’endroit où vous souhaitez cloner le nœud copié. Cette destination ne peut pas être le nœud copié lui-même ni un de ceux qu’il contient. Retournez donc dans “Root” et appuyez sur le bouton “Paste” ou pressez la touche “v”. Regardez ensuite le dernier élément de la liste de “Root” Il s’agit du clone de l’objet que vous avez copié. Cliquez sur le nœud et essayez de la déplacer pour constater qu’il s’agit d’une duplication du nœud que vous avez copié.

Si vous souhaitez supprimer un nœud, cliquez sur le bouton “Delete” du menu des nœuds. Attention : Si le nœud supprimé est un groupe, alors tous les nœuds qu’il contenait seront également supprimés.

Lorsque votre animation contient beaucoup de nœuds, il peut être difficile de se rappeler quel nœud correspond à quel élément dans la scène courante. Pour visualiser cela, allez dans la scène courante et maintenez la touche “s” pressée. Le contenu correspondant au noeud courant se met à osciller entre blanc et noir.

D’autre part, comme les nœuds contenus dans des groupes subissent des transformations, et peuvent être cachés par d’autres nœuds, il peut être difficile de dessiner ou d’ajouter du texte dans de telles conditions. Pour dessiner dans un nœud de dessin sans avoir à vous soucier de tout cela, vous pouvez cliquer sur le bouton “Hide struct” qui se trouve en bas à gauche du menu des nœuds lorsque vous êtes en mode dessin ou lorsque vous vous trouvez dans un nœud de texte. Cela annule temporairement toutes les transformations et cache les autres nœuds jusqu'à ce que vous ayez fini de dessiner ou d’écrire.

Lorsque la liste de noeuds contenus dans un groupe est longue, un curseur apparaît à côté et permet de naviguer dans la liste. Vous pouvez également naviguer dans la liste avec la molette de votre souris en survolant la liste.

Enfin, la dernière fonctionnalité du menu des nœuds est le bouton “Rename node” qui permet de donner un nouveau nom au nœud courant.

Partie Animation

Maintenant que vous avez compris toutes les fonctionnalités du menu des noeuds, nous allons véritablement commencer à créer une animation grâce au “menu temporel”.

Pour l’instant, lorsque vous allez sur la scène courante, le nom du nœud sélectionné est affiché en haut à gauche et il est marqué à la suite “Time: 0” cela signifie que ce qui est affiché à l’écran correspond à ce qui sera affiché au temps 0 de l’animation.

Par défaut, tout ce que vous créez ou modifiez dans le “menu des nœuds s’applique au moment qui est sélectionné et reste ainsi indéfiniment dans l’animation s’il n’y a pas d'autres modifications dans le futur.

Trouvez le curseur et les boutons du “menu temporel” associés au mot “Step”. Le curseur permet de régler la taille des sauts temporels à 0.1 seconde, 1 seconde, ou bien 10 secondes.
Réglez le curseur de sorte à sélectionner “une seconde” puis cliquez 5 fois sur le bouton “+ Step” pour avancer de 5 secondes dans le temps. Sortez du menu pour afficher la scène courante.
Rien ne semble avoir changé hormis le fait qu’en haut à gauche il est désormais marqué “Time : 5”. Sélectionnez maintenant le nœud de votre choix et déplacez-le dans la scène courante.
Retournez dans le menu temporel et observez désormais la frise représentée dans la partie supérieure du menu. Vous pouvez observer qu’au niveau du temps 5, un point vert est apparu à la ligne “Global” et qu’un autre point vert est apparu à la ligne “Offset”. Si vous placez votre curseur de souris sur le point de la ligne “global”, le nom du nœud que vous venez de déplacer s’affiche.
La frise indique donc qu’au temps 5, l’offset du nœud précédemment affiché a été modifié. La couleur verte indique que cette modification correspond au nœud qui est actuellement sélectionné.
La frise peut aussi servir à se déplacer dans le temps. Lorsque vous la survolez, une ligne bleue et un numéro apparaissent. Cliquez à un endroit de la frise et vous êtes téléporté au temps correspondant.

Utilisez le bouton “Step -” ou la frise pour retourner au temps 0. Ensuite assurez vous que le curseur en haut du menu temporel soit réglé sur “Speed : 1” puis cliquez sur le bouton “Play from here” qui se trouve à sa droite.
Vous arrivez alors dans le lecteur de l’éditeur et vous pouvez voir votre première animation : Le nœud que vous aviez précédemment choisi part de sa position initiale au temps 0 et va à la position indiquée au temps 5 en cinq Secondes.

Vous pouvez faire d’autre tests avec d’autres nœuds et d’autres propriétés telles que l’angle, le zoom, ou le color offset par exemple. Vous pouvez également ajouter plusieurs modifications successives sur un même nœud : par exemple, aller à telle position au temps 5, puis aller à telle position au temps 7, puis à telle position au temps 10…
Vous pouvez également essayer de cacher un objet à un temps donné et de le faire réapparaître à un autre moment. Pour faire cela, sélectionnez le temps avec le menu temporel, puis utilisez les boutons “Hide” et “Show” du menu des noeuds.

À mesure que vous ajoutez des modifications dans le temps, la frise du menu temporel se complexifie. Il y a des points oranges et violets. Les points oranges indiquent les propriétés du nœud courant qui sont modifiées à un autre moment que le temps courant. Les points violets n’apparaissent que dans la ligne “Global” et indiquent que les propriétés d’autres nœuds sont modifiées à l’instant correspondant. Vous pouvez survoler ces points avec votre souris pour voir quels nœuds sont concernés. En dessous de la frise, il y a des boutons “+” et “-” qui permettent de zoomer ou dézoomer dans la frise. Vous pouvez aussi utiliser la molette de la souris pour faire la même chose lorsque vous survolez la frise. À coté des boutons + et 6, Il y a également un curseur qui permet de se déplacer dans la frise.

Comme vous pouvez le remarquer, les animations créées avec ce projet fonctionnent avec des points clés dans le temps. Lorsque vous modifiez une propriété d’un nœud à un instant donné, vous créez un point clé pour la propriété de ce nœud à cet instant.
Pendant que l’animation se joue, le programme calcule les valeurs intermédiaires de paramètres entre les points clés consécutifs de sorte à passer de manière lisse d’un point clé à l’autre.

Maintenant, vous devez vous demander comment faire pour créer un point clé d’une propriété particulière à un instant donné sans avoir à modifier sa valeur ? Par exemple, vous pourriez vouloir qu’un nœud ne change pas de position entre le temps 3 et 8 puis change de position du temps 8 à 10.

Pour faire cela, il existe une première façon de faire qui nécessite de faire les choses dans l’ordre.
Commencez par positionner le nœud là où vous voulez au temps 3. Ensuite, allez au temps 8, et dans le menu temporel, cliquez sur le bouton “Save offset”. Vous venez de créer un point clé pour la position du nœud au point 8. Puisque la valeur du point clé de la position au temps 3 est identique à la valeur du point clé de la position au temps 8, le nœud ne va pas changer de position dans ce laps de temps. Vous pouvez ensuite vous rendre au temps 10 pour effectuer le déplacement qui se fera entre le temps 8 et le temps 10.

Mais maintenant, imaginons qu’il y ait déjà un point clé d’offset au temps 3 ainsi qu’au temps 10. Le programme va calculer une position intermédiaire au temps 8 qui ne sera donc pas égale à la position du temps 3. Pour régler ce problème, on peut copier le point clé du temps 3 et le collet au temps 8.
Pour faire cela, il faut tout d’abord aller au temps 3. Ensuite, il faut vérifier que l’éditeur temporel contienne les boutons “Current only” et “Saved Only”. Si à la place vous voyez les boutons “Whole branch” ou “All properties”, il faut cliquer dessus pour modifier ce qui est affiché. Ensuite, cliquez sur le bouton “Copy” du menu temporel ou appuyez sur la touche “c”. Un message apparaît alors dans le menu et indique ce que vous avez copié.
Vous pouvez alors vous rendre au temps 8 et appuyer sur le bouton “paste” du menu temporel ou cliquer sur la touche “v”. Cela a pour effet de copier les points clés du nœud copié au temps 3 vers le même nœud au temps 8.

Quelques précisions concernant les copié-collés de points clés :
Premièrement, on ne peut pas copier coller des propriétés dans un certain nœud et les coller dans un autre nœud.
Les boutons “Current only” et “Saved Only” servent à définir le type de copier coller à effectuer.
Si un des boutons affiche “Saved Only”, cela signifie que seuls les points clés seront copiés. Si le bouton affiche “All properties”, alors les valeurs de toutes les propriétés du nœud seront copiées même si elles ne sont pas des points clés. Au moment de coller, des points clés sont alors créés pour chacune des propriétés du nœud.
Si un des boutons affiche “Current Only”, cela signifie que seules les propriétés du nœud courant sont considérées. Si le bouton affiche “Whole branch” et que le nœud sélectionné est un groupe, alors les propriétés des nœuds contenus dans le groupe seront aussi considérées.
Vous pouvez combiner les alternatives de ces deux boutons pour créer plusieurs variantes de copie.
Les valeurs de toutes les propriétés du nœud seront copiées même si elles ne sont pas des points clés. Au moment de coller, des points clés sont alors créés pour chacune des propriétés du nœud.

Lorsque vous vous vous rendez à un instant où des points clés du nœud courant sont enregistrés, les boutons “save” des propriétés actuellement enregistrées sont remplacés par des boutons “delete” rouges. En cliquant sur un de ces boutons, vous pouvez supprimer le point clé correspondant à la propriété indiquée.

Sachez que les boutons “save” et “delete” sont aussi affectés par le mode “Current Only” ou “Whole Branch”, ce qui donne la possibilité de sauvegarder ou supprimer simultanément les points clés liés à une propriété donnée pour tous les nœuds contenus dans un groupe.

Vous pouvez décaler d’un coup tous les points clés de tous les nœuds et de toutes les propriétés qui sont situés après le temps sélectionné. Pour faire cela, utilisez les boutons “Shift +” et “Shift -”.

Quand vous créez un nœud dans le menu des nœuds à un instant différent de 0, le nœud est par défaut caché au temps 0 et le reste jusqu’à l’instant de création.

Si vous appuyez sur le bouton “play from here” du menu temporel en ayant sélectionné un instant différent de 0 ou une vitesse différente de 1, alors l’animation se lancera sans le son mais vous aurez la possibilité de changer de moment pendant le déroulement de l’animation en cliquant sur la barre de progression qui s’affiche lorsqu’on bouge la souris.

Le thumbnail de l’animation est automatiquement modifié dès qu’on noeud est créé ou supprimé. Le bouton “Set thumbnail” du menu temporel permet de choisir l’instant courant comme étant le thumbnail de l’animation.

De même, le bouton “Set Name” du menu temporel permet de définir le nom de l’animation.

Éviter les mauvaises manips, les bugs et la latence

Pour éviter que le projet soit trop lent, éviter d’avoir trop d'onglets ouverts en même temps.

Si vous utilisez le projet avec l’éditeur scratch d’ouvert, le projet risque d’être très lent..
Lorsque vous avez ouvert l’éditeur scratch du projet et que vous vous remettez le mode plein écran, pensez d’abord à retourner sur la page normale, sinon, le projet pourrait être très lent à s’exécuter. Si vous voulez rester sur la page de l’éditeur scratch avant de remettre de mode plein écran, allez d’abord sur le code du “stage”, sinon tout le code contenu dans le sprite “Pen” ralentira l'exécution du projet.

Vous pouvez stopper le projet et recliquer sur le drapeau vert pour redémarrer le projet sans que ce que vous avez fait ne soit effacé mais attention à ne pas faire cela lorsqu’une action est en train d’être réalisée (un dessin pas fini, un clonage en cours, etc).
Dans tous les cas, ne rafraîchissez pas la page de votre projet sous peine de voir vos modifications disparaître.

Si vous avez utilisé le projet et que vous souhaitez enregistrer vos modifications, il se peut que l’éditeur scratch ne vous propose pas d’enregistrer le projet car vous n’avez pas modifié le code du projet. Dans ce cas, déplacez juste un bloc du projet sans rien modifier et l’option d'enregistrement apparaîtra.

Cet “animation maker” est juste un projet scratch et pas un logiciel de montage professionnel. Il serait possible qu’il y ait des bugs que je n’ai pas réussi à détecter. De plus, en utilisant le projet, il se pourrait que vous fassiez des mauvaises manipulations accidentellement (en supprimant un nœud important par exemple). C’est pourquoi, si vous travaillez sur une animation pendant longtemps, pensez à enregistrer une backup de votre projet de temps en temps. Pour faire cela, allez dans l’éditeur, cliquez sur “File” > “Save to your computer”. En cas de problème, vous pourrez alors récupérer votre backup avec “File” > “Load from your computer”.

Pour finir

Si vous avez une question relative à l’utilisation de l’éditeur et que vous ne parvenez pas à trouver la réponse dans ce tutoriel, n’hésitez pas à me la poser sur mon profil pour que je puisse vous aider.

Si vous avez des suggestions quant à la manière de mieux expliquer l’utilisation de l’éditeur, n’hésitez pas non plus à me contacter et/ou à réaliser votre propre tutoriel.

Soyez créatifs !

This project need to be featured! It's a genius invention!

Fluffygamer_ wrote:

This project need to be featured! It's a genius invention!

Thank you so much

bidulule wrote:

Fluffygamer_ wrote:

This project need to be featured! It's a genius invention!

Thank you so much

hello the project is very long

SO GOOD

Scratch_Maker_64 wrote:

... wrote:

SO GOOD

Thank you :3

baby wrote:

Scratch_Maker_64 wrote:

... wrote:

SO GOOD

Thank you :3

You're welcome

Scratch_Maker_64 wrote:

baby wrote:

Scratch_Maker_64 wrote:

... wrote:

SO GOOD

Thank you :3

You're welcome

dis is da greatest pen vid ever

bidulule wrote:

Detailed editor instructions

First of all, you should know that the use of the editor may seem a bit complicated at first sight. But don't worry, as you use it, it becomes quite intuitive.

I advise you to follow this tutorial at least once in order so that you don't get lost.
Also, to understand more easily what is explained, I advise you to open the project in another tab and to test at each step what is explained in this tutorial.

Navigating the different areas of the project

First of all, you should know that there are several areas in the project:

The first area is the main menu which appears automatically when you click on the green flag. It allows you to choose between viewing the animation or editing it.

If you click on “Play” or on the thumbnail, you arrive in a second area which is the “main player” of the animation. With this player, you can watch the animation with the sound and you can see where you are in the animation thanks to the slider that appears when you move the mouse. On the other hand, in the main player, you cannot skip to another part of the animation with the progress bar because it is not compatible with the sound management. To exit the player, you can wait for the end of the animation, or click on the “Quit” button that appears at the top right of the screen when you move the mouse. You can also quit the player by pressing the “q” key.

Finally, when you click on the “Edit” button of the main menu, you arrive in the “editor” which is itself divided into three parts.

The central screen is called “current scene”.

By moving the mouse to the left border of the scene, you arrive in the “Node Menu”. You can leave this menu by moving your mouse to the right.

The third part of the editor is the “time menu”. You can access it by moving your mouse to the top border of the screen of the current scene. To exit, move your mouse down.
From this menu you can click on the “Home” button to return to the “Main menu”.

Create a new animation

To start a new animation, open the “Node Menu”, then click on the “Go to parent” button until the button disappears. Once this is done, the word “Root” should be displayed in red in the top left corner of the screen. Now click on the “Delete Node” button to delete the current animation and start a new one.

Note, however, that the soundtrack that is played in the animation is not reset and that you must manually change the sound called “Audio” that is located in the “Pen” sprite of the scratch editor. You can remove the soundtrack by deleting the existing one or replacing it with your own. In the second case, rename your soundtrack “Audio” so that it can be read by the program.
In case you have opened the scratch editor to modify the sound, remember to go back to the normal page before putting the project in full screen, otherwise the project could be very slow to run.
If you want to stay on the scratch editor page before switching back to full screen mode, go to the “stage” code first, otherwise all the code contained in the “Pen” sprite will slow down the execution of the project.

Explanations related to the creation and management of nodes

Now, I will first explain how to create drawings and text and how to organize them, then in a second step you will learn how to animate them.

Creating a simple drawing

To create a simple drawing, go to the “nodes menu” and click on the “create drawing” button, which is green. A dialog box will appear. Enter the name you want to give to your drawing. Be careful: the name must be less than thirteen characters long and must not have already been used for another node in the project.

Once you have given the name, the appearance of the “Nodes menu” changes. Sliders and buttons appear on the left side of the menu. These allow you to adjust the size, color, saturation, brightness and transparency of the pen. At the bottom right of the menu, a colored circle appears on a black background: it is a preview of the pen's appearance that helps you make your adjustments.

Further down, a slider called “History” allows you to select the colors you have used previously. Below the slider, you can find the “plus” and “minus” buttons that allow you to navigate through the color history. The “Delete” button next to it is used to remove colors from the history that you will not use again.

Once you have set your pen settings to your liking, you can exit the “Node Menu” and go to the “Current Scene”. Once you have done this, there are two ways to draw:

The first way is to click, hold, and drag the mouse to where you want to draw. This method allows you to create abstract shapes like curves for example. However, it generates a lot of data to store and process, which makes the project slower to run and the animation less fluid. If possible, use the second way to draw.

The second way requires you to hold down the space key while you draw. Click once to place the first point, then click again to draw a straight line from the previous point to the new point. You can place multiple points in a row as long as you hold down the space key. Be careful not to hold down the mouse click when you move your mouse in this mode, or the data created will be as heavy as in the first method.

You can use the “arrow up” and “arrow down” keys to change the pen size directly from the current scene, without having to go back to the “node menu”.

By clicking the “z” key, you can undo the last strokes you drew.

Finally, to leave the “drawing” mode, go to the “node menu” and click on the “Edit” button. When you do this, the “Edit” button changes its appearance to the “Draw” button. Clicking the “Draw” button returns you to drawing mode so you can continue the drawing you started.

Changing the appearance of a node

The drawing you have just created is an object that we will call “node” in the rest of this tutorial. There are 3 types of nodes in this project:

Drawings, Texts, and Groups

Don’t worry, we will see later how to use the “text” and “group” nodes.

Each node, regardless of its type, has its own parameters:
An offset, A zoom, An angle, A color offset, and A visibility

These properties can be changed when the node is in edit mode.

A node is in edit mode when, in the current scene, there is a blue dot at the intersection of the vertical blue line and the horizontal blue line. This blue point is very important because it represents the center of your node. In the rest of this tutorial, we will call it the “center blue point”.

“Group” nodes are always in edit mode. “Text“ nodes are always in edit mode, unless you are in the process of adding a new line to your text node. Finally, ”drawing“ nodes are only in edit mode if you are not in drawing mode.

As a reminder, you can leave the drawing mode by clicking on the ”Edit“ button in the nodes menu.

The ”Offset“ property defines the position of the node in the scene. So when you go to the current scene, you can move the node by clicking and dragging the ”center blue dot“. The ”arrow keys“ can also be used to move the current node. You can also reset the offset to the default value by clicking on the ”Reset Offset“ button in the ”Node Menu“.

The ”Zoom“ property defines the size of the node in the scene. So you can increase or decrease the size of the node in the current scene by clicking somewhere other than the ”center blue dot“ and then moving your mouse closer to or further away from the ”center blue dot“ while holding down the click.

If you do the same thing while holding down the ”space“ key, you can change the proportions of the node by width and height. However, this feature doesn't work very well and isn't very useful unless you want to flip the node vertically or horizontally.
You can also reset the zoom value to the default value by clicking the ”Reset Zoom“ button in the ”Nodes menu“.

The ”Angle“ property allows you to rotate the node in the current scene. To do this, you must hold down the ”a“ key, click somewhere other than the blue dot and then rotate the cursor around the ”center blue dot“ while holding down the click. You can also reset the angle to its default value by clicking the ”Reset Angle“ button in the ”Node Menu“.

Note: As you may have noticed, the zoom and angle are set relative to the center blue point. When you draw, write text, or place an element somewhere in the scene, be aware that where it is located in relation to the central blue point will determine how it will be zoomed and rotated.

The ”color“, ”saturation“, and ”luminosity“ sliders on the right side of the node menu allow you to adjust the color shift of the node.

Finally, the ”Hide“ or ”Show" button on the right side of the node menu lets you hide or show the node.

Create more complex drawings

Now that you know how to create simple drawings and edit node properties, you can learn how to create more complex drawings that include text, different planes, and articulations. To do this, you first need to understand how to arrange nodes in the “Node Menu”.

As mentioned earlier, there are three types of nodes:

The “Drawings”, which we already know, and whose name appears in green at the top left of the screen.

The “Texts”, which we will explain later, and whose name appears in blue at the top left of the screen.

And finally, the “Groups” whose name appears in red on the top left of the screen.

Groups are special nodes that have the ability to contain other nodes. They are a bit like folders on a computer that can hold files but also other folders. So they allow you to organize the nodes in your project in an clever way.

When you created a new animation, a node called “Root” was automatically created. This node will contain all the other nodes in your animation.

Since for now you have just created a drawing node, you are currently in the node of that drawing. This can be verified by the fact that the name of the node you are in is always displayed at the top left of the screen.

To access “Root”, you must go to the “Node Menu” and then click on the “Go to Parent” button until “Root” is marked at the top left of the screen.

Once you've done this, the name of the drawing you made earlier should appear in the left side of the Nodes menu. This area contains the list of nodes contained in the current group, in this case “Root”. So the fact that your drawing is listed here means that it is contained in the “Root” group.

By clicking on an item listed in a group, you can go inside the corresponding node. Then, to return to the parent group that contains the current node, simply click on the “Go to parent” button.

Only when you are in a group can you create other nodes with the colored buttons at the bottom right of the “Node Menu.

Try creating a second ”drawing“ node from ”Root“ and draw something on it. Then go into ”Edit“ mode to move the drawing you just created. You may notice that it is in the foreground of your previous drawing.

Then go back to ”Root“ and look at the node menu. You may notice that both of your drawings are now listed. Left to the list, there is also an arrow that goes from the word “background” to the word “foreground”. This tells in which rendering layer the nodes of the list are.
According to this indication, the second drawing node you’ve created is closer to the foreground than the other node, which corresponds to what you’ve just experienced while moving the new node around.

Now, while still in the Nodes menu, press and hold ”space“. At the same time, click on the icon for your second drawing, hold it down and move it up the list. Once it's moved up, release the mouse click and stop pressing ”Space“.
Now that the order of the list has changed and your second drawing is positioned near the ”Background“ side of the arrow, go back to your second drawing node and try moving it again. You'll notice that this time the node is behind the first node, just like indicated by the order of the nodes in the list.

Next, go back to ”Root“ and create a new group by clicking the ”create group“ button. Give this group a name. You can then notice that the name of the group you just created is displayed in the top left corner of the screen, which means that you are in it.

Now let's create a text in this new group by clicking on the ”Create text“ button. Again, we need to choose a name for the node. Once inside the text node, on the left you will find the sliders allowing you to adjust the size and color of the text you are going to write. A preview is displayed at the bottom right of the menu.
Once you have made your settings, click on the ”Add text“ button and enter the line of text you wish to write. The node menu will automatically close and the text you have written will be displayed on the current scene and follow your mouse cursor.
At this point you can still use the up and down arrows on your keyboard to change the size of the text. Move your mouse cursor to decide where to place the text and then click the screen to validate.
You can then click ”Add text“ again to add new lines of text.
By clicking ”z“ you can delete the last lines of text you added.

To summarize, at this point, the ”Root“ node now contains two drawings and a group that itself contains a text node. You can check by navigating through the nodes as we learned.

Now let's try to put one of the two drawings we created into the group that contains the text node.
To do that, hold space and pick one of the drawing nodes as if you wanted to change its order in the list. Move the picked node over the group node and release your mouse click. The selected node disappears. You can then verify that it is now listed in the group you dropped it in.

Now that you are in the group you created, try moving the current node, changing its zoom or rotating it. You may notice that all the nodes you’ve put in the group, that is to say the drawing and the text, undergo simultaneously the transformations that you apply to the group.

This is the feature that makes group nodes so convenient. They allow you to apply transformations to all the nodes in them, which enables the possibility to create things like articulations for instance.

If you want to move a node out of a group, go inside the node in question and click the ”Move upwards“ button. You will see that the node is no longer in the group that previously contained it.

Now let's see how to create clones of nodes.
For our example, we will copy the group we just created and its contents.
To do this, first go inside the node you wish to copy. Then click on the ”Copy“ button in the Node Editor or press the ”c“ key.
A message at the top right of the screen will appear indicating that the current node is being copied.
You must then select the location where you want to clone the copied node. This destination cannot be the copied node itself or any of the nodes it contains. So go back to ”Root“ and press the ”Paste“ button or press the ”v“ key. Then look at the last item in the ”Root“ list. This is the clone of the object you copied. Click on this new node to go inside and try moving it to see that it is a duplicate of the node you copied.

If you want to delete a node, go inside the node you wish to delete and click the ”Delete“ button in the Nodes menu.
Please note that if the deleted node is a group, then all nodes in the group will be deleted as well.

When your animation contains many nodes, it can be difficult to remember which node corresponds to which element in the current scene. The solution to this issue is to go to the current scene and hold down the ”s“ key. The contents corresponding to the current node will start to oscillate between white and black.

Also, because nodes in groups undergo transformations, and may be hidden by other nodes, it can be difficult to draw or add text under these conditions. To draw in a drawing node without having to worry about all of this, you can click the ”Hide structure“ button at the bottom left of the node menu when you are in drawing mode or when you are in a text node. For drawing nodes, this temporarily cancels all transformations and for both drawing and text nodes, it hides the other nodes until you are finished drawing or writing.

When the list of nodes in a group is long, a slider appears next to it to navigate through the list. You can also navigate through the list with your mouse wheel by hovering over the list.

Finally, the last feature of the node menu is the ”Rename node" button, which allows you to give a new name to the current node.

Animation Part

Now that you've understood all the features of the node menu, we're going to really start creating an animation using the “time menu”.

At the moment, when you go to the current scene, the name of the selected node is displayed at the top left and next to it is marked “Time: zero” this means that what is displayed on the screen corresponds to what will be displayed at time zero of the animation.

By default, anything you create or change in the “Node Menu” applies at the time that is selected and remains in the animation indefinitely if there are no further changes in the future.

Find the slider and buttons in the “Time menu” that are associated with the word “Step”. The slider allows you to set the size of the time steps to zero point one seconds, one second, or ten seconds.
Set the slider to select “one second” and then click the “plus Step” button five times to advance the time by five seconds. Exit the menu to display the current scene.

Nothing seems to have changed except that the top left corner now says “Time: five”. Now select the node of your choice and move it somewhere else in the current scene.
Go back to the time menu and look at the frieze shown at the top part of the menu. You can see that at time five, a green dot has appeared in the “Global” line and another green dot has appeared in the “Offset” line. If you place your mouse cursor over the point on the “global” line, the name of the node you have just moved is displayed.
The frieze indicates that at time five, the offset of the node has been changed. The green color indicates that this change corresponds to the node that is currently selected and to the time selected.
The frieze can also be used to move through time. When you hover over it, a blue line and a number appear. Click somewhere in the timeline and you will be teleported to the corresponding time.

Use the “Step minus” button or the frieze to return to time zero. Make sure that the slider at the top of the time menu is set to “Speed: one” and then click the “Play from here” button to the right of it.

You are now in the editor's player and you can see your first animation: The node you chose starts from its initial position at time zero and moves to the indicated position at time five in five seconds.

You can do further tests with other nodes and other properties such as angle, zoom, or color offset for example.
You can also add several successive changes to the same node: for example, go somewhere at time five, then go somewhere else at time seven, then go somewhere else again at time ten…

You can also try to hide an object at a given time and make it reappear at another time. To do this, select the times with the time menu, then use the “Hide” and “Show” buttons in the node menu.

As you add changes in time, the time menu frieze becomes more complex. There are orange and purple dots. The orange dots indicate properties of the current node that are changed at a time other than the current time.
The purple dots appear only in the “Global” row and indicate that properties of other nodes are changed at the corresponding time.
You can hover over these dots with your mouse to see which nodes are affected.
Below the frieze, there are “plus” and “minus” buttons that allow you to zoom in and out of the frieze. You can also use the mouse wheel to do the same thing when you hover over the frieze. Next to the plus and minus buttons, there is also a slider that allows you to move around the frieze.

As you can see, the animations created with this project work with key points in time. When you change a property of a node at a given time, you create a key point for that node's property at that time.

The program computes the intermediate parameter values between consecutive keypoints so that the values of the given parameter change smoothly from one keypoint to the next.

Now, you might ask yourself how you can create a key point of a particular property at a given time without having to change its value? For example, you might want a node not to change its position from time tree to eight and then change its position from time eight to ten.

To do this, there is a first way to do it that requires you to do things in order.
Start by placing the node where you want it at time three. Then go to time eight, and in the time menu, click the “Save offset” button.
You have just created a key point for the node's position at time eight. Since the key point value for the offset at time three is the same as the key point value for the offset at time 8, the node will not change position in this time frame. You can then go to time 10 to make the node move from time eight to time ten.

But now, let's imagine that there is already an offset key point at time three as well as at time ten. The program will calculate an intermediate position at time eight which will not be equal to the position at time three. To solve this problem, you can copy the key point of time three and paste it at time eight.

To do this, you must first go to time three. Then you have to check that the time editor contains the buttons “Current only” and “Saved Only”.

If instead you see the buttons “Whole branch” or “All properties”, you have to click on them to change what is displayed.
Then click on the “Copy” button in the time menu or press the “c” key. A message appears in the menu indicating what you have copied.
You can then go to time eight and press the “paste” button on the time menu or click the “v” key. This will copy the key points from the node copied at time three to the same node at time eight.

There are a few things to note about copying and pasting of key points:

First, you cannot copy properties from one node and paste them into another node.

The “Current only” and “Saved Only” buttons are used to define the type of copy and paste to be performed.

If a button displays “Saved Only”, it means that only the key points will be copied. If the button instead shows “All properties”, then the values of all properties in the node will be copied even if they are not current key points. At the time you will paste it, key points will be created for each property in the node.

If a button displays “Current Only”, it means that only the properties of the current node are considered. If the button instead displays “Whole branch” and the selected node is a group, then the properties of the nodes inside the group will also be considered.

You can combine the alternatives of these two buttons to create multiple copy-paste variants.

When you go to a point in time where keypoints for the current node are saved, the “save” buttons for the currently saved properties are replaced by red “delete” buttons. By clicking one of these buttons, you can delete the keypoint corresponding to the indicated property.

Please note that the “save property” and “delete property” buttons are also affected by the “Current Only”/“Whole branch” button so that you can choose to save or delete a given property in all notes contained in the current group.

You can shift all key points of all nodes and all properties that are located after the selected time at once. To do this, use the “Shift +” and “Shift -” buttons. The shift duration is determined by the “step” slider.

When you create a node in the Nodes menu at a time other than zero, the node is hidden by default at time 0 and remains hidden until the time of creation.

If you press the “play from here” button in the time menu and select a time other than 0 or a speed other than 1, the animation will start without sound, but you will be able to change the time during the animation by clicking on the progress bar that appears when you move the mouse.

The thumbnail of the animation is automatically modified as soon as a node is created or deleted. The “Set thumbnail” button in the time menu allows you to choose the current moment as the animation's thumbnail.

In the same way, the “Set Name” button in the time menu allows you to define the name of the animation.

Avoid bad handling, bugs and latency

Before leaving, I will give a few pieces of advice in order to avoid unfortunate situations caused by latency, glitches and bad handling.

To avoid the project being too slow, don’t have too many browser tabs opened at the same time.

If you use the project with the scratch editor open, the project may be very slow.

When you have opened the scratch editor of the project and you want go back to the full screen mode, remember to go back to the normal page first, otherwise the project might be very slow to run.
Otherwise, if you want to stay on the scratch editor page before going back to full screen mode, go to the “stage” code first.
By experience, going in full screen mode while being in the code section of the “Pen” sprite will slow down the project execution.

You can stop the project and click on the green flag again to restart the project without deleting what you have done, but be careful not to do this when an action is in progress (a drawing not finished, or a cloning in progress for instance).

In any case, do not refresh your project page or your changes will disappear.

If you have used the project and want to save your changes, the scratch editor may not offer to save the project because you have not modified the project code itself. In this case, just move a block of the project without changing the structure and the save option will appear.

Remember that this “animation maker” is just a scratch project and not a professional editing software. It would be possible that there are bugs that I was not able to detect. Also, when using the project, you might accidentally make some bad manipulations (deleting an important node for example). Therefore, if you work on an animation for a long time, consider saving a backup of your project from time to time. To do this, go to the editor, click on “File” > “Save to your computer”.
In case of problems, you will thus be able to retrieve your backup by clicking on “File” > “Load from your computer”.

To conclude

Now you theoretically know pretty much everything that you need to in order to create animations with this project. However, becoming comfortable with the editor will take a little practice.
Do not hesitate to try things with it and to share the result as a remix. I would be glad to review it and to give feedback !

If you have a question about the use of the editor and you can't find the answer in this tutorial, don't hesitate to ask me on my profile so that I can help you.

Also, If you have any suggestions on how to better explain the use of the editor, feel free to contact me and/or make your own tutorial.

Thank you for following this tutorial until the end. I hope that this will help you to create wonderful pen animations. I can’t wait to discover your creations !

This man uses AI

No, ChatGPT wasn't even a thing when I made this project

POV: CODING THIS WAS SO SIMPLE- SUPER SIMPLE XD

when green flag clicked
set [normal animation v] to [triangle animation v]
set <{say [it's so easy, see?]} and <[the triangle animation] = [makes people happy?]>> to [true]

when green flag clicked
forever
if <({say [it's so easy, see?]})= [true]?> then
say [it's so easy, see?]
end
end