Flash CS4 Professional ActionScript 2.0

Création d'une implémentation RectBorder personnalisée

La classe RectBorder est utilisée en tant qu'enveloppe de bordure dans la plupart des composants ActionScript 2.0. Les implémentations par défaut dans les thèmes Halo et Sample utilisent ActionScript pour dessiner la bordure. Une implémentation personnalisée doit utiliser ActionScript pour être enregistrée comme implémentation RectBorder et fournir une fonctionnalité de dimensionnement mais elle peut utiliser ActionScript ou des éléments graphiques pour les représentations visuelles.

Chaque implémentation RectBorder doit satisfaire les conditions suivantes :

  • Elle doit étendre mx.skins.RectBorder ou l'une de ses sous-classes.
  • Elle doit fournir une valeur de propriété offset ou implémenter la méthode getBorderMetrics pour renvoyer des informations de redimensionnement.
  • Elle doit implémenter la méthode drawBorder() pour dessiner ou dimensionner la bordure.
  • Elle doit prendre en charge les quatre styles standard ainsi que les quatre styles spéciaux.

    L'implémentation peut réutiliser des bordures standard pour des bordures spéciales, comme le thème Sample.

  • Elle doit être enregistrée en tant qu'implémentation RectBorder.

Enregistrement globale de RectBorder

Tous les composants recherchent une référence à la classe RectBorder utilisée pour le document dans un emplacement centralisé, _global.styles.rectBorderClass.
Vous ne pouvez pas indiquer qu'un composant individuel doit utiliser une implémentation RectBorder différente. Pour personnaliser RectBorder pour un composant, vous devez utiliser la propriété de style borderStyle.

Exemple RectBorder personnalisé

Les implémentations RectBorder fournies par le thème Halo et le thème Sample utilisent l'API de dessin ActionScript pour dessiner les bordures de différents styles. L'exemple suivant démontre comment créer une implémentation RectBorder personnalisée qui utilise des symboles graphiques pour son affichage.

 Pour créer une implémentation RectBorder personnalisée :

  1. Créez un dossier dans le dossier Classes/mx/skins correspondant au nom du paquet personnalisé que vous utiliserez pour la bordure personnalisée.

    Pour cet exemple, utilisez myTheme.

  2. Sélectionnez Fichier > Nouveau et choisissez Fichier ActionScript.
  3. Enregistrez le fichier dans le même dossier que RectBorder.as.
  4. Copiez le code ActionScript suivant dans le nouveau fichier :
    import mx.core.ext.UIObjectExtensions;
    
    class mx.skins.myTheme.RectBorder extends mx.skins.RectBorder
    {
        static var symbolName:String = "RectBorder";
        static var symbolOwner:Object = RectBorder;
        var className:String = "RectBorder";
    
    #include "../../core/ComponentVersion.as"
    
       // Toutes ces bordures ont des bords de même taille, 1 pixel.
        var offset:Number = 4;
        
        function init(Void):Void
        {
            super.init();
        }
    
        function drawBorder(Void):Void
        {
           // Les graphiques sont sur le scénario du symbole,
           // donc la seule chose que vous devez faire ici est 
     // de dimensionner la bordure. _width = __width; _height = __height; } // Enregistrez la classe comme RectBorder pour tous les composants
    // à utiliser. static function classConstruct():Boolean { UIObjectExtensions.Extensions(); _global.styles.rectBorderClass = RectBorder; _global.skinRegistry["RectBorder"] = true; return true; } static var classConstructed:Boolean = classConstruct(); static var UIObjectExtensionsDependency = UIObjectExtensions; }

    Si vous n'utilisez pas le paquet myTheme, changez la déclaration de classe selon vos besoins.

  5. Enregistrez le fichier.
  6. Sélectionnez Fichier > Nouveau et choisissez Fichier Flash (ActionScript 2.0).
  7. Utilisez Insertion > Nouveau symbole pour créer un nouveau symbole de clip.
  8. Nommez-le RectBorder.
  9. Si les champs avancés ne sont pas affichés, cliquez sur Avancé.
  10. Sélectionnez Exporter pour ActionScript

    L'identifiant est automatiquement renseigné avec RectBorder.

  11. Définissez la classe sur le nom de classe complet de l'implémentation de bordure personnalisée.

    Cet exemple utilise mx.skins.myTheme.RectBorder.

  12. Assurez-vous que l'option Exporter dans la première image est sélectionnée,
    puis cliquez sur OK.
  13. Ouvrez le symbole RectBorder pour l'édition.
  14. Dessinez les graphiques pour le symbole.

    Par exemple, dessinez un carré en filet sans remplissage. Pour rendre la bordure personnalisée facilement visible, définissez la couleur de la ligne sur le rouge vif.

  15. Assurez-vous que les graphiques sont alignés contre le coin supérieur gauche avec les coordonnées x et y définies sur (0,0).

    Votre implémentation drawBorder personnalisée définit la largeur et la hauteur en fonction des exigences de composant.

  16. Cliquez sur Précédent pour revenir au scénario principal.
  17. Faites glisser plusieurs composants qui utilisent RectBorder sur la scène.

    Par exemple, faites glisser un composant List, TextArea et TextInput sur la scène.

  18. Sélectionnez Contrôle > Tester l'animation.

Cet exemple crée une implémentation de bordure très simple avec des couleurs et des graphiques statiques. Il ne répond pas à des paramètres borderStyle différents ; il utilise toujours les mêmes graphiques, indépendamment de borderStyle. Pour des exemples d'implémentations de bordure plus complètes, consultez les exemples fournis pour les thèmes Halo et Sample.