[EN COURS]Aide mise en place thème : PC HD Système

[mens59]

Salut la compagnie ! Bon je voulais dévoiler ce thème comme surprise à l'ouverture du chantier PC HD, mais mes compétences sont tellement à 0 que je ne m'en sort pas du tout !

Donc je fais appel à tous ceux qui auraient les compétences pour m'aider à finaliser ce thème.

Voilà le rendu final que j'aimerais obtenir :

[BBvideo 560,340][/BBvideo]

Donc premièrement : QU'EST-CE QUE VOUS EN PENSEZ ?

-> Nul, tout est à refaire...
-> Plutôt pas mal mais il y a encore quelques trucs à améliorer..!
->Nickel, on garde tout comme ça !

J'ai pour le moment tous les médias que j'ai assemblé sous Google Web Designer, et j'ai paramétré correctement le fichier "wheel.json"

Ce que je n'arrive pas à faire :

-> Créer un delai pour déclencher un GIF, ainsi je voudrai que le GIF "apparition de la branche centrale" se déclenche d'abord. Puis ensuite une fois que le GIF est totalement chargé (et non bouclé), je veux que le second GIF se déclenche (celui qui anim les branches individuellement). Easy win !

-> Créer l'animation qui fait descendre le GIF du cadre (Titre + synopsis). Ca j'ai pigé !

-> Coder le thème pour que le cadre titre + synopsis ainsi que les branches centrales et celles du bas puissent se colorer comme sur le fameux thème de notre ami @camarade35 . J'ai tenté de comprendre les explications sur le forum Zbox mais je n'ai malheureusement rien compris. Ici Ducoup c'est pour ça que j'ai tout fait en blanc, en me disant que c'est cette couleur qu'il faut faire pour ensuite pouvoir assigner une autre couleur en fonction de la balise "color" mais je ne suis sûr de rien !

->Ajouter le son de bruitage au départ du thème.

-> Intégrer la vidéo et le texte dans les cadre prévu, et mettre la vidéo en arrière plan en Blur.

CONCLUSION :

J'ai comme d'habitude réussi à faire la partie graphique, mais toute la partie codage je n'y comprends rien..............
Merci d'avance à tous ceux qui feront avancer ce topic au travers de la moindre petite remarque !

Lien des différentes images utilisées : wheel.json et Thème compilé sous Google Web Designer

[soso33]

Désolé mens, je n'ai aucune compétence mais je sens que tu vas nous faire un truc de ouf

[Pademonium]

C'est clair , ça promet !!! Rien que le squelette c'est Top !
Tout comme toi je pige que dalle, ou des bouts du coup ,je ne te serais pas d'une grande aide..
tellement frustrant que je me pris "un bouquin html pour les nuls" ce matin ,
Ca va peut être rentrer!

[mens59]

Ducoup @Pademonium ce soir tu lis tout ton bouquin et demain tu viens finir mon thème !

[camarade35]

@mens59 : si tu veux un peu d'aide, bah faudrait les sources ^^
Moi je comprends un peu mais souvent, je touche, je tripatouille et.... ah ! putain ?!?@# mais oui, c'est bon ça marche... ou alors, j'y arrive pas, fait ch...

[mens59]

Quand tu parles des "sources" tu veux dire les médias ? Si oui, je viens de les ajouter dans le premier post.

Oui je suis d'avis que pour apprendre il faut essayer, et qu'on apprend par l'échec. Mais il y a un facteur indispensable pour apprendre de cette manière, il faut comprendre ce que l'on fait, et non tenter sans comprendre. Et pour le moment je ne comprends même pas ce que je fais ! xD
Et je peux te dire que ça fait plusieurs jours que je m'arrache les cheveux. Comme dis dans le premier post, à la base je voulais pouvoir présenter le thème déjà tout beau tout neuf, mais impossible :/

[Max85]

@Mens59 tu as utilisé quoi pour faire le rendu de ta vidéo ? Vu la vidéo ton thème à l'air de fonctionner, d'où ma question :p

Y'a des choses comme ça pour le délai d'exécution si je comprends biens :

-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */

Je bidouille le theme de base de la zbox pour tester, j'avance a tatons, j'ai réglé la postion du genre / rating / players deja \o/ lol

je peux pas ouvrir ton theme sur Google Web Designer avec juste le json

[mens59]

Ouep autant pour moi j'upload le thème complet ! Look le premier message @Max85

Sinon j'ai réalisé le thème en faisant d'abord le travail des images sous Photoshop, puis j'ai animé tout ça sous Sony Vegas. Et ensuite pour créer les GIF, je fais un rendu sous Sony en "Séquence PNG" et je transforme tout ça en GIF sous GIMP ! :p

DOnc là c'est le rendu que j'obtiens sous Sony Vegas en faite !

Edit : @Max85 j'ai mis à jour le dossier, j'avais oublié un GIF ! Là tu auras tous les GIF superposés, et il faudra donc créer un décalage pour que cela soit cohérent.

[Max85]

Zarb je me fais jeter ...

[mens59]

Essaie avec le nouveau dossier. Je t'ai pas mis le dossier "publication" mais le dossier avec tout dedans. Tu pourras peut être l'ouvrir cette fois-ci.

Mais tu verras, les GIFs ne s'affichent pas car ils sont considérés comme trop volumineux. Donc pour avoir un rendu il faut faire un rendu en Local et le lancer avec Zspin.

Rééssaie @Max85

[Max85]

C'est mieux en effet maintenant

J'arrive pas faire reproduire l'effet du schema électronique sur ton theme que sur ma page de test ... Site_Test
mais y'a un autre petit délais encore quand il affiche la dernière, c'est tout noir pdt 1 micro sec... peut être à cause du poids du gif, à tester..

Choppé le tips ici : http://jsbin.com/rusoxezuxo/edit?html,css,js,output

Y'a ptet mieux mais je m'y connais pas bcp non plus, j'ai stop au HTML de base y'a 15 ans xD

Code : Tout sélectionner

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>

 <style type="text/css">
    html, body {
    background-color: black; /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
				}
	.load-delay {
		margin:0 auto;
		display:block;
				}
	h1 {
		text-align:center;
		}
</style>
TEST
<img  class="load-delay" src="Grande Branche Apparition.gif" data-original="Toutes les branches.gif">


  <script type="text/javascript">
  $(document).ready(function () {
      setTimeout(function () {
        $('.load-delay').each(function () {
            var imagex = $(this);
            var imgOriginal = imagex.data('original');
            $(imagex).attr('src', imgOriginal);
        });
    }, 3000);
	});
  </script>
</body>

[mens59]

Quel effet du schéma électronique ? L'apparition tu parles ? C'est un effet intégré au GIF, il ne faut pas le reproduire celui-là !

Sinon pour la micro coupure il suffit de réduire le délai d'apparition du 2ème GIF non ? Le delai est géré par la valeur "3000" ?

Merci pour ce retour rapide @Max85 !

[Max85]

Rahh j'ai meme pas vu le 3000, j'ai de la m*** dans les yeux, j'ai mis 1000 et là y'a plus de micro courpure

[mens59]

Et du coup ça je le copie où exactement dans mon fichier index.html ? Attends je vais chercher un peu ! :p

[Max85]

C'est ce que je regarde car ça ne fonctionne que sur ma page de test et pas sur le thème Ouainnnnn

[babamimi262626]

je peut pas trop aidé mais j'adore l'idée de ton theme

alors je c'est pas si sa peut t' aidé, j'avait trouver sa : https://www.ac-caen.fr/ia61/circos/lafe ... c/tdv2.htm" onclick="window.open(this.href);return false;
c'est un générateur de texte defilant : tu regle tout, tu tape ton texte et sa te sort tout le codage
au pire sa peut servir a d'autre.

[mens59]

@Max85 Est-ce que le problème ne viendrait pas d'ici : dans ton code on a : <style type="text/css">


Alors que dans mon HTML c'est : <script type="text/javascript" id="gwd-init-code">

-> text/javascript -> text/css ça n'est donc pas la même chose.

@babamimi262626 merci pour ton retour encourageant ! Je jetterai un oeil sur ton lien quand j'en serai arrivé au texte, ce qui sera l'une des dernières choses à mettre en place ! :p

[Max85]

Comme toi j'ai une partie CSS en haut et du javascript mais je sèche grave là... Je me demande si c'est pas les classes du tableau qui font que ça veut pas fonctionner ... ça t'aide pas trop du coup vu que ça veut pas s'animer

[mens59]

Est-ce que tu as testé sous Zspin pour voir si ça fonctionnait ou sous navigateur ? Parce que pour moi, même sans l'animation sous navigateur ça ne marche pas, surement trop volumineux. Donc si tu fais des tests, test avec Zspin surtout !

[Max85]

Moi c'est l'inverse, sur Chrome j'ai ta page mais pas sur Zpin ^^