Google Web Designer - Themes HML5 - ZSPIN

[Odissine]

Si qq'un à la réponse, je cherche un peu comme sous Flash à utiliser la notion d'objet pour par exemple récuperer une valeur (le nom du repertoire ou se trouve le .zip par ex) afin par exemple de rendre les themes dynamiques ...

A ce jour j'ai juste eu le temps de réaliser une animation test avec une vidéo en fon d'ecran en 100% avec un bandeau ou sera afficher le titre du système et du jeu .. des artworks viendront agrémenter le tout Le test je le fais avec la vidéo que j'ai sous la main ...

[aruka]

@aruka : j'ai testé les animations, c'est vraiment rapide et pratique au final, tu place l'image/vidéos en position finale et hop, animlated, cool.
Juste un truc, est-il possible, de mettre un "delay" et de choisir la vitesse de celle-ci ?
Merci pour ton retour.

Je viens de mettre a jour le fichier CSS,

http://kbonabot.com/perso/ztheme/assets/animate.css" onclick="window.open(this.href);return false;

désormais tu peux ajouter la vitesse a ta classe CSS avec par exemple :
speed-1s
Qui correspond a la durée de l'animation, en l’occurrence l'élément jouera son animation en 1 seconde.

Tu peux modifié la valeur "1s" par, "2s", "3s".. j'ai crée 10 class CSS pour 10 secondes

Code : Tout sélectionner

.speed-1s {animation-duration: 1s !important;}
.speed-2s {animation-duration: 2s !important;}
.speed-3s {animation-duration: 3s !important;}
.speed-4s {animation-duration: 4s !important;}
.speed-5s {animation-duration: 5s !important;}
.speed-6s {animation-duration: 6s !important;}
.speed-7s {animation-duration: 7s !important;}
.speed-8s {animation-duration: 8s !important;}
.speed-9s {animation-duration: 9s !important;}
.speed-10s {animation-duration: 10s !important;}

Meme fonctionnement pour le délais, qui correspond à la durée avant le déclenchement de l'animation. Mais c'est pas parfait car une fois que l'animation se sera joué elle ne reprendra pas son délais initial, je vais voir ou ca coince ca doit être un conflit avec le CSS de daneden.

Code : Tout sélectionner

.delay-1s {animation-delay: 1s !important;}
.delay-2s {animation-delay: 2s !important;}
.delay-3s {animation-delay: 3s !important;}
.delay-4s {animation-delay: 4s !important;}
.delay-5s {animation-delay: 5s !important;}
.delay-6s {animation-delay: 6s !important;}
.delay-7s {animation-delay: 7s !important;}
.delay-8s {animation-delay: 8s !important;}
.delay-9s {animation-delay: 9s !important;}
.delay-10s {animation-delay: 10s !important;}

[camarade35]

Nickel, merci beaucoup, ça va simplifier la vie quelque chose de sérieux
EDIT
euh, je le colle où ce truc, car pour le moment, je modifier directement le code du css en faisant par exemple

Code : Tout sélectionner

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

et je changeais le temps directement là-dedans

Code : Tout sélectionner

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

et si il n'y avait pas je créais.

RE-EDIT : c'est bon, j'avais pas enlevé le point devant.
Pour ceux qui veulent savoir.

Dans le code, vous avez votre image, il suffit d'éditer la ligne et de mettre comme ça (pour exemple)

Code : Tout sélectionner

  <img src="assets/NES-Console-Set.png" class="gwd-img-z1kw fadeInLeft animated speed-5s" id="nes">

[aruka]

Voila c'est parfait comme ca, normalement tu as juste a utilisé les class que j'ai crée. Pas besoin de modifié le code des animations de la lib CSS

[camarade35]

Mise à jour de Google Web Designer, l'option de pourcentage est disponible en direct, plus besoin d'aller dans le code

[Porko]

VI j'ai testé! Et pour mac le cmd+Z (ctrl+Z) marche! Enfin presque... Pas tout est prit en compte

Ca avance, mais je m'y passerai quand les fichier DAE seront prit en compte et animables

[babamimi262626]

bonjour j'ai un problème pour mettre une vidéo au thème sur Google web designer. Çà ne la lit pas, ni en aperçu ni dans zspin.
on peut bien mettre une video de son pc ?

[camarade35]

Oui du moment que tu indique le bon chemin dans le src="chemindelavideo.mp4"
Pour Zspin, il suffit de mettre Video.mp4 et que ton zip soit : soit un default.zip et là, il ira chercher la vidéo correspondant au nom du jeu, soit au nom du jeu et même punition.

[babamimi262626]

merci camarade je testerai se soir, sa commence a bugger.

[babamimi262626]

super sa marche! J'avais oublier le .mp4. je cherche un tuto pour faire apparaitre une image en fondu mais en vain , vous savais comment on si prend ? j' essai de jouer avec l'opacité mais je n'y arrive pas .

[camarade35]

@babamimi262626 : tutos-graphisme-edition/google-web-desi ... ml#p116106" onclick="window.open(this.href);return false;
Il faut mettre au début de ton html

Code : Tout sélectionner

<head>
  <meta charset="utf-8">
  <title>Base Zspin</title>
  <meta name="generator" content="Google Web Designer 1.6.1.0726">
  <link rel="stylesheet" href="assets/animate.css">
  <style type="text/css">

créer un dossier assets si pas déjà fait et mettre le fichier animate.css dedans.

Ensuite tu suis ce qu'il y a de dit dans le post linké au dessus

[babamimi262626]

merci bien camarade35 j'ai réinstallé GWD et sa marche avec l'opacité. pour ton message avec les lignes de code je suis trop largué. pour le moment je vais faire des theme tres basique histoire de pas avoir d' "écran noir" dans mon main menu.

[babamimi262626]

salut déjà merci aux tutos que tu as fait, sa m' aide beaucoup. du coup j'ai intégrer les ligne de code pour les animation. l'animation marche nickel (un flash sur une vidéo) par contre c'est le delay et speed qui ne marche pas. je voudrait que le flash dure un peu plus longtemps.
donc j'ai mis la ligne :
<video src="C:\...\themes multiwheels\video zspin 1.mp4" class="gwd-video-1s85 flash animated delay-5s speed-5s" id="video" loop="loop" autoplay="autoplay"></video>
mais le temps reste le meme.

[babamimi262626]

bonjour, du coup sa-y-est ça marche, je n'avais pas télécharger le bon fichiers animate.css. comment faire un edit a mon message precedent ?
il ne me reste plus qu' a trouver mon dernier problème au niveau de la création de thème . la vidéo prend bien tout le cadre quand je fais un aperçu avec GWD mais une fois sur zspin elle ne prend que la moitier du cadre (en hauteur). j'ai fais une div comme dans ton tuto .J'ai du louper un truc a faire sur les vidéo zspin . si quelqu’un a une soluce ?

[Playmobil]

Je ne saurais t'aider pour le moment, je me suis mis à Webdesigner seulement hier soir !

Juste pour dire à @camarade35 que c'est bon, j'ai compris pour les wheels, et j'arrive enfin à en faire ce que je veux !

[babamimi262626]

salut Playmobil tu t'en sort avec gwd ?

[camarade35]

dites ce que vous cherchez les gars

[Playmobil]

salut Playmobil tu t'en sort avec gwd ?

Oui, j'avais des bonnes bases en HTML 3.2 et les CSS qui vont avec, Maintenant en 5.0 et CSS 3.3 je doit apprendre les nouvelles fonctions...


@camarade35 : J'avais 2-3 question sur le mainmenu, de ce que j'ai compris, si on met 2-3 themes dans Main Menu (ainsi que dans la database bien entendu) et ça roule ?

Ensuite, mes themes sont en "PURE HTML", aucunes invocations d'anim.css ou autre, mais comment changer la couleur de mon bandeau par rapport à la balise <system> par exemple... (elle existe pas cette balise, je sais, c'est un exemple...)

Je suis sur mon laptop là, je fais un screen dés que sur mon PC

[camarade35]

alors le nom de la balise, on fait ce qu'on veut <playmomaso>oui</playmomaso>
Le truc c'est que pour l'appeler c'est zspin-playmomaso

Ensuite pour la couleur, c'est du script, tu l'as en bas du code et il est basé sur genre de mémoire
tu vas retrouver deux fois zspin-genre, une fois dans les div et l'autre dans le script
suffit de changer dans le theme et de mettre la balise à appeler dans le xml où tu pourras mettre ta couleur.

Sinon, tu mets ton code en pastbin et tu envoies le lien

[Playmobil]

@camarade35

Voici comment j'ai défini mon bandeau dans la partie CSS :

Code : Tout sélectionner

    .info_bandeau {
      position: absolute;
      z-index: 3;
      height: 13%;
      width: 100%;
      background-image: none;
      left: 0%;
      top: 90%;
      background-color: rgba(165, 2, 3, 0.6);
    }
 

Rien de bien transcendant, juste un bandeau en bas avec une transparence...

et l'affichage avec une simple DIV dans le body :

Code : Tout sélectionner

  <div class="info_bandeau" id="bandeau">
  </div>

Voilà, je voudrait juste changer la couleur à la volée selon une certaine balise (<submenu> pour être exact...)