Гладкий градиент?

[wonderwhy]

Я работаю над полноэкранным swf. Там я использую GradientFill. И в полноэкранном режиме видно что градиент не гладкий и невооруженным глазом видно штрихи. Вот код:

import flash.geom.Matrix;
DX = 0;
DY = 0;
minPad = 50;
width = 1024;
height = 768;
_root.createEmptyMovieClip("Ramka", 0);
var Ramka:MovieClip = _root.Ramka;
Ramka._x = DX;
Ramka._y = DY;
Ramka.clear();
Ramka.lineStyle(0, 0, 0);
matrix = new Matrix();
col1=0x01014B;
col2=0x5F5FFE;
matrix.createGradientBox(width, height,Math.PI/4, 0, 0);
Ramka.beginGradientFill("linear", [col1, col2], [100, 100], [0, 255], matrix);
Ramka.moveTo(minPad, 0);
Ramka.lineTo(width, 0);
Ramka.lineTo(width, height-minPad);
Ramka.curveTo(width, height, width-minPad, height);
Ramka.lineTo(0, height);
Ramka.lineTo(0, minPad);
Ramka.curveTo(0, 0, minPad, 0);
Ramka.endFill();

Возможно я что то не так делаю?

[INK•]

а добавь переходных тонов в массив цветов.
думаю будет глаже.

[wonderwhy]

Хмм. Интересная идея. Вроде бы если цвет одного тона то он имеет 256 градаций. Получается что если градиент с 2 цветами одного тона то в лучшем случае получиться штриховка по 4 пикселя что не куда не годиться. Вообще у меня появилась одна идея. Но она требует переписывания градиента в ручную что ни есть хорошо :) К то муже у меня есть подозрение что он будет тормознутым и будет видна зернистость.

[iNils]

Я не знаю как у вас, а у меня градиент отображается равномерно.

[wonderwhy]

Я не знаю как у вас, а у меня градиент отображается равномерно.
Ты использовал тот код который я кинул? Если да то какой у тебя монитор, разрешение(в особенности цветовой режим 32Bit?), видеокрта?

[_sestra_]

И у меня всё равномерно:
- GeForse 5200
- 1152x864
- 32 бита
- viewSonic G90f

[iNils]

Ты использовал тот код который я кинул? Если да то какой у тебя монитор, разрешение(в особенности цветовой режим 32Bit?), видеокрта?
Тот самый код.
Монитор: MAG Innovision 810FD
Разрешение: 1600 х 1200
Глубина цвета: 32 bit
Видео: ATI Radeon IGP 345M (это видео ноутбока с выходом на внешний монитор.)

[etc]

На ноуте (1680x1050@32) видно переходы…
На внешнем мониторе не смотрел — лень.

[wonderwhy]

И у меня всё равномерно:
- GeForse 5200
- 1152x864
- 32 бита
- viewSonic G90f

Возможно у тебя включены какие-то опции видео карты вроде Anisotropic filtering или antialiasing?


Тот самый код.
Монитор: MAG Innovision 810FD
Разрешение: 1600 х 1200
Глубина цвета: 32 bit
Видео: ATI Radeon IGP 345M (это видео ноутбока с выходом на внешний монитор.)
Хмм. Довольно большое разрешение. Ты смотришь в полный экран или нет? В том смысле что квадрат занимает весь экран или нет?
Возможно у тебя включены какие-то опции видео карты вроде Anisotropic filtering или antialiasing?

[iNils]

Посмотрел на матрице. Так это проявляется, так как динамический диапазон уже. На ЭЛТ это еле заметно, и то есть вглядываться. Но и фотошоп тоже дает неравномерность, правда другую.

[wonderwhy]

Посмотрел на матрице. Так это проявляется, так как динамический диапазон уже. На ЭЛТ это еле заметно, и то есть вглядываться. Но и фотошоп тоже дает неравномерность, правда другую.
Да я проверял в Photoshop. Там это видно но довольно редко и не так сильно. Я вот обнаружил 2 способа как с этим бороться если заливка пиксельная. Один это использование полутонов между 2 цветами. Тоесть не 2 а 4 цвета. Причём 2 центральных немного отклоняются от исходных. Немного помогает но может привести к радужности. Его можно и во Flash применить что и попробую сделать попозже. Второй вариант это смешивание. Тоесть считать 4 пикселя за один и в случае нехватки цветов для полного отображения смешивать в нём цвета. Например по горизонтали меньший а по вертикали больший. Способ хорошо но даёт зернистость. Тоесть линий нет но есть шершавость.
Кстати проводи еще несколько тестирований. Жёстко пробил в опциях видеокарты максимальный Antialiasing и Anisotropic filtering. Так вот эти края стали ощутимо сглаженей но всёравно заметно.
И еще кое что интересное. В результате тестирований у меня получились очень сильные тормоза и я увидел как Flash рисует градиенты. Очень забавно. Сначала появляется цельная область закрашенная средним цветом между крайними. Далее она разбивается на 2. Там этот процесс повторяется для новых 2 областей. Очень забавно выглядело. Этакий такой переход от целого цвета к ребристому переходящему в градиент. На сколько я понимаю по этому в Flash эти границы и видны лучше чем в Photoshop.
Вообще то меня бы не сильно беспокоило то что он такой. Можно подобрать такие цвета что это не будет заметно. Но дело в том что это делается динамически. Есть один цвет. Из него получаю 2 цвета. Один потемнее другой посветлее. Это и есть градиент. Причем далее это дело анимируется так что эта рамка плавно всплывает. В результате во время анимации эти рёбра видны намного лучше :( Позже я сделаю пример того о чем говорю что бы народ потестил у кого как это выглядеть.

[alkonaft]

Старый боян...
Эти линии видны даже на мониторов от маков, сам проверял.

Если бесит то юзайте ЭЛТ, которых в москве жутко мало.

[akerka]

Люди реально правы. Это фишка LCD - неравномерные полутона. На самом деле градиенты рисуются правильно, и вопрос лишь в мониторе на котором просматривается проект.

[etc]

akerka, если бы это были особенности LCD, то, если я сделаю скриншот и увеличу полученную картинку — я бы не увидел в тех же местах границ переходов. А я их вижу в тех же местах, что и при обычном просмотре — отсюда вывод, что монитор тут непричем.

[wonderwhy]

Люди реально правы. Это фишка LCD - неравномерные полутона. На самом деле градиенты рисуются правильно, и вопрос лишь в мониторе на котором просматривается проект.
Это не в мониторе дело. Дело в 32 битно цвете. Его не хватает на то что бы сделать градиент одного цвета гладким. 32 бита это по 8 бит на RGB + alpha канал. Получается есть только 8 бит скажем на синий. 8 бит это 255 цветов. Ширена flash в моём случае 1024. Получается в лучшем случае ширена полоски одного цвета 4 пикселя. Но это ещё мелочи по сравнению с моей проблемой. Я в следящем посте выложу кое что сделал не давно всё не как не мог добраться выложить тут. Дуло в том что у меня там слайды идут. И когда один слайд исчезает а другой появляется эти полоски рябить начинают а это уж совсем не выносимо :(

[wonderwhy]

import flash.geom.Matrix;
_root.NewTurn = function() {
_root.d = 1;
_root.createEmptyMovieClip("Fon", 0);
_root.createEmptyMovieClip("fore", 1);
col1 = random(255);
col1 += random(255) << 8;
col1 += random(255) << 16;
col2 = random(255);
col2 += random(255) << 8;
col2 += random(255) << 16;
Pad = 80;
width = 800;
height = 600;
var Ramka:MovieClip = _root.Fon;
Ramka._x = 0;
Ramka._y = 0;
Ramka.clear();
Ramka.lineStyle(0, 0, 0);
matrix = new Matrix();
matrix.createGradientBox(width, height, Math.PI/4, 0, 0);
Ramka.beginGradientFill("linear", [col1, col2], [100, 100], [0, 255], matrix);
Ramka.moveTo(Pad, 0);
Ramka.lineTo(width, 0);
Ramka.lineTo(width, height-Pad);
Ramka.curveTo(width, height, width-Pad, height);
Ramka.lineTo(0, height);
Ramka.lineTo(0, Pad);
Ramka.curveTo(0, 0, Pad, 0);
Ramka.endFill();
var Ramka:MovieClip = _root.fore;
Ramka._alpha = 0;
Ramka._x = 50;
Ramka._y = 50;
width = 700;
height = 500;
col1 = random(255);
col1 += random(255) << 8;
col1 += random(255) << 16;
col2 = random(255);
col2 += random(255) << 8;
col2 += random(255) << 16;
Ramka.clear();
Ramka.lineStyle(0, 0, 0);
matrix = new Matrix();
matrix.createGradientBox(width, height, Math.PI/4, 0, 0);
Ramka.beginGradientFill("linear", [col1, col2], [100, 100], [0, 255], matrix);
Ramka.moveTo(Pad, 0);
Ramka.lineTo(width, 0);
Ramka.lineTo(width, height-Pad);
Ramka.curveTo(width, height, width-Pad, height);
Ramka.lineTo(0, height);
Ramka.lineTo(0, Pad);
Ramka.curveTo(0, 0, Pad, 0);
Ramka.endFill();
};
_root.onEnterFrame = function() {
_root.fore._alpha += _root.d;
if ((_root.d>0) and (_root.fore._alpha>=100)) {
_root.d = -1;
}
if ((_root.d<0) and (_root.fore._alpha<=0)) {
_root.NewTurn();
}
};
_root.NewTurn();
Ок теперь код просто в первый frame нового документа скопируйте :)
Пожалуйста ваши мнения. Как не рябит? :) Если вдруг у кого то не рябит то заодно напишите характеристики машины. Процессор, виде карта, монитор. Включены-ли какие то спец опции вроде antialiasing.
Всем спасибо за мнения и тп.

[iNils]

wonderwhy, http://www.flasher.ru/forum/showthread.php?t=79864 читаем 6-ой пункт и переписываем код.

[wonderwhy]

wonderwhy, http://www.flasher.ru/forum/showthread.php?t=79864 читаем 6-ой пункт и переписываем код.
Ок. Sorry. У меня вопрос есть. Есть какой то топик на эту тему здесь? Я поискал не нашел :( Я просто на эту тему хотел бы пару вопросов задать. Давно уже любопытно но пока так и не нашел ответов.

[iNils]

import flash.geom.Matrix;
function drawBox (mc:MovieClip, w:Number, h:Number, pad:Number, col1:Number, col2:Number):Void {
mc.clear ();
var matrix:Matrix = new Matrix ();
matrix.createGradientBox (w, h, Math.PI / 4, 0, 0);
mc.beginGradientFill ("linear", [col1, col2], [100, 100], [0, 255], matrix);
mc.moveTo (pad, 0);
mc.lineTo (w, 0);
mc.lineTo (w, h - pad);
mc.curveTo (w, h, w - pad, h);
mc.lineTo (0, h);
mc.lineTo (0, pad);
mc.curveTo (0, 0, pad, 0);
mc.endFill ();
}
this.createEmptyMovieClip ("mc0", 0);
this.createEmptyMovieClip ("mc1", 1);
mc0._x = mc0._y = 0;
mc1._x = mc1._y = 50;
mc1._alpha = 0;
this.newTurn = function () {
this.d = 1;
drawBox (mc0, 800, 600, 80, random (0xFFFFFF), random (0xFFFFFF));
drawBox (mc1, 700, 500, 80, random (0xFFFFFF), random (0xFFFFFF));
};
this.onEnterFrame = function () {
this.mc1._alpha += this.d;
if (this.mc1._alpha >= 100) {
this.d = -1;
} else if (this.mc1._alpha <= 0) {
this.newTurn ();
}
};
this.newTurn ();Слегка укоротил код, что бы понятней было (кстати, с большой буквы пишут только названия классов, названия функций и переменных начинаются с маленькой)

Закомментарьте первый вызов drawBox внутри newTurn (и Math.PI / 4 смените пока на ноль, чтобы голову на 45 градусов не наклонять :D). Теперь смотрите как меняется градиент на однородном фоне. Меняя альфу, вы сужаете цветовой диапазон, но размеры области заливки при этом не меняются. И чем меньше альфа, тем большая ширина в пикселях приходится на один цвет, но ширина для каждого цвета одинаковая.

Теперь убираем коммент и запускаем еще раз. Теперь у нас градинет начинает суммироваться с другим (из-за альфы), но ширина для каждого цвета разная. И меняя альфу ширина опять меняется, но не равномерно.

Я сделал семпл. Это увеличенная область одного куска в середины градиента, цвета случаные. Верхная часть (A), это альфа с значением 50, нижняя (B) - это альфа с значением 51 (на самом деле 50.78125).
15915
Как видно, в одной и той же общей области, при разных значениях альфа, ширина подобластей с одним цветом совершенно разная.

[wonderwhy]

:) Хек совсем малёк сократил. В принципе поправить это средствами Flash нельзя но тут некоторые утверждали что у них не видно полосок или почти не видно. Мне вот любопытно есть ли сейчас кто-то у кого не видно полосок даже с переходами. Просто если есть какие то видео карты или мониторы которые это могут сгладить то я бы хотел знать какие.

[etc]

хотел знать какие.
Ну, допустим, будешь знать. И что? Будешь писать требования к сайту «видеокарта такая-то»?

[wonderwhy]

Ну, допустим, будешь знать. И что? Будешь писать требования к сайту «видеокарта такая-то»?
Нет к сайту конечно не буду. Проект сейчас не для сайтов разрабатываться. И да требования на технику могут высказываться. По этому и интересуюсь.