IPinfodb ActionScript 3.0 API

Are you looking for the geographical location of an IP address?

IPinfodb offers a you that service, for FREE!

I just ported the service to an ActionScript 3.0 API to open it up for other Flash and Flex developers …

Get your SWC library here. Online documentation for the API.

Add the .SWC file to the libs folder of your flex project.

Calling the API functions, can easily be done.

Download the Flex project.

For a sample and more information , please visit my original post on the other blog.

Multi-Mania ‘09 Information Application

For my Multi-Media project, I had to make a information application for the new edition of Multi-Mania ‘09 , the biggest free Multi-Media festival in Belgium , this year it’s totally Rock ‘n’ Roll ….

Official website : http://www.multi-mania.be/2008/

Yahoo! Map custom markers in Flash CS.3

I already posted a small tutorial on how to implement a Yahoo! map into your Flash Actionscript project, if you did not read it check it here.

In this post i will show you briefly on how you can change the standard map marker into any custom marker. Basically we can just send a movieclip to the map marker manager to attach as marker.

Standard Marker

Below is the Actionscript code you can use to achieve a custom marker , this is just a movieclip that is attached to the SimpleMarker and can be used to make the map more interactive by example including buttons or other components inside this movieclip …

Custom Marker Clip with linkage name : markerClip

Following the code above, the outcome would be something like this , but than with your custom image as marker

Final Outcome

Upload Multiple Files in Flash CS3

In this little tutorial i will show you how we can upload one or more file(s) using the FileReferenceList in Flash CS3.

We will use amfphp to upload the image to a location on our server … if you do not have amfphp installed, check out my prevouis post …

We will begin by declaring a new FileReferenceList object … after that we will set the object to show the browse window to select the files that need to be uploaded.

We also need to listen for the select event , this event is triggerd whenever enter is pressed, or the select button is clicked from the upload component.

Creating a new FileReferenceList

Now we specify the upload destination location, hereby i use a php file that uploads the file from the uploadReferenceList to the location specified in the php file (a directory on our amfphp server).

Upload Script PHP

Now having than that, we now specify the location of this file in Flash.

Upload Script Location

Now , this is what the fileSelectHandler looks like, we will loop through the fileList of the FileReference (so all the files we selected for upload), and push them into a custom function uploadSingleFile….

Select Handler

Here we just upload the file that was passed into the function to the php file on our amfphp server …

We also add a complete handler , so can trigger an action for the upload complete event.

Upload Single File

Upload Complete Handler

Flash Remoting for PHP – Part 2 – Creating my own Service in amfphp (getting data)

After we got the installation working of amfphp we are now going one step further …if you missed it, find it here!

What will we need?

- correct installation of the amfphp service (0n webservice or locally)

- a php editor (personal using Adobe Dreamweaver)

- if using a amfphp installation on a online webserver, a ftp program (using FileZilla)

What is a amfphp service?

Well an amfphp service, is actually a php class that contains one or more function that handle the retrieval of database data

Example files

For a good understanding and following of this tutorial i created folowing database: designz_labs_amfphp with one table: books

Database and Table structure

for this tutorial I recommend using a local verison of amfphp using Mamp (Mac) of Wamp (Windows).

You can download the database file here , so you can follow along with the same information.

Creating the BookService

Now we will create a service that will retrieve all the books in the tabel books

Different steps:

- importing the database and creating a new database user with the right right

- opening the php editor and creating a new php file

- creating a new class BookService

- creating a basic constructor holding the connection details

- creating a new function (method) : getBooks

- calling the php function inside flash using amfPHP

Importing and User creation

importing : on the phpMyAdmin main page you will be able to import a database, do this and according to the .zip file download from above link.

user creation: on the same main page , go to Rights or Privileges and create a new user (user: books , password: books , Host:localhost) and make sure that the user has select and insert rights. This account information will be needed to have the tight privileges on the database table.

Creating a new class: BookService

open up a php editor and create a new php file.

Now create a new class: BookService

Creating the BookService

Creating the basic constructor with database connection data

Now we will add a basic constructor, where we will set connection data (telling the php that we are connection to localhost, with user: books having the password: books) and select database: designz_labs_amfphp for connection.

Creating the Basic Constructor

Creating a new function getBooks

In this peace of php we will add a new function “getBooks” , we select every record in the table “books” , and add all these records to an array … after completion the array will be returned to the amfphp , which will be called in Flash.

Finally save this php file into the amfphp service directory… Now we are ready to call this function from flash and process the results!

getBooks Service

Calling the getBooks function from Flash Actionscript

Calling the getBooks function

We just make a new netconnection and a new responder (that will cary the answer = the database result data) with the answer function when completed.

Via the netconnection we connect to the url of our amfphp (this can be local or on the network), than we call the php file BookService and the function getBooks in that php file … giving it the responder as paramater.

When the function is called with result , the getBooksResult will be called , here we loop through each object in the result array, in this case all the titles of the books ….

Download the source fla here…!

Enjoy … the next tutorial on amfphp will be calling database action combined with custom parameters !

Date and Time Calculations – Flash Actionscript 3.0

I you ever wanted to calculate the minutes , hours , days … years between 2 different dates : this is how!

What will we need?

1. first of all download the source file we will need to make these calculations in no time
2. unzip the zip file and save those files into the project directory

Little information about the Date variable type

Constructor Parameters

Creating a new Date variable in flash can be done using the new Date function followed with setting the properties.

Blanc Date Constructor

Leaving the constructor blanc will create a new Date variable according to the current Date / Time of the local machine

Calculations with Dates

Calculations With Dates

Different calculation types of the DateUtilities

Calculation Types

Flash Remoting for PHP – Part 1 – Installing amfphp to webserver

Flash Remoting for PHP ?

Flash remoting allows flash movies to get database data from your system or webserver, without knwoledge of the server side.

without complex code and knowing to much of databases , you will be able to add database connection for receiving and sending data from and towards your database to your Flex / Air / Flash  applications.

Advantage?

I can tell you it is fairly easy and time saving , think about XML’s a great while back , i had many stress moments loading tons of data  , the only thing we need is a little bit of know-how.

Which i will give in this first post , starting from the beginnen : the installation

What do we need?
- Webserver with PHP4 ( > 4.3.0 ) or PHP5 installed on it

- PHPMyAdmin installed on the webserver

- amfphp source files : download

- ftp client to upload the amfphp source files (for mac: download here , for windows: download here )

Instructions

Step 1 - Unzip the amfphp download, and upload this folder to the root folder of your personal webspace , make it look something like this

Structure of the amfphp folder

Step 2 – gateway.php is found in the main folder of the source code , there you can change some basic settings, but i never have to do so , standard settings work fine for me .. after installation we will run through a little test , if this fails you might want to read through and change some settings … just making a mention of it!

Step 3 – great, now that the amfphp folder is online … lets test it before we continue …

navigate in the browser to the folowing url:

http://www.[myonlinespace].[myextention]/amfphp/gateway.php

if getting this following screen , it is telling you that you are set … installation OK!

Install Succesfull

So will it work?

Just to make sure all settings are done correct: Lets click on “Load the service browser“

After everything is loaded and displayed, you will see something like this:

Service Browser

This is the service browser, showing all the available services (service in this case : a custom php class holding functions for retrieving and adding database data )

Now click on the DiscoveryService (service which will give some information about all the other services, if available) , you will see that in the right box some items were added, those are the methods (like functions in programming). Clicking on one, and calling this method will result in some information in the bottom tabs…

If you do not see the newly added methods, proceed to the troubleshooting area …

Troubleshooting

Not getting as descibed above or getting error messages : one common mistake that many make, is forgetting to set the right file permissions … in FileZilla this can be easy done by clicking the amfphp base folder and right clicking – File Attributes … – set the parameters as folowing:

File Attribute Parameters

Just starting with playing around with the amfphp? register here for some nice , free webspace to get started …

Flash Remoting for PHP – Part 2 – Creating my own Service (getting data)

Coming Soon : Flash Remoting for PHP – Part 3 – Creating my own Service (adding data)

Coming Soon : Flash Remoting for PHP – Part 4 -  Services & Flash Actionscript

Singleton Design Pattern Actionscript 3

When Classes, Constant variables or functions  are needed throughout the actionscript project freuquently i tend to wrap them into a new, separate Actionscrip class …

Within this class i will make an instance of that class , which will only be made once … as a result of this all the declarations will be held in 1 place … but accessable from every corner of the project …

More info about this design pattern: here

How does this pattern look in actionscript?

Singleton Design Pattern

Point 1 :  define a instance of the class inside the actionscript class as a statis variable.

Point 2:  make a function getInstance() , this will fetch and return the instance variable , if this instance is still empty when it is called, it will set the instance to a new instance of the class, but only ONCE.

Access the instance from uitside the class (example , don’t mind the imageLoader part)

Accessing The Instance

Using this way of working you can save important and frequent functions, variables … in 1 place … very organised: nice & clean, isn’t that what it is all about  … !

Custom Event Dispatcher with object data, Actionscript 3

I have always used custom events in Actionscript 3 to completing my projects … but lately i had to send out a movieclip along my custom event … i did not yet know how i had to achieve this so i began testing and playing around …

For anbody who will need to send out a object (movieclip, sprite , …. , or any other custom build class) along with the event that is dispatched … this is what you will need to do …

What we need :

1. A custom class of that particular custom event (holding the data object, which can hold any datatype what so ever indicated by the “*” , and the event type , in this case MY_CUSTOM_EVENT)

Custom Events Class

2. A custom event dispatcher which dispatches the event with the data object

Dispatching the CustomEvent

3. An eventlistener to listen for the custom event when dispatched

Event Listener : listening for the CustomEvent

Do not forget importing the reference to your CustomEvent class and other related classes needed …

Event driven programming has made my projects code more structured, easy to maintain and optimalized … I really advise starting programmers to use this method …

Yahoo! Map Component in Flash CS 3

In this blogpost i will guide you through the process of bringing a Yahoo! map control in to your Flash AS3 project …

At the end of this post , this is what you basicly will get , a basic Yahoo! map … Which i will later explain how you can add the ‘cool stuff’ ….

What will we need before we can get to the fun stuff?

- Like most API’s we will need a developer key , get yours here.

- The Yahoo! Map component , which you can get here. This is not really necessary , but it contains some usefull documentation…

Now its time for the real thing … So open up Flash CS 3

Imports

//Imports

import com.yahoo.maps.api.YahooMap;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.core.location.LatLon;

Creating a Yahoo! Map Object in Flash Actionscript CS 3

//Here we will create a new Yahoo map object

var _map:YahooMap = new YahooMap();

Initialising the Yahoo! Map Object in Flash Actionscript CS 3

//A variable of type String which keeps record of our development key (change this is your personal key)

var appid:String = “xLxU4IfV34GgQYVTKlXVMIV4V0M_0mUKqb5m7JWDRF9CIEUoGzqUKyth_uqXd5uW824-”;

//Here we initialize the Yahoo! Map component (our development key , the map widht , the map height)

_map.init(appid,stage.stageWidth,stage.stageHeight);

//Add a event listener to listen to the finish of the initialisation

_map.addEventListener(YahooMapEvent.MAP_INITIALIZE, onMapInit);

function onMapInit(event:YahooMapEvent):void
{

//Pancontrol = the ability to drag the Yahoo! Map around

_map.addPanControl();

//Zoomwidget = Zoom Out and Zoom In control

_map.addZoomWidget();

// TypeWidget = Map Type Buttons

_map.addTypeWidget();

//Setting the beginning zoom level

_map.zoomLevel = 5;

//telling our map component what location will be showed at start up,

//if we forget this, the map will show blank

//Required – Longtitude and Latitude of your favourite location

_map.centerLatLon = new LatLon(50.4026,5.52506);

//Addind our map to the display

addChild(_map);

}

Basic Webcam Handling in Flash CS 3

This post will show you how you can capture a webcam stream in Flash …

But first off all , to make sure the flash settings are correct , check if the same device is pointed out to be the working device as in the image…

Making a new Camera instance and hooking it up with the connected webcam …

var cam:Camera = Camera.getCamera();

Now we will make a new video instance to attach our camera to, and adding this video to the stage (in my example i will add the video instance to a movie clip on the stage)

var video:Video = new Video(320, 240);

//Smoothen your webcam screen

video.smoothing = true;

video.attachCamera(cam);

mcWebcam.addChild(video);

In my example i made it possible to click on my movieclip containing my webcam stream , when done so it captures the webcam stream and includes a little thumbnail of this image in the upper right corner …

To do this i added a event listener to my movieclip that handles the mouse clicking  …

//Event Listener

mcWebcam.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler);

The thumbnail is made out of the bitmap data from our webcam stream , so we first captured this bitmap data from the Video instance, which we then transformed to a Bitmap image … And finally added to the thumbnail movieclip on stage …

//Click Handler
function clickHandler(mevt:MouseEvent):void{
//Create new bitmapdata
var bmd:BitmapData = new BitmapData(320,240);
//Attach the webcam video to the bitmapdata
bmd.draw(video);
//Create Bitmap from the bitmapdata
var myBitmap:Bitmap = new Bitmap(bmd);
mcThumb.addChild(myBitmap);
}

Outcome

Sint-Niklaas Interactief

Just finished my MultiMedia end-term project…

Overall

We had to make an interactive flash application combined with ’self-made’ video …

It’s a pitty i cannot bring it online at the moment, it is over the 300MB, but i will once i get the time to shorten it a little in size…

Concept

The concept is simple, the sun comes up, the city awakes, and when the sun is fully shining the users gets a introduction of a person , who walks into the movie asking him what he wants to do today in my home town… (Are you a shopper? Are you a Cultural person? Or are you the adventurous type?)

Depending on his choice he gets a city map with different locations , when cliking a location het gets a new video in the little TV , showing him the selected location.

When mousing over a ‘hotspot’ on the map, the user gets information regarding the location …

The user can also export a pdf with the whole walking trip / usefull information …

Screens

Anyway here are some screens, i also combined some AffterEffects in my projects, so those little things are of course lost in these photo’s …

General GUI

Choose the category (AffterEffects)

PDF walking trip documentation

TweenEvent : Basic Tweening

For all the beginning Flashers (Flash AS 3.0) ,

here’s a little post how to make a tween using the standard Tweening Class in Flash CS3 (not yet the Tweener class: that’s for later… , let’s just first give a little info before using this open-source tweening Class)

The Tweenables class provides constant values for the names of animation properties used in the Motion and Keyframe classes.

A tween is writen as following

var tweenName = new Tween([attribute],”[constant]“,[kind of tween],[from value],[to value],[time],[true: use second, False: use frames]);

Attribute: a movieclip, button

Constant: wich sort of movement … [ALPHA, ROTATION, SCALE_X, SCALE_Y, SKEW_X,SKEW_Y, X , Y, WIDTH and HEIGHT]

From Value: from value (also possible the attribute.x, attribute.y, attribute.alpha …… , to get the absolute value of a object )

To Value: from value (also possible the attribute.x, attribute.y, attribute.alpha …… , to get the absolute value of a object )

Kind Of Tween: how is the tween motioned…

True/False: True: use seconds, False: use keyframes ( this is the tweening time taken… )

Now having discussed the variables of a tween , let’s make a simple tween, asume we have a movieclip on our stage with instance name: box_mc, let’s make a new tween wich enables to fade the box_mc from nothing to alpha 1….

var TweenFadeIn = new Tween(box_mc,”alpha”,Bounce.easeInOut,0,1,1,true);

var TweenFadeIn = new Tween(box_mc,”alpha”,Bounce.easeInOut,box_mc.alpha,1,1,true);

Both tweens fill do the same IF we have set the alpha of our box_mc to 0 when starting up….

If we have not , than the difference is that the first tween wil reset the alpha of our box_mc to 0 before executing this tween… With the second tween , we will take the actual alpha value of the box_mc at the moment of executing ….

For whom who haven’t met the Tweener Class , please, please, please …. do SO!

The tweening possibilities have reached another level, Test & Learn, ….

LiveDocs Documentation on the fl.transistions…

Tweener Class: Download & Documentation

KeyBoard Events

This little tut shows you how to capture keyboard events…

First we will need to add a eventlistener to the stage, with the folowing function: downHandler …

stage.addEventListener(KeyboardEvent.KEY_DOWN, downHandler);

function downHandler(evt:KeyboardEvent):void{

trace(evt);

}

Like you see we trace the KeyBoardEvent, …

This will give something like this:

Using the keyCode attribute we can check witch key is pressed…

Example, if the left arrow key is pressed we want to trace a little message… , this we do inside the downHandler, a other okace in the actionscript code wouldn’t recognize these keyCodes….

function downHandler(evt:KeyboardEvent):void{
if(evt.keyCode == 37){
trace(“Arrow Left”)
}
}

Roads are endless, but with this little introduction , the road is now under you feet….

You can chose how far you tend to go…