Ajouter un filtre d’ombre portée au survol d’un contrôle MX Image dans Flex4

Par
tannoy
– 29 juillet 2010Publié dans : Flex 4

Traduction de l'article de Peter DeHaan:
Adding a hover glow filter to an MX Image control in Flex 4

L'exemple suivant montre comment vous appliquez un filtre d'ombre portée au survol d'un contrôle MX Image dans Flex 4 en utilisant les événements rollOver et rollOut pour définir la propriété filters du contrôle Image sur un tableau contenant une instance GlowFilter.

L'exemple suivant requiert Flash Player 10 et le SDK Adobe Flex 4. Vous pouvez télécharger la version d'évaluation d'Adobe Flash Builder 4 à l'adresse http://www.adobe.com/products/flex/. Pour télécharger la dernière version du SDK Flex 4, regardez http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

COPIER-COLLER
XML:
  1. </p>
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
  4. <s:application name="MX_Image_filters_GlowFilter_test"
  5.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.         xmlns:s="library://ns.adobe.com/flex/spark"
  7.         xmlns:mx="library://ns.adobe.com/flex/mx"
  8.         xmlns:comps="comps.*">
  9.     <s:layout>
  10.         <s:horizontallayout horizontalAlign="center" verticalAlign="middle" />
  11.     </s:layout>
  12.  
  13.     <fx:script>
  14.         <![CDATA[
  15.             import flash.filters.GlowFilter;
  16.  
  17.             protected function img_rollOverHandler(evt:MouseEvent):void {
  18.                 Image(evt.currentTarget).filters = [new GlowFilter(0xFF0000)];
  19.             }
  20.  
  21.             protected function img1_rollOutHandler(evt:MouseEvent):void {
  22.                 Image(evt.currentTarget).filters = [];
  23.             }
  24.         ]]>
  25.     </fx:script>
  26.  
  27.     <mx:image id="img1"
  28.             source="http://helpexamples.com/flash/images/image1.jpg"
  29.             rollOver="img_rollOverHandler(event);"
  30.             rollOut="img1_rollOutHandler(event);" />
  31.  
  32. </s:application>
  33. <p>

La vue du code source est activée dans l'exemple suivant:

Ou, au lieu de spécifier les gestionnaires d'événements des événements rollOver et rollOut pour chaque instance du composant Image, vous pouvez créer un composant personnalisé qui étend le contrôle MX Image et ajoute la logique rollOver/rollOut, comme le montre l'exemple suivant:

COPIER-COLLER
XML:
  1. </p>
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
  4. <s:application name="MX_Image_filters_GlowFilter_test"
  5.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.         xmlns:s="library://ns.adobe.com/flex/spark"
  7.         xmlns:mx="library://ns.adobe.com/flex/mx"
  8.         xmlns:comps="comps.*">
  9.     <s:layout>
  10.         <s:horizontallayout horizontalAlign="center" verticalAlign="middle" />
  11.     </s:layout>
  12.  
  13.     <comps:glowimage id="img2"
  14.             source="http://helpexamples.com/flash/images/image2.jpg"
  15.             scaleX="0.5" scaleY="0.5" />
  16.  
  17.     <comps:glowimage id="img3"
  18.             source="http://helpexamples.com/flash/images/image3.jpg"
  19.             scaleX="0.5" scaleY="0.5" />
  20.  
  21. </s:application>
  22. <p>

Et le contrôle personnalisé MX Image, comps/GlowImage.mxml, est définit comme suit:

COPIER-COLLER
XML:
  1. </p>
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
  4. <mx:image name="GlowImage"
  5.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.         xmlns:s="library://ns.adobe.com/flex/spark"
  7.         xmlns:mx="library://ns.adobe.com/flex/mx"
  8.         rollOver="rollOverHandler(event);"
  9.         rollOut="rollOutHandler(event);">
  10.  
  11.     <fx:script>
  12.         <![CDATA[
  13.             import flash.filters.GlowFilter;
  14.  
  15.             protected function rollOverHandler(evt:MouseEvent):void {
  16.                 filters = [new GlowFilter(0xFF0000)];
  17.             }
  18.  
  19.             protected function rollOutHandler(evt:MouseEvent):void {
  20.                 filters = [];
  21.             }
  22.         ]]>
  23.     </fx:script>
  24.  
  25. </mx:image>
  26. <p>

Tags : , , , ,