Apply gradient to flex applicationBar

hello guys i 'm trying to port an application from flex 3.5 sdk to flex 4.5 however im having problems with styles. for example on applicationcontrolbar in my css i used to be able to do this.
ApplicationControlBar.appBarDayCell{
fillAlphas: 1.0, 1.0;
fillColors: #7FC4FF, #52AACA;
cornerRadius: 0;
paddingTop: 2;
now this does not rendered correctly. can i still do this? i also see there is a barcontent spark control but i cant seem to be able to recreated with actionscript. sorry for the noob question i'm just so frustuated. can anyone point me to a doc that shows differences or how to skin. different components.
i keep googling but nothing is hitting home for me.
Thanks guys.

i dont know if you are still following this thread kevin but here is the outcome. the top bar is the control bar content wich does seem to change when i add the skin however the bottom bar which is the ApplicationControlBar is not getting any styles whatsoever. any other ideas?
mys simple application to test this.
<?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:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      skinClass="applicationBarSkin">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
   public function createaBar():void{
]]>
</fx:Script>
<mx:ApplicationControlBar color="blue" width="100%">
<s:Label text="test" backgroundAlpha="1"/>
</mx:ApplicationControlBar>
<s:controlBarContent>
<s:Label text="test" backgroundAlpha="1" />
</s:controlBarContent>
</s:Application>

Similar Messages

Applying Gradient through css in spark application of gumbo

I want to apply gradient colors just like we did in flex 3 using css.
How to achieve the same for s:Application ?

That changed in the new architecture:
you need to drop something like this in your main app or create a new skin for the main app and drop it in there:
    
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry ratio="0" color="#ff00ff"/>
                <s:GradientEntry ratio="1" color="#00ff00"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
Need to play with the gradient but ration and color values but you get the picture...
The old way does not apply anymore as far as I can tell ...
You can define your own backgroundGradientColor read it in the custom skin updateDisplayList and do the drawing yourself, but I am not sure it is worth the effort.
C

How can i apply gradient...

I have a rectangular shape movie Clip (Size :130px X40 px). I
want to apply linear gradient on it using action script. Can
anybody help me how can I apply gradient on it.
Note: This movie clip is made manually. Not by using
createEmptyMovieClip method.

i already checked this -
MAKE A OVAL ON YOUR STAGE AND GIVE THIS INSTANCE NAME 'ovl'
(withought single quote) and use the code under
here i am creating two movie clips on stage --
1st is 'ovl' and 2nd one is 'mc'
But to apply gradient on ovl i have to use setMask method
like this _root.mc.setMask(_root.ovl)
i do not want to use SetMask... I want to apply gradient
directly on 'ovl'
How can i do ??????????????
// create emtpy movieclip
mc = createEmptyMovieClip("mc",1);
// set the constants for the gradient fill
// the colors
col = [0x000066,0x0033FF];
// the alphas
alp = [100,30];
// the ratios
rat = [100,255];
//this.onMouseMove = function () {
// we will make a radial gradient
// and make it move with the mouse
// first we clear the previous gradient fill
mc.clear();
// get the mouse-position
// the x-coordinate
x = _xmouse-200;
// the y-coordinate
y = _ymouse-200;
// set the matrix for the transformation
matrix = { matrixType:"box",x:x,y:y,w:400,h:400,r:0 }
// now make the new gradient fill
mc.beginGradientFill("linear",col,alp,rat,matrix);
// now make the shape to fill
mc.lineTo(400,0);
mc.lineTo(400,400);
mc.lineTo(0,400);
// end the fill
mc.endFill();
_root.mc.setMask(_root.ovl)
Text
Text

Apply Gradient across stroke not working now?

Updated Illustrator to CC and now my apply gradient to stroke is acting funny (also does it with apply along stroke). First i can't get it to show up unless I find a number it likes (start out with 1 pt, don't see a stoke so increase size 1 pt at a time up to 11 to see it) now the corners have gotten strange, They seem to be missing small patches. Any idea what's causing this? You can see in the image I am not doing anything fancy, it's type and then just to make sure it wasn't a font problem I tried just a rectangle. It seems to be worst with corner set to round joint.
TIA,
LVChris

Sorry Larry that didn't fix it. Sent the files to Adobe for review. Anyone elese reproduce this problem?
It's easy to test;
1. create a rectangle
2. add a fill and stroke
3. change the stroke to a gradient and make it big enough to see
4. change the stroke cap to round and cap corner to round join
5. change the gradient to apply gradient along stroke or across stroke
I do this to nearly everything and have been for years...very strange problem
I also just made the same object in CS6 and it worked flawlessly.

How to apply gradient effect to JTable

Hi
It is easier to apply gradient effect to JTable by overriding paintComponent() and giving gradient effect using the following code
Graphics2D g2 = gradientImage.createGraphics();
GradientPaint painter = new GradientPaint(0, 0, gradientEnd,
0, height, gradientStart);
g2.setPaint(painter);
Rectangle2D rect = new Rectangle2D.Double(0, 0, width, height);
g2.fill(rect);
but my problem is , after applying gradient effect the cell contents are not visible.
what i need to do to make the cells visible..... please any one help me to sort out this.....
Thanks in advance.......

Well the basic code should be:
// do gradient painting
super.paintComponent(...);But you will also need to customize the renderers to make them non-opaque.
And you may also need to make the table non-opaque.
If you need further help then you need to create a [Short, Self Contained, Compilable and Executable, Example Program (SSCCE)|http://homepage1.nifty.com/algafield/sscce.html], that demonstrates the incorrect behaviour.
Don't forget to use the Code Formatting Tags so the posted code retains its original formatting. That is done by selecting the code and then clicking on the "Code" button above the question input area.

Apply gradient to text, cs5 like Classroom in a Book

I need to create a title in a document, a single word heading at the top. I'm using Win7 32 bit and AI cs5 and the book, Classroom in a Book.
I'm on page 310 where "Mike's Coffee" is the tutorial text. I've converted my text to path outlines, then Grouped the characters. From there, however, the script (or I) seem to get lost. Step 4 says "This applies a white to black gradient". Yes, it does.
However, I want to start with bright red, receding to nearly transparent and I can't follow the instruction from there -- getting colors into my panel. No, I've not loaded that lesson and perhaps that's why my panel and swatch doesn't match the book's.
Am I going to have to load this lesson, start from scratch on it to simply apply a gradient to a single word?
GM

You're right. Let me start over.
I need apply a gradient to text using Win7 32 bit and AI cs5. I want to start with a bright red at the top, receding to nearly transparent at the bottom.
I've converted my text to path outlines, then Grouped the characters. From there, selected the group, clicked on the Gradient box on the right -- then I'm lost.
GM

Need Help Applying Gradient to JPEG

I'm trying to modify my companies logo for our new catalog by applying a gradient to it. I've tried to do this in both Illustrator CS4 and Photoshop CS4 and for some reason I can't get the gradient to apply only to the logo. Instead, it applies the gradient to the background. The logo is saved as a JPEG, so I'm not sure if that has anything to do with it. Any advice would be greatly appreciated.

I agree to a point, Bart, but John is absolutely right when he cautions about logos being printed with all sorts of processes. Some companies have an outline form of their logo for black and white (copier and printer) reproduction, but most make do with only one logo that can be reproduced faithfully using virtually any method (Coke).
As a rule, gradients are avoided, but not always. The UPS color logo is a good example of a gradient, or blend, being used successfully. However, on the UPS forms, they use an outline version.
I have no idea what the OP is planning to do with the company's logo. Adding a gradient isn't necessarily always wrong, but it has to be carefully considered. I also wonder if this alteration of the logo is a permanent change, since it's normally considered bad form to tweak a logo if you don't intend to carry the new design forward on all other printed materials.

Apply gradients to smaller areas?

What's the easiest way to apply a gradient to a specific area? For example, in a landscape where you a want gradient between the clouds and foreground and its only 20% of the total image that you want to affect?

One way you can is to select the area you want to add the gradient into. Add a new empty layer, Fille the selection with the gradient. Blend in with all the blending options available for layers and use other Photoshop tools on the gradient layer pixels. If you don't like toss it and try again.

Applying gradient to a curved path...

Is there a quick and dirty way to apply a gradient to a curved path, such as a logarithmic spiral?
Thank you for the help!

I realize it has been quite a while since this was originally posted...but I came across it and have had to do this exact thing before: applying a gradient to a spiral.
This is what I came up with. Just thought someone might find it handy.
Depending on the Steps and Distance, the final results can look quite smooth.
The Blend colors can always be edited by selecting and changing
the color of the original objects within the blended object.

How to apply gradients in Dw CS4?

Hello;
I have been using gradients in Flash CS4.It's not that difficult,using the radial and lineair gradients.
However in Dreamweaver I can't find such a feature.For my knowledge it is only possible to use straight colors.
Does anyone know how to use gradients in Dreamweaver??
Many thanks for the help!

Dreamweaver is not an image editor.
It uses HTML and CSS to insert colours in pages. HTML and CSS only do solid colors.
If you need gradients, you must create them in an image editor such as Photoshop or Fireworks then insert the image into your webpage in DW using CSS.

Can't apply gradients

I am following the Apple Pro Training Series book for Motion and in the second Chapter it asks me to add an Icy Blue gradient onto the Circle City particle(already in the canvas) to change its color. As soon as I drop it on the canvas I see it bouncing back to the library pane from where it came. I then tried it on different templates and it seems to work fine on some (i.e. the generators) but not on others. I am using my brand new Mac Pro with the following specs:
Model Name: Mac Pro
Model Identifier: MacPro1,1
Processor Name: Dual-Core Intel Xeon
Processor Speed: 2.66 GHz
Number Of Processors: 2
Total Number Of Cores: 4
L2 Cache (per processor): 4 MB
Memory: 5 GB
Bus Speed: 1.33 GHz
Boot ROM Version: MP11.005C.B04
SMC Version: 1.7f8
Serial Number: G87140EBUQ2
the version of Motion I use is the 3.0.1
I'll greatly appreciate if any of you can help me get past this.

No that didn't work either. I guess what the book is trying to have me do is a very simple thing: they want to show the readers firstly that they can use particle emitters that are generator-like (so they first have you choose the particle emitters icon in the library, then choose the abstract folder that appears in the right hand pane and lastly, drag the cirlce city {could be anyone i think} icon that appears in the lower pane among a bunch of other emitters, to the canvas). Secondly they wanna show you that you don't have to stick to that original color and so they ask you to add a gradient (so they ask you to choose the gradients icon in the right hand pane {where you previously chose the particle emitters icon}, and, since there is only one folder that appears in the right hand pane that says All, you immediately see all the icons of all the gradients in the lower pane, so they ask you to drag icy blue {again it could be any one of them i guess} and drop it in the canvas to change its color). I think this is a very basic and simple thing in MOTION but for some reason I keep doing it with no result....the gradient instead of being added, is bounced back to where it came from (the bottom pane). I checked the layers tab and all locks are open. The time line is running 120 frames at 24 fps. I saw the object is Geo05 and if i turn it on the only thing it does is show a cirlce in the center of the canvas but if i try to add the gradient to it it will still repel it.

Applying gradient to a shape's edge

Hello. I have a curved shape which is a light color. I want to create a dark outline and have it fade into the light color as a gradient would, uniformly following the curved shape. Any ideas? Thanks
Photoshop elements 8

Try this
Use the custom shape tool to "draw" your shape
Place a blank layer below this and name it "stroke"
Press CTRL+click the shape layer thumbnail to make it active
Still on the blank layer, go to Edit>stroke, position it center, use a wide stroke - try 60 px
Go to Layer menu>New fill layer>gradient
Make the shape layer active, and clip the layers - CTRL+G
Back to the gradient fill layer, select your gradient to suit
Here is a print screen so that you can visualize the layer structure. It's all done in PSEv.8.

Applying gradient to an airbrush line makes line go jagged!

Has anyone else been experiencing this problem?
I called ProVideo Tech Support and they noticed the same problem but don't have an answer yet.
In Motion 3, draw a line with the B-spline tool. Then in the Inspector window, change the brush type from Solid to Airbrush. Finally select Gradient for the Brush Profile and this is what happens: the line goes all jagged and you see no gradient in the line.
I have photos to prove it but am not sure where to post it on this forum. I can email it to whoever wishes to see the result.
Thanks in advance,
- Nicholas

I don't think that's a problem - the brush profile determines how soft the brush looks - the default profile changes opacity from white to black (100% to 0%) - NOT color. If you use change it to one of the preset gradients, the opacity of those gradients is all 100% - thus no soft edge to the brush. Try adding an opacity tag and dropping it to 0% and you'll see what I mean.
If you want to change the COLOR of the brush based on a gradient, you do so either with the Brush Color color swatch, or in the Stroke section, change the Stroke Color Mode.

FLEX panel header gradient

Does anyone know how to apply a header gradient to a Panel container?
The only info I have found about this is here:
http://stackoverflow.com/questions/1215433
^ And I do not see a solution? I know some of the themes apply gradients to panel headers, but is there a way to do this in CSS?

I am looking at the GraphiteGraphical PanelSkin. I no longer use this theme in my application, BUT, it did produce gradients on the panel headers (as desired).
Here is the PanelSkin definition:
<?xml version="1.0" encoding="utf-8"?>


<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <fx:Metadata>
        <![CDATA[
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
         * @private
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            if (getStyle("borderVisible") == true)
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            else
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            dropShadow.visible = getStyle("dropShadowVisible");
            var cr:Number = getStyle("cornerRadius");
            if (cornerRadius != cr)
                cornerRadius = cr;
                var withControls:Boolean =
                    (currentState == "disabledWithControlBar" ||
                     currentState == "normalWithControlBar");
                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;
                setPartCornerRadii(topMaskRect, withControls);
                setPartCornerRadii(border, withControls);
                setPartCornerRadii(background, withControls);
            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");
            super.updateDisplayList(unscaledWidth, unscaledHeight);
         * @private
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        private var cornerRadius:Number;
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
    
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
    
    <s:Group left="0" right="0" top="0" bottom="0">
        
        <s:Group left="3" top="3" right="3" bottom="3" id="topGroupMask" >
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        
        <s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                 </s:fill>
            </s:Rect>
        </s:Group>
        
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
        
        
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                
                <s:SolidColor id="backgroundFill" />
            </s:fill>
        </s:Rect>
        
        
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
            <s:Group id="topGroup" mask="{topGroupMask}">
                
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0x696a69" />
                            <s:GradientEntry color="0x282828" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                
                
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
            
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
                    
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
                    
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:SolidColorStroke color="0x282828" />
                        </s:stroke>
                    </s:Rect>
                    
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:SolidColor color="0x696a69" />
                        </s:fill>
                    </s:Rect>
                </s:Group>
                
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:Skin>
^ Where is the gradient being applied to the Panel? I dont really see it?

Applying multiple gradients(mixed type) to mumltiple objects?

Hi
I have bunch of objects I would like to apply gradients. However the way I need is that I would like the gradients to be uniformly spread over the objects.
I select my objects and turn into compound objects. So far so good then I apply the first gradient it works fine. I then release the objects to see if everything works fine and it turns out that everything is working well and the gradient is split between objects. However when I get back to compound state and apply-add my second gradient(radial) layer on top of the first one and release the compound objects , my gradiends reset to centers of the objects which makes it not what I need. I want the gradients to split-shared uniformly when I release my objects. The problem is that my objects are overlapping objects so I cannot keep them in compound state.
thanks

> I have bunch of objects...I would like the gradients to be uniformly spread over the objects....I select my objects and turn into compound objects.
You don't have to compound the individual paths in order to apply
what looks like a single gradient across them. Leave them as individual paths. Select them all. Swipe across them with the Grad too.
> >However when I get back to compound state and apply-add my second gradient(radial) layer on top of the first one and release the compound objects , my gradiends reset to centers of the objects which makes it not what I need.
Don't do that.
After doing what I described above, Group the individual objects. Then add a Fill to the Group. Make that fill the radial fill.
JET

Apply gradient to flex applicationBar

Similar Messages

Maybe you are looking for