BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Vegas, tutoriel de base
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet ferméVegas, tutoriel de base

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Lien Direct à ce Post Sujet: Vegas, tutoriel de base
    Envoyé : 17 Sep 2015 à 11:52
Édité le 11 décembre 2015, Hobby001
Édité le 15 décembre 2015 pour les particularités de renommage de fichiers aux étapes 3e et 8b, Hobby001
Édité le 06 février 2016, ajout de mises en évidence en bleu, Hobby001
Édité le 05 mai 2017, mise è jour en fonction de Vegas 2.4.0, Hobby001
Édité le 27 avril 2020, ajout de l'option III

Les mises en évidence en rouge indiquent les endroits des erreurs les plus courantes.

Tuto de base pour implanter le carrousel Vegas 2.4.0 en plein écran

Étapes d'installation

1. Téléchargez le fichier fournis pour le module Vegas sur le site de l'auteur

Extrayez tous les fichiers ainsi que le répertoire "overlays" et son contenu



2. Ajoutez les fichiers du module dans votre projet
a. Créez un dossier Vegas à la racine de votre projet
b. Copiez-y tout le contenu extrait de l'archive téléchargée 

3. Ouvrez votre projet OE

4. Choisissez les images de fond que vous voulez utiliser et importez les dans la bibliothèque d'images du projet.
a. Explorateur de site
b. Ressources
c. Images
d. Ajouter des fichiers
Pour cet exercice, j’ai choisi des images nommées : 

Fond01.jpg (voir la note qui suit)
Fond02.png
Fond03.png
Fond04.png
Fond05.png

Note: Attention à la casse, si le fichier s'appelle fond01.JPG ou Fond01.Jpg, la casse doit être respectée en tout temps 

5. Créez une nouvelle page

6. Passez-la en mode "responsive" plein écran

7. Insérer un panneau d'éléments
a. Changez l’ID du panneau pour : WEVEGAS
b. coordonnées 0,0
c. mode "relative"
d. largeur réglée à 100% 
e. assignez-lui la classe: vegas

8. Code HTML
a. Créez un bloc de code source HTML en position Header
b. Insérez le code suivant :
<link rel="stylesheet" href="/Vegas/vegas.min.css">
<script src="/Vegas/vegas.min.js"></script>

9. Code CSS
a. Créez un bloc de code source CSS en position Header
b. Insérez le code suivant :
.vegas{
left: 0 !important; 
top: 0 !important;
width: 100% !important;
height: 100vh !important;
position: absolute  !important;
}
10. Code Javascript
a. Céez un bloc de code source Javascript en position EndBody
b. Insérez le code suivant :
// implantation de vegas
$('#WEVEGAS').vegas(
{
slides: [
{ src: 'Files/Image/Fond01.jpg' },
{ src: 'Files/Image/Fond02.png' },
{ src: 'Files/Image/Fond03.png' },
{ src: 'Files/Image/Fond04.png' },
{ src: 'Files/Image/Fond05.png' },
],
animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ], 
// pour les types d'animations et autres ajustements, visitez cette page du site de l'auteur
transition:'fade',
transitionDuration: '3000'
}
);
=====================================================================================================

Option I, élément déclencheur d'arrrêt-départ de Vegas par un click dans la fenêtre du fureteur.
		
// déclencheur: arrêt-départ au click dans le fonc de l'écran
$(XBody).click(
function(){
if ($('#WEVEGAS').vegas('playing')){
$('#WEVEGAS').vegas('pause');
}else{
$('#WEVEGAS').vegas('play');
}
}
);

=====================================================================================================

Option II, bloc de texte utilisé comme élément déclencheur d'arrêt-départ de Vegas
// déclencheur: arrêt-départ au click sur le bloc de texte dont l'ID est WECtrlVegas
$('#WECtrlVegas').click(
function(){
if ($('#WEVEGAS').vegas('playing')){
$('#WEVEGAS').vegas('pause');
$(this).text('Démarrer diaporama');
}else{
$('#WEVEGAS').vegas('play');
$(this).text('Arrêter diaporama');

}
}
);
=====================================================================================================
Option III, boutons suivant et précédant

// Image suivante
$('#idDeLaFlècheSuivant').click(function(){$('#WEVEGAS').vegas('next');});

// Image précédente
$('#idDeLaFlèchePrécédent').click(function(){$('#WEVEGAS').vegas('previous');});

Créez vos flèches et remplacez les id dans ce code

=====================================================================================================


Au moment de la mise en ligne finale, les fichiers photo sélectionnés n'étant pas inclus dans un élément d'openElement, ils ne seront pas mis en ligne automatiquement.

Vous devrez les ajouter manuellement de la façon suivante:

Onglet Projet
Explorateur de projet, Ressources ou icone Ressources (coffre doré)
Onglet Images
sélectionnez les images à transférer
click sur 6e icône du menu (flèche verte vers le haut) pour transférer vers le serveur




Edité par Hobby001 - 28 Avr 2020 à 01:55
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 286
Lien Direct à ce Post Envoyé : 26 Sep 2015 à 23:26
Bonsoir,
je ne vois pas comment on peut faire pour ralentir le diaporama.

merci
Haut de la page
xplorer allez vers le bas
Senior Member
Senior Member


Depuis le: 04 Sep 2015
Status: Inactif
Points: 241
Lien Direct à ce Post Envoyé : 27 Sep 2015 à 00:09
Message posté par ridp ridp a écrit:

Bonsoir,
je ne vois pas comment on peut faire pour ralentir le diaporama.

merci


C'est pas trop dur à trouver, c'est de mémoire soit directement dans le code soit dans les propriétés que tu gères les milisecondes.
 
Edit : dans le code, tu vois 12 000 et 15 000 ? c'est ça.
Regardes aussi sur le site de Vegas, il y a des codes pour différentes animations etc .. c'est là que j'ai dû trouver certains éléments je crois.
 
// implantation de vegas
$('#WEVEGAS').vegas(
 {
  slides: [
   { src: 'Files/Image/Fond01.jpg' },
   { src: 'Files/Image/Fond02.jpg' },
   { src: 'Files/Image/Fond03.jpg' },

  ],
        animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],
  animationDuration: '12000',
  transitionDuration: '15000'
  

 }
);
   
// déclencheur: arrêt-départ au click dans le fonc de l'écran
$(XBody).click(
 function(){
  if ($('#WEVEGAS').vegas('playing')){
   $('#WEVEGAS').vegas('pause');
  }else{
   $('#WEVEGAS').vegas('play');
  }
 }
);


Edité par xplorer - 27 Sep 2015 à 00:37
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.