понедельник, сентября 04, 2006

Затемнение ala Windows XP (Flex 2)

Alistair McLeod любит Windows XP, а особенно выключать его и любоваться эффектом затемнения всего, что находится за модальным окном. В связи с этим, он решил реализовать этот эффект во Flex 2.

Примеры данного эффекта можно посмотреть в оригинальном посте автора, там же можно загрузить библиотеку данного эффекта и SWC-файл. Просто нажмите кнопку и фон за модальным окном померкнет.

Работает это так. Класс PopUpManager имеет недокументированное внутреннее свойтсво modalWindowClass. Если задать в качестве значения этого свойства какой-нибудь класс, то его экземпляр будет создан при создании модального (только модального!) окна. Экземпляр появляется позади модального окна и изменяет внешний вид приложения.

Alistair создал класс SaturationFadePopUpBlocker, который использует его новый эффект SaturationFade. SaturationFade изменяет насыщенность компонента, который является целью эффекта.

Чтобы добавить данный эффект в приложение, необходимо добавить в обработчик creationComplete строку:

PopUpManager.mx_internal::modalWindowClass = 
SaturationFadePopUpBlocker;


Вот переделанный пример из документации с использованием данного эффекта:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="doInit();">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
import com.adobe.effects.*;
private function doInit():void {
PopUpManager.mx_internal::modalWindowClass =
SaturationFadePopUpBlocker;
}
private function showLogin():void {
var helpWindow:IFlexDisplayObject =
PopUpManager.createPopUp(this, MyLoginForm, true);
}
]]>
</mx:Script>

<mx:VBox>
<mx:Button click="showLogin();" label="Login"/>

<mx:Image source="img/sunset.jpg" />
</mx:VBox>

</mx:Application>

Необходимо еще само модальное окно, но его можно взять из хелпа. Изменений никаких в нем нет.

Естественно, все классы или swc файлы должны быть импортированны.
Эффект можно настроить для любого уровня насыщенности. Эффект SaturationFade можно использовать отдельно. В следующем примере эффект проигрывается при нажатии на изображения. Насыщенность меняется с 1 до 0. При отпускании эффект проигрывается в обратную сторону:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:eff="com.adobe.effects.*" >
<mx:Script>
<![CDATA[
import com.adobe.effects.SaturationFade;
]]>
</mx:Script>
<eff:SaturationFade id="fadeToGray" duration="500"
saturationFrom="1" saturationTo="0" />
<eff:SaturationFade id="fadeBack" duration="500"
saturationFrom="0" saturationTo="1" />
<mx:Image mouseDownEffect="fadeToGray" mouseUpEffect="fadeBack"
source="sunset.jpg" />
</mx:Application>

Кого интересует реализация данного эффекта во Flash - добро пожаловать.

Комментариев нет: