Google Web Designer - Themes HML5 - ZSPIN
Modérateurs : vik, Modérateurs
- Odissine
- Virtuose
- Messages : 1223
- Inscription : 20 févr. 2014 - 00:00
- A remercié : 17 fois
- A été remercié : 37 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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 ...
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 ...
Re: Google Web Designer - Themes HML5 - ZSPIN
Je viens de mettre a jour le fichier CSS,camarade35 a écrit : @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.
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;}
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
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
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
et je changeais le temps directement là-dedans
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)
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;
}
Code : Tout sélectionner
.animated {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
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">
préservation du patrimoine vidéoludique et de notre planète
Re: Google Web Designer - Themes HML5 - ZSPIN
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
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
Mise à jour de Google Web Designer, l'option de pourcentage est disponible en direct, plus besoin d'aller dans le code
préservation du patrimoine vidéoludique et de notre planète
- Porko
- Modérateur
- Messages : 2019
- Inscription : 02 févr. 2014 - 00:00
- Localisation : 26700
- A remercié : 258 fois
- A été remercié : 381 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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
Ca avance, mais je m'y passerai quand les fichier DAE seront prit en compte et animables
- babamimi262626
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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 ?
on peut bien mettre une video de son pc ?
- camarade35
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
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.
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.
préservation du patrimoine vidéoludique et de notre planète
- babamimi262626
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
merci camarade je testerai se soir, sa commence a bugger.
- babamimi262626
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
@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
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
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">
Ensuite tu suis ce qu'il y a de dit dans le post linké au dessus
préservation du patrimoine vidéoludique et de notre planète
- babamimi262626
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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.
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
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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 ?
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
- Guide
- Messages : 1849
- Inscription : 11 janv. 2013 - 00:00
- Localisation : Trou perdu sur la frontière Belge !
- A remercié : 86 fois
- A été remercié : 177 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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 !
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
- Connaisseur
- Messages : 271
- Inscription : 21 juil. 2017 - 13:20
- Localisation : sud-est
- A remercié : 129 fois
- A été remercié : 52 fois
- camarade35
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
dites ce que vous cherchez les gars
préservation du patrimoine vidéoludique et de notre planète
- Playmobil
- Guide
- Messages : 1849
- Inscription : 11 janv. 2013 - 00:00
- Localisation : Trou perdu sur la frontière Belge !
- A remercié : 86 fois
- A été remercié : 177 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
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...babamimi262626 a écrit :salut Playmobil tu t'en sort avec gwd ?
@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
- Maître
- Messages : 4230
- Inscription : 05 sept. 2013 - 01:00
- Localisation : Chevaigné
- A remercié : 619 fois
- A été remercié : 739 fois
- Contact :
Re: Google Web Designer - Themes HML5 - ZSPIN
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
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
préservation du patrimoine vidéoludique et de notre planète
- Playmobil
- Guide
- Messages : 1849
- Inscription : 11 janv. 2013 - 00:00
- Localisation : Trou perdu sur la frontière Belge !
- A remercié : 86 fois
- A été remercié : 177 fois
Re: Google Web Designer - Themes HML5 - ZSPIN
@camarade35
Voici comment j'ai défini mon bandeau dans la partie CSS :
Rien de bien transcendant, juste un bandeau en bas avec une transparence...
et l'affichage avec une simple DIV dans le body :
Voilà, je voudrait juste changer la couleur à la volée selon une certaine balise (<submenu> pour être exact...)
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);
}
et l'affichage avec une simple DIV dans le body :
Code : Tout sélectionner
<div class="info_bandeau" id="bandeau">
</div>