Solved

Shape with multiple lineStyle assigned

Posted on 2013-05-25
6
256 Views
Last Modified: 2013-08-11
Hello

What would be the best way to assign two diffrent color borders to an shape?
var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(2, 0xffffff);
and then also:
rectangle.graphics.lineStyle(1, 0xcccccc);
0
Comment
Question by:JoachimPetersen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 39197266
You can use "filters" easiest way I am using drop filter

var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.lineTo(100, 100);
addChild(rectangle);

var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 1;
shadow.angle = 1;
shadow.color = 0x0000ff;
shadow.alpha = 1;
shadow.blurX = 1;
shadow.blurY = 1;
rectangle.filters = [shadow];
0
 

Author Comment

by:JoachimPetersen
ID: 39197508
How can you make the dropshadowfilter act as a border, and not as an shadow effect?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 39198026
Unfortunately I cannot find the code how adobe implemented flash.filters classes

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/package-detail.html

In my application I am using DropShadowFilter

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DropShadowFilter.html

another way you can draw two rectangles

import flash.filters.ColorMatrixFilter;

var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.drawRect(10, 10, 150, 150);

var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 1;
shadow.color = 0x0000ff;
shadow.blurX = 0;
shadow.blurY = 0;
rectangle.filters = [shadow];

//DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0,
                        //blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1,
                        //inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false)

addChild(rectangle);
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 29

Expert Comment

by:dgofman
ID: 39198038
Actually using BevelFilter you can apply 3 colors (I am using green for shadow)


var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.drawRect(10, 10, 150, 150);

//BevelFilter(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0x000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false)

rectangle.filters = [ new BevelFilter(2,
                                   45,
                                   0x00ff00,
                                   1,
                                   0x0000ff,
                                   1,
                                   1,
                                   1,
                                   1,
                                   BitmapFilterQuality.HIGH,
                                   BitmapFilterType.OUTER,
                                   false)];

addChild(rectangle);
0
 

Author Comment

by:JoachimPetersen
ID: 39198686
I think I have to go with the two shape solotion, how do you combine shapes so that first you draw the 'border shape', then the other shape and 'lay' it over the first shape?
0
 
LVL 29

Accepted Solution

by:
dgofman earned 400 total points
ID: 39199734
that easy can be archive such this

function drawRect(x:int, y:int, width:int, height:int, color:Number, offset:int) {
      var rectangle:Shape = new Shape();
      rectangle.graphics.lineStyle(1, color);
      rectangle.graphics.drawRect(x - offset, y - offset, width + offset * 2, height + offset * 2);
      addChild(rectangle);
}

drawRect(10, 10, 150, 150, 0xff0000, 0);   //shape
drawRect(10, 10, 150, 150, 0x00ff00, -1);  //inner shape
drawRect(10, 10, 150, 150, 0x0000ff, 1);   //outer shape
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Action Script commands 5 252
private function works only without TabNavigator? 3 340
Web browser crash when play videos 24 458
Removing Flash from Website 6 78
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question