|Tuto| Son premier Manialink

Bonjour à tous. Je rédige ce tutorial pour vous apprendre les purs bases de coding en manialink.

Prérequis

• NotePad++ : C'est grâce à ce programme que l'ont va pouvoir coder. Télécharger. Miroirs.
  
• TrackMania United Forever. Là j'ai pas de lien
  
• Un FTP supportant les adrreses absolu (Skydrive, Megaupload, rapidshare sont donc à exclure). Je vous conseil donc ArchiveHost

NotePad++

NotePad est un programme de traitement de texte parfait pour l'encoding. Ce programme est utilisé par tous, des novices, aux plus aguerri (ForumActif).

Après avoir télécharger et installer NotePad. Lancez-le. Dans le menu (barre en haut), cliquez sur "Langage" puis séléctionnez "Xml".


Un langage : Le XML

Tout d'abord, une première partie très longue, mais certainement l'une des plus importante. En effet le Xml est le langage avec lequel vous coderez. Je ne vais pas vous renvoyez vers le cours du site du zéro puisque je devrais quand même vous briefier plus tard.

Ouverture/Fermeture du code

Ces balises (c'est quoi ? C'est le Chapitre suivant) sont primordiales, sans elles, votre code ne marchera pas. Pour le moment, contentez vous de le coller dans NotePad++.

Code:

<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<type>default</type>

</manialink>

Les balises

Une balise est un ordre donné à l'ordinateur du déstinataire (celui qui regarde le manialink). Cette balise est interprété par TrackMania.
Mais quel genre d'ordre ? Par exemple, afficher une image, afficher un texte, une vidéo,...

Une balise se forme de cette manière :

Code:

<balise>

Mais elle est toujours accompagnée de sa jumelle :

Code:

</balise>

Entre et on trouvera les informations sur l'image, ou le texte. Par exemple sa position, son alignement. Ou pour un texte qu'est-ce qu'il sera écrit.


Mais la forme la plus utilisé, et que vous utiliserez, c'est celle-ci :

Code:

<balise />

Entre on trouvera le même information que j'ai dit plus haut.

Voilà pour les balises. Passons maintenant aux valeurs


Les attributs et valeurs

Un attribut c'est la signification de la valeur ! Houla ! Qu'est-ce que ça veut dire ?

Les attributs et les valeurs marchent ensemble, s'il l'un se retrouve seul, le code ne veut rien dire et le manialink ne sera pas affiché. L'attribut, en quelque sorte, explique la valeur. C'est à dire que l'attribut préçise l'information donné. Tandis que sa valeur c'est l'information brute, la plus importante donc.

On va prendre un exemple, l'information du texte :
L'attribut : text
La valeur : Bienvenue sur mon manialink !

Oui mais ça se présente comment ? L'attribut en premier, puis un = et on affiche entre guillemets la valeur :
text="Bienvenue sur mon Manialink !"

Les " peuvent être remplacés par des ' mais c'est déconseiller si par la suite vous vous lancez dans le Php Prenez l'habitude d'utiliser les ".

Rien de sorcier à première vue ? Si ? En lisant la fin de la partie vous y verrez peut-être plus clair !


Les commentaires

Les commentaires c'est pratique, c'est exclusivement pour vous, si vous voulez savoir ce que signifie quelque chose, si votre code est long, et que vous ne vous y retrouvez pas, les commentaires seront des panneaux en quelques sortes.
Un commentaire ne soit que sur NotePad++ (ou sur le bloc note) mais en aucun cas sur le manialink. Un commentaire commence par :

Code:

<!--
et se termine par
-->

Entre les deux, vous écrivez le commentaire

Pour éclaircir tous ça, voici un exemple :

Code:

<!-- Ici c'est mon texte de bienvenue -->

II : Ecrire un texte


La balise texte


La balise texte est la suivante :

Code:

<label />

Pour afficher un texte, l'écriture de la balise est primordiale. Donc copiez cette balise sur NotePad++ entre la balise et :

Code:

<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<type>default</type>

<label />

</manialink>

La signification du texte

On va mettre en pratique le seul attribut qu'on a appris :
text !

Donc, on va mettre le texte en lui même :
text="C'est mon premier Manialink !"

Donc comme je l'ai dit dans la première partie, on positionne toujours les attributs et leur valeur dans la balise. C'est ce qu'on va faire !

Code:

<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<type>default</type>

<label text="C'est mon premier Manialink !" />

</manialink>

Sa Position

On va donc apprendre un nouvelle attribut ! Que vous trouverez pratiquement partout ! L'attribut de position, il est le suivant :
posn

Et sa valeur est la suivante :
0 0 5

Et il se présente comment ? Comme ça :
posn="0 0 5"
N'oubliez pas les espaces entre les nombres.

Le premier 0 est la position horizontale du texte
Le second 0 est la position verticale du texte
le 5 est la "couche" du texte. Je vous expliquerai plus tard sa signification

Selon cette valeur, le code serait positionné en plein milieu !

Conclusion sur la balise texte

Théoriquement, on a pas besoin de rajouter d'autre attribut, mais il s'avère que pour le design de votre manialink, il vous faudras en apprendre d'autre. Que vous pourrez découvrir dans la partie suivante

Tout cela pour vous dire que cette partie vous éxpliquait le fonctionnement d'une balise et de ses attributs.

III : Toutes les balises


Quad : Les images !

Cette balise est très très utilisé pour une simple raison : c'est celle qui va nous permettre d'afficher des images.

Code:

<quad />

• Posn : C'est l'attribut de position de l'image.
  Voir plus haut pour des explications
  
  
• Sizen : La taille de l'image. Présentation :
  sizen="20 10"
  La premier nombre (ici 20) signifie la largeur de l'image.
  Le second nombre (ici 10) signifie la hauteur de l'image.
  
  
• Halign : Alignement horizontal par rapport à l'attribut Posn.
  Si vous ne mettez pas cet attribut, il sera par défault alignée à gauche (left). Donc le bord gauche de votre image sera sur le point : 0 (horizontal). Présentation :
  halign="center" ou halign="left" ou halign="right"
  
  
• Valign : Alignement vertical par rapport à l'attribut Posn.
  Si vous ne mettez pas cet attribut, il sera par défault alignée en bas (Bottom). Donc le bas de votre image sera sur le point : 0 (vertical). Présentation :
  valign="center" ou valign="top" ou valign="bottom"
  
  
• Image : L'adresse de l'image, l'image en elle-même.
  Vous devrez héberger votre image sur un FTP (ArchiveHost ou un personnel) et récupérer l'adresse Url absolu.
  Présentation :
  image="http://www.domaine.com/Image.png"
  
  
• Imagefocus : Quand la souris passera au dessus de l'image, celle-ci changera par celle donné dans cet attribut. Le fonctionnement est le même que l'attribut image. Présentation :
  imagefocus="http://www.domaine.com/Image2.png"
  
  
• Url : Lien externe http:// ou Tmtp. Présentation :
  url="Lien"
  
  
• Manialink : Lien vers un manialink. Adresse brute, sans Tmtp devant. Présentation :
  manialink="adresse"
  
  
• Style et Substyle : Une image intégré au jeu. Cette attribut est jumelée avec l'attribut substyle. Si Style et Substyle sont présent, image et imagefocus ne sont pas utilisables !
  En réalité ces Style et Substyle désignent une image déjà intégrée à TMU. Comment connaître leur nom ? Se rendre sur ce site : TMStyle. Il vous suffira de choisir l'image et de copier les attributs Style et Substyle
  Présentation de Style :
  style="Catégorie"
  Présentation de Substyle :
  substyle="Image"
  

Label : Le texte

Vous connaissez déjà cette balise, mais je vais vous apprendre plusieurs autres attributs

Code:

<label />

• Posn : C'est l'attribut de position du texte.
  Voir partie précédente pour des explications
  
  
• Sizen : A première vue, cette attribut est inutile, car il existe un autre attribut qui règle le soucis de la taile, bien plus simplement. Mais cette attribut, va vous permettre de faire un paragraphe ne dépassent pas d'un cadre délimitée par les deux valeurs ci-dessous. En clair, si vous souhaitez que tous soit écrit à la même taille, mettez une taille grande, pour ne pas que le texte soit déformer. Par default, on va mettre la taille du manialink :
  sizen="128 96"
  Pour cette attribut, contentez vous de le Copier/Coller
  
  
• Halign : Alignement horizontal par rapport à l'attribut Posn.
  Si vous ne mettez pas cet attribut, il sera par défault alignée à gauche (left). Donc le bord gauche de votre ligne sera sur le point : 0 (horizontal). Présentation :
  halign="center" ou halign="left" ou halign="right"
  
  
• Valign : Alignement vertical par rapport à l'attribut Posn.
  Si vous ne mettez pas cet attribut, il sera par défault alignée en bas (Bottom). Donc le bas de votre ligne sera sur le point : 0 (vertical). Présentation :
  valign="center" ou valign="top" ou valign="bottom"
  
  
• Text : Le texte en lui même, sans cette attribut, votre balise ne veut rien dire.
  Présentation :
  text="Votre texte ici"
  Votre texte peut contenir n'importe quel code couleur ou de mise en forme ($000 ou $i). Mais aucun caractère spécial tout simplement parce que NotePad et le bloc Note ne les supporte pas tous.
  
  
• Textsize : C'est la taille de texte, la valeur ne peut être qu'un nombre "brut", sans virgule. Donc : 1 ; 2 ; 3 ; 4 ; 5 ;...
  textsize="2"
  
  
• Url : Lien externe http:// ou Tmtp. Présentation :
  url="Lien"
  
  
• Manialink : Lien vers un manialink. Adresse brute, sans Tmtp devant. Présentation :
  manialink="adresse"

IIII : Ton premier manialink !


Introduction

Bon c'est bien beau tout ça mais après ? Après je vais vous apprendre à faire votre premier manialink, simple : un menu, un texte de bienvenue, et mettre un fond d'écran.


Le fond d'écran !

Tous le monde est d'accord avec moi qu'un manialink avec un fond gris c'est moche ? Ben oui, c'est mieux avec un fond d'écran ! On va donc héberger votre image sur FTP avec liens absolus. Ca je vais vous l'apprendre plus tard si vous ne le savez pas. Par défault, on va prendre un Wallpaper simple, je l'ai piqué à forumActif
Le fameux, le mysterieux... Wallpaper !


Tout d'abord on va prendre la balise Quad, car comme vous le savez c'est celle-ci qui nous permet d'afficher des images.

Code:

<quad />

Puis on va prendre l'attribut de l'image, où on met l'Url ! C'est donc : url
Et comme valeur le lien absolu de l'image :

Code:

http://hitskin.com/themes/10/72/56/i_background.jpg

Ce qui donne :

Code:

<quad url="http://hitskin.com/themes/10/72/56/i_background.jpg" />

En taille, on va mettre la taille standard d'un manialink : 128*96 (Multipliez par 8 cela donne 1024*768, la taille en pixel donc ).

Code:

<quad url="http://hitskin.com/themes/10/72/56/i_background.jpg" sizen="128 96" />

Puis la position : en plein milieu pour qu'il soit partout ! Pour le dernière valeur ne vous en préoccupez pas, vous leverez le mystère dessus dans les annexes

Code:

<quad url="http://hitskin.com/themes/10/72/56/i_background.jpg" sizen="128 96" posn="0 0 1"  />

Puis, si vous avez retenu la leçon des Halign/Valign, vous devez savoir qu'il faut mettre ces attributs, avec valeur "center". Si ces deux attributs sont pas clair, un chapitre leur est dédié dans les annexes

Code:

<quad url="http://hitskin.com/themes/10/72/56/i_background.jpg" sizen="128 96" posn="0 0 1" halign="center" valign="center" />

Et voilà pour le fond d'écran ! Ce code est un code 'universel' car vous le collerez dans chacune de vos pages, et que vous n'aurez juste à le collez dans un nouveau manialink et changer le lien de l'image

Le Menu !

Bon alors là, c'est déjà plus compliqué

Pour commencer, on va choisir le type de bouton ! Rendons-nous donc sur TMStyles.
Bon prenons un bouton très souvent utilisé : BGButton. Ses valeurs :
style="Bgs1InRace" substyle="BgButton"

Ensuite choisissons le nombre de boutons. 5 c'est bien, je pense.
La taille de chaque boutons, on va la définir à 20*10. C'est une bonne taille.

Pour le positionnement du menu, je vous conseille d'abord de lire le chapitre sur l'attribut posn dans les annexes, c'est primordiale !
Si l'on veut que le menu soit à gauche de la page, il va falloir choisir une valeur (horizontale) négative. Un exemple simple : -40

La valeur de posn du boutons du milieu est :
posn="-40 0 5"

C'est assez important. On a donc choisis de mettre 5 boutons. Le premier sera donc au milieu, avec une position horizontale de 0.
L'écart entre 2 boutons : La taille d'un bouton est de 10.Si l'alignement Halign/Valign est au centre. La position du deuxième bouton va être la taille d'un bouton plus l'écart entre les deux. L'écart etant le vide entre les deux boutons pour qu'ils ne soit pas collés. On va choisir un écart de 1.
Donc dans notre cas : 10+1


Voici donc la valeur de posn de notre second boutons :
posn="-40 11 5"

Pour le bouton tout en haut on fera 11*2=22
posn="-40 22 5"

Pour le bouton situé au dessous de celui du milieu, on mettra les mêmes valeurs de hauteur, mais négatives, donc :
posn="-40 -11 5"
posn="-40 -22 5"

On obtient donc ce code :

Code:

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 22 5" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 11 5" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 0 5" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -11 5" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -22 5" halign="center" valign="center" />

Voilà ! Mais pour finir avec les boutons, on va mettre un lien vers une autre page. A chaque Quad on va rajouter l'attribut manialink !

Code:

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 22 5" halign="center" valign="center" manialink="page1" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 11 5" halign="center" valign="center" manialink="page2" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 0 5" halign="center" valign="center" manialink="page3" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -11 5" halign="center" valign="center" manialink="page4" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -22 5" halign="center" valign="center" manialink="page5" />

Achevons ce menu avec une écriture pour chaque menu. Signifiant vers quel page le visiteur se dirige !

C'est la balise label que l'on va utiliser.
Un positionnement très simple ! Puisque on va mettre la même que pour les boutons. A une chose près, la valeur mystèrieuse
posn="-40 22 10"
posn="-40 11 10"
posn="-40 0 10"
posn="-40 -11 10"
posn='-40 -22 10"

Puis ensuite comme je vous l'ai dit dans la partie précedente, on va mettre la taille :
sizen="128 96"

Une taille de texte :
textsize="3"

Les Halign/Valign :
halign="center"
valign="center"

Et enfin le texte :
text="$000$oPage 1"
Vous avez vu que j'ai mis des codes pour un meilleur rendu ! Pour avoir un échantillon de codes couleurs et de codes mise en forme je vous recommande ce topic : http://www.trackmania.com/fr/forum/viewtopic.php?t=23026 Trini

Et ça donne ce code pour le bouton du haut :

Code:

<label posn="-40 22 10" sizen="128 96" textsize="3" text="$000$oPage 1" halign="center" valign="center" />

Il suffira ensuite de changer la hauteur de chaque écriture et son texte et le tour est joué !

Code:

<label posn="-40 22 10" sizen="128 96" textsize="3" text="$000$oPage 1" halign="center" valign="center" />

<label posn="-40 11 10" sizen="128 96" textsize="3" text="$000$oPage 2" halign="center" valign="center" />

<label posn="-40 00 10" sizen="128 96" textsize="3" text="$000$oPage 3" halign="center" valign="center" />

<label posn="-40 -11 10" sizen="128 96" textsize="3" text="$000$oPage 4" halign="center" valign="center" />

<label posn="-40 -22 10" sizen="128 96" textsize="3" text="$000$oPage 5" halign="center" valign="center" />

On obtient un script de menu tout propre après assemblage des boutons et des titres !

Code:

 <quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 22 5" halign="center" valign="center" manialink="page1" />
<label posn="-40 22 10" sizen="128 96" textsize="3" text="$000$oPage 1" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 11 5" halign="center" valign="center" manialink="page2" />
<label posn="-40 11 10" sizen="128 96" textsize="3" text="$000$oPage 2" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 0 5" halign="center" valign="center" manialink="page3" />
<label posn="-40 0 10" sizen="128 96" textsize="3" text="$000$oPage 3" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -11 5" halign="center" valign="center" manialink="page4" />
<label posn="-40 -11 10" sizen="128 96" textsize="3" text="$000$oPage 4" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -22 5" halign="center" valign="center" manialink="page5" />
<label posn="-40 -22 10" sizen="128 96" textsize="3" text="$000$oPage 5" halign="center" valign="center" />

Le texte !

Voilà, on y arrive, au bout de votre premier manialink !

Bon, un texte sans titre c'est laid non ? Alors commençons par mettre un titre.
Comme d'habitude la balise label pour le texte.

Premier attribut, la position. On va positionner ce titre en haut de la page, donc pour une ni trop haute ni trop basse, on va mettre 25. Une valeur horizontale de 20 (correspondant à la largeur du menu), enfin ça, c'est que de la présentation ! Ce qui donne :
posn="20 25 5"

Une taille habituelle pour le texte :
sizen="128 96"

La taille du titre :
textsize="5"

Les halign/valign :
halign="center"
valign="center"

Et le titre :
text="$o$i$000Mon Manialink !

Ce qui donne :

Code:

<label posn="20 25 10" sizen="128 96" textsize="5" text="$o$i$000" halign="center" valign="center" />

Passons maintenant au texte en lui même. Si vous avez lu l'annexe sur les halign/valign comme demandé dans la partie précédente, vous devriez comprendre la manip'.
On veut que tous notre paragraphe soit alignée à gauche. Donc on va utiliser l'attribut et la valeur suivant :
halign="right"

Comme ça, on va définir avec l'attribut posn un point de départ de la phrase. Ce point de départ sera horizontalement négatif. Et on va mettre un hauteur de 10 (peu importe).
posn="-15 10 5"

Bon, supposons que ceci soit notre texte :

Bienvenue à tous sur mon premier manialink ! Il est pas très beau mais j'apprends ! Pas de moqueries ! Bientôt je ferais le meilleur manialink que l'on puisse imaginer ! Comment ? Ben j'apprends tous facilement ! Mais je vous donnerez pas mes sources !
Je vous tiendrez au courant de l'avancement du manialink par ce petit paragraphe

()

On va d'abord découper les phrase pour qu'elles ai toutes la même taille :
- Bienvenue à tous sur mon premier manialink ! Il est pas très beau Plus courtes car il y aura un alinéa
- mais j'apprends ! Pas de moqueries ! Bientôt je ferais le meilleur manialink
- que l'on puisse imaginer ! Comment ? Ben j'apprends tous facilement !
- Mais je vous donnerez pas mes sources ! Fin du premier paragraphe
- Je vous tiendrez au courant de l'avancement du manialink par ce Plus courtes car il y aura un alinéa
- petit paragraphe Fin du second

Voilà. Ensuite on va écrire la balise pour une ligne.

posn="-15 10 5"
sizen="128 96"
textsize="3"
text="Suivant la ligne"
halign="left"
valign="center"

Code:

<label posn="-15 10 5" sizen="128 86" textsize="2" text="" halign="left" valign="center" />

Ensuite, on a choisis une taille de texte de 3. Pour chaque ligne la posn hauteur descendra donc de 3+1, 3 est la taille du texte et 1 est l'écart mis entre les lignes
Et on obtient ce code :

Code:

<label posn="-17 10 5" sizen="128 86" textsize="3" text="$f00Bienvenue à tous sur mon premier manialink ! Il est pas très beau" halign="left" valign="center" />
<label posn="-20 6 5" sizen="128 86" textsize="3" text="$f00mais j'apprends ! Pas de moqueries ! Bientôt je ferais le meilleur manialink" halign="left" valign="center" />
<label posn="-20 2 5" sizen="128 86" textsize="3" text="$f00que l'on puisse imaginer ! Comment ? Ben j'apprends tous facilement !" halign="left" valign="center" />
<label posn="-20 -2 5" sizen="128 86" textsize="3" text="$f00Mais je vous donnerez pas mes sources !" halign="left" valign="center" />
<label posn="-17 -6 5" sizen="128 86" textsize="3" text="$f00Je vous tiendrez au courant de l'avancement du manialink par ce" halign="left" valign="center" />
<label posn="-20 -10 5" sizen="128 86" textsize="3" text="$f00petit paragraphe :)" halign="left" valign="center" />


Rendez-vous NotePad++ !

Voilà, on va assembler tous les codes que l'on a fait.

• Tout d'abord, le code donnée dans la première partie, le code qui commence et termine le script du manialink.
  
• Ensuite on colle le code du fond d'écran
  
• Le code du menu
  
• Le code du texte

Les 3 derniers codes de la liste doivent se trouver entre les balises manialink /manialink


Ce qui donne votre premier script !

Code:

<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<type>default</type>

<!---Le fond d'écran -->
<quad image="http://hitskin.com/themes/10/72/56/i_background.jpg" sizen="128 96" posn="0 0 1" halign="center" valign="center" />

<!-- Le menu -->
<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 22 5" halign="center" valign="center" manialink="page1" />
<label posn="-40 22 10" sizen="128 96" textsize="3" text="$000$oPage 1" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 11 5" halign="center" valign="center" manialink="page2" />
<label posn="-40 11 10" sizen="128 96" textsize="3" text="$000$oPage 2" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 0 5" halign="center" valign="center" manialink="page3" />
<label posn="-40 0 10" sizen="128 96" textsize="3" text="$000$oPage 3" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -11 5" halign="center" valign="center" manialink="page4" />
<label posn="-40 -11 10" sizen="128 96" textsize="3" text="$000$oPage 4" halign="center" valign="center" />

<quad style="Bgs1InRace" substyle="BgButton" sizen="20 10" posn="-40 -22 5" halign="center" valign="center" manialink="page5" />
<label posn="-40 -22 10" sizen="128 96" textsize="3" text="$000$oPage 5" halign="center" valign="center" />

<!-- Le texte -->
<label posn="20 25 10" sizen="128 96" textsize="5" text="$o$i$000Mon Manialink" halign="center" valign="center" />

<label posn="-17 10 5" sizen="128 86" textsize="3" text="$f00Bienvenue à tous sur mon premier manialink ! Il est pas très beau" halign="left" valign="center" />
<label posn="-20 6 5" sizen="128 86" textsize="3" text="$f00mais j'apprends ! Pas de moqueries ! Bientôt je ferais le meilleur manialink" halign="left" valign="center" />
<label posn="-20 2 5" sizen="128 86" textsize="3" text="$f00que l'on puisse imaginer ! Comment ? Ben j'apprends tous facilement !" halign="left" valign="center" />
<label posn="-20 -2 5" sizen="128 86" textsize="3" text="$f00Mais je vous donnerez pas mes sources !" halign="left" valign="center" />
<label posn="-17 -6 5" sizen="128 86" textsize="3" text="$f00Je vous tiendrez au courant de l'avancement du manialink par ce" halign="left" valign="center" />
<label posn="-20 -10 5" sizen="128 86" textsize="3" text="$f00petit paragraphe :)" halign="left" valign="center" />
</manialink>

Collez ce script sur NotePad++ (Votre page devait être vierge). Enregistrez votre page avec le nom que vous voulez, mais terminez là par : .xml Obligatoire !


ArchiveHost !


Création d'un compte
Donc avant tout rendez-vous sur le site d'ArchiveHost.
Dans le menu de droite, cliquez sur Inscription. Choisissez l'offre : "Offre 100 - 100Mega Gratuit" et cliquez sur continuer.

Donnez votre adresse e-mail et choisissez votre mot de passe. Acceptez les thermes en cochant la case. Cliquez sur "Valider". Attendez de recevoir le mail et cliquez sur le lien pour valider votre compte

Retournez sur ArchiveHost, dans le menu de droite faites "connexion au panel". remplissez les cases e-mail avec ce que vous avez donner dans votre inscription précédement. Choisissez un serveur, je vous conseille le 4 car il y a de la place Et faites connexion


Héberger sa page !

Maintenant que vous êtes inscrit, on va uploader votre page. Cliquez sur le bouton correspondant à "Mes fichiers"


Puis sur "Ajouter des fichiers"




Séléctionnez votre fichier *.xml (votre page). Et faite Ajouter. Juste après, cliquez sur 'codes du fichier'.

Et récupérez le code absolu.




PlayerPage

Il nous reste plus qu'à enregistrer notre page sur notre Player Page.

Connectez-vous.

Dans le menu à gauche cliquez sur Manialinks/Maniacodes




Ensuite, on retrouve plusieurs champs. Plusieurs explications s'imposent

• Code[1] : C'est le code que l'on donne à la page du manialink, son adresse quoi. Exemple : manialink:home ; maniafav ; kimi3 ; r-link

[*]Url of the XML file : c'est le lien absolu que l'on a collé juste avant !
[*]Type : Dans notre cas, cochez Manialink
[*] Le reste concerne les maniacodes !

Donc donnez comme adresse celle que vous voulez, un truc simple. Collez l'URL, cochez manialink, et cliquez sur Save This Code.




Allons jeter un oeil !

Ca y est, c'est presque fini ! Dans la barre où l'on rentre l'adresse du manialink, tapez ce que vous aviez choisis en code. Et Taddaaaaam !

Aaahhhh.... C'était donc ça ? Pas de quoi se réjouir en effet ! C'est pas très joli. Mais c'est un manialink. Vous avez les cartes en main pour améliorer celui que vous avez actuellement
Sinon, la page du manialink qu'on a fait, elle se trouve également là : Manianuls.

IIIII : Annexes


Halign/Valign

Une chose d'assez peu comprise souvent. Bon, J'ai trouvé l'explication du tuto Manialinks Forever de FT>Marcel traduit par JonTheKiller sur les Halign/Valign assez clair. Je vais donc me contentez d'une citation et de remercier Marcel et jon :

Si vous comprenez tous (au moins un peu), il est temps de mettre un peu de confusion: L'alignement des éléments.
Certains diront: avec halign (alignement horizontal) et valign (alignement vertical) de l'alignement du contenu, on entend, par exemple dans un label où le texte doit être affiché.
Mais ce n'est pas comme ça. Les deux align affectent l'alignement de l'élément lui-même. Pour montrer ce que l'on entend une image:



En vue de l'extérieur de vous dire que l'alignement est exactement l'inverse: si vous utilisez valign = "top" le quad est sur le fond, avec halign = "right", il est à gauche.
Mais si vous voyez de l'avis du quad, il est logique: Avec halign / valign vous définissez qui pointe sur le point de positionnement est trouvé, le point défini avec posn. Si nous utilisons bas et gauche, le point de positionnement est sur le bord inférieur gauche du quad. Les valeurs standard sont halign = "left" et valign = "top". Cela signifie que le point de positionnement par défaut est sur le bord en haut à gauche de l'élément.

Pour résumer :
Si vous mettez "right", halign sera "left". C'est donc l'inverse.


Posn : La 3^ème valeur

Alors cette valeur, vous avez pu la voir durant tous le tuto, mais qu'est-ce que c'était ?
Cette troisième valeur, on pourrait la définir comme plusieurs couche. Si la couche est de 0, elle sera en dessous de celle de 1. Par exemple, vous l'avez vu dans la création d'un menu, pour que le titre d'un bouton soit par dessus le bouton lui même, on a mis une valeur plus grande au label qu'au quad.

Une petite astuce, je mets ma dernière valeur toujours multiple de 5. Une question de clarté !
1 ; 5 ; 10 ; 15 ; 20 ; 25 ; 30 ; ...

Les maniacodes

Les maniacodes sont des petits scripts qui permettent de fair télécharger ses créations. Ces maniacodes peuvent être accesibles après quelques petits coppers ou gratuitement. Le meilleur tutorial pour la création de script maniacode est publiée sur TM-Wiki. Il se trouve ici script Maniacode.

Mais ce tuto n'explique pas la PlayerPage Je vais donc le faire !
Rendez-vous au même endroit que tous à l'heure : Manialinks/Maniacodes.

Tout d'abord, définissez le prix du maniacode : disons 100Coppers.
a chaque transaction, Nadeo doit recevoir 5% du prix total du maniacode. Si comme plus haut on a prit 100Coppers. Nadeo recevra 5Coppers.
A coté du champ Nadeo, mettez donc 5. Puis cliquez sur Modify.
En dessous de Nadeo, rentrez votre login. A coté de votre login, mettez 95. C'est (100-5 Coppers). Puis cliquez sur Add.
A coté de CoppersCost[2], mettez le prix total du maniacode, donc 100. Ensuite, comme pour manialink, rentrez le code du maniacode, et l'url absolu pris sur ArchiveHost (ou votre FTP). Mais laissez cocher maniacode. Et puis Save this Code.




Posn

Bon, la balise posn n'a pas été très bien expliquer ! C'est pour ça que ce chapitre lui ai dédié.

Tout d'abord, la taille standard d'un manialink est de 1024*768pix. On divise par 8 et on obtient 128*96.
Il faut imaginé l'écran comme un immense repère (cours de maths :-o). Ce repère a comme origine (centre) 0.



Comme vous pouvez le voir, 64+64=128 et 48+48=96. On a donc nos dimensions maximales.
Comme en Maths, on met la valeur horizontales on premier puis s'ensuit la valeur vertical.

Si l'on a un objet situé en haut à droite, les deux valeurs seront positives, au contraire, si l'on a un objet en bas à droite, les valeurs seront negatives.

C'etait une façon schématisé de faire cette explication Voici pour ceux qui voudrait faire des croquis la version 1024*768 du schéma : Ici

Balises prédéfinies !

Voilà, pour les feignasse, je vous ai fait quelque balises à moitié faites.

Fond d'écran :

Code:

<quad posn="0 0 1" sizen="128*96" image="" halign="center" valign="center" />

Bouton :

Code:

<quad style="" substyle="" posn="" sizen="20 10" manialink=""

Audio :

Code:

<audio posn="" sizen="5 5" data="" halign="center" valign="center"/>

Vidéo :

Code:

<video posn="0 0 0" halign="center" valign="center" sizen="" data="" play="1"/>

Fin !

Et voilà c'est fini ! J'éspère que ce tuto vous as été util, si vous souhaitez agrandir vos connaissances, rendez-vous sur le tuto très complet de FT Marcel traduit par JonTheKiller.
http://www.trackmania.com/fr/forum/viewtopic.php?t=30481&start=0

Rappellez vous, ce tuto c'est vraiment pour commencer, pour apprendre les bases ![/code]

Watatatow!!!!

J'ai la flemme de tout lire, mais pour les interresés, c'est génial.

Pour les paresseux, ya aussi Kimi qui peut vous faire un manialink simple!

Bravo, c'est vraiment génial!

Merci. J'ai fais ce tuto car j'ai jamais trouvé de tuto pour les débutants de chez débutants. Donc j'en ai fait un.

Vraiment super ton tuto pour la cration d'un manialink !!!
Je pense que ça va attirer du monde sur votre forum, et ça peut que l'enrichir !!!

OMGG Kimi ^^ ...
T'as que ça à faire de ton temps ?

Nan. J'ai une vidéo de la team à faire. Je dois poster notre projet

Bref j'ai de quoi faire :p

Si t'as besoin d'un coup de main
Media Traker ça me connait

Ah ben pour les vidéos, je me dérouille, mais sans plus^^...

je cherche une formation pour faire des videos style freestyle ^^ ... j ai 50 replays en stocks ...
il me reste plus qu a me pencher dessus plus de 5 min .....
sans dec j arrive pas a ce que je veux ... ça me saoule donc je stoppe ^^

Envoi moi tout par Hotmail
Tu me fais un .rar de tous tes replays, mais tries bien tout ici

Cool moi qui pense à essayer d'en faire un pour ma team les dmk,je pense que cela va me servir!Auc as ou,pourrais tu m'aider?

Tout à fait, pour de l'aide complète on a toute une équipe de créateur de Manialinks qui pourra t'aider ici : http://tmmanialink.free.fr/phpboost/pages/pages.php?title=accueil

Ok merci!

J'ai du temps a perdre , je vais essayer ^^'

Pooooooooua, la vache, bien fait ce tuto, je m'y met, c'est pas si compliqué que ça en fait, mon frère a essayé et a abandonné, mais je ne trouve pas ça dur moi, et en plus ça ressemble a de la prog de caltoch

Bon, je m'y met et je vous montre dès que c'est fini.

Merci KIMI

Bon courage Boss bravo ^^

Merci, j'ai mon forum a gérer en plus, c'est dur la vie d'étudiant !!!!