TweenMax Bezier example

Hello all,

I haven’t post in a while but I have been quite busy creating some exciting stuff that I will be posting in the coming months.

For starters I thought to post an example of a bezier line as explained in the greensock forums. This is not entirelly my code but rather a re-creation from the .fla

So lets begin:

Here we create the main circle that will tween along the bezier path.


public function createMC()
{
var circ = new Sprite();
circ = new Sprite();
circ.name = 'mc';
circ.graphics.beginFill(0xff00ff,1);
circ.graphics.drawCircle(0,0,6);
circ.graphics.endFill();
circ.x = -10;
circ.y = 80;
stage.addChild(circ);

mc = stage.getChildByName('mc');

var button:Sprite = new Sprite();

button.graphics.beginFill(0xffeecc,1);
button.graphics.drawRect(0,0,30,30);
button.graphics.endFill();
button.x = 10;
button.y = 10;
button.width = 30;
button.height = 30;

button.addEventListener(MouseEvent.CLICK,resetLines,false,0,true);

createNodes();
}

Now we create the lines and the circles between them:
<code>
private function createNodes()
{
var circ = new Sprite();
for(var i=0;i {
circ = new Sprite();
circ.name = 'obj'+i;
circ.graphics.beginFill(0xff0000,1);
circ.graphics.drawCircle(0,0,3);
circ.graphics.endFill();
circ.x = i*100;
circ.y = 80;
stage.addChild(circ);
point_mcs.push(circ);
}

Now that we have created the lines and circles, we create the functions for the drag events:


function dragMe(e:Event){
      TweenMax.killAll();
      var object = e.target;
      object.startDrag();
      stage.addEventListener(MouseEvent.MOUSE_MOVE, update)
    }
    
    function stopDragMe(e:Event):void{
      TweenMax.killAll();
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, update)
      stopDrag();
      mc.x = point_mcs[0].x;
      mc.y = point_mcs[0].y;
      TweenMax.to(mc,5,{bezierThrough:bezierPoints});
    }  
    
    function update(e:Event):void{
      mc.x = point_mcs[0].x;
      mc.y = point_mcs[0].y;
      createBezierPointsObject();
      updatePath();
    }

At this point we should have circles that are draggable but the path does not update properly. Now we will exactly that:


function createBezierPointsObject(){
      bezierPoints = [];
      xA = []
      yA = []
      var max:int = point_mcs.length;
      for(var i:int = 0; i < max; i++){
        var curPoint = point_mcs[i];
        if(i!=0){
          bezierPoints[i] = {x:curPoint.x, y:curPoint.y};  
        }
        xA.push(curPoint.x);
        yA.push(curPoint.y);
      }
    }
    
//updating the path as we drag the nodes.
    function updatePath(){
      
      this.graphics.clear();  
      
      this.graphics.lineStyle(1, 0x0000);
      
      this.graphics.moveTo(point_mcs[0].x, point_mcs[0].y)
      var bezierObj:Object=BezierPlugin.parseBeziers({"x":xA,"y":yA},true);
      
      var pointCount:int=0;
      while(pointCount<bezierObj["x"].length)
      {
        this.graphics.curveTo(bezierObj.x[pointCount][1], bezierObj.y[pointCount][1],bezierObj.x[pointCount][2],bezierObj.y[pointCount][2]);
        pointCount++
      }
      
    }

for(var i:Number = 0; ipoint_mcs[i].mouseChildren = false;
point_mcs[i].addEventListener(MouseEvent.MOUSE_DOWN, dragMe)
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragMe)
}

createBezierPointsObject();
updatePath();
}

Download the project for Flash Builder here:
Bezier

View Example here:
DEMO

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Convert RBGA to Hex Tool

Hey all, recently I was searching the internets for a tool that successfully converts uint to hex and vice versa but I could not find anything, so I went and created a tool that converts from RGB/HEX/RGBA/UINT to anything even color percentages.

It has the mocking name of RGBaZR (thus making it trendy with the -zr ending…) and it can be found here:

RGBaZR

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Android Application Instagib

Yesterday I launched my application in the Android Marketplace called Instagib, it is made on Air with Flex and AS3.

Its a utility application which allows users to exchange info through QR code, even links or contact information. What is important is that the QR works with even the default android QR reader so that no one is “forced” to install the application in order to receive data from someone that has it.

It also features a built-in web-browser using the Air StageWebView, a built-in twitter client! which links open in the application browser so that they can be shared via QR.

Make sure to check it out: Instagib App

I’ll be sure to post some parts of the application as it is free and mostly based on open source libraries.

Leave a comment if you want to request some particular part be explained here.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create Social Sharing Buttons in AS3

Hey all, recently I had to create a series of sharing buttons for a client so I went all over the internets in search for those sharing urls, then I had to fight against the popUp blockers and externalInterface problems, but I managed to pull it off and I present you with some very usefull functions, if one of those urls here changes drop me a line and I’ll try to find a replacement.

So here we go I’ll present the functions and then a single function that manages the display:

[cc lang=”Actionscript”]
// FACEBOOK
private function shareFB(e:Event):void
{
openPage(‘http://www.facebook.com/sharer/sharer.php?t=A+cool+video&u=’+escape(“http://flepstudio.org/utilita/VideoPlayer/IronMan2.mov”),”_popup”);
}

// TWITTER
private function shareTwitter(e:Event):void
{
openPage(‘https://twitter.com/intent/tweet?source=webclient&text=A+cool+video%3A+’+escape(“http://flepstudio.org/utilita/VideoPlayer/IronMan2.mov”),”_popup”);
}

// MAIL
private function shareMail(e:Event):void
{
var request:URLRequest = new URLRequest(“mailto:”+address+”?subject=”+videoInfo.videoTitle+”&body=”+”\n\n Video Link: “+videoInfo.videoLink);
navigateToURL(request, “_self”);
}

// TUMBLR
private function shareTumblr(e:Event):void
{
openPage(“http://www.tumblr.com/share/link?url=” + escape(videoInfo.videoLink) + “&name=” + escape(videoInfo.videoTitle) + “&description=” + escape(videoInfo.videoArtist),’_popup’);
}

// STUMBLE UPON
private function shareSU(e:Event):void
{
openPage(“http://www.stumbleupon.com/submit?url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle));
}

// GOOGLE +
private function shareGoogle(e:Event):void
{
openPage(“https://m.google.com/app/plus/x/?v=compose&content=”+escape(videoInfo.videoLink),”_popup”);
}

// LinkedIn
private function shareLinkedIn(e:Event):void
{
openPage(“http://www.linkedin.com/shareArticle?mini=true&url=CONTENT-URL&title=”+escape(videoInfo.videoArtist)+”&summary=”+escape(videoInfo.videoArtist)+”&source=”+escape(videoInfo.videoTitle),’_popup’);
}

// DIGG
private function shareDigg(e:Event):void
{
openPage(“http://digg.com/submit?phase=2&url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle)+”&bodytext=”+”+”&topic=”+escape(videoInfo.videoArtist));
}

//BEBO
private function shareBebo(e:Event):void
{
openPage(“http://www.bebo.com/c/share?Url=”+escape(videoInfo.videoLink)+”&Title=”+escape(videoInfo.videoTitle),’_popup’);
}

//ORKUT
private function shareOrkut(e:Event):void
{
openPage(“http://www.orkut.com/FavoriteVideos.aspx?u=”+escape(videoInfo.videoLink),’_popup’);
}

//REDDIT
private function shareReddit(e:Event):void
{
openPage(“http://www.reddit.com/submit?url=”+escape(videoInfo.videoLink),’_popup’);
}

// DELICIOUS
private function shareDelicious(e:Event):void
{
openPage(“http://www.delicious.com/save?v=5&jump=close&url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle));
}

// MYSPACE
private function shareMySpace(e:Event):void
{
openPage(“http://www.myspace.com/Modules/PostTo/Pages/?t=”+escape(videoInfo.videoTitle)+”&c=”+escape(videoInfo.videoArtist)+”&u=”+escape(videoInfo.videoLink)+”&l=”+escape(videoInfo.videoLink),’_popup’);
}
[/cc]

These are most of the social networks that I could think of, but it is almost the same for everything else I suppose.
And the following is the master function that handles the popup. (This is based on a function used by flowplayer and their sharing plugin, but it is generic stuff).

[cc lang=”Actionscript”]
public static function openPage(url:String, linkWindow:String = “_blank”, popUpDimensions:Array = null):void {
if (linkWindow == “_popup” && ExternalInterface.available) {
var dimensions:Array = [800,600];
ExternalInterface.call(“window.open(‘” + url + “‘,’PopUpWindow’,’width=” + dimensions[0] + “,height=” + dimensions[1] + “,toolbar=yes,scrollbars=yes’)”);
} else {
// Use JS to bypass popup blockers if ExternalInterface is available
var window:String = linkWindow == “_popup” ? “_blank” : linkWindow;
if (ExternalInterface.available) {
ExternalInterface.call(‘window.open(“‘ + url + ‘”,”‘ + window + ‘”)’);
} else {
//request a blank page
navigateToURL(new URLRequest(url), window);
}
}
}
[/cc]

There now you can use these and link them into buttons for your sharing pleasure.
You can view an example here: http://www.netgfx.com/trunk/social/
Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Change the event category in the GTrack OSMF plugin (dynamically)

This is somewhat a spin-off from the Media Player Anatomy series of tutorials that I’m working on, but since there is nothing to be found out there I thought to post this in case it helps anyone.
From a series of emails that I had with a representative of the RealEyes Media the only way to change the event category that is being send to the server is by changing the config.xml file.
It seemed rather insane to have a single config.xml for each category so I thought to create one on the fly as it only needs to be xml (file or build with as3 makes no difference).
FYI this is the reops tutorial on the GTrack plugin (a really nice plugin and one of the few left for free nowadays…)
GTrack Plugin Tutorial

We assume that the initial load has been done and now we want to change the category into “music”
we declare an XML template:
[cc lang=”Actionscript”]
public var xmlTemplate:XML =
UA-26485023-1
UA-24092711-1
http://www.netgfx.com/trunk/samplePlayer/sample.html








true
250
;
[/cc]

And then we change it:
[cc lang=”Actionscript”]
public function createXMLConfig(cat:String = ‘music’):XML
{
var attr:XML = new XML(xmlTemplate);

var arr:XMLList = new XMLList();
arr = attr.event;
for(var i:Number=0;i {
attr.event[i].@category = cat;
}

return attr;
}
[/cc]

This can be then loaded as follows:
[cc lang=”Actionscript”]
var customPluginConfigXML:XML = createXMLConfig();
pluginResource.addMetadataValue( “http://www.realeyes.com/osmf/plugins/tracking/google”, customPluginConfigXML );
[/cc]

At this point you might want to remove the previous MetadataValue before assigning the new one.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Simple Loader with AS3 and TweenMax

This a loader that I created for my OSMF-based player. This is lightweight and simple to use.
Colors and shapes can easily be customized, text could also be included and event animated to match blocks.

The creation function, simple drawing.

[cc lang=”actionscript”]public function createLoader(bgColor:uint=0x2e2e2e):void
{
this.x = 0;
this.y = 0;
bg = new Sprite();
bg.graphics.beginFill(bgColor,1);
bg.graphics.lineStyle(3,0xf7f7f7,1,true);
bg.graphics.drawRoundRectComplex(0,0,200,100,5,5,5,5);
bg.graphics.endFill();
var gap:Number = 45;
var block:Sprite;

for(var i:int = 0;i<6;i++){ block = new Sprite(); block.graphics.beginFill(0xffffff,1); block.graphics.lineStyle(1,0x7e7e7e,1,false); block.graphics.drawRect(gap+(20*i),40,9,22); block.graphics.endFill(); bg.addChild(block); } this.addChild(bg); tint(); [/cc] And the function that handles the animation, it applies colorization to each block in order then calls it self with the index increased by one. [cc lang="actionscript"] private function tint(value:Number=0):void { var length:Number = bg.numChildren; var indexItem:Number; for(var i:int = 0;ilength-1) { indexItem = 0; } else { indexItem = value; } TweenMax.to(bg.getChildAt(indexItem), .2, {colorMatrixFilter:{colorize:0x3399ff, amount:1.2, contrast:1, brightness:1, saturation:1, hue:50}, onComplete:function(){ TweenMax.to(bg.getChildAt(indexItem), .6, {colorMatrixFilter:{colorize:0xffffff, amount:1}, ease:Quad.easeInOut}); tint(indexItem+1); }}); }[/cc] The release version is a mere 20kb file. Download the source here: UILoader

View Example here: UILoader-Demo

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create a button with font-icon and pure actionscript 3

As I see that the font-icon technique is becoming very popular, and I personally like it very much I decided to post some code of how to create a simple button with an Icon using only AS3 as it is lighter and much faster on mobile devices.

We will create a class that will hold our button, as you will see I have embedded the signify font, (signify is a font which has icons corresponding to letters and numbers):

[cc lang=”Actionscript”]
package
{
import flash.display.GradientType;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.getQualifiedClassName;

public class UIButton extends Sprite
{
[Embed(source=”fonts/signify-webfont.ttf”, fontFamily=”Signify”, embedAsCFF=”false”)]
public static var signify:String;

private var myShape:Shape;
private var gradientBoxMatrix:Matrix;
private var masterWidth:Number;
private var masterHeight:Number;

private var radius:Number = 10;

public function UIButton()
{
super();
}
}
}
[/cc]

Next we will create the main function that draws the button:

[cc lang=”Actionscript”]
public function createButton(gradientColor_:Array = null, width:Number=120, height:Number=60, x:Number=10, y:Number=10, _text:String = ‘E’)
{

}
[/cc]

First we draw the matrix for the gradients and the rectangle:

[cc lang=”Actionscript”]
myShape = new Shape();
gradientBoxMatrix = new Matrix();
gradientBoxMatrix.createGradientBox(width, height, Math.PI/2, 0, 0);
myShape.graphics.beginGradientFill(GradientType.LINEAR, gradientColor_, [1,1,1], [0,128,255],gradientBoxMatrix);
myShape.graphics.lineStyle(2, 0x1e1e1e);
myShape.graphics.drawRoundRect(0,0,width,height,radius);
myShape.graphics.endFill();
[/cc]

And now we create the icon:

[cc lang=”Actionscript”]
var tfl:TextField = new TextField();
tfl.text = _text;
tfl.width = width/2;
tfl.height = height/2;
tfl.textColor = 0x0e0e0e;
tfl.embedFonts = true;
var tf:TextFormat = new TextFormat(‘Signify’,38,0x0e0e0e); //here we define the embedded font
tfl.setTextFormat(tf);
tfl.selectable = false;

tfl.x = width/2 – tfl.textWidth+19;
tfl.y = -10;
[/cc]

finally we add them to the display object:

[cc lang=”Actionscript”]
this.addChild(myShape);
this.addChild(tfl);
[/cc]

we can easily call this class by doing:

[cc lang=”Actionscript”]
var button:UIButton = new UIButton();
button.createButton([0xffffff,0xf1f1f1,0xf8f8f8]);
addChild(button);
[/cc]

View an example here: MobileUI

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex 4.5.1 Create button with font-icon technique

In the last few months I have seen the growth of what designers call Font-Icons, these are font files with hand-drawn vector icons instead of letters, however each icon corresponds to a letter or number.

So I thought to make use of this technique which greatly reduces the number of images one should embed into AS3/MXML code.  Also these can be scaled infinitely since they are vectors, and that is good news for mobile applications that aim multi-density screens such as mobiles and tablets or even desktop.

For this example we used the “Signify” font family:

Heres a simple View with a button made with font-icon technique:
[cc lang=”mxml”]


@namespace s “library://ns.adobe.com/flex/spark”;

@font-face {
src: url(“assets/signify-webfont.ttf”);
fontFamily: ‘Signify’;
embedAsCFF: true;
}
















[/cc]

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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.

Facebooktwittergoogle_pluspinterestlinkedin
linkedin