window.onload = init; function init() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); var menu = document.getElementById('menu1'); for(var i=0; i<Lien.length; i++) { Lien[i].addEventListener("mouseover", rendreVoyante, false); } menu.addEventListener("mouseout", rendrePetit, false); }
function rendreVoyante() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); for(var j=0; j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); //test si le premier lien est survollé if(this==Lien[0]) { Lien[j].setAttribute('class', 'voyante'); Lien[j=j+1].setAttribute('class', 'intermediaire'); //boucle pour mettre les autre lien en discret for(j=2;j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); } //arret de la fonction pour empecher le elseif de se réaliser break; }
//fonctionement normal du menu else if(this==Lien[j]) { Lien[j-1].setAttribute('class', 'intermediaire'); Lien[j].setAttribute('class', 'voyante'); Lien[j=j+1].setAttribute('class', 'intermediaire'); } } }
function rendrePetit() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); for(var j=0; j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); } }
C'est pas tout à fait au point donc si vous avez des suggestions ça pourrait être simpa. Merci et j'espère vous apporter quelque chose.
Je suis de retour et je vous apporte 3 tutoriaux très intéressants sur la découpe d'un design, l'intégration xhtml/css et le javascript. A vous de voir :
Je ne vous avez toujours pas parlé de ce site, pourtant bien pratique pour débuter dans la création de site web et même pour ceux qui peinent à coder en css très utile pour se faire aider et même pour demander à ce qu'on vous le fasse.
Ce site fonctionne un peu comme Forum-toshop. En celà que c'est un site, plutôt un forum, qui se base autour d'une communauté et qui est principalement là pour vous aider à progresser et vous aider dans la création de vos pages web.
Grâce à son espace requête vous pouvez demander à ce qu'on vous découpe votre design et qu'on vous fasse le css. En somme c'est un site très plaisant et très intéressant. Je vous invite onc à le visiter, il en est d'ailleur à sa version 2.
w3c l'organisation internationale dédiée à la promotion et à la normalisation des standards web a diffusé mardi une première ébauche de l'HTML 5, prochain standard sur la toile.
Ce standard intègrera les interfaces de programmation (API), la conception de graphiques 2D, la prise en compte des contenus audio et vidéo, le stockage de données persistant côté client et la modification interactive de documents pour les utilisateurs. Bien sur d'autres nouveautées sont au programme pour avoir plus de détails je vous invite à vous rendre ICI.
w3c invite chacun à faire des suggestions sur ce premier document.
Bonjour à tous et bienvenue en ce début de week end. Aujourdhui nous revenons sur l'ActionScript 3 et sur le dessin vectoriel. Je vous ai concocté une petite application flash qui va nous permettre de dessiner une ligne noir toute simple et de pouvoir l'effacer par clique sur un bouton prévu à cet effet.
Pour ce qui est du code, j'ai essayer de commenter au mieux pour que vous compreniez le plus facilement possible :
// Importation des classes événement, évènement souris et scène import flash.events.Event; import flash.events.MouseEvent; import flash.display.Stage;
// Ajout des évènements souris et de la fonction correspondante à la scène stage.addEventListener( MouseEvent.MOUSE_DOWN, startDessine ); stage.addEventListener( MouseEvent.MOUSE_UP, stopDessine ); btnClean.addEventListener( MouseEvent.CLICK, clean );
// Définition du style de la ligne this.graphics.lineStyle( 10, 0, 1 );
// Fonction qui permet de dessiner à l'appuie du clique gauche de la souris function startDessine( pEvt:MouseEvent ) { this.graphics.moveTo( this.mouseX, this.mouseY ); stage.addEventListener( MouseEvent.MOUSE_MOVE, onDessine ); }
// Fonction qui permet d'arréter de dessiner au relachement du clique gauche de la souris function stopDessine( pEvt:MouseEvent ) { stage.removeEventListener( MouseEvent.MOUSE_MOVE, onDessine ); }
// fonction de dessin (définition des variable de position de la souris, utilisation de la fonction dessine) function onDessine( pEvt:MouseEvent ) { var posX:Number = pEvt.localX; var posY:Number = pEvt.localY; //---------------------------------------------------- dessine( this, posX, posY ); pEvt.updateAfterEvent(); }
// Fonction qui récupère les positions de la souris pour créer une ligne function dessine( cont:Sprite, posX:Number, posY:Number ) { cont.graphics.lineTo( posX, posY ); }
// Fonction pour effacer le dessin (on redéfinit le style de la ligne pour pouvoir redessiner après) function clean( pEvt:MouseEvent ) { this.graphics.clear(); this.graphics.lineStyle( 10, 0, 1 ); }
Tout se joue grâce aux évènements de la souris, le principe est simple on se sert de la méthode addEventListener pour lier un évènement et une fonction à un objet. On créé ensuite les fonctions de dessin récupérant les informations de positions de la souris pour dessiner et enfin la fonction qui associe l'évènement click de la souris à la fonction clean qui va clear la zone.
Voilà donc pour aujourdhui avec l'ActionScript 3, je continuerai ce petit tutoriel au fur et à mesure en rajoutant des options, telles que taille de la ligne, changement de la couleur grâce à une palette de couleur et changement de l'apha. Peut être d'autres options qui sait xD.
Je vous laisse maintenant voir par vous même le fonctionnement de ce programme en dessous :
J'espère que ce petit tuto vous plait et que vous en apprenez un peu plus sur ActionScript 3 et l'API de dessin. J'espère que ce petit tuto vous plais et que vous en apprenez un peu plus sur ActionScript et l'API de dessin.
Je viens aujourdhui vous parlez de Flash et bien sur d'Actionscript le language de programmation associé.
Aujourdhui nous allons parler de dessin vectoriel en Actionscript 3, pour cela, nous allons donc utiliser les classes Shape et Graphics.
La classe Shape permet de créer des formes simples et la classe Graphics quant à elle est un ensemble de méthodes de dessin quon appellera dans la propriété Graphics de la classe Shape.
L'exemple suivant va vous permettre de tracer un triangle rouge et vert d'une hauteur de 100 pixels :
//création de la variable de hauter de trinagle de valeur 100, ainsi que du trinagle
var triangleHeight:uint = 100; var triangle:Shape = new Shape();
// triangle rouge, créé au point 0, 0 triangle.graphics.beginFill(0xFF0000); triangle.graphics.moveTo(triangleHeight/2, 0); triangle.graphics.lineTo(triangleHeight, triangleHeight); triangle.graphics.lineTo(0, triangleHeight); triangle.graphics.lineTo(triangleHeight/2, 0);
// triangle vert, créé au point 200, 0 triangle.graphics.beginFill(0x00FF00); triangle.graphics.moveTo(200 + triangleHeight/2, 0); triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); triangle.graphics.lineTo(200, triangleHeight); triangle.graphics.lineTo(200 + triangleHeight/2, 0);
this.addChild(triangle);
Ce ne sont que des bases, pour plus de renseignement sur ces classes il est important de consulter l'aide dans Flash qui est assez explicite. Vous avez donc maintenant quelques bases. A Vous de jouer.
Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.
Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.
