Gradient effect when turn on/off layers

639
5
Jump to solution
04-18-2013 12:30 PM
XintaoLiu
Occasional Contributor II
Is it possible to implement the gradient effect when turn on/off a layer by using ArcGIS API for flex? Thanks!
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
DasaPaddock
Esri Regular Contributor
Here's an example that uses the Fade effect to animate the alpha property of a layer.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Fade.html
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:esri="http://www.esri.com/2008/ags">      <fx:Script>         <![CDATA[             private function visibleCheckBox_clickHandler(event:MouseEvent):void             {                 if (visibleCheckBox.selected)                 {                     fadeInEffect.end();                     fadeInEffect.play();                 }                 else                 {                     fadeOutEffect.end();                     fadeOutEffect.play();                 }             }         ]]>     </fx:Script>      <fx:Declarations>         <s:Fade id="fadeInEffect"                 alphaFrom="0"                 alphaTo="1"                 effectEnd="imageLayer.visible = true"                 target="{imageLayer}"/>         <s:Fade id="fadeOutEffect"                 alphaFrom="1"                 alphaTo="0"                 effectEnd="imageLayer.visible = false"                 target="{imageLayer}"/>     </fx:Declarations>      <s:controlBarContent>         <s:CheckBox id="visibleCheckBox"                     click="visibleCheckBox_clickHandler(event)"                     label="Image layer visibility"                     selected="{imageLayer.visible}"/>     </s:controlBarContent>      <esri:Map>         <esri:extent>             <esri:Extent xmin="-13486000" ymin="5713000" xmax="-13200000" ymax="5823000">                 <esri:SpatialReference wkid="102100"/>             </esri:Extent>         </esri:extent>         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>         <esri:ArcGISImageServiceLayer id="imageLayer"                                       noData="0"                                       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer"/>     </esri:Map>  </s:Application>

View solution in original post

0 Kudos
5 Replies
XintaoLiu
Occasional Contributor II
Is it possible to implement the gradient effect when turn on/off a layer by using ArcGIS API for flex? Thanks!


Any of your comments are highly anticipated and appreciated.
0 Kudos
omega_cancer
Occasional Contributor II
Where you want that effect, Can you please provide further detail or snapshot of what you want to achieve.
0 Kudos
XintaoLiu
Occasional Contributor II
Where you want that effect, Can you please provide further detail or snapshot of what you want to achieve.


Thanks for your reply! What I meant is when you turn on a layer in Flex, it slowly shows up; when you turn off a layer, it slowly disappears. It sounds like the effect in slides.
0 Kudos
DasaPaddock
Esri Regular Contributor
Here's an example that uses the Fade effect to animate the alpha property of a layer.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Fade.html
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:esri="http://www.esri.com/2008/ags">      <fx:Script>         <![CDATA[             private function visibleCheckBox_clickHandler(event:MouseEvent):void             {                 if (visibleCheckBox.selected)                 {                     fadeInEffect.end();                     fadeInEffect.play();                 }                 else                 {                     fadeOutEffect.end();                     fadeOutEffect.play();                 }             }         ]]>     </fx:Script>      <fx:Declarations>         <s:Fade id="fadeInEffect"                 alphaFrom="0"                 alphaTo="1"                 effectEnd="imageLayer.visible = true"                 target="{imageLayer}"/>         <s:Fade id="fadeOutEffect"                 alphaFrom="1"                 alphaTo="0"                 effectEnd="imageLayer.visible = false"                 target="{imageLayer}"/>     </fx:Declarations>      <s:controlBarContent>         <s:CheckBox id="visibleCheckBox"                     click="visibleCheckBox_clickHandler(event)"                     label="Image layer visibility"                     selected="{imageLayer.visible}"/>     </s:controlBarContent>      <esri:Map>         <esri:extent>             <esri:Extent xmin="-13486000" ymin="5713000" xmax="-13200000" ymax="5823000">                 <esri:SpatialReference wkid="102100"/>             </esri:Extent>         </esri:extent>         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>         <esri:ArcGISImageServiceLayer id="imageLayer"                                       noData="0"                                       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer"/>     </esri:Map>  </s:Application>
0 Kudos
XintaoLiu
Occasional Contributor II
Thanks! It works good.
0 Kudos