Tutoriels Trucsweb
          

 

Niveau : AVANCÉ
Compatibilité : Flash 5 / MX

  Ajouter aux favoris  Envoyer à un ami  Télécharger le fichier ZIP  Version imprimable

Le défilement sans fin en ActionScript II

Méthode avec duplicateMovieClip

   par Django (Oznog) Blais, Trucsweb (22 Avril 2003)


Changer les images ou le contenu du «movieClip» pour générer un défilement continu parfait. Exemple de base (4 directions) et exemple interactif basé sur la position de la souris.

Doubler le «movieClip» pour un défilement sans fin
L'astuce de ce défilement consiste à doubler le «movieClip» qui défile. Ce double ou cette copie sera ajouté à son extrémité (droite, gauche, haute ou basse, selon la direction). Ainsi, quand il arrivera au bout, la copie fera en sorte que son défilement se poursuive sans arrêt.

Pour donner la bonne position de départ à la copie, il suffit d'utiliser une combinaison des propriétés (_x, y_, _width, _height selon la direction). Par exemple pour un défilement vers la droite, il faut que la copie se retrouve à la gauche de l'original. Donc, la position _x - la largeur du movieClip original (mc._x-mc._width). Vers la gauche : (mc._x+mc._width) etc. L'instance du «movieClip» de l'exemple est «Contenu1» copiée dans l'instance «Contenu2». Avec ces deux instances, il suffit d'ajuster leurs propriétés _x pour faire un défilement.

// Copie du «movieClip» original
Contenu1.duplicateMovieClip("Contenu2", 1);
// Donner la nouvelle position
Contenu2._x = Contenu1._x - Contenu1._width;

 

Ajustement du défilement
Quand un «movieClip», tant l'original que la copie, sort de la partie visible de l'animation, il faut le déplacer vers l'autre extrémité. Selon le même calcul que la position de départ, basé sur la position X et la largeur du «movieClip». MAIS ATTENTION, puisque ce mouvement est en temps réel, il y aura un petit décalage, celui de l'ajustement de la position de l'autre «movieClip». Pour se sortir du trouble, il suffit d'ajouter cette valeur «d'ajustement». Dans l'exemple suivant, la vitesse du défilement est de 10 pixels par «enterFrame» (soit 150 pixels par seconde). Et bien sûr, ce test doit être fait pour les deux «movieClip».

// Exemple simplifé vers la droite
if (direction==1) {
  if (Contenu1._x<=Contenu1._width) {
    Contenu1._x += 10;
  } else {
    Contenu1._x = Contenu2._x + 10 - Contenu1._width;
  }
  if (Contenu2._x<=Contenu2._width) {
    Contenu2._x += 10;
  } else {
    Contenu2._x = Contenu1._x + 10 - Contenu2._width;
  }
}

Dans le second exemple, la valeur d'ajustement ou «vitesse» sera spécifiée par la position de la souris. Puisque cette valeur est passablement grande pour la vitesse il faut la diviser. J'opte donc aussi pour une variable «vitesse» qui sera d'avantage l'ajustement de la vitesse. (Noter l'utilisation de Math.Floor pour arrondir le résultat).

// Position de la souris - l'ajustement
vitesse = 10;
Math.floor(_xmouse/vitesse);

 

Défilement de base avec 4 directions possibles
Cet exemple peut servir à toutes les sauces, il suffit d'indiquer la vitesse et la direction pour obtenir le défilement continu d'un «movieClip». Voir le script du MovieClip «Bande», les variables «this.direction» et «this.vitesse». La direction peut être 1 (vers la droite) ou -1 (vers la gauche). Pour changer d'image, ouvrir le «movieClip» «Contenu1» et remplacer l'image actuelle par celle de votre choix.

 

Défilement horizontal avec interaction de la souris.
Le défilement, vers la droite ou vers la gauche, est spécifié selon la position X de la souris. Vous pouvez faire un ajustement sur la vitesse «globale» (Voir le script du «movieClip» «Bande», et la variable «this.vitesse»). Pour changer les images, ouvrir le «movieClip» «Contenu1» et simplement remplacer les images actuelles par celles de votre choix. Tout ce qui est ajouté dans ce «movieClip» défilera, un bouton, un autre «movieClip» etc...

Attention, dans mon exemple à télécharger, mes variables «MaxBas» et «MaxHaut» devraient se lire en réalité «MaxDroite» et «MaxGauche», séquelle du défilement vertical ;-). «MaxHaut» est un ajustement si le défilement doit être plus ou moins grand que l'original.

 Début de la page

TrucswebTrucsweb


Fil d'info Trucsweb


 
sp

 
sp
 S U I T E   D U   S U J E T 
sp
twFlashShow 1.0 entièrement automatisé : Diaporama automatique d'images JPEG

Étude de «scroll» ou le défilement Flash : 7 tutoriels, 7 codes complets

Le défilement vertical d'un «texte dynamique» : Propriétés «scroll» et «maxscroll»

Barre de défilement vertical avec texte dynamique : La composante (Flash UI) «scrollBar» et texte

Le défilement horizontal avec «hscroll» : D'un élément «texte dynamique» à ligne simple

Défilement vertical ou horizontal d'un «movieClip» : Avec interpolation de mouvement (Motion Tween)

Le défilement sans fin en ActionScript I : Avec le prototype twDefile

Hébergement de qualité!

partenaire
Rechercher un tutoriel!
 
 
sp
 C O M M A N D I T E S 
sp






 
sp
 T U T O R I E L S 
sp
· ASP / VBscript
· C/C++
· CSS
· DHTML
· CGI / Perl
· HTML
· Java/JSP
· Javascript
· PHP
· SSI
· WAP/WML
· XML/XSL
· Infographie
· Flash et Shockwave
· Audiovisuel
· Hébergement
· Analyses de logiciels
· Internet et Protocoles
· Veille intégrée
· Référencement
· Sécurité
· Outils gratuits
 
sp
 F O R U M S 
sp
· Forum Javascript
· Forum HTML/CSS
· Forum ASP/VBScript
· Forum Flash
· Tous les forums
 
sp
 S E R V I C E S 
sp
Generateur Trucsweb
· Générateur
· Répertoire
· Logithèque
· Glossaire
· Forum
· Nouveautés Dev Zone
· Ajouter un site
· Ajouter un logiciel
· Ajouter un tutoriel
· Fil d'info sur votre site
· Tester votre site
 
sp
 A P P L I C A T I O N S 
sp
· twCompteur 1.0 Nouveau
· twCalende 1.0 Nouveau
· twLiMenu 1.0 Nouveau
· twValide 2.2 sp
· twAliste 1.0 sp
· twASPDate 2.0 sp
· twASPLivre 1.0 sp
 
sp
 R É F É R E N C E S 
sp
· W3C HTML 4.0
· W3C XHTML 1.0
· Web Design Group
· W3C SMIL 2.0
· W3C XML 1.0
· XML Cover Pages
· W3C CSS LEVEL 2
· Netscape Javascript 1.5
· Netscape Javascript 1.4
· Netscape Javascript 1.3
· Netscape DHTML
· Gecko DOM ref.
· IE DHTML
· VBScript Language Ref.
· JScript Language Ref.
· ASP Object Quick Ref.
· ADO API Reference
· Microsoft IIS5
· MSDN Library
· RFC Editor Site
· HTML 4.0 code de caractères
· Unicode fonts
· Manuel PHP
· Documentation Perl
· Perl 5 Reference Guide
· Flash actionscript FAST
· ActionScript dictionary
· MySQL Manual
· SQL Pro (F. Brouard)
· Java Language Spec.
· Java 2 SDK Doc. V1.3.1
· JavaServer Pages Ref.
· C/C++ Language Ref.
· Python Library Reference
· Les Navigateurs
· Terminologie d'Internet
· Traduction
· Traduction systran
· Traduction d'interface client
· Extensions de fichiers
· Virus Wildlist
· Virus Alerts
 
sp
 D O M A I N E S 
sp
iWeb

iWeb
 
sp
 C O P Y R I G H T  
sp

 

accueil | tutoriels | logithèque | répertoire | forum



© 1997-2006
Django (Oznog) Blais
Rivière-du-Loup, Québec
Ajouter à votre Sidebar  RSS 1.0
 
Conception Oznog co. Multimédia


Hit-Parade    Tout navigateurs   

154 visiteurs

webmaster@summummag.com - webmaster@summummag.com - webmaster@summummag.com webmaster@summummag.com - webmaster@summummag.com
casting@summummag.com webmaster@summummag.com john@fueldigitalmedia.com mlavoie@summummag.com tmmw@sympatico.ca marty@cmcmediasales.com pdemers@genexcommunications.com mleclerc@summummag.com creation@summummag.com aroy@summummag.com redaction@summummag.com