Tuto Créer un écran de chargement | GMOD

Thibault Camora · 22 Mars 2016

Bonjour, bonsoir, je vous met à disposition un tutoriel comment faire un écran de chargement.

Vous aurez à votre disposition un tutoriel vidéo et écrit :

Vidéo :

Ecrit :

1. Sommaire
- Hebergeur gratuit
- Création d'un ecran de chargement basic.

2. Hebergeur gratuit
- http://www.hostinger.fr/
- http://www.livehost.fr/
- http://www.hebergratuit.com/
- http://www.hebfree.org/
- https://www.000webhost.com/
- https://www.alwaysdata.com/fr/
- https://www.firstheberg.com/
- MtxServ (Si possesion de serveur !)

3. Création de l'écran

Code html :

Code:

<DOCTYPE <!DOCTYPE html>
<html>
<head> <title>Loading Screen</title> <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body> <img id="images" alt="" src="images/fond.jpg" /> <h1> Bienvenue sur le serveur</h1>
</body>
</html>

Code css :

Code:

body { margin: 0px; padding: 0px; height : 100%; width : 100%;
}
#images { width: 100%; position: absolute; height: 100%
}
h1 { position: absolute; font-size: 70px; font-family: impact; color: #c0392b; text-align: center; text-shadow: 2px 2px 6px black; background-color: rgba(231, 76, 60,0.20); width: 100%;
}

Merci pour vous lectures.

Thibault #Belgium.

Oxy_Clems · 23 Mars 2016

Ouh ... j'aime pas trop comment tu mets l'image de fond, moi j'aurais plutôt fait ça :

Code:

body
{ background-image: url('images/fond.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; width: 100%; height: 100%; margin: 0px; padding: 0px;
}

mais sinon, beau tuto, après faut voir la suite parce que là, y a pas grand chose.

Thibault Camora · 23 Mars 2016

C'est ce que j'ai dit dans la vidéo je ferais plusieurs épisode, le problème c'est que avec le background comme ça j'avais un problème avec l’adaptation mais sinon pas faut,

Merci.

Oxy_Clems · 23 Mars 2016

Voilà, j'ai fais à peu près la même chose que toi en 3 min chrono http://oxy-studio.com/forum/cacher/oxystudio/
C'est pour ça que je te dis que c'est un peu simple ..

le code :

Code:

<DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Oxy Studio</title> </head> <body> <section id="Fond_Nom_Serveur"> <h1 id="Nom_Serveur">Bienvenue sur Oxy Studio !</h1> </section> <section id="Conteneur"> <div class="element"> <h1 id="Titre_Information">/| INFORMATIONS |\</h1> <p>Le Serveur Oxy Studio est ouvert ! Pour le moment, il y a peu de joueurs donc nous essayons de faire un peu de pub, pour qu'il se peuple et que le gameplay soit agréable. Le Loading screen est entrain d'être créé. Sur le serveur, pour changer de métier, vous devez chercher et utiliser les pnj. Pour acheter une propriétée, vous devez allez voir l'agent immobilier, qui se trouve à la mairie. Il est impératif pour un jeu correct, de lire les règles. Si vous choisissez d'incarner le rôle d'un agent des forces de l'ordre, une présence sur le TeamSpeak est obligatoire !!!<br/> Bon jeu à vous !!!</p> </div> <div class="element"> <h1 id="Titre_Nouveautes">/| NOUVEAUTES |\</h1> <p>- Création d'un loading screen en cours !<br/><br/> - Correction du bug de l'agent immobilier en cours !<br/><br/> - Ajout des numéros de chambre/maison sur les portes en cours !<br/><br/> - Correction des addons "advanced arresting" et "economy", faite !</p> </div> </section> </body>
</html>

Code:

body
{ background-image: url(img/image_1.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; width: 100%; height: 100%; margin: 0px; padding: 0px; color: white; background-color: rgb(0, 0, 0);
}
#Fond_Nom_Serveur
{ background-color: rgba(245, 70, 80, 0.2);
}
#Nom_Serveur
{ text-align: center; font-size: 100px;
}
#Conteneur
{ margin-top: 50px; margin-right: 50px; margin-left: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;
}
.element
{ width: 600px; height: 400px; background-color: rgba(55, 55, 55, 0.9); padding: 10px; font-size: 20px;
}

Thibault Camora · 23 Mars 2016

Bravo sauf que le flex ne marche pas sur GMOD il est trop résent, donc tuto openclassroom sans façon

Oxy_Clems · 23 Mars 2016

oui je sais, mais suffit de mettre un float .. ça se change en 3sec, et pourquoi tuto openclassrooms sans façon ? perso c'est là bas que j'ai commencé, et quand j'oublie quelque chose c'est souvent là bas que je vais regarder, je vois pas pourquoi tu as l'air de crasher dessus, c'est bien fait et ça permet d'apprendre énormément.

Thibault Camora · 23 Mars 2016

je crash pas dessu ^^ et il faudrait aussi mettre position: absolute;

Et non ocr est très bien

Oxy_Clems · 23 Mars 2016

arghh, absolute j'aime pas du tout, si tu fais des sites internet tu vas comprendre .. j'ai rectifier pour gmod

en 2sec comme prévu

phacocher02 · 24 Mars 2016

bon tuto

Thibault Camora · 24 Mars 2016

Merci

phacocher02 · 24 Mars 2016

Thibault Camora à dit:
Merci

dr voicie Seluit de mon serv
http://loading-hide.mtxserv.fr/

Thibault Camora · 24 Mars 2016

Propre

phacocher02 · 24 Mars 2016

Thibault Camora à dit:
Propre

merci

Shook · 2 Mai 2016

Super on peut mettre des pubs ?

phacocher02 · 2 Mai 2016

Shook à dit:
Super on peut mettre des pubs ?

oui

Maamsou.93 · 3 Mai 2016

Thibault Camora à dit:
Bonjour, bonsoir, je vous met à disposition un tutoriel comment faire un écran de chargement.

Vous aurez à votre disposition un tutoriel vidéo et écrit :

Vidéo :

Ecrit :

1. Sommaire
- Hebergeur gratuit
- Création d'un ecran de chargement basic.

2. Hebergeur gratuit
- http://www.hostinger.fr/
- http://www.livehost.fr/
- http://www.hebergratuit.com/
- http://www.hebfree.org/
- https://www.000webhost.com/
- https://www.alwaysdata.com/fr/
- https://www.firstheberg.com/
- MtxServ (Si possesion de serveur !)

3. Création de l'écran

Code html :

Code:

<DOCTYPE <!DOCTYPE html> <html> <head> <title>Loading Screen</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <img id="images" alt="" src="images/fond.jpg" /> <h1> Bienvenue sur le serveur</h1> </body> </html>

Code css :

Code:

body { margin: 0px; padding: 0px; height : 100%; width : 100%; } #images { width: 100%; position: absolute; height: 100% } h1 { position: absolute; font-size: 70px; font-family: impact; color: #c0392b; text-align: center; text-shadow: 2px 2px 6px black; background-color: rgba(231, 76, 60,0.20); width: 100%; }

Merci pour vous lectures.

Thibault #Belgium.

Bonjour j'ai un loading screen de ce genre comment ajouter de la musique , j'ai ajouter une ligne avec une musique de youtube sa fonctionne mais pas en jeu

Dawaklawak · 23 Mai 2016

Comment faite on pour mettre plusieurs image et qui ce changent genre toute les 10 secondes

Dawaklawak · 23 Mai 2016

Personne ne saurait ?

vintage · 24 Mai 2016

A savoir !
Le MOTD est compatible HTML5.
Vous pouvez créer des motd super animés avec un code pas lourd du tout à l'arrivée...

Un petit outil gratuit pour faire ça ?
Google Web Designer

Vous allez me dire.. ouiiii bla bla tout çaaaaa tout çaaaaaa
Un exemple tout con fait en pas longtemps...
Marrant non ?

Have a nice day !

Dawaklawak · 24 Mai 2016

vintage à dit:
A savoir !
Le MOTD est compatible HTML5.
Vous pouvez créer des motd super animés avec un code pas lourd du tout à l'arrivée...

Un petit outil gratuit pour faire ça ?
Google Web Designer

Vous allez me dire.. ouiiii bla bla tout çaaaaa tout çaaaaaa
Un exemple tout con fait en pas longtemps...
Marrant non ?

Have a nice day !

Pas mal je l'ai installer ! Mais je ne trouve pas de tuto pour essayer de comprendre ?

vintage · 25 Mai 2016

C'est assez intuitif.
En gros, tu as des objets (texte ou image ou ..) et tu les animes via une "timeline" en précisant des points clefs (c'est à dire où l'objet bouge ou autre).
Il y a des forums et tutos mais faut aimer la langue de Shakespeare...
Bon courage !

Ah oui ! Précision: tu dois héberger la page générée (avec les images et autre sur un coin de ton site web ! Pas directement dans le motd.txt !)
Par ex, pour le motd.txt

Code:

<html>
<meta http-equiv="Refresh" content="2; URL=http://url_de_ton_motd_custom/index.html">
<body BGCOLOR="#314F34">
<div style="text-align: center;">
<font face="Tahoma" color="#F7F7F7" size="4">...Tic...</font><br>
<font face="Tahoma" color="#F7F7F7" size="2">...Tac...</font><br>
<font face="Tahoma" color="#F7F7F7" size="3">.Tic...</font><br>
<font face="Tahoma" color="#F7F7F7" size="2">...Tac...</font><br>
<font face="Tahoma" color="#F7F7F7" size="3">.Toc...</font>
</div>
</body>
</html>

Amuse-toi bien avec tout ça ! ^^

[AC] Rita · 22 Mars 2017

Salut à toi, j'aimerais savoir, comment on fait pour qu'une vidéo YouTube soit affiché comme écran de chargement, tu pourrais m'aider ?

FrenchNeo · 22 Mars 2017

[AC] Rita à dit:
Salut à toi, j'aimerais savoir, comment on fait pour qu'une vidéo YouTube soit affiché comme écran de chargement, tu pourrais m'aider ?

C'est par rapport a l'url :

Code:

https://www.youtube.com/embed/IDDETAVIDEO?autoplay=1

Tuto Créer un écran de chargement | GMOD

Thibault Camora

Geek suprême

Oxy_Clems

Geek suprême

Thibault Camora

Geek suprême

Oxy_Clems

Geek suprême

Thibault Camora

Geek suprême

Oxy_Clems

Geek suprême

Thibault Camora

Geek suprême

Oxy_Clems

Geek suprême

phacocher02

Psychopathe

Thibault Camora

Geek suprême

phacocher02

Psychopathe

Thibault Camora

Geek suprême

phacocher02

Psychopathe

Shook

Bambi

phacocher02

Psychopathe

Maamsou.93

Geek suprême

Dawaklawak

Geek

Dawaklawak

Geek

vintage

Geek

Dawaklawak

Geek

vintage

Geek

[AC] Rita

Nouveau né

FrenchNeo

Psychopathe