Phaser.io how to apply a grayscale filter [Tip]

So I was looking for a smart/quick/light way to apply grayscale filter to my images but not by using WebGL.
What I found is that by using Image.blendMode = PIXI.blendModes.SATURATION I could simply create an image in Photoshop and apply that blend to it. This way you don’t have to create multiple grayscale versions of the images but simply add one grayscale and re-apply it when you want.

And here’s how you can do it.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create Animated Menu for Mobile fallback

Recently I read a very interesting article about some css animations. One of my favorites was the one with the menu that looks like a fallback for mobile devices. So I thought to replicate the effect (with some twist) with greensock TimelineMax (you can also use TimelineLite).

Here is what the end effect will look:

See the Pen Menu Animation by Michael Dobekidis (@netgfx) on CodePen.

The article for CSS animations can be found here:

http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Applying an effect to a popup in Flex (open,close)

This is an effect I made to make popups appear and disappear in a cooler way…

u can view an example here right click for source code…

also posting the code here just in case…

the mxml code for the main application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html” backgroundColor=”0xffffff”>

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

private function launchDiag1():void
{
var win:diagBox = PopUpManager.createPopUp(this, diagBox, true) as diagBox;
PopUpManager.centerPopUp(win);
}
]]>
</mx:Script>

<mx:Canvas height=”100%” width=”100%”>

<mx:Button click=”launchDiag1()” label=”Play!” verticalCenter=”0″ left=”50″ height=”80″ width=”100″/>

</mx:Canvas>
</mx:Application>

//=================================================

Now the popup code: ( create a new mxml component first, and name it diagBox)

<?xml version=”1.0″ encoding=”utf-8″?>
<!– diagBox.mxml –>

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
showCloseButton=”true”
width=”550″
height=”500″
close=”titleWindow_close();” backgroundAlpha=”0.0″ borderAlpha=”0.0″ creationComplete=”openingEffect.play();”
shadowDirection=”center” shadowDistance=”0″ borderStyle=”none”>

<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.effects.easing.*;

private function titleWindow_close():void {
shutdownEffect.play();

}

public function endDiag():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>

<mx:Style>
.header
{
color:#ffffff;
}
</mx:Style>

<mx:Sequence id=”openingEffect” target=”{panel}” effectStart=”panel.visible=true”>
<mx:Pause duration=”400″/>
<mx:Resize id=”expand” widthTo=”500″ duration=”300″ easingFunction=”Circular.easeOut”/>
<mx:Pause duration=”300″/>
<mx:Resize id=”expand2″ heightTo=”450″ duration=”300″ easingFunction=”Circular.easeInOut”/>
</mx:Sequence>

<mx:Sequence effectEnd=”endDiag();” id=”shutdownEffect” target=”{panel}” suspendBackgroundProcessing=”true”>
<mx:Pause duration=”400″/>
<mx:Resize id=”contract2″ heightTo=”1″ duration=”300″ easingFunction=”Circular.easeInOut” suspendBackgroundProcessing=”true”/>
<mx:Pause duration=”300″ suspendBackgroundProcessing=”true”/>
<mx:Resize id=”contract” widthTo=”1″ duration=”300″ suspendBackgroundProcessing=”true” easingFunction=”Circular.easeOut”/>
</mx:Sequence>

<mx:Canvas height=”100%” width=”100%”>

<mx:Panel id=”panel” visible=”false” height=”1″ width=”1″ borderColor=”#000000″ horizontalCenter=”0″ verticalCenter=”0″
title=”Early Years…” themeColor=”#ffffff” autoLayout=”true” titleStyleName=”header”>

<mx:Text id=”info” text=”Sample Text containing the phrase: Hello World! “/>

</mx:Panel>
</mx:Canvas>

</mx:TitleWindow>

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin