Bonjour,
je cherche depuis pas mal de temps un composant style Hbox ou Vbox, permettant un dégardé en fond. A l'heure actuelle j'utilise une image de fond dégradé, mais je ne suis pas satisfait du résultat.
Merci.
Version complète : Composant permettant un dégradé
Salut,
Qu'est-ce-qui t'empeche d'étendre la classe HBox et d'y ajouter tes fonctionnalités
? La classe n'est pas finale.
Bonne chance !
Qu'est-ce-qui t'empeche d'étendre la classe HBox et d'y ajouter tes fonctionnalités
? La classe n'est pas finale.Bonne chance !
Merci de ta réponse neokwondo, mais comment je pourrai faire pour ajouter ce genre de fonctionnalité?
Salut,
il faudrait regarder si il n'est pas possible d'utiliser la prorpiété css "backgroundGradientColors", comme cela est possible pour Application.
il faudrait regarder si il n'est pas possible d'utiliser la prorpiété css "backgroundGradientColors", comme cela est possible pour Application.
Voici une solution a ton probleme, il faut créer un nouveau composaant pour lequel tu ajoutes un nouveau style :
et son utilisation est simple :
J'ai basé mon code sur une Box, il te suffit de modifier la propriété direction pour choisir HORIZINTAL ou VERTICAL.
je donnerai plus d'explication dans un tutorial sur la création de style de composant ...
désolé mais il me manque du temps ...
CODE
package
{
import mx.containers.Box;
import mx.styles.StyleManager;
import mx.styles.CSSStyleDeclaration;
import flash.display.GradientType;
[Style(name="backgroundGradientColors",type="Array",format="Color",inherit="no")]
public class SuperBox extends Box
{
private static var inited:Boolean = initStyle();
private var bBackgroundGradientColorsChanged:Boolean = true;
private var colors:Array = [];
public function SuperBox() {
super();
}
protected override function measure():void {
super.measure();
measuredWidth = measuredMinWidth = 100;
measuredHeight = measuredMinHeight = 100;
}
override public function styleChanged(styleProp:String):void {
super.styleChanged(styleProp);
if (styleProp == "backgroundGradientColors")
{
bBackgroundGradientColorsChanged=true;
invalidateDisplayList();
return;
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
trace("updateDisplayList");
if (bBackgroundGradientColorsChanged) {
colors = getStyle("backgroundGradientColors");
graphics.beginGradientFill(GradientType.LINEAR,
colors, [1.0,1.0], [0x00,0xFF]);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
private static function initStyle():Boolean {
trace("init");
if(!StyleManager.getStyleDeclaration("SuperBox")) {
var monStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
monStyle.setStyle("backgroundGradientColors",[0x8080ff, 0xc0c0c0]);
StyleManager.setStyleDeclaration("SuperBox",monStyle,true);
}
return true;
}
}
}
{
import mx.containers.Box;
import mx.styles.StyleManager;
import mx.styles.CSSStyleDeclaration;
import flash.display.GradientType;
[Style(name="backgroundGradientColors",type="Array",format="Color",inherit="no")]
public class SuperBox extends Box
{
private static var inited:Boolean = initStyle();
private var bBackgroundGradientColorsChanged:Boolean = true;
private var colors:Array = [];
public function SuperBox() {
super();
}
protected override function measure():void {
super.measure();
measuredWidth = measuredMinWidth = 100;
measuredHeight = measuredMinHeight = 100;
}
override public function styleChanged(styleProp:String):void {
super.styleChanged(styleProp);
if (styleProp == "backgroundGradientColors")
{
bBackgroundGradientColorsChanged=true;
invalidateDisplayList();
return;
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
trace("updateDisplayList");
if (bBackgroundGradientColorsChanged) {
colors = getStyle("backgroundGradientColors");
graphics.beginGradientFill(GradientType.LINEAR,
colors, [1.0,1.0], [0x00,0xFF]);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
private static function initStyle():Boolean {
trace("init");
if(!StyleManager.getStyleDeclaration("SuperBox")) {
var monStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
monStyle.setStyle("backgroundGradientColors",[0x8080ff, 0xc0c0c0]);
StyleManager.setStyleDeclaration("SuperBox",monStyle,true);
}
return true;
}
}
}
et son utilisation est simple :
CODE
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:controls="*">
<controls:SuperBox />
<controls:SuperBox backgroundGradientColors="[#FF0000,#0000FF]" />
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:controls="*">
<controls:SuperBox />
<controls:SuperBox backgroundGradientColors="[#FF0000,#0000FF]" />
</mx:Application>
J'ai basé mon code sur une Box, il te suffit de modifier la propriété direction pour choisir HORIZINTAL ou VERTICAL.
je donnerai plus d'explication dans un tutorial sur la création de style de composant ...
désolé mais il me manque du temps ...
Ok, merci bien, ça marche.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.