Форум Flasher.ru - Маска и эффекты(фильтры?)

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 1.0/2.0 (http://www.flasher.ru/forum/forumdisplay.php?f=93)

- - Маска и эффекты(фильтры?) (http://www.flasher.ru/forum/showthread.php?t=114646)

Маска и эффекты(фильтры?)

Привет. Мне нужно сделать галерею. Загрузку и прокрутку картинок я уже сделал, теперь нужно навести красоту. Пример того что должно получится я прикрепил. Как видно из рисунка, картинки возле стрелочек вроде как исчезают в белом фоне. Как это можно реализовать? Маска? Альфаканал как-то можно в маску впихнуть? Или каким образом можно сделать такой эффект? Ещё видно что у картинок закругленные края. Это тоже маской делается?
Дальше, мне нужно чтобы картинки были какбы "серые", а при наведении мышки становильсь нормального цвета. Как это лучше сделать? У меня была идея просто ложить сверху полупрозрачную картинку и менять её прозрачность при наведении мышки. Может для этого существуют какие-то фильтры?

Помогите пожалуйста, я не особо силен в этих дизайнерских изысках. Хотелось бы максимально подробное описание. Может есть какие-то статьи?

Цитата:

Сообщение от Division (Сообщение 756355)

Как видно из рисунка, картинки возле стрелочек вроде как исчезают в белом фоне. Как это можно реализовать? Маска? Альфаканал как-то можно в маску впихнуть? Или каким образом можно сделать такой эффект?

Градиентом от белого непрозрачного до белого прозрачного по краям.

Цитата:

Сообщение от Division (Сообщение 756355)

Ещё видно что у картинок закругленные края. Это тоже маской делается?

Это маской.

Цитата:

Сообщение от Division (Сообщение 756355)

Дальше, мне нужно чтобы картинки были какбы "серые", а при наведении мышки становильсь нормального цвета. Как это лучше сделать? У меня была идея просто ложить сверху полупрозрачную картинку и менять её прозрачность при наведении мышки. Может для этого существуют какие-то фильтры?

ColorMatrixFilter

Цитата:

Сообщение от Division (Сообщение 756355)

Помогите пожалуйста, я не особо силен в этих дизайнерских изысках. Хотелось бы максимально подробное описание. Может есть какие-то статьи?

Может и есть. Хотя не знаю, зачем тут статьи, нужно просто брать и делать. Вам для этой задачи нужно знать только как работают градиент, маски и ColorMatrixFilter.

Использовать градиентную маску. И свойство cacheAsBitmap = true у маски и маскируемого объекта.

Картинки станут серыми.

Код:

import flash.filters.BitmapFilter;

import flash.filters.ColorMatrixFilter;



var mc:MovieClip = this.attachMovie("mc", "mc", 1, {_x:Stage.width/2, _y:Stage.height/2});

mc.cacheAsBitmap = true;



var matrix:Array = new Array();

matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);

matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);

matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);

matrix = matrix.concat([0, 0, 0, 1, 0]);



var filter:BitmapFilter = new ColorMatrixFilter(matrix);

mc.filters = new Array(filter);

Всем спасибо (:

ColorMatrixFilter: трансформации цвета

Трансформации цвета клипа, возможные с помощью данного фильтра, аналогичны трансформациям, которые мы раньше (до 8 флэша) задавали с помощью класса Color и метода setTransform().

Трансформация цветов пикселей с помощью матрицы размерностью 4х5 не является изобретением Макромедии — этот метод давно используется в компьютерной графике. Подробное описание механизма можно легко найти в сети, поэтому я опишу процесс только в общих чертах, но чуть подробнее, чем это сделано в хэлпе.

ColorMatrixFilter имеет один-единственный параметр — матрицу трансформации цветов. Выглядит она следующим образом:

R G B A +
R N0 N1 N2 N3 N4
G N5 N6 N7 N8 N9
B N10 N11 N12 N13 N14
A N15 N16 N17 N18 N19

Общая формула расчета цвета с трансформацией такова:
новый_красный = N0*красный + N1*зелёный + N2*синий + N3*альфа +N4

новый_зелёный = N5*красный + N6*зелёный + N7*синий + N8*альфа +N9

новый_синий = N10*красный + N11*зелёный + N12*синий + N13*альфа +N14

новая_альфа = N15*красный + N16*зелёный + N17*синий + N18*альфа +N19

Где "красный", "синий", "зелёный", "альфа" — это исходные значения цветов пикселя перед трансформацией. При применении фильтра к клипу, каждый пиксель изображения подвергается трансформации.

Пятая колонка в матрице (N4, N9, N14, N19) — это сдивиги цветов и альфа канала. Числа в этой колонке просто прибавляются к исходным значениям цвета соответствующих каналов.

В пятой колонке обычно содержатся значения от -255 до 255. В остальных колонках обычно содержатся значения от -1 до 1. В принципе можно задавать значения, выходящие за эти пределы, но это не дает никаких сочетаний результирующего цвета, отличных от тех, которые можно получить при нормальных значениях.

Внимание! Параметр matrix фильтра ColorMatrixFilter НЕ является двумерным массивом. Это одномерный массив, содержащий строки матрицы трансформации по порядку сверху вниз. Именно поэтому в матрице трансформации элементы пронумерованы построчно.

В восьмом флэше кроме класса ColorMatrixFilter для трансформаций цвета существет также класс flash.geom.ColorTransform, применяющийся в сочетании c классом Transform и свойством transform мувипклипов. То есть, можно использовать связку ColorTransform+Transform+MovieClip.transform, возможно это будет удобнее для простых трансформаций цвета. В любом случае, функциональность этой связки для трансформаций цвета не шире, чем функциональность фильтра ColorMatrixFilter.

http://www.noregret.org/tutor/filters2/#2
Да, это мы уже знаем...

Цитата:

Сообщение от Division (Сообщение 756455)

http://www.noregret.org/tutor/filters2/#2
Да, это мы уже знаем...

Чего же более...?:)

Внесу небольшие поправки, может кому-то пригодится

Цитата:

Сообщение от Волгоградец

matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);
matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);
matrix = matrix.concat([0.4, 0.4, 0.4, 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);

Картинки то станут серыми, но видимо это не совсем корректно.
Наткнулся на сайт:
http://www.microsoft.com/Rus/Msdn/Ac.../Data/439.mspx

Оттуда видно что в grayscale цвет расчитывается как
GrayScale = (77 * R + 150 * G + 28 * B)/ 255

То есть матрица должна принять такой вид:

Код:

matrix = matrix.concat([77/255, 150/255, 25/255, 0, 0]);

matrix = matrix.concat([77/255, 150/255, 25/255, 0, 0]);

matrix = matrix.concat([77/255, 150/255, 25/255, 0, 0]);

matrix = matrix.concat([0, 0, 0, 1, 0]);

Зная это можно легко делать анимацию перехода из grayscale в нормальные цвета и наоборот.
Вот код, может кому пригодится:

Код:

        private function MakeGray() {

                var matrix:Array = new Array();

                var r = 77/255;

                var g = 150/255;

                var b = 25/255;



                matrix = matrix.concat([r*zerokoef+1-zerokoef, g*zerokoef, b*zerokoef, 0, 0]);

                matrix = matrix.concat([r*zerokoef, g*zerokoef+1-zerokoef, b*zerokoef, 0, 0]);

                matrix = matrix.concat([r*zerokoef, g*zerokoef, b*zerokoef+1-zerokoef, 0, 0]);

                matrix = matrix.concat([0, 0, 0, 1, 0]);

                

                var filter:BitmapFilter = new ColorMatrixFilter(matrix);

                this.filters = new Array(filter);                

        }

zerokoef изменяется от 0 до 1.
Если 1 - изображение grayscale. Чем ближе к 0 - тем оно "цветнее".

С ума сойти.

Код:

import flash.filters.ColorMatrixFilter;

var myColorMatrix_filter:ColorMatrixFilter = new ColorMatrixFilter([0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0]);

my_mc.filters = [myColorMatrix_filter];