Maniaplanet Forum


https://forum.maniaplanet.com/

[Tuto] Création d'un Manialink

https://forum.maniaplanet.com/viewtopic.php?t=5164

Page 1 of 2

[Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:22
by Kimi3
Bonjour à tous, je vais tenter de vous apprendre à créer un manialink, le plus clairement possible :)
  • Introduction
Tout d'abord, un manialink se scripte en XML, un langage simple, ressemblant au xHTML. On peut rendre un manialink dynamique en ajoutant du PHP. Avec le PHP, vous pouvez ajouter des ShoutBoxs, Livres d'or, Compteur de Visites,... Malheuresement, je ne suis pas ici pour vous parler de PHP, mais bel et bien du Manialink en lui même, c'est à dire de scripter en XML.
  • Sommaire
    • I. Avant de commencer
  • Hebergement Internet
Avant tout, pour partager vos futurs Manialinks, il vous faudra un hebergeur Web, il en existe beaucoup, payant et non payant. Et comme toute personne normalement constitué, je paris que vous préférez la solution radine :) Je vais séléctionner Free.fr, ses principaux atouts, sont son espace de stockage plus que suffisant, la possibilité d'activer une Base de données MySQL (pratique si vous comptez vous lancer dans le PHP plus tard), mais aussi le fait qu'il soit entièrement gratuit, et accéssible à tous, même aux non abonnés de free (comme moi).
Je ne vais pas m'attarder à rédiger un tuto sur la création d'un compte free, alors qu'on très complet existe déjà :
[Tuto] Création d'un hébergement Free

J'ai commencé par la mauvaise nouvelle de ce tuto, c'est à dire l'attente de la lettre de chez free. Pour vous éviter une future mauvaise surprise :)
  • NotePad++
Commencons par bien s'équiper. Sachez qu'on peut scripter sur le Bloc Notes (si si !), mais que NotePad++ rendra vos scripts plus lisibles :)
Télécharger NotePad++ 5.9.3

Le principale avantage que je trouve à NotePad++, c'est la possibilité de pouvoir uploadé en 3 clicks votre fichier sur votre FTP grâce au plugin FTP Synchronize.
Télécharger FTP Synchronize
Rangez ce fichier Zip dans le dossier :
C:\Program Files\NotePad++\plugins
Puis dézipez !

Relancez NotePad++. Plusieurs cadres apparaissent. Dans le cadre à droite, cliquez sur la roue cranté grise correspondant à Settings.
La fenêtres Profils s'ouvre, Cliquez sur New, écrivez Free, cliquez sur Rename.
Adresse : l'adresse de votre FTP, pour free : ftpperso.free.fr
Username : Rentrez le login de votre compte Free
Password : Votre mot de passe de compte free
Cliquez sur Apply, puis OK.
Ensuite pour vous connecter, cliquez sur l'icône de Connexion Bleu à gauche toujours dans le cadre de droite. Séléctionnez Free.
Vous êtes connecté pour 30 ! Pour uploader votre fichier, cliquez sur Fichier, Enregistrer.
  • Logiciel FTP
Pour vous connecter sur votre FTP, vous pouvez utiliser FTP Synchronize, toutefois vous ne pourrez pas créer de dossier, pour se faire, vous pouvez vous rendre diréctement sur le site de free : http://ftpperso.free.fr

Mais vous pouvez aussi utiliser un logiciel FTP :
WinSCP
FileZilla

J'utilise actuellement FileZilla, il est très complet (voir trop ^^) et simple d'utilisation. ;)

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:22
by Kimi3
    • II. Les Bases du XML
  • Indispensables de votre script
Chaque page doit contenir des élements indispensable avant de scripter :

Code: Select all

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

</manialink>
Ces quelques lignes veulent dire quelque chose ! Si si ! Voici donc du XML.
La première ligne, elle défini quel est le type du document, encoding="utf-8" signifie qu'on a encodé en utf-8.
C'est entre les balises manialink et /manialink que se trouvera toute votre page .

Ce code est vraiment la base de votre future page, il doit être présent sur chacune de vos pages, votre script, toujours entre les balises :

Code: Select all

<manialink></manialink>
  • Les Balises
Je viens de vous parler plus haut des balises, mais vous ne savez pas ce que c'est ! Avant d'afficher la page de votre Manialink, TrackMania va lire le script, lorsqu'il va tomber sur une balise, il va executer une action. Une balise est donc en quelque sorte un ordre donné par le script, à votre ordinateur.
Une balise s'écrit en 3 étapes :
- < (on ouvre la balise)
- "le nom de la balise" (on indique son nom)
- > (on ferme la balise)

/!\ Dans ce tutoriel, je ne pourrais afficher les balises sous cette forme, dû moins dans mon texte. Comme je l'ai expliqué au début du tuto, le xHTML (donc cette page Internet) est un dérivé du XML, la balise XML et la balise xHTML fonctionne de la même manière, lorsque j'écris sur cette page la balise sous sa vrai forme, votre Navigateur (qui affiche les pages) interprète ce que j'ai écris comme un élément de cette page (un cadre, ...) ! Donc pour que vous compreniez ce que je dis, j'écrirais juste le nom de la balises, et je l'écrirais en vert /!\

Jusqu'à présent, nous avons vu deux balises :
- manialink
- type

Si vous avez bien suivi, la balise manialink a donc une fonction, la sienne indique à TrackMania : "Début du Manialink". Mais attention, une balise est toujours accompagné de son contraire, c'est à dire celle qui arrête l'instruction, par exemple, le contraire de manialink est /manialink. /manialink signifie : "Fin du Manialink".

Chaque balise marche en pair, le début de ce qu'elle fait et sa fin. Retenez bien :
Début :

Code: Select all

<balise>
Fin :

Code: Select all

</balise>
Toutefois, il existe une nuance à cette règle balise /balise. Certaine balise ne s'écrivent pas de cette façon. Ils adoptent ce modèle :

Code: Select all

<balise />
Chaque balise s'écrit soit de cette façon, soit de la première manière que je vous ai expliqué. Tout dépend de ce qu'elle demande à l'ordinateur de faire.

  • Attributs et valeurs
C'est bien beau d'envoyer un ordre avec une balise, mais imaginez qu'une balise veuille dire : affiche. Oui mais affiche quoi ? Affiche où ? C'est là qu'interviennent les attributs, et les valeurs !
Les attributs et les valeurs vont vous permettrent de completer l'ordre que vous envoyez à l'ordinateur. Mais ils interviennent que dans un cas :
- Lorsque la balise est de type :

Code: Select all

<balise />
Les attributs et les valeurs s'écriront entre balise et /. Voici comment ça se présente, cette histoire de balise-attribut-valeur :pirat:

Code: Select all

<balise attribut="valeur" />
C'est bien beau, mais qu'est-ce que ça veut dire ? La forme balise /balise, permet de préçiser à l'ordinateur une manière d'éxecuter le script, ou autre. Mais la forme balise / elle, sert aux éléments d'une page, c'est à dire, lorsque vous êtes sur un manialink, chaque texte, chaque image, chaque bouton est de cette forme. Tout ce qu'on voit sur une page est affiché grâce aux balises du type balise / !

Donc, Mr Attribut et Mme Valeur vont servir par exemple à :
- positionner un élément
- aligner un élément (vous verrez il y a une sacré nuance)
- définir la taille de l'élément
- et choisir l'image si c'est une image
- écrire le texte si c'est une balise de texte

Commencons par expliquer Mr Attribut, Mr Attribut lui ne change pas, c'est à dire qu'en général, vous devrez le choisir dans une liste. Il va indiqué le type d'information qu'on ajoute à la balise. Si on indique sa position, sa taille,...
Quant à Mme Valeur, c'est l'information brute en elle même, la taille qu'on donne, la position, le texte en lui même !

Pour vous éclaircir les idées, rien de mieux qu'un exemple :
- Je vous présente la balise de texte :

Code: Select all

<label />
label / permet d'afficher un texte. Comme elle est sous la forme balise /, les informations se trouveront entre label et /. Ces informations seront sous forme d'attributs, et de valeurs.
Jusqu'à présent, la balise n'affiche rien, alors on va lui donner deux informations :
- le texte en lui même : l'attribut text
- son positionnement : l'attribut posn

Ce n'est pas le moment pour vous de savoir comment fonctionne la valeur de Position, je vous en parlerai plus tard, je vais donc me contenter de vous dire que 0 0 1 va afficher le texte au milieu.
Le texte sera : Mon premier texte.

Allez je vous laisse deviner ! A quoi ressemble notre demande d'affichage de texte ?

...

...

...

Code: Select all

<label posn="0 0 1" text="Mon premier texte"/>
Alors c'était pas sorcier ? :) N'oubliez pas que la valeur doit être indiquer entre deux double-guillemets : ". Et n'oubliez pas non plus le = :P


Bon et bien, vous savez donc coder en XML ! Oui je vous le jure ! Alors qu'est-ce que ça fait de connaître une langage (de plus) ? :D Maintenant que vous avez des acquis solides, il ne vous reste plus qu'à apprendre le reste des balises, dans le prochain chapitre vous allez apprendre les balises qui vous permettront d'afficher une image, un texte, une vidéo, faire un lien, faire un menu, et j'en passe ! Bref, toutes les connaissances restantes et nécessaires à la création d'un manialink :)

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:22
by Kimi3
    • III. Documentation Balises et leurs attributs (1)
J'ai décidé de découper cette documentation en deux parties, dans un premier temps, donc dans cette partie, je vais vous documenter sur les balises les plus basiques, et les plus utilisés, pour ne pas vous embrouiller avec trop de nouvelles choses à apprendre qui ne nous seront que secondaire dans notre manialink.
  • Balises simples
J'ai nommé les balises simple les balises de formes balise /balise. On va en voir très peu dans cette partie :)
    • Manialink
  • Rôle
Cette balise a pour rôle d'indiquer à l'ordinateur que tout les éléments de la page de notre manialink se trouve entre sa balise début et sa balise fin (entre manialink et /manialink).
  • Code
Première balise :

Code: Select all

<manialink>
Dernière balise :

Code: Select all

</manialink>
  • Spécifications
La première balise doit être situé après les renseignements sur le fichier (ndlr : Indispensables de votre script). La dernière balise doit être situé en dernier dans votre script (excepté un script PHP).
  • Spécifications
Lors de la sortie de ManiaPlanet, beaucoup de choses ont changés en Manialink, y compris la balise... manialink.
Nous pourrons donc lui attribuer des valeurs :
- version : En mettant 1 en valeur à l'attribut version, votre Manialink passera en 16/9 !
- background : En mettant 1 en valeur à l'attribut background, vous pourrez enlever le background gris par defaut du Manialink, et il sera remplacé par le menu sur lequel vous naviguiez (menu principale, choix des skins,...).
    • Type
  • Rôle
Au risque de vous décevoir, je n'ai pas vraiment d'idée sur la signification de cette balise, je sais qu'il faut la mettre, mais je n'ai pas d'idée très clair sur son utilité. (Demande indications si vous avez).
  • Code
Première balise :

Code: Select all

<type>
Dernière balise :

Code: Select all

</type>
  • Spécifications
Les deux balises doivent être situés entre les balises manialink et la balise /manialink
  • Balises élémentaires
J'ai appelé les balises élémentaires, car dans élémentaires, il y a élément. Ce sont donc les balises qui concèrnent un élément sur la page. Donc sous la forme balise /.
Dans cette partie, vous allez voir les Attributs nécessaires, et les autres attributs. Les attributs nécessaires, doivent absolument être présent pour que l'élément soit affiché.
    • Label
  • Rôle
La balise Label vous permet d'afficher un texte sur la page, et un texte en lien forme de lien.
  • Code

Code: Select all

<label />
  • Attributs nécessaires
- posn
- text : Attribut qui a pour valeur le texte en lui même. Pour afficher TrackMania, vous devrez mettre en valeur à text : TrackMania. :)
  • Autres attributs
- sizen
- halign
- valign
- style
- manialink
- url
- textsize
- scale
- id
- autonewline : permet le retour à la ligne automatique. Retourne à la ligne lorsque la valeur horizontale de sizen est atteint. Mettre en valeur 1 pour l'activer.
    • Quad
  • Rôle
La balise Quad permet d'afficher une image, un cadre, un bouton. En faite, on ne fera aucune distinction entre une image, un cadre ou un bouton, puisque cela reste des images, et que la balise la traite de la même manière.
  • Code

Code: Select all

<quad />
  • Attributs nécessaires
- posn
- sizen
- image : Attribut qui a pour valeur l'URL (adresse absolu) de votre image. Attention, vous ne pouvez pas mettre cet attribut si vous mettez les attributs style et substyle !
- style : Attribut qui a pour valeur le nom d'une catégorie d'image pré-enregistré dans TrackMania. Explications complète plus tard dans cette catégorie. Attention, cet attribut dans la balise quad doit absolument être accompagné de l'attribut substyle. Et cet attribut ne doit pas être présent si l'attribut image ou imagefocus est présent dans cette balise.
- substyle : Attribut qui a pour valeur le nom d'une image qui est présente dans la catégorie indiqué dans l'attribut style. Cet attribut doit être accompagné de l'attribut style, substyle ne doit pas être présent si image ou imagefocus sont présents !
  • Autres attributs
- halign
- valign
- imagefocus : Imagefocus permet d'afficher une autre image à la place de image lors du passage de votre souris sur l'image. :) C'est du rollover. La valeur de cette attribut est donc une adresse URL comme image.
- manialink
- id
- url
- scale
  • Attributs Généraux
  • Posn
Il est temps que je vous explique comment fonctionne l'attribut Posn, comme je vous l'ai expliqué, l'attribut Posn permet de positionner un (des) élément(s).
Lors de la sortie de ManiaPlanet (et dès la bêta) les créateur de Manialinks ont eu le choix entre créer un Manialink en 4:3 (comme sur Forever) ou 16:9 ! Qu'est-ce que cela signifie ? C'est simplement des formats d'images. Au cours de ces dernières années le 16:9 s'impose en terme d'écran, c'est pourquoi Maniaplanet s'y met aussi. Bref ! Pour activer le 16:9 (le 4:3 est toujours par défaut), remontez dans la doc' 1, au niveau de la balise manialink.
Tout d'abord, la page d'un manialink est un grand repère orthonormé (vive les maths ! \o/). Un repère orthonormé c'est deux droites qui perpendiculaires, leur point d'intersection a pour valeur 0.
  • Posn pour 4:3
En 4:3, la taille standard (et donc maximale) du manialink sera de 1280*960. Le repère orthonormée a une envergure horizontale de 128 et verticale de 96. C'est à dire qu'à gauche du point 0 (milieu de l'écran) vous avez 64 points, et à droite 64 également, en haut 48 et en bas 48. En gros sur un schéma ça donne ça :
Image
  • Posn pour 16:9
En 16:9, la taille standard du manialink est de 3200*1800. Le repère orthonormée a une envergure horizontale de 320 et verticale de 180. C'est à dire qu'à gauche du point 0 (milieu de l'écran), vous avez 160 points, et à droite 160 également, en haut 90 et en bas -90.
En gros ça donne ça :
Image
Full +png

Pour les deux versions :

La valeur de l'attribut posn contient trois nombres, chacun séparés d'un espace :
posn="H V Z"
H c'est la valeur horizontale, elle va de -64 à 64 (vous pouvez aller au delà, mais au risque de ne plus voir l'image !).
V c'est la valeur verticale, elle va de -48 à 48 (de même, vous pouvez dépasser).
Z, alors là c'est plus complexe, imaginez vous tout d'abord deux images. Une image simple ayant comme attribut Z 1. Et maintenant une autre image qui est placé sur l'autre image, c'est à dire qu'elle se place par dessus l'autre, pour qu'elle soit par dessus, elle doit avoir une valeur Z supérieur à celle d'en dessous. Donc supérieur à 1. on metterai donc 2.
  • Sizen
L'attribut de taille (dimensions) d'un fichier ressemble à l'attribut de position posn. C'est à dire que sa valeur se présente de la même manière, mais non pas trois valeurs H V Z mais deux valeurs, L et H.
L pour la largeur, H pour la hauteur.
Commencons par epliquer la taille du fond d'écran du Manialink. On a dit lors de l'explication sur la posn qu'en 16:9 la largeur de l'écran était de 320 et la hauteur de 180 (En 4:3 la largeur est de 128 et la hauteur de 96). Pour faire simple, cette taille est la taille totale de la page mais divisée par 10.
Donc si vous mettez un bouton qui fait 400 pixels de large et 100 de hauteur, on divise ces tailles par 10 et on obtient la taille pour notre script. Pour afficher ce bouton il vous suffira d'écrire :

Code: Select all

sizen="40 10"
N'oubliez pas l'espace entre les deux valeurs !
Pour conclure il n'y a aucune différence de dimensions (sizen) entre 16:9 et 4:3. Sauf que comme la taille en pixels total est bien plus grande en 16:9, même si l'on met la même valeur à sizen, votre image (ou autre élement) aura l'air plus petite en 16:9.

Pour avoir des valeurs plus préçises, utilisez le point et non la virgule (posn et sizen) :)
  • Halign/Valign
Ces deux attributs permettent d'aligner votre image par rapport au point que vous avez designez au point posn. halign c'est l'alignement horizontale, valign est l'alignement verticale.
Halign peut prendre comme valeur :
- left
- center
- right
Valign peut prendre comme valeur :
- top
- center
- bottom
Par default (si ces attributs ne sont pas présents), la valeur de halign est left, et de valign top. Une image pour illustrer le tout :
Image
  • style
Style est un attribut qui permet d'ajouter un style à votre texte, à votre image, et même à votre entry (Voir Partie VI). Style marche tout seul lorsqu'il est dans une balise texte, ou entry. Pour la balise Quad, il doit absolument être accompagné de l'attribut substyle.
Pour les styles des textes, rendez-vous sur le manialink [url=tmtp:///:example]example[/url] fait par smurf (TM Ladder). Vous pouvez choisir 2 types de styles pour vos labels :
- Styles normaux
- Styles boutons ! Eh oui ! Vous ne le saviez pas ? Ben maintenant oui, un label peut aussi être un bouton, le texte du bouton est celui de l'attribut text, et le style défini quel bouton.
Vous avez tout les exemples des différents styles (Sample Text), juste en dessous le nom du style, c'est à dire la valeur à mettre. Respectez bien les majuscules !

Pour les quads, style correspond à la catégorie de l'image, vous avez 10 catégories, ce sont les dix premiers boutons sur le manialink example. La valeur peut donc être :
- Bgs1
- BgsPlayerCard
- BgsChallengeMedals
- Bgs1InRace
- Icons128x128_1
- Icons128x32_1
- MedalsBig
- BgRaceScore2
- Icons128x128_Blink
(liste à mettre à jour)

Pour les entry, les styles sont les mêmes que les labels ! :D
  • substyle
Substyle nous ait utile que dans les balises Quad, il nous permet de choisir l'image dans la catégorie de l'attribut style. Vous pouvez choisir votre image en vous rendant sur [url=maniaplanet:///:example]example[/url]. Vous avez l'image, et juste en dessous la valeur à mettre pour l'attribut substyle.
  • manialink
Manialink vous permet de faire un lien vers un autre manialink, mettez son adresse URL, ou son code tout simplement, vous n'avez pas besoin de mettre tmtp:///: :)
  • url
Url vous permet de faire un lien externe, sur le navigateur favoris (IE, Firefox, Chrome,...). Mettez juste l'adresse URL :)
  • textsize
Textsize est un attribut pour la balise Label, elle n'est pas utilisable si vous avez mis un style. Les valeurs doivent être entières (1, 2, 3, [strike]3.5[/strike]).
  • scale
Scale vous permet de modifier la taille d'un élément, 1 correspond à sa taille normal, si vous mettez 0.5, alors la taille de l'élément sera de 50% sa taille réél.
  • id
Id permet de lier un élement à un script ManiaScript. Vous pouvez en savoir plus sur le tutoriel du ManiaScript.

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:23
by Kimi3
    • IV. Organiser son script
  • Frame : Une balise importante
Je vais vous apprendre votre 5ème balise. La balise Frame, elle est un peu spéciale, mais très importante.

Le code de la balise frame est le suivant :

Code: Select all

<frame> </frame>
C'est une balise simple ! Je vais vous apprendre quelque chose sur les balises simple, qu'on utilisera qu'avec la balise frame. Les informations de la balises frame ne sont pas entre frame et /frame (enfin... euh... Pas tellement :mrgreen:), mais l'information principale est directement à l'intérieur de la structure de la balise, à la manière d'une balise élémentaire.

Vous allez me dire : Quoiiii ? Encore une nuance ?!. Eh oui ! Et cette nuance, c'est la possibilité d'ajouter Mr Attribut et Mme Valeur à une balise Frame !
Assez cause, la pratique :

Code: Select all

<balise attribut="valeur">
</balise>
Pas trop compliqué ! :)

Pour en revenir à frame, on va ajouter l'attribut posn, et seulement posn ;)

Code: Select all

<frame posn="valeur">
</frame>
Entre les deux balises frame, on mettera d'autres balises, des balises élémentaires. L'attribut posn de la balise frame va être distribuer à toutes les balises élémentaires contenant l'attribut posn entre frame et /frame
Par exemple, si posn de la balise frame est de 10 2 1. Alors si on a une balise quad entre frame et /frame, alors l'élément quad prendra la valeur 10 2 1.
Mais ! Si vous avez mis une posn à l'élément quad, alors on additionnera la posn de frame à la posn de quad.
Posn de frame : 10 2 1
Posn de Quad : -5 3 2

Alors l'élément quad prendra comme position : posn: 10+(-5) 2+3 1+2 = 5 5 3 !

Aussi simplement que ça ! Mais à quoi servirait tout ça ? Bien, un cadre contenant, le screen d'une map, son nom, son prix, le bouton, etc... Et qu'on veut le copier, au lieu de modifier chaque posn des éléments, et on modifie le posn du frame ! Gain de temps, et plus de clarté !
  • Les commentaires !
Un commentaire c'est très pratique ! C'est un bout de code visible que sur NotePad++, qui vous permet de donner des indications sur votre script. Ces commentaires ne sont visibles que par vous !

Pour écrire un commentaire, écrivez votre texte entre :

Code: Select all

<!--
et :

Code: Select all

-->

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:23
by Kimi3
    • V. Voir notre Manialink !
  • Récuperez votre page
Il est temps de voir à quoi ressemble votre Manialink, pour se faire, suivez les étapes suivantes :
- Pour que les caractères speciaux (comme les accents) soit visisbles sur votre manialink, cliquez sur Encodage, UTF-8 (Sans BOM)
- Connectez vous à votre compte free avec FTP Synchronize
- Cliquez sur Fichier -> Enregistrer sous
- Sélectionnez :
Program Files\NotePad++\plugins\FTP_Synchronize\ "nom de votre compte free"@ftpperso.free.fr
- Donnez un nom à votre fichier, et terminer ce nom par .xml
- Rendez-vous à l'adresse suivante : http://nom-de-votre-compte.free.fr : Remplacez nom-de-votre-compte par le nom de votre compte (^^).
- Ouvrez votre fichier, copiez l'adresse URL en haut.
  • Enregistrer son manialink à la playerPage
Nous allons maintenant savoir comment votre Manialink pour être accessible avec un simple mot ! Pour cela il va falloir l'enregistrer sur la PlayerPage. Ce "nom de domaine" doit faire plus de 6 caractères !
Lors de la sortie de Maniaplanet, pour éviter les abus en terme d'inscriptions de domaines, ils sont maintenant payants, le premier est gratuit, mais pour chaque nouvel enregistrement, il vous faudra payer 100 planets/mois.

Première étape : Rendez-vous sur la PlayerPage : https://mp01.maniaplanet.com/player/html/ Loggez-vous !

Ensuite cliquez sur l'onglet Manialinks.
tuto PP1.jpg
Vous arrivez donc sur cette page :
tuto PP2.jpg
Dans le champ "Code" mettez le nom de domaine que vous souhaitez. Et dans "URL of the XML File" mettez le lien que vous avez copié plus haut ! Et enfin remplissez le champ "Validation Code" avec les trois derniers caractères de votre clé (vous pouvez les avoir dans vos e-mails suite à votre création de compte lors de l'achat du jeu).

Cliquez sur Save This Code !

Et votre Manialink et enregistré :)

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:23
by Kimi3
    • VI. Documentation Balises et leurs Attributs (2)
On va achever cette catégorie en expliquant des balises plus secondaires. :) Mais qui restent utiles :)
  • Balises simples
    • Script
  • Rôle
Haha ! Une nouvelle balise toute fraiche pour ManiaPlanet, et pas des moindres ! C'est la balise qui va vous permettre d'insérer du ManiaScript sur votre Manialink !
  • Code
Début :

Code: Select all

<script>
Fin :

Code: Select all

</script>
  • Spécifications
Mettez ce code en début ou fin de script, peu importe, entre les balises manialink et /manialink. Entre elles mettez y votre script MS ;)
    • Timeout
  • Rôle
Un fichier xml classique se met dans votre dossier cache, si vous faites une modification de votre manialink, il faudra relancer trackmania ! Le meilleur moyen pour contrer cela, c'est d'ajouter la balise timeout, à chaque fois que vous recharger la page, TrackMania la retélécharge, et ne l'a met pas en tampon !
  • Code
Début :

Code: Select all

<timeout>
Fin :

Code: Select all

</timeout>
  • Spécifications
Mettez ce code en début ou fin de script, peu importe, entre les balises manialink et /manialink. La valeur est : 0. Mettez ces deux balises cote à cote, avec un 0 entre elles.
  • Balises élémentaires
    • Audio
  • Rôle
Permet de mettre un bouton Play/Stop à un fichier audio (*.mp3, *.ogg, *.wav). Pratique pour les klaxons.
  • Code

Code: Select all

<audio />
  • Attributs nécéssaires
- posn
- data : Data, adresse URL absolu du fichier audio à lire.
  • Autres attributs
- halign
- sizen
- valign
- scale
- looping : Si la valeur est de 0, le fichier audio s'arrête après sa lecture, placé à 1, le fichier est en boucle jusqu'à ce que le visiteur appuie sur stop.
    • Video
  • Rôle
Permet d'afficher une vidéo, seul le format bik est accepté.
  • Code

Code: Select all

<video />
  • Attributs nécéssaires
- posn
- data : Data, adresse URL absolu du fichier audio à lire.
  • Autres attributs
- sizen
- halign
- valign
- scale
- looping : Si la valeur est de 0, le fichier audio s'arrête après sa lecture, placé à 1, le fichier est en boucle jusqu'à ce que le visiteur appuie sur stop.
- play : Valeur égale 1 permet la lecture automatique à l'ouverture de la page de le vidéo.
    • Entry
  • Rôle
C'est un champ de texte dans lequel les visiteurs peuvent écrire. Utile si vous maîtrisez le PHP (methode GET).
  • Code

Code: Select all

<entry />
  • Attributs nécéssaires
- posn
- sizen
- name : Le nom de l'entrée. Si vous mettez comme valeur message, et bien vous pourrez récupérez le message avec le code GET['message'];
  • Autres attributs
- halign
- valign
- scale
- autonewline
- style
  • Spécifications
Pour transmettre avec la methode GET un message entrée avec entry, il faut que votre lien soit sous cette forme : adresse?message=message (name ayant pour valeur message).
    • Music
  • Rôle
Permet l'ajout d'une musique de fond à votre manialink (sans boutons), lecture automatique.
  • Code

Code: Select all

<music />
  • Attributs nécéssaires
- data
    • Include
  • Rôle
Permet d'inclure un bout de script à partir d'un autre fichier.
  • Code

Code: Select all

<include />
  • Attributs nécéssaires
- url : Adresse URL du fichier à inclure
  • Spécifications
Un bug du jeu fait que cela n'inclue que le premier élément (la première ligne), pour y remedier, mettez tout ce que vous avez à inclure dans un frame.

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:24
by Kimi3
    • VII. Annexes
  • Linker son ML sur un navigateur
Sur un forum ou site, vous pouvez faire un lien de votre manialink en écrivant :

Code: Select all

maniaplanet:///:nomdumanialink
  • Optimisation PHP
Si vous aussi vous souhaitez ajouter une ChatBox, un livre d'or, il faut que le manialink soit optimisé en PHP. C'est très simple d'optimiser son Manialink en PHP puisque en faite il faut modifier deux paramètres :
- La première ligne de l'indispensable de votre script (voir Partie II).
- L'extension de votre fichier (votre script/page/... ^^).

Remplacez cette ligne :

Code: Select all

<?xml version="1.0" encoding="utf-8" ?>
Par celle-ci :

Code: Select all

<?php header("Content-type: application/xhtml+xml"); echo "<?xml version='1.0' encoding='utf-8'?>\n"; ?>
En gros on indique qu'on passe en PHP+XML, bon c'est hyper simplifié, mais on veut pas en savoir plus :P

Ensuite, on enregistre son fichier non plus avec .xml à la fin (l'extension) mais avec .php à la place.

Vous êtes maintenant prêt à vous lancer dans le PHP grâce au tutoriel de M@teo sur le site du zéro :
Consulter le tutoriel sur le PHP/MySQL sur le site du zéro

Avant de vous lancer dans le PHP, essayez de bien maîtriser le scripting en XML. :) Bonne chance pour ce futur apprentissage, qui m'a pris un mois et demi :)
  • Adresses utiles
Voici quelques adresses utiles pour votre futur vie de Manialinker :
- TmManialink : Le site référence des manialinks, venez poser toutes vos questions sur ce forum :)
- PlayerPage
- ManiaPub : Pour faire connaître son Manialink
- R-Link : Pour faire partie de l'annuaire des Manialinks
- Manialink Kimi3 : Mon Manialink
  • Conclusion
J'éspère que ce tuto vous a aidé à apprendre à faire votre Manialink, j'ai essayé d'être le plus clair possible, et de passer en revue le gros de ce qu'il y a à savoir (il reste quelques details).
J'attends quelques suggestions critiques, voir même catégorie à ajouter, notamment pour les textid (j'utilise pas, donc je demande petite section dans ce tuto pour l'expliquer :)).
Si ça vous tente un petit don au login kimi3

Voilà voilà,
Kimi3.

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:27
by Boss-Bravo
Bien pratique ton Tuto, c'est avec celui là que j'ai commencé ;)

Re: [Tuto] Création d'un Manialink

Posted: 11 Sep 2011, 14:48
by Stteiph
Et ben merci pour ce tuto ; je vais peut-être me lancer dans la création d'un manialink. :thumbsup:

Re: [Tuto] Création d'un Manialink

Posted: 14 Aug 2012, 10:07
by naruto2969
Merci,

mais comment faire pour avoir une chatbox sur un ML maniaplanet ?
All times are UTC+01:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited