Interconnecting nodes with lines using Phaser

Hello all, I haven’t posted in a while but this is an effect that I think deserves a place in here. What this effect does is to make tweening of nodes and the lines connected to those nodes move as well. I’m using Phaserjs for this and depending on your version of the browser it will show as either WebGL or Canvas.

Without any further delay here is the final effect

 

See the Pen Phaser interconnecting nodes by Michael Dobekidis (@netgfx) on CodePen.

Advanced:

See the Pen Phaser interconnecting nodes x3 by Michael Dobekidis (@netgfx) on CodePen.373

Continue to code break down and tutorial

Continue reading

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

Text animation JQuery plugin released

I have just released a beta version of a JQuery plugin that manages text animation, it is super easy to use and the results are pretty impressive.

There is still work to be done and whoever wants to contribute is welcome to fork on github here

You can view the plugin page here -> http://netgfx.github.com/SplitText/

View EXAMPLES here -> http://www.netgfx.com/trunk/splitText/examples/examples.html

Or check out under the hood with a previous tutorial that I wrote here -> http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/

If you like it, drop me a line below, also if you find a bug make sure to file it on github

Enjoy!

Flex Preloader with Greensock TweenLite and TweenMax

In this tutorial we will create a preloader for a Flex application that will place a tint over a set of images coloring them as the loading process continues.

Note that this tutorial also applies for Flex 4.x and 3.x

First we create a new Actionscript file.

We name it “Preloader.as”, and we place it in a package named: “Preloader_”

Then we import it in our Flex Application like this:

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ 

xmlns:s=”library://ns.adobe.com/flex/spark             xmlns:mx=”library://ns.adobe.com/flex/mx”              preloader=”Preloader_.Preloader”>

 

Main Code

In the Preloader Class we place an extend definition like this:

public class Preloader extends DownloadProgressBar

This means that can override and extend the DownloadProgressBar methods.

Now let’s import our images (here I used three but you’ll find a hint inside the source of how to apply this effect into more images)

 

[Embed(source=“/assets/NET.png”)]

private var FlashPreloaderSymbol1:Class;

 

[Embed(source=“/assets/GFX.png”)]

private var FlashPreloaderSymbol2:Class;

 

[Embed(source=“/assets/COM.png”)]

private var FlashPreloaderSymbol3:Class;

 

private var clip;

private var clip2;

private var clip3;

 

On the constructor now we will add the code to actually import the images onto the stage:

public function Preloader() 

{

super();

//getting the images into the loader

clip = new FlashPreloaderSymbol1();

clip2 = new FlashPreloaderSymbol2();

clip3 = new FlashPreloaderSymbol3();

 

//Adding images to stage

addChild(clip);

addChild(clip2);

addChild(clip3);

}

 

And now that we have the images properly set, we continue to the most important part, the method that will monitor the completion events of each portion of the application (RSLs, Swf, framework files).

public override function set preloader(preloader:Sprite):void 

{

//Center the images

centerPreloader();

// runtime shared library

preloader.addEventListener( RSLEvent.RSL_PROGRESS, onRSLDownloadProgress );

preloader.addEventListener( RSLEvent.RSL_COMPLETE, onRSLDownloadComplete );

preloader.addEventListener( RSLEvent.RSL_ERROR, onRSLError );

 

// application

preloader.addEventListener( ProgressEvent.PROGRESS, onSWFDownloadProgress );

preloader.addEventListener( Event.COMPLETE, onSWFDownloadComplete );

 

// initialization

preloader.addEventListener( FlexEvent.INIT_PROGRESS, onFlexInitProgress );

preloader.addEventListener( FlexEvent.INIT_COMPLETE, onFlexInitComplete );

}

 

As we can see an event will fire in every stage of the loading procedure.

Now let’s see each individual event listener

private function onRSLDownloadProgress( event:ProgressEvent ):void 

{

isRslDownloading = true;

 

rslBytesTotal = event.bytesTotal;

rslBytesLoaded = event.bytesLoaded;

rslPercent = Math.round( (rslBytesLoaded / rslBytesTotal) * 100);

//trace(“onRSLDownloadProgress: rslBytesLoaded ” + rslBytesLoaded);

//trace(“onRSLDownloadProgress: rslBytesTotal ” + rslBytesTotal);

//trace(“onRSLDownloadProgress: ” + rslPercent + “%”);

 

updateProgress();

}

The RSL loading handler

 

private function onRSLDownloadComplete( event:RSLEvent ):void 

{

// We tween the color of the first image into an green tint, also adding a little blur to make it more impressive

TweenMax.to(clip, 2, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

rslPercent = 100;

}

 

This is where the magic takes place, when each part has finished loading one of the images will slowly change color, the images where originally a shade of grey, but when the first part of the loading stage completes the loading images will look like this:

private function onSWFDownloadProgress( event:ProgressEvent ):void 

{

swfBytesTotal = event.bytesTotal;

swfBytesLoaded = event.bytesLoaded;

 

if ( isRslDownloading ) {

// as soon as RSL starts downloading the SWF data are added by the RSL values

swfBytesTotal -= rslBytesTotal;

swfBytesLoaded -= rslBytesLoaded;

}

swfPercent = Math.round( (swfBytesLoaded / swfBytesTotal) * 100);

//trace(“onSWFDownloadProgress: ” + swfPercent + “%”);

//trace(“onSWFDownloadProgress: swfBytesLoaded ” + swfBytesLoaded);

//trace(“onSWFDownloadProgress: swfBytesTotal ” + swfBytesTotal);

 

updateProgress();

}

The swf loading handler

 

private function onSWFDownloadComplete( event:Event ):void 

{

//Now tweening the second image (remember we can have as much as we want)

TweenMax.to(clip2, 2, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

 

swfPercent = 100;

}

 

When the second part of the loading stage completes we will have something like this:

private function onFlexInitComplete( event:FlexEvent ):void 

{

//Tweening the last image and onComplete we launch the application, we do this to make sure it the effect will play

var myTween:TweenMax = TweenMax.to(clip3, 1, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

myTween.addEventListener(Event.COMPLETE,onDoneAnimating);

}

 

As stated in the comment inside the code, here we tween the last of our images but we also include a callBack function in order to allow the tween to complete gracefully and not be interrupted.

This is our last result of the effects:

After the tween finishes the following code will run and the Flex application will initialize:

private function onDoneAnimating(e):void 

{

// The final event is dispatched. The application will now load.

dispatchEvent( new Event( Event.COMPLETE ) );

}

 

You can view a DEMO (make sure you clear cache and refresh if you need to see the preloader again)

Download the source/project files here: Greensock-Tutorial-Flex-Preloader

Thanks for reading I hope this will enable you to create even more fancy preloaders.

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!