Come posso creare un'ombra discendente come l'effetto fluttuante attorno a un componente di tela in flex?
-
04-07-2019 - |
Domanda
Voglio creare un'ombra discendente attorno al componente tela in modo flessibile. Tecnicamente parlando non sarà un'ombra, poiché voglio che si avvolga attorno al componente dando al componente un aspetto fluttuante. Potrei riuscire a farlo con il bagliore, ma qualcuno può lasciar perdere una o due righe che l'hanno già fatto?
Grazie in anticipo.
Soluzione
In realtà l'ho risolto facendo questo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%" borderStyle="solid" borderColor="gray"
creationComplete="init();" backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
private function init():void {
var glow:GlowFilter = new GlowFilter();
glow.color = StyleManager.getColorName("gray");
glow.alpha = 0.8;
glow.blurX = 4;
glow.blurY = 4;
glow.strength = 6;
glow.quality = BitmapFilterQuality.HIGH;
this.filters = [glow];
}
]]>
</mx:Script>
</mx:Canvas>
Altri suggerimenti
Puoi usare DropShadowFilter
ma sembra essere più o meno la stessa cosa:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%" borderStyle="solid" borderColor="gray"
creationComplete="init();" backgroundColor="white" dropShadowEnabled="true">
<mx:filters>
<mx:DropShadowFilter
quality="1"
color="gray"
alpha="0.8"
distance="0"
blurX="4"
blurY="4"
strength="6"
/>
</mx:filters>
</mx:Canvas>
In flex 4 sto usando quanto segue. Volevo solo postare questo perché la proprietà dei filtri dovrebbe apparire come sotto nell'immagine. (sì, lo so che sto usando un filtro spark su un oggetto mx)
<fx:Declarations>
<s:GlowFilter
id="glowBlack"
alpha=".6"
color="0x000000"
inner="false"
blurX="10"
blurY="10"
quality = "2"
/>
<mx:Image id="rssIcon"
height="70"
filters="{[glowBlack]}"
source="assets/rss/icon_rss.png"
styleName="rssIconStyle"
width="70"
scaleContent="true"
click="openRssSite(event)"
"/>
Se vuoi definirlo al di fuori dell'area di disegno, puoi farlo:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="780" height="100%">
<mx:Canvas filters="[dropShadow]" width="200" height="200" backgroundColor="white"/>
<mx:DropShadowFilter id="dropShadow" distance="0"/>
</mx:Application>
Potresti riuscire a farlo con degrafa e skinning. I loro documenti sono limitati ma puoi guardare uno dei video tutorial su come creare skin. Oppure guarda il loro codice di esempio. Basta assegnare una skin programmatica degrafa al bordo della tela e puoi aggiungere ogni sorta di sfumature funky, percorsi, forme, qualunque cosa.
A seconda delle tue esigenze potresti riuscire a cavartela con:
<mx:Canvas ... dropShadowEnabled="true" shadowDirection="right">
Ci sono avvertenze .. delineate qui