Flash CS5 - Curseur
Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.
Objectifs d'apprentissage
- Etre capable de changer le curseur de la souris (mouse cursor) avec un des quatre modèles fournis
- Créer son propre curseur
Prérequis
- Univers Flash CS5
- Un peu de ActionScript (AS3) pour le début, par exemple Flash AS3 - Objets interactifs
- Pas mal de AS3 pour les exemples à la fin
Matériel (fichiers *.fla à manipuler)
- http://tecfa.unige.ch/guides/flash/ex5/mouse-cursor (répertoire)
Qualité et niveau
Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme fiche pratique dans un atelier.
Prochaines étapes
- ......
Autres versions
- aucune
Echanger le curseur par un des cinq quatre curseurs standard
ActionScript permet de redéfinir la forme du curseur de la souris:
Mouse.cursor=MouseCursor.ARROW;
Mouse.cursor=MouseCursor.AUTO; // Flash décide en fonction de l'objet sous la souris
Mouse.cursor=MouseCursor.BUTTON; // Normalement utilisé pour les boutons
Mouse.cursor=MouseCursor.HAND; // normalement utilisé pour le drag
Mouse.cursor=MouseCursor.IBEAM; // normalement utilisé pour les champs input text
Notation alternative:
Mouse.cursor="arrow";
etc.
Typiquement on associe une forme a un certain type d'événement, surtout des "roll over".
coke.addEventListener(MouseEvent.ROLL_OVER,overCoke);
coke.addEventListener(MouseEvent.ROLL_OUT,outCoke);
function overCoke(e:MouseEvent):void {
Mouse.cursor="hand";
}
function outCokeClip(e:MouseEvent):void {
Mouse.cursor="auto";
}
Tutoriel: AS3 Tip: Mouse.cursor - A New Property in Flash Player 10 (flash&math)
Utiliser le simple drag and drop
Cette méthode est facile à implémenter, mais ne sert pas à grand chose en tant que telle comme elle ne remplace pas vraiment le curseur.
(1) Définir un clip
- Dessinez un objet
- Transformez en clip
- L'instance sur la zone de travail doit avoir un nom, par exemple hand_mc.
(2) Dans AS3, utilisez la méthode startDrag avec l'argument true et cachez la souris.
- Pour utiliser la méthode startDrag() introduite dans le tutorial Flash tutoriel drag and drop, il suffit de deux lignes de code:
hand_mc.startDrag(true);
Mouse.hide();
Code:
Ce code a le désavantage qu'il ne remplace pas vraiment le curser et ce qui pose un problème pour implémenter des applications drag and drop. Enfin, à poursuivre ...
Créer un curseur natif avec MouseCursorData
Utiliser des "native mouse features" est la méthode de loin la plus efficace d'un point de vue performance car ce n'est pas flash qui doit calculer la trajectoire.
Prérequis
- Flash 10.2
- CS 5.5 ou CS6 (ne marche pas avec CS5) ou équivalent comme la dernière version de Flash Builder.
Préparer et créer un bitmap
La procédure nécessite la création d'un Bitmap object d'une taille maximale de 32x32 pixels.
Donc vous pouvez utiliser n'importe quelle image.
Si vous voulez créer un bitmap à partir d'un dessin Flash:
- Dessiner un object avec CS5
- L'exporter en format *.fxg (clic droit)
- Importer dans Illustrator et exporter sous PNG
- Réduire à 32x32 pixels (ou plus petit)
Il existe plusieurs méthodes pour l'importer dans Flash
- On peut importer un bitmap de type jpg, png, etc. dans la library. Dans ce cas il faut l'export pour ActionScript et lui donner un nom. Faire clic-droit dans la library, export for ActionScript et définir le nom de classe, par exemple hand_cursor.
- Alternativement, on peu aussi importer un bitmap avec ActionScript
Dans les deux cas il faut d'abord vérifier que la taille ne dépasse pas 32x32 pixels.
Code pour utiliser un bitmap de la library de taille x=32 et y=32:
import flash.display.BitmapData;
import flash.display.Bitmap;
var picture_input:BitmapData = new Hand_cursor(32,32);
var hand_cursor = new Bitmap (picture_input);
// for testing
this.addChild(hand_cursor);
Code pour importer avec ActionScript (pas testé !)
import flash.display.BitmapData;
import flash.display.Bitmap;
var bitmapData:BitmapData;
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("native_cursor1.png"));
function onComplete (event:Event):void
{
bitmapData = event.target.content.bitmapData;
hand_cursor = new Bitmap(bitmapData);
// this.addChild(hand_cursor);
}
(A SUIVRE .... exemple pas terminé !)
Voir:
- Working with native mouse cursors in Flash Player 10.2 (Adobe devnet)
- MouseCursorData
- Native Mouse cursor for Flash Player 10.2
- Native Mouse cursor for Flash Player 10.2+ (cf. ci-dessus)
- Working with Native Mouse Features - For Flash Player 10.2+ in actionScript 3.0 (YouTube vidéo, cf. ci-dessus). Pour Flash developper
Créer son propre curseur avec Actionscript
Voir:
Liens
Chez Adobe:
Importation de Bitmap