Checkout our brand new Facebbok store, exclusively for sale on Activeden

With our facebook shop, you can easily sell your products directly within your facebook page. It supports both digital and physical products. For digital products, your customers will receive download links after a successful payment. Download links are highly secured and encrypted and work only on a certain time limit that you can set.

You can add as many products as you wish in different categories and for every product you can have a detailed description and in product’s info page.

Besides the products, you can create info pages on the header of the application easily. Everything is nicely organized and controlled through XML files and FCMS (Flash Content Management System). You can not only install this application on your facebook page, but it works as a standalone file also.

I know that this is for some time ago but I’ve just been busy and couldn’t send a post here, but now I’m back and proudly announce that Adobe mentioned us on their Twitter post here.

There are many flash video players around which you can embed into your html webpage and use it to play flv or YouTube videos. But what would you do if you are working on a full AS3 project (mobile or desktop) and you need to have a video player inside your TextField? Check the demo below to see how the player has been loaded inside the text field:

Step1) Create a new Project

Regardless of what IDE you’re using, create a new project and initialize TextArea in it. To learn more about TextArea you may read here http://active.tutsplus.com/tutorials/tools-tips/easily-create-souped-up-flash-text-fields-with-textarea and download it from here: http://doitflash.com/

Ok, I’m using FlashDevelop and my document class looks like below. Yours may be a little different though if you’re using Flex builder or CS IDE.


package
{
import flash.display.Sprite;
import flash.events.Event;

}
}


To initialize TextArea, first you need to import the required classes.


import com.doitflash.text.TextArea;
import com.doitflash.text.events.TextInLineEvent;


Then create a new variable which will hold an instance of the TextArea.


private var _textArea:TextArea;


Now create a function where the instance will be initialized and added to stage.


private function initTxt():void
{
_textArea = new TextArea();
_textArea.condenseWhite = true;
_textArea.embedFonts = false;
_textArea.border = true;
_textArea.multiline = true;
_textArea.wordWrap = true;
_textArea.width = 500;
_textArea.height = 500;

_textArea.fmlText = "some content in your text field...";
this.addChild(_textArea);
}


Up to here, your document class should look like below.


package
{
import flash.display.Sprite;
import flash.events.Event;
import com.doitflash.text.TextArea;
import com.doitflash.text.events.TextInLineEvent;

}
}


And if you run your project, you must see a 500 X 500 pixel text field with a black border with some sample script in it. If you have noticed, initializing TextArea is similar to the original TextField class. It’s important to remember that if you want to use the new html tags in your project, like how we’ll be using < video > tag in the rest of this tutorial, you need to use the fmlText property for TextArea rather than htmlText introduced in TextField.

Step2) Setup the assets

If you have tested the project till here, a swf file must have been generated. Go to where the published swf file is located and extract the content of this zip file to it. http://doitflash.com/downloads/tuts/videoTagTut.zip

Now you must have two new folders, assets and videoPlayer where your project is published. To get you out of the dark and tell you what you have downloaded, I must say that you have just setup the video player skin and a sample .mp4 file to help you see something real with your project. After we successfully played the .mp4 I will talk about how you can also play YouTube videos!

For the sake of this tutorial, don’t change the skin and button designs and leave everything as is. Yet, it’s worthy to mention that you can easily change the location of button designs from this xml file: videoPlayer/videoPlayer.xml

Feel free to explore this xml file and play with values there to create your own custom designed player.

There is also another important thing to mention about this xml file and it’s about the timer field of the player where you have the following:



Arimo

As you see, we have used the font “Arimo” for the timer field of the player. If you want to use other font types, you may change it from here. Regardless of what font you’re using, you must remember to embed it in your project. We’ll do so in the next step.

Step2) Embed fonts

Choose your font .ttf files and put them in a folder named “fonts” where you have your project document class .as file. I suggest using Arimo though, it looks great in AS3 projects and its license is ok also. Just Google “Arimo font” and you’ll find where to download the .ttf files.

Then embed them all like below in your document class.


[Embed(source="fonts/Arimo-Regular.ttf", embedAsCFF="false", fontFamily="Arimo", mimeType="application/x-font-truetype")]
private var arimoRegular:Class;

[Embed(source="fonts/Arimo-BoldItalic.ttf", embedAsCFF="false", fontFamily="Arimo", fontWeight="Bold", fontStyle="Italic", mimeType="application/x-font-truetype")]
private var arimoBoldItalic:Class;


You’re not done with the font embedding step yet! For the player skin to be able to access these fonts that you just embedded, you need to register them. So, import the following class:


import flash.text.Font;


And then put the following in the constructor function of your document class.


Font.registerFont(arimoRegular);
Font.registerFont(arimoBold);
Font.registerFont(arimoItalic);
Font.registerFont(arimoBoldItalic);


Now that we have embedded some fonts, it should be a good idea to change the embedFonts property of our TextArea instance to true and make some visual enhancements to it.


_textArea.antiAliasType = "advanced";
_textArea.embedFonts = true;
_textArea.fmlText = "some content in your text field...";


You’re document class should look like this by now:


package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.Font;
import com.doitflash.text.TextArea;
import com.doitflash.text.events.TextInLineEvent;

}
}


Step3) Setup TextArea for the new html tags

In this tutorial, you’ll learn about < video > tag, but there are more tags for you to explore on doitflash.com. I’m saying this, because in order to work with the new html tags, you need to setup your TextArea instance. Modify the initTxt() function like this.


private function initTxt():void
{
_textArea = new TextArea();
_textArea.antiAliasType = "advanced";
_textArea.condenseWhite = true;
_textArea.embedFonts = true;
_textArea.border = true;
_textArea.multiline = true;
_textArea.wordWrap = true;
_textArea.width = 500;
_textArea.height = 500;

_textArea.fmlText = "some content in your text field...";
this.addChild(_textArea);
}


The property holder, saves a reference to the class which has initialized the TextArea instance. This property is mainly used for TextArea internal works so I’m not explaining what it does here!

The property client, is a reference to where you will put functions which your TextArea instance will call. Let me explain this a bit more. You see, later in this tutorial, you will learn that you can create functions in your project which will interact with your video player. For example when the fullscreen button on the player is clicked, you want to do something special on your project, right? So you will write a function to handle the work. I will later tell you more about these dispatches from the video tag, but what you should know is that your will use the client property of TextField to let it know where these functions will be. For the sake of this tutorial we’ll set it to this. So we don’t have to create other classes for our functions and will put all the functions required by the video player dispatches in our document class.

The property assetsPath, will let TextArea know about the assets folder that you downloaded in previous steps.

The property funcSecurity, is helpful when you want to make sure your code is secure! When you are feeding the TextArea instance from external sources, for example an external xml file, it will be possible to hack into and call some other functions in your project just by changing the strings in the xml file! To stop this, set the value of funcSecurity to true and then use the following method to introduce the allowed functions!


_textArea.funcSecurity = true;
_textArea.allowedFunctions(func1, func2, func3);


This will make sure that only the above three functions are allowed to be called from external sources.

There is also a listener:


TextInLineEvent.MODULE_LOADED


Which is for TextArea which will be dispatched as soon as a module, or better to say, a tag, is loaded. As we are trying to load a video player, it is worthy to be able to know when it’s loaded inside the TextArea instance. So, we have set the listener to call onModuleLoaded(). When the player is loaded, it will call this function. Checkout the trace calls to see what information you’ll receive from this dispatch.


private function onModuleLoaded(e:TextInLineEvent):void
{
trace("reference to the loaded module: "+ e.param.module);
trace("id of the loaded tag: "+ e.param.id);
trace("name of the tag: "+ e.param.tagName);
}


Step4) Add the < video > tag into your html content

Just change the value of _textArea.fmlText to this and test your project! The player will work now and plays the sample video you had previously downloaded.


_textArea.fmlText = "some content in your text field..." +
"" +
"";


For this tutorial to be as easy as possible to follow, I did not try to feed the text area with external data, but you will enjoy the < video > tag more when you can load it from a simple .txt or .xml file!

If you have a look at the < video > structure, you will understand what they mean and I don’t think it would be necessary to explain what each tag does. Let me just give you a hint though, if you want the player not to auto play the video, remove the whole autoplay line and it will stop at the beginning.

Step5) Make it play YouTube videos

To play YouTube videos, all you have to do is to set the video type to YouTube and pass the video id. Change the source part to below and test your project.


"" +
"hfcd1Nlpwgs" +
"youtube" +
"ratio" +
"autoplay" +
"loop" +
"" +


Step6) Listen to events

In previous steps, I mentioned that each tag module has its own events which you can set some functions to receive them. The video module has the following events to listen to. Change of _textArea.fmlText to following.


_textArea.fmlText = "some content in your text field..." +
"" +
"";


The names of the events are self-explanatory but what you should know is that every event that is dispatched will send an object with itself in which you will find some useful information about the event. Let’s build the functions and I will show you all the possible data that you may receive for each event. Notice that these functions are all “public” and must be where set the textArea.client property.


public function onPlay($obj:Object=null):void
{
trace("on play clicked");
trace("event type: " + $obj.type);
trace("reference to module: " + $obj.target);
trace("--------------------------------------");
}

if ($obj.target.youtube)
{
trace("YouTube current time: " + $obj.currentTime);
trace("YouTube video duration: " + $obj.duration);
}
else
{
trace("video position: " + $obj.position);
trace("video length: " + $obj.length);
}
trace("--------------------------------------")
}


It’s not like you would need all of these events in your every project, you may just remove the whole < event > tag and build your project without them, but it’s good to know how to interact with them, right?

To make sure you have set your document class correctly, here’s the whole document class for your reference.


package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.Font;
import com.doitflash.text.TextArea;
import com.doitflash.text.events.TextInLineEvent;

}
}


Conclusion

In this tutorial you learned how to load a video player inside your text field using a simple < video > tag in your html texts. Adobe supports only basic html tags in TextField but using TextArea as an alternative to TextField, you will be able to do more with texts in your AS3 projects. In future tutorials, I’ll talk about other custom tags and then I will also tell you how you can create your own custom tag and use it in TextArea! That’s all for now. I hope you have enjoyed it.

It’s Sunday night and few hours ago I was sitting in front of the TV watching some silly shows that I thought maybe I can write a short article about how you can convert a string into a function call! A little class that I had written a while ago when I was working on the TextArea project is named DynamicFunc. You may download it from here (it’s inside the TextArea package). com.doitflash.tools.DynamicFunc

Don’t look inside of it as it’s full of complex and nonsense RegExp commands that even I can’t remember what they mean! You see, I love RegExp because of the great power it has in parsing strings. Actually with the help of it, I was able to build a semi-xml parser and it was a great experience but I hate the bastard as much as I love it! Simply because I can never memories the commands and whenever I want to create a new pattern, I have to get back to all possible references in my books and online.

Anyway, what you’ll be able to do in the next 5 minutes is to convert the following string into a real function call! “myFunc(value,value2,[arr1,arr2,arr3],{var1:value1,var2:value2,var3:value3})”. As you see, it seems like a function call which you’re passing arguments in 3 different formats, simple strings, arrays and objects.

You can think of many occasions that you would need this. Imagine you’re working with external data in your database or just a simple xml file and from there you want to be able to control how a function in your AS3 project is called, then what will you do?

If you don’t know how to work with RegExp, you may think of many different hacks around this, just like how I used to do few years back. I’m not going to talk about those hacks as I believe, the DynamicFunc solution, is the best.

So, basically, DynamicFunc will grab the string and reads each character and understands what type of parameters you’re passing. If you have your string in a variable like this:


var myString:String = "myFunc(value,value2,[arr1,arr2,arr3],{var1:value1,var2:value2,var3:value3})";

Maybe you have the function in your AS3 code like below:
function myFunc($str1:String, $str2:String, $arr:Array, $obj:Object):void
{
trace($str1);
trace($str2);
trace($arr);
trace($obj);
}


After sending the string into DynamicFunc, then it will be easy to call the function, like below:


this[df.funcName].apply(null, df.inputs);


Cool, right?
Hadi

For me myself that was just like that! I created TextArea demos and tried to give as much examples as I could inside the download packages among all of the Documentations but I don’t know was I able to show off the powers of TextArea or not , so I also decided to showcase some projects that used TextArea too!

And let me mention that we would be happy to see your works too, if you have also used TextArea, let us know about it, maybe we would find it interesting and would have a link to your project too.

How to use:

[cc lang="php" line_numbers="true" nowrap="false" width="100%"]

[/cc]

In this tutorial I’ll walk you through the steps required to install and use the TextArea component as an alternative to Flash’s native TextField class, and show you how to detect mouse roll over/out events on hyperlinks. I’ll also talk about how you can call custom functions and pass different data types as arguments.

Background

The native TextField class was the first to support text scripts in Flash projects. With TextField, you could support dynamic and static text, as well as the input type to allow user interactivity. It also supported a (very limited) selection of HTML tags for styling your scripts – but when comparing this narrow availability of HTML support in TextField to what is possible with regular HTML files being used within browsers, Flash developers felt the extreme lack of flexibility when dealing with text.

In 2009 when TLFTextField was introduced, developers were hoping to see some solutions – but these didn’t appear. Today, with the TextArea class, you can do what you always wanted with your text blocks. Functionalities like detecting roll over/out on href links, calling custom functions from text blocks, creating anchor links, loading custom created tags like video players, slideshow, and buttons: these are all now possible with TextArea.

so I wrote this fine class that I have named it FileSaver! This class is good for the following purposes:

• you want to save a file from your flash app to your desktop.
• you want to save a file from your flash app to your server.
• you want to save a file to your server and send some variables along with it.
• you want to send some variables to a server side script.
• you can encrypt the data before sending them out to server script.

before I forget, I have used as3crypto for the encryption thing in my class.

you may download the class .as files here.

here is how you can work with it if you want to save a file on your server along with some variables to be send to the server side script.

import com.doitflash.tools.fileSaver.FileSaver;
import com.doitflash.tools.fileSaver.FileSaverConst;
import com.doitflash.events.FileSaverEvent;

trace(_fileSaver.theRespond);// theRespond is of type URLVariables
trace(_fileSaver.theRespondObject);// theRespondObject is of type Object
}


If you want to save some byteArray object on your local computer, try below:

import com.doitflash.tools.fileSaver.FileSaver;
import com.doitflash.tools.fileSaver.FileSaverConst;

var _fileSaver:FileSaver = new FileSaver();
_fileSaver.method = FileSaverConst.LOCAL;
_fileSaver.save(_byte, "filename", ".gif");


And finally if you don’t want to save any file but just send some variables to a server side script, try below:

import com.doitflash.tools.fileSaver.FileSaver;
import com.doitflash.tools.fileSaver.FileSaverConst;
import com.doitflash.events.FileSaverEvent;

trace(_fileSaver.theRespond);// theRespond is of type URLVariables
trace(_fileSaver.theRespondObject);// theRespondObject is of type Object
}


I am sure you will enjoy this small but useful class it will help you get rid of all those URLLoader and URLVariables and that stuff! it will do them all with an easy interface.

I hope you like it,
Hadi


import flash.events.MouseEvent;
mc.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
trace("mc is clicked")
}


this is all good, you have used an event being built by adobe (there are many other premade events by flash if you just check the package flash.events)

what you have done above is very nicely OOP because you can call the function “onClick” on your document class without being worried about that when you are writting the code inside your mc class. because you know your mc instance which has extended MovieClip will automatically dispatch the MouseEvent.CLICK event and all you have to do is to add a listener to grab that dispatch and do something with it.

now, let’s see why custom events are useful. imagine you are building a game in which there is a counter which will let users play the game for 60 seconds only. the counter will count down until it reaches the value 0 and as soon as the value is 0 you want to stop the game and let the user know about that.

so you can call it an event, right? the event of TIME_OUT, for example, OK? so this event is not something available by default in flash events. so you will know that your mc class will not dispatch anything when the counter value reaches zero. so you must dispatch that yourself! it’s so easy, you can dispatch it inside your mc class like this:


if(counter == 0)
{
dispatchEvent(new Event("timeOut"));
}


if you notice the code above, you will see that we have used the Event class. this is good enough and you can add a listener in your document class to grab this event whenever it is dispatched. you may add a listener in your document class like this:


addEventListener("timeOut", onTimeOut);
function onTimeOut(e:Event):void
{
trace("game is over!");
}


But I can give you fair good reasons why you would need to build a custom event class! keep reading and you will be convinced!

when I say a custom event class, I mean creating a class which will extends the flash.events.Event class. in our example, let’s create the custom event class with the name of McEvent.as and put the below code in it.


package
{
import flash.events.Event;

public function get param():*
{
return _param;
}
}
}


now that you have build your custom event class, you may dispatch the timeOut event from your mc class, like below:

if(counter == 0)
{
dispatchEvent(new McEvent(McEvent.TIME_OUT));
}


and in your document class, you can add the listener like this:

addEventListener(McEvent.TIME_OUT, onTimeOut);
function onTimeOut(e:McEvent):void
{
trace("game is over!");
}


you may say this is just some extra unnecessary process! but take a look at the bright side, you have a nicely organized events being introduced for your mc class! you may have other events and you can put them all in one place and you can make sure you are not mistyping the name of the events. because they are now some constants being introduced in McEvent class.

the advantage is not limited to a better project organizing only. the main advantage is that you can send extra values along with your dispatch! take another look at your custom event class, McEvent, you see the variable


private var _param:*;


The variable _param is of type anything which means you can save and transfer any data through it while you are dispatching the event. in our example, imagine you want to send the player score along with the timeOut event. you can dispatch that event like this:


if(counter == 0)
{
dispatchEvent(new McEvent(McEvent.TIME_OUT, 99)); // 99 is the player score!
}


now you are dispatching the event and you are also sending some parameters. you can grab and use this parameter in your document class like this:


addEventListener(McEvent.TIME_OUT, onTimeOut);
function onTimeOut(e:McEvent):void
{
trace("game is over!");
trace("Your score is: " + e.param);
}


This is just a simple sample of why you may need custom events when you use it in your projects, I’m sure you will love how it will help you code better OOP.

I hope that helps,
Hadi