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

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

The Barbecue , Part I

A new day in the history of school projects….

Using the Adobe Master Collection CS 3.0 , we have to build a productsite with a given subject…

My subject: THE BARBECUE…

After taking a good look , i figured out taking my home barbecue would be the best route to succes, why?

I can use my own as model…

No time to waist searching google, or other URL’s for usefull photo’s, i just take my own…

Today i started with Part I of the project, the taking photo’s and photoshopping them…

The first 3 freshly ctrl + s’ed

We’ll Keep in touch…

That’s Right…

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…