24 Апрель 2008

отражения

posted in drawing, lesson, исходники |

наверное один из самых распространённых элементов стиля web 2.0 это отражения.
его легко можно сделать с помощью альфа канала в градиентной заливке.
заливка должна быть того же цвета что и общий фон.

но как поступить в случае, если фон неоднородный?

конечно можно сохранить нужный элемент в png и сделать отражение в фотошопе, но есть ещё один простой и интересный способ.

  • нужно дублировать символ и создать в нём новый слой с градиентной заливкой. обязательно белой!!!

  • символ должен быть movie clip. если это graphic, можно поменять ему тип на панели свойств.
  • задать режим blend: multiply (тоже на панели properties)

единственная проблема в том, что этот способ хорошо работает только на светлых фонах. это особенность режима multiply.

если вы знаете ещё какие-нибудь способы, велкам в камменты :)
исходник можно скачать тут

This entry was posted on Четверг, Апрель 24, 2008 at 7:37 and is filed under drawing, lesson, исходники. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

There are currently 12 responses to “отражения”

Why not let us know what you think by adding your own comment! Your opinion is as valid as anyone elses, so come on... let us know what you think.

  1. 1 On Апрель 24, 2008, Murejib said:

    Если речь идет о Flash8 и выше, то можно применить маску с градиентной заливкой (градиент уходит плавно в нулевую альфу)
    Потом отражение конвертируется в MovieClip, даем ему instance name = reflection
    Маска также конвертируется в MovieClip, даем instance name = mask.

    Пишем код
    mask.cacheAsBitmap = reflection.cacheAsBitmap = true;
    reflection.setMask(mask);

    Маску при этом можно положить в отдельный слой и назначить слой маской – но только для того, чтобы внутри проекта видеть, что это слой с маской. В среде разработки клип будет маскироваться как обычно – сплошной маской, а в кскомпиллированном фильме будет маска с альфа каналом.

  2. 2 On Апрель 24, 2008, Murejib said:

    Прошу прощение за количество и частоту слова МАСКА )))

  3. 3 On Апрель 24, 2008, Xitri said:

    Знаем, знаем :)
    Над символом книги положи другой символ с градиентом из цвета в прозрачность. Этому градиентному символу выбери режим наложения ALPHA. Оберни оба эти клипа (книгу и мувик с градиентом) в новый символ и для него выбери режим наложения LAYER.

  4. 4 On Апрель 25, 2008, Murejib said:

    О! Наконец то я узнал, как использовать эти два режима )))
    А по аналогии – разобрался с Erase )))

  5. 5 On Апрель 26, 2008, Lerika said:

    2 murеjib: та ну, расслабся, наобоpот мега классное объяснение! может ты более подробную статью о градиентных масках накатаешь? ;)

  6. 6 On Апрель 26, 2008, Lerika said:

    2 xitri: я такого способа не знала. респект тебе! ;)

  7. 7 On Май 19, 2008, KUSAKA said:

    Жаль что большинство баннеров разрабатываются под 6-й флеш-плеер и все эти модные режимы там не работают =)

  8. 8 On Июнь 11, 2008, Divas said:

    А как быть с динамически подгружаемыми картинками?:) С масками понятно, а как отразить по вертикали?

  9. 9 On Июнь 11, 2008, Divas said:

    Сделал, работает… правда пришлось еще одним лоадером подгружать картинку в перевернутый клип… может будут другие варианты, типа дубликат сделать загруженой картинки и как-то ее отразить?

  10. 10 On Июль 2, 2008, Lerika said:

    2 Divas: как будут варианты, обязательно напишу об этом )

  11. 11 On Декабрь 2, 2009, Анастасия said:

    полезно! спасибо!

  12. 12 On Март 27, 2010, Mirakuru said:

    Способ от Хитри очень понравился… Сколько же лишних движений я делал!

Leave a Reply