Mykhel Trinitaria

Sample of how to use Canvas in HTML5 with Physics

This is my advance sample of how to use Canvas in HTML5 with Physics.
You will learn how to:
- get/set pixels in Canvas
- load external image in Canvas

(Of course just tested this in FF, and good luck to someone who will run this in IE)

Click here for full page demo.

You can get the source code here, and play with the codes.

Sample of how to use jQuery with Physics

This is my advance sample of how to use jQuery with Physics.

Click here for full page demo.

You can get the source code here, and play with  the codes.

SEO Expert Philippines

Enhance your business by hiring ME as a SEO in your website. If you want reliable and affordable SEO expert in Philippines, just contact me.

How expert am I:
“filipino flash developer” – Google, Yahoo, Bing
“filipino flex developer” – Google, Yahoo, Bing
“filipino html5 developer” – Google, Yahoo, Bing
“filipino iphone developer” – Google, Yahoo, Bing
“filipino android developer” – Google, Yahoo, Bing

AS3 Benchmark: Graphics.beginBitmapFill() vs BitmapData()

Just worked on a racing game…

It requires lots of graphics and bitmaps. I have just discovered the other way how to render bitmaps in the flash.

Before, I’m using BitmapData and insert it in Bitmap, then add it in the stage. Just a while ago, I tried to use the Graphics.beginBitmapFill(). First, I did some benchmark and this how it was:
- using BitmapData:

var bmpData:BitmapData = new BitmapData(100,100, false, 0x000000);
var bmp:BitmapData = new BitmapData(100,100, false, 0x000000);
for(var i:int = 0; i < 10000; i++){
	bmp.draw(bmpData);
}

- using Graphics.beginBitmapFill()

var bmpData:BitmapData = new BitmapData(100,100, false, 0x000000);
var shp:Shape = new Shape();
for(var i:int = 0; i < 10000; i++){
	shp.graphics.beginBitmapFill(bmpData);
	shp.graphics.drawRect(0,0,100,100)
}

This gave me 17ms for Graphics.beginBitmapFill() and 93ms for Bitmapdata()

So I’m suggesting now to use Graphics.beginBitmapFill() for bitmap patterns.

10 Things Senior Flash Developer Should Know

I thought my skills in Flash/Actionscript is for senior level.  I just realized that no matter how good you are in: actionscripts, designing, problem solving, math, etc., that doesn’t mean you are for seniority level. Because you should know how to manage/optimize your codes, how is the component/compiler works, you should be strict with your attitude in making back-ups of  your codes, clean up your codes as per other developer can read yours, and should know some simple terminologies. AND so as not to compare your skills to other Flash Developers. Be HUMBLE to accept their ideas/skills and be GENEROUS to share your ideas/skills.

Here is a guide to be a Senior Flash Developer (If this stuff is “old hat” to you,feel free to make critiques on  this listing and add more references in the comments):

1.      The Elastic Racetrack
You need to understand when events fire, when code is executed, and when the player renders. It’s really the foundational concept of Flash Player.
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

2.      FlexSDK, mxmlc, compc, and all that jazz
You need to know what’s going on when you hit that “run” button in Eclipse.
http://www.senocular.com/flash/tutorials/as3withmxmlc/
http://livedocs.adobe.com/flex/3/html/help.html?content=apparch_08.html

3.      Player Events, Custom Events, Event Bubbling
I can’t imagine where flash player would be without frames and mouse clicks.
http://www.adobe.com/devnet/actionscript/articles/event_handling_as3_03.html
http://livedocs.adobe.com/flex/3/langref/flash/events/package-detail.html
http://www.tink.ws/blog/custom-events-in-as-30-dont-forget-to-override-the-clone-method/
http://jacwright.com/blog/70/how-to-listen-to-flash-events-that-dont-bubble/

4.      Statements, Keywords, and Directives
You should never be surprised by a new “word” in as3. If you don’t know what “static” or “override” or others are, learn them.
http://livedocs.adobe.com/flex/2/langref/statements.html

5.      ASDoc
Someday, you’ll re-read your code and have no idea what it does. The stress here is on proper documenting, but generating asdocs is nice too.
http://livedocs.adobe.com/flex/3/html/help.html?content=asdoc_3.html

6.      Managing visual assets (images, fonts, CSS, etc)
Flash is visual. So you need to know how to manage assets with code.
http://www.gskinner.com/talks/flexlovesflash/
http://code.google.com/p/queueloader-as3/
http://code.google.com/p/bulk-loader/

7.      Arrays, Collections, Dictionaries, Mapping
You’re not just working with one MovieClip here, so you need to know how to control multiple objects at once.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Array.html
http://www.gskinner.com/blog/archives/2006/07/as3_dictionary.html
http://code.google.com/p/as3ds/

8.      Programmatic motion (tweening, easing)
If you wanted things to stay still, you should’ve stuck with HTML
http://blog.greensock.com/tweenmaxas3/
http://www.amazon.com/Foundation-Actionscript-3-0-Animation-Making/dp/1590597915/ref=sr_1_1?ie=UTF8&s=books&qid=1243014431&sr=8-1

9.      OOP and Coding Against Frameworks
The days of a one huge .as file are over. You need to smartly move your code into organized and reusable objects. Also, now there are plenty of popular as3 frameworks to help manage your code. Read up on them and start using one.
http://www.adobe.com/devnet/actionscript/articles/oop_as3.html
http://www.actionscript.org/resources/articles/684/1/Object-Oriented-Programming-in-AS3/Page1.html

10.  Version control
Unless you think your code is worthless, you need to learn how to back it up properly.
http://tortoisesvn.net/downloads
http://versionsapp.com/
http://en.wikipedia.org/wiki/Revision_control
http://git-scm.com/
http://www.nongnu.org/cvs/

Compile ActionScript file using mxmlc

Steps in compiling ActionScript file (.as) using mxmlc of Flex SDK.

Obtaining the Compiler
- To create SWF files from ActionScript, you will need a compiler, the program that interprets ActionScript code and translates it into the machine code used in SWF files. The compiler used to compile ActionScript or MXML is mxmlc.exe. mxmlc.exe can be downloaded free, just download the latest Flex SDK, and you will obtain the MXMLC.EXE.

MXMLC.EXE – can be found in SDK_PATH/bin/mxmlc.exe.

About mxmlc.exe

mxmlc.exe is a launcher that runs the MXML and ActionScript 3 compiler that converts MXML files (.mxml) and ActionScript 3 files (.as) into published SWF files (for the purposes of this tutorial, we will be primarily concerned with ActionScript 3 files though the compiler handles both as well as some other file types used in the ultimate generation of the SWF). The real compiler is a Java jar file located in the lib directory of your Flex Builder/SDK install and not mxmlc.exe itself. Because of this, to work with the compiler you’ll A) need to make sure you keep all of those files of which the compiler is dependant (i.e. dont go moving around just mxmlc.exe and expect it to work), and B) need to have the Java runtime environment installed on your system. If you’ve installed Flex Builder you won’t have to worry about this since it will take care of this for you. If you just got the SDK, however, and haven’t had Java installed on your computer, you can download and install the Java runtime environment from http://java.sun.com.

In the directory containing mxmlc.exe you may notice some other executables. compc.exe is for creating SWC files (pre-compiled component file), and fdb.exe is the command line debugger. Here we are sticking to just using mxmlc.exe which is all you need to get started using ActionScript 3.

For mxmlc command line options, just visit http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_13.html

How to compile ActionScript in mxmlc
- create a batch file. Here is a sample of batch file I used for compiling fonts.

C:\flex_sdk_4.1.0.16076\bin\mxmlc.exe -static-link-runtime-shared-libraries=true -o output.swf -source-path="C:\_cafepress\devtools\manila\fonts\src\" "C:\_cafepress\devtools\manila\fonts\src\font\Alepholon.as"

- the ActionScript file (I used Alepholon.as here)

package font
{
	import flash.display.Sprite;
	import flash.text.Font;
 
	/**
	 * Font library
	 * @author mykhel
	 */
	public class Alepholon extends Sprite
	{
 
		[Embed(source='../../lib/Alepholon.ttf'
		,fontFamily  ='Alepholon'
		,fontStyle   ='normal' // normal|italic
		,fontWeight  ='normal' // normal|bold
		,unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E'
		,embedAsCFF='false'
		)]
		public static const fontClass:Class;
 
		public function Alepholon()
		{
			Font.registerFont(fontClass);
		}
 
	}
 
}

Note: This class is to embed font. I get this sample in one of the output file of automation tool in converting Font file (.TFF) into SWF that I have created.

- Run the batch file, and look for the output file. In my example, output file can be found in the directory of the batch file.

Download the sample files here.
Please note, I cannot include the Alepholon font, but you can try the other font. Play around with the batch file, change the path and options.

Original story here.

“Enter” key in input textfield

How to catch ENTER key in input textfield?

In AS3, we can’t just use:

inputText.addEventListener(Event.KeyboardEvent.KEY_DOWN, keyDownHandler);

Because, you can’t get any event from the regular TextField that would be fired when the ENTER key is pressed. You have to do work around…

One idea would be to listen the textfield for focus events. When it has focus, you add a listener to the stage for key board events and check if the pressed key is ENTER, if so fire your action, else skip.

AS3:

inputText.addEventListener(FocusEvent.FOCUS_IN,textInputHandler);
inputText.addEventListener(FocusEvent.FOCUS_OUT,textInputHandlerOut);
 
function textInputHandler(event:FocusEvent):void {
    //our textfield has focus, we want to listen for keyboard events.
    stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler);
}
 
function textInputHandlerOut(event:FocusEvent):void {
    //our textfield lost focus, remove our listener.
    stage.removeEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler);
}
 
function keyDownHandler( e:KeyboardEvent ):void{
    //a key was pressed, check if it was Enter => charCode 13.
    if( e.charCode == 13 ){
      //ok, enter was pressed. Do your thing.
      trace("We pressed enter, doSomething" )
    }
}

Adding Like Facebook Button with Dynamic Link

You wanna go to facebook Like button. This facebook developer’s site, will teach us how to simply generate a code and copy and paste it in our website.

Just wanna share how this can be dynamically created. Using iframe, php, and javascript code

This is how I did it.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
echo $url; ?> &amp;layout=button_count&amp;show_faces=true&amp;width=180&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:21px;" allowTransparency="true">
</iframe>

Just copy and paste it anywhere your pages are. I test it using IE, FF, and Chrome using Windows 7. (I don’t care with other platforms.)

Hope this can help.

How to install Android SDK and play with Android 2.0 in the emulator

1)      Download appropriate file for your system from http://developer.android.com/sdk/index.html

2)      Extract to desired location

3)      Run “SDK Setup.exe” (or the equivalent for your system)

a.       If you receive an error message stating “Failed to fetch url…” then you will have to force the Setup program to use http in lieu of https.

i.      Close the “Refresh Sources” window

ii.      Cancel the “Choose Packages to Install” window

iii.      Select “Settings” from the left side of the “Android SDK and AVD Manager” window

iv.      Check the box labeled “Force https://… sources to be fetched using http://…”

v.      Click “Save and Apply”

vi.      Close and restart the SDK Setup program

a.       If you are only interested in trying out the Android 2.0 Emulator

i.      Reject everything except “SDK Platform Android 2.0. API 5, revision 1” by selecting each item then selecting the Reject option

b.      If you plan to develop Android applications and Games, you may wish to Accept All

c.       Click “Install Selected”

(Since I’m new in Android, I chose “Accept All”, because I’m not sure which thing should be installed. I don’t advise to choose “Select All”.)

5)      Allow the selected packages to download and install then close the “Installing Archives” window

6)      Create a new Android Virtual Device (AVD). Go to Virtual Devices at the left menu, and then click New button.

a.       Select “Virtual Devices” from the left side of the “Android SDK and AVD Manager” window

i.      Click “New”

ii.      Enter a Name

iii.      Choose a Target

iv.      Enter a size for the emulated SD Card

v.      Choose a Skin

1.      To emulate current hardware such as the G1, MyTouch 3G, Hero, etc…

a.       Leave the default value

2.      To emulate the Motorola Droid

a.       Choose WVGA 854

3.      To emulate other devices

a.       Choose anything else

vi.      Click “Create AVD”

7)      Start your newly created Virtual Device

a.       Choose the Virtual Device from the list

b.      Click “Start…”

c.       Click “Launch”

8)      Just wait the android takes for a while to setup complete. This depends on the user’s machine. (will look for tweaking solutions to solve this issue)

9)      After setup complete!

Testing my facebook using Android Emulator.

Credits to http://androidandme.com

Dynamic TextField with Particle Effect

I have finished a dynamic TextField with particle effect using AS3. I have tested some particle effects, but never came out a very good output.

Rollover on the TEXT and you will see a very good effects.

Hope you like it.

In my POV, to create a very good particle effects it requires deep imagination and very good problem solving. In my experience, I encountered lots of physics computations and mathematical expressions to come out a very good solutions or formulas like this. I hope this will be the beginning of lots of very good particles.

For source code, click here. I just used single class here.