Flash CS5 - Curseur

De EduTech Wiki
Aller à : navigation, rechercher

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

Matériel (fichiers *.fla à manipuler)

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

1 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)

2 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.

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 ...

3 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.

3.1 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:

4 Créer son propre curseur avec Actionscript

Voir:


5 Liens

Chez Adobe:

Importation de Bitmap

6 Remerciements