Links mentioned in the tutorial

• Red5
• Eclipse for Java EE Developers
• NetStatusInfo class

About 18 months ago I got my first VPS and figured out how to install RED5, the free open-source alternative to Adobe’s Flash Media Server. It’s a great alternative and the price (0.00 $) is just right. A few weeks ago I decided to upgrade my VPS plan at Vexxhost to a cloud server which meant I had to install everything all over again. Including RED5. I then decided to write a tutorial that includes all the steps needed to get RED5 up and running on your CentOS server.

It takes about 20-40 minutes depending on how much of a brainless copy-paster you are. And on that last note I’d like to add that I take no responsibility if anything goes wrong. These steps are the ones I followed and worked great for me. If for some obscure reason you do something that might mess up your server, I’m not going to take the heat for that.
So, how about it? Let’s get started, shall we?

Requirements

1. SSH access to your VPS
2. The root login to your server
3. Basic knowledge of Java servers, SVN, etc
4. A clue: If you don’t have a clue what you’re about to do here, it means you don’t need to do this and thus don’t need this tutorial.

Let’s go

Prepare your server

JAVA

Red5 is a JAVA server. So you’ll need to have JAVA installed and running on your server. Check if you have JAVA installed by just using the following command:

java

If your server responds with information about the java command, you have java installed. Check to see if you have a valid version of JAVA running by using the following command:

java -version

The first line of the response should be something like “java version “1.6.0_20“. The really important bit here is 1.6.  If that is the case, you can skip this step. If it’s not, you’ll need to update Java. I can’t tell you how to do that. You’ll have to Google that. If you got a response similar to ‘command not found‘, you’ll need to install JAVA.
Installing JAVA on CentOS can be done using Yum. Like this:

yum -y install java-1.6.0-openjdk java-1.6.0-openjdk-devel

Just sit back and watch the lines of text scroll by. This could take a while.
When the scrolling ends: tap yourself on the back. You just installed JAVA on your server. One step closer to success.

RED5 will run on JAVA. We will download the sources later on and then build the RED5 application ourselves. We will build the source using ANT.

ANT

First we need to check if  you have ANT installed. You can check this out by typing:

ant --help

If you get a manual page, you’re in the green. You can skip this step. If you don’t, you’ll have to install ANT. First off let’s change to another directory.

cd /usr/src

We need to download the latest ANT version. You can find the most recent versions here. The one provided in the following step is the most current one at the time of writing. Copy the url and enter it in the following command. This will download the file to your server in the directory /usr/src/.

wget http://opensource.become.com/apache/ant/binaries/apache-ant-1.8.2-bin.tar.gz

This is some kind of strange zip format. We need to uncompress this. (Remember to update the filename in the next step to the one you just downloaded in the previous step)

tar zxvf apache-ant-1.8.2-bin.tar.gz

So now we have all these files in the uncompressed folder, we need to move it to a save place… (Again keep in mind to change the foldername to your version of ANT you just downloaded, 2 steps ago)

mv apache-ant-1.8.2/ /usr/local/ant

So now we have JAVA installed, and ANT is in place. We need to make sure there are some environment variables set. These are global variables with paths to different binaries or applications. ANT and JAVA will need those. Copy and paste the following commands, one by one, BUT MAKE SURE the quotes are valid charachters. I noticed that copy/pasting from websites might mess this up. I suggest you take the time and replace them by hand before actually executing these commands.
export ANT_HOME=/usr/local/ant
export JAVA_HOME=/usr/lib/jvm/java
export PATH=$PATH:/usr/local/ant/bin
export CLASSPATH=.:$JAVA_HOME/lib/classes.zip
echo 'export ANT_HOME=/usr/local/ant' >> /etc/bashrc
echo 'export JAVA_HOME=/usr/lib/jvm/java' >> /etc/bashrc
echo 'export PATH=$PATH:/usr/local/ant/bin' >> /etc/bashrc
echo 'export CLASSPATH=.:$JAVA_HOME/lib/classes.zip' >> /etc/bashrc

All set? Good!
Okay, now ANT and JAVA should know enough about each other to get started. So now we essentially have everything to build the actual RED5 server except for the RED5 source. We will fetch the latest release from the SVN repository at Google Code. For that we will need SVN.

SVN

Let’s see if we have SVN installed:

svn --help

If you get the man pages, you’re free to skip this step. If you don’t: Let’s make it happen!

yum install subversion

If the SVN installation works right away: You’re done here. Skip to the next part. You might get an error like “Error: Missing Dependency: perl(URI) >= 1.17 is needed by package subversion“. That means you’re missing an RPM. Sucks, right? Let’s take care of this…

If your server is a 32bit machine, do the following:

wget ftp://ftp.pbone.net/mirror/archive.fedoraproject.org/fedora/linux/releases/7/Everything/i386/os/Fedora/perl-URI-1.35-3.noarch.rpm

If you’re on a 64bit machine:

wget ftp://ftp.pbone.net/mirror/archive.fedoraproject.org/fedora/linux/releases/7/Everything/x86_64/os/Fedora/perl-URI-1.35-3.noarch.rpm

Okay, so now you got that new RPM file. You’ll need to add this to the internal list of RPMs (I don’t even know what it’s called). That’ll take care of the error message mentioned above.

rpm -i perl-URI-1.35-3.noarch.rpm

You might get a warning after inserting this command. Don’t worry, I’ve seen it too and yet the world didn’t implode. So ignore that Try installing subversion again using the following command:

yum install subversion

It will ask you if it’s okay to download all this stuff. Of course it is. Type ‘y’ and hit enter to watch the server work away. You should end up with a ‘Complete!‘ message in the end. If you see the ‘Complete!‘ message: It’s okay to feel happy about yourself. You have now subversion running on your server. Or at least a client (from what I got). Getting closer!

Actually installing the RED5 server

Source

It’s finally time to get down to business: RED5. This is why we’re here!
Let’s make sure we’re in the right folder:

cd /usr/src

Let’s get the RED5 source:

svn checkout http://red5.googlecode.com/svn/java/server/trunk/ red5

This will fetch the complete Red5 source and save it in a new folder called, red5 (so in /usr/src/red5)
Now that we have the source, let’s move it to /usr/local/ using

mv red5 /usr/local/

Now let’s dive into the red5 source folder

cd /usr/local/red5

This is the folder where all the source files reside. From here on, we prepare and build the red5 source… This should be interesting. Run these commands one at a time:

ant prepare
ant dist

There’s a (I think the scientific term is) crapload of text going to scroll across the terminal window. Don’t freak out… Just enjoy the show. This is where you call your friends and make them watch the screen as the mass of text freakishly scrolls over your screen. This makes you look very smart. It also makes you look nerdy, but that’s okay. You kind of are… You _ARE_ in fact building a RED5 server… Ohwell… Being a nerd is cool. We can do mighty cool stuff. Let’s wait for the build to complete. After a few minutes you should end up with the last line in your terminal window looking like this:

BUILD SUCCESSFUL

That’s good news! This means that you now have a working RED5 build!
Let’s copy the conf directory from the dist folder to the current directory. (Don’t ask me why… Turns out this is important)

cp -r dist/conf .

Okay, so right now we have a build of the RED5 server. As far as servers go: This one should be ready to rock. Let’s check this out!

./red5.sh

You should get lots of more text scrolling across the screen (again, looks so harcore!). What this does is, it runs the RED5 server. If you wanna make sure your server is actually running, you should be able to see the webroot of Red5 when hitting your server at port 5080 (yourserver.com:5080)(watch the firewall Add ports 5080 and 1935 to the whitelist)
Note that the server is currently only running as long as you keep that terminal window open. Once you close it RED5 stops running. Let’s make sure RED5 can run on its own from now on. Hit CTRL+C to stop the process. (if you visit yourserver.com:5080 again, it should tell you the browser can’t open the page at that address)

Service

We will create a little service script for RED5. Let’s start here:

vi /etc/init.d/red5

You’ll be dropped into vi, a basic UNIX text editor.
Here we will write down the init script that will give us a simple API to start, stop, restart the server and get the status of the server.

Enter the following script into vi. Note: Copy pasting might be buggy, so first copy/paste this script into a local texteditor and make sure all quotes are normal quotes. I ran into this problem. For easy measure: You can download the script here. This version is copy/past-safe

#!/bin/bash
# For RedHat and cousins:
# chkconfig: 2345 85 85
# description: Red5 flash streaming server
# processname: red5
# Created By: Sohail Riaz (sohaileo@gmail.com)

PROG=red5
RED5_HOME=/usr/local/red5
DAEMON=$RED5_HOME/$PROG.sh
PIDFILE=/var/run/$PROG.pid

# Source function library
. /etc/rc.d/init.d/functions

[ -r /etc/sysconfig/red5 ] && . /etc/sysconfig/red5

RETVAL=0

case “$1″ in
start)
echo -n $”Starting $PROG: ”
cd $RED5_HOME
$DAEMON >/dev/null 2>/dev/null &
RETVAL=$?
if [ $RETVAL -eq 0 ]; then
echo $! > $PIDFILE
touch /var/lock/subsys/$PROG
fi
[ $RETVAL -eq 0 ] && success $”$PROG startup” || failure $”$PROG startup”
echo
;;
stop)
echo -n $”Shutting down $PROG: ”
killproc -p $PIDFILE
RETVAL=$?
echo
[ $RETVAL -eq 0 ] && rm -f /var/lock/subsys/$PROG
;;
restart)
$0 stop
$0 start
;;
status)
status $PROG -p $PIDFILE
RETVAL=$?
;;
*)
echo $”Usage: $0 {start|stop|restart|status}”
RETVAL=1
esac

exit $RETVAL

Once you’ve pasted the text, hit ESC. Then type the following to save and quit vi:

:wq

On the bottom of the screen the ‘:wq‘ should appear (in a status bar style fashion)
Hit enter. Vi should close and the terminal window should look like before. To make sure you saved the init script correctly, just do this once again:

vi /etc/init.d/red5

You should now see the script you pasted earlier. If you don’t, you haven’t saved the script before properly. Go back a few steps and try again. If the script got saved, just enter the following to close vi again:

:q

Since this is unix land, we need to make sure this init script has permissions to actually be executed. Let’s do this! Do it using chmod, like this:

chmod +x /etc/init.d/red5

Now we should be able to start red5 by using this script. Give this a shot

/etc/init.d/red5 start

If your server responds by writing starting Red5: [ OK ], you’re golden. Let’s check the status!

/etc/init.d/red5 status

You should see something like

red5 (pid 11232) is running...

This means that the RED5 server is running on its own. We could close this terminal window and the RED5 server would stay up and running. That’s looking mighty good, right!?
However, whenever we reboot the VPS, the RED5 server won’t start by itself…yet. You know where I’m going with this, right?
In order for RED5 to start when the server boots, we need to do some chkconfig magic. First we need to add the RED5 service to chkconfig:

chkconfig --add red5

Now we need to tell chkconfig that red5 should start asap when booting:

chkconfig red5 on

That should do it… Red5 is installed, you have a simple way of restarting the RED5 service and it starts as soon as possible whenever the server starts. I’d say that’s all we need. Let’s have a little applause for yourself. You did it! You have RED5 running on your server! Now go and have fun with it

Thank you

I think I (= we) should thank a lot of people and communities for what has just been done. All of these apps, binaries, sources and files have been shared for your freedom of using, experimenting and building apps with it. You didn’t have to pay anything for it. You just had to figure out how to use it. A little bit of gratitude is well in order.

At the same time I want to give credit to all of the people who published tutorials and manuals on their own site about how to install RED5 and other apps needed for this to work. Listed below are all the sources I referenced in order to compile this complete guide to RED5-awesomeness.

• http://blog.umbralechoes.com/2010/09/13/how-to-install-red5-0-9-1-on-centos-5/
• http://opensource.become.com/apache/ant/binaries/ 
• http://linuxwindowsmaster.com/how-to-install-subversion-client-on-linux-server/ 
• http://code.google.com/p/red5/source/checkout 
• http://www.sohailriaz.com/how-to-install-red5-server-on-centos-53/ 
• http://www.cs.colostate.edu/helpdocs/vi.html 
• http://linuxcommand.org/man_pages/chkconfig8.html

The workshop I wrote is about how to make a basic image viewer in Flash. I explain how to load an XML file, interpret the data and load the corresponding image depending on what button has been clicked.

Anyway: A few pictures! (Yes, I’m very proud…. How can you tell?)

And they featured a few of my pictures on Flickr in the magazine too! I’m really proud ^^

Anyway: I hadn’t heard about Publish before, so I was pretty curious on how they would bring the content. But now I’ve got the October issue I must say: The magazine is great. Definitely something to look into if you’re looking for a Dutch magazine focussed on digital creatives.

Some time ago I started looking into the wonderful world of ‘Time-lapse‘. I really found it intriguing and I wanted to do something like that myself. So I started experimenting around, and soon people asked me how I actually do this, so here goes…

Let me start with a disclaimer: I’m still experimenting to find the perfect workflow, and figure out a lot of stuff. If you got any suggestions to make: Don’t hold back

Equipment

Recording a time-lapse is pretty easy, but you do need a few (pretty damn important) items in order to do so.

Digital camera

I am using a DSLR (Sony Alfa 200). This allows me to take pretty cool pictures (sometimes impossible to capture with a video camera). If you would like to use a photo camera as well, you’ll have to make sure it comes with an intervalometer.
Some cameras (like the Sony Alfa 200) don’t come with such a feature. I had to buy a shutter remote that allows this kind of functionality. 45$ is not too expensive in my opinion.

If you’d like to use a video camera to shoot your footage, make sure you’ve got enough storage capacity. Depending on the time and quality of your recording 8GB might only be enough for 60 to 90 minutes. Seen as a time-lapse video only becomes intresting when a long timespan is shown in a few seconds/minutes, using a video camera might be a bad decision.

Tripod

A tripod or a steady surface where you can leave your camera for a few hours. You don’t want your camera to move randomly. This creates a pretty annoying shaking effect (which in most cases is unwanted)

Getting ready

Recording a time-lapse takes time. A lot of time. At least a few hours. Nonetheless setting up your stuff is 90% of the job.

Subject

Basically time-lapse is about evolution. Making changes visible which normally are overlooked. That is what makes time-lapse videos interesting.
Whatever your subject will be, you’ll want your viewer to watch it during a few seconds or even minutes. Showing a steady, almost unchanged scene during half a minute isn’t really entertaining. Choose an interesting subject that evolves during the period of recording. Choose something like a flower standing in front of window, and shoot it from midnigh to midday. You’ll see a beautiful evolution (because the flower is moving towards the sunlight). Record night-to-day shots: watch the night explode into light and day, and see how the city wakes up. Really amazing stuff.

Settings

Depending on the shot you’re going to make, you’ll have to set up your camera differently.

Shutter speed

Especially at night, setting up the shutter speed correctly results in amazing stuff. I usually set mine to 15-20 seconds. That allows a lot of light to come in; something which is nearly impossible to imitate with a video camera. Not to mention the trailing lights of moving cars.

Aperture

I actually don’t really mess around with the aperture a lot. When doing day-to-night/night-to-day shots I set this to AUTO in order to autmatically adjust to the lighting (which is constantly changing). Don’t set this to auto if you’re not expecting any big changes of lighting.

Auto-focus

Absolutely disable this. Set it to manual focus and adjust it for your shot. Otherwise you’ll end up with a constantly changing focus in the resulting video.

Anti-shake / SteadyShot

Disable this. Since you are using a tripod or a steady surface, your camera isn’t moving. Therefor no correction is needed. If you enable this during the recording, your camera might think some pictures need correction which will result in unwanted changes in some pictures.

Other settings

Anything that can be set to auto: set it to manual. Everything.  You don’t want your camera to change its mind on something all the time. White balance, dynamic range, ISO-speed, set them all to a fixed setting that fits you best right from the beginning. It’s a bit more work to get everything right, but once set every other shot will be taken exactly like it. And that is very important because the eye of the viewer is unforgiving. Even at 25 frames per second, the eye notices any unnatural changes that shouldn’t be there.

Location

Make sure the view of the camera stays clear of people walking right in front of it.
If you are shooting from behind a window at night, make sure the room stays darkened. You don’t want your shot to be messed up by the reflection of your room in the window

Shooting the time-lapse

Alright, you’re set! Let’s go… No, wait. No quite yet…
Before starting you should think about the following:

1. How much time will you be recording (the time between the first picture and the last one) (Example: 6 hours = 6 * 3600 seconds = 21600 seconds)
2. How long do you want your resulting video to be? (Example: 45 seconds)
3. What framerate will you be using to play the video? (Example: 25fps)

These facts determine the length of the interval between each picture. In this case, we will be shooting 6 hours of footage and display it within 45 seconds at a framerate of 25fps. That means we need 1125 frames (25 x 45). Eventually we will be using an interval of 19.2 seconds (21600 seconds / 1125 frames).

Alright, set your intervalometer to the desired interval and push the start button. Now you can leave your camera alone during the time of the recording. This baby needs time… And you know what they say: Good things will happen to those who wait… So we wait

Processing the images

The 6 hours are over. The pictures are shot (or your camera’s battery was exhausted). Let’s put this in a movie!
I normally use Premiere to generate the movie. It allows you to import all of the images you just shot, and automatically generates a movie sequence. (For those who don’t know: Right click the library, click ‘import’, select the first image, and check the ‘numbered stills’ checkbox at the bottom of the dialog.)

Render it and share it with the world!
So now you know: Go ahead, play with it and feel free to share anything you created.

If you have any tips, tricks or suggestions of any kind: Please do share them. I’d love to learn more about this awesome technique!

Last but not least

A few examples of what I’ve created so far. (I’ll be adding more on my Vimeo account. Feel free to add me to your contacts )

Tijdens het ontwikkelen van de applicatie ben ik op het probleem gestoten dat ik data moest inladen die gebruikersspecifiek waren. Daarenboven zat er ook gevoelige data bij, die dus beveiligd moest verstuurd worden.

Mijn collega (die de server-side van het project ontwikkelt) stelde een aantal mogelijkheden voor waaronder basic HTTP authentication. Dit leek me een goede manier om het te proberen. Jammer genoeg bleven mijn zoektochten op Google naar duidelijke uitleg onbeantwoord. Door het samenrapen van een 3 tutorials en bronbestanden had ik het eindelijk door.

In feite is basic HTTP auth in Flash (Lite) echt doodsimpel. (Ik versta niet waarom iedereen daar altijd zo’n rond-de-pot-gedraai aan toevoegd.)

To the point: Stel ik wil XML inladen (mbv Actionscript 2). Dat doen we over het algemeen zo:

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = xmlComplete;
xml.load('http://example.com/somepage.php');

function xmlComplete(success){
	if(success){
		//logica komt hier
	}
}

Heel basic, zonder authentication. Niets nieuws, dus. Maar wat als somepage.php je om een gebruikersnaam en wachtwoord vraagt?

Dit kan blijkbaar heel makkelijk opgelost worden, door gebruik te maken van de addRequestHeaders method (die zowel voor de XML class, de webservice class, alsook voor LoadVars class beschikbaar is), en de Base64 class (download hier).

Je code ziet er dan als volgt uit.

var auth:String = Base64.Encode("myUsername:myPassword");
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = xmlComplete;
xml.addRequestHeader("Authorization","Basic "+auth);
xml.sendAndLoad('http://example.com/somepage.php',xml);

function xmlComplete(success) {
	if(success){
		//logica komt hier
	}
}

Er zijn 2 grote verschillen. In dit voorbeeld gebruiken we de addRequestHeaders method om de gebruikernaam en het wachtwoord aan de requestHeaders van het XML object toe te voegen. Deze moeten wel eerst via Base64 geëncode worden alvorens dat de basic HTTP auth deze ontvangt. Daarnaast gebruiken we ook de sendAndLoad method zodat de headers meegestuurd worden naar de server.

Het is dus op zich erg simpel, maar je zou bijna niet geloven hoeveel tijd ik gespendeerd heb om tot deze conclusie te komen. Ik kan het nog altijd niet geloven als ik naar de simpelheid ervan kijk.
Hopelijk kan ik enkelen hiermee wat tijd besparen.

De enige goede, en meteen ook veel effectievere oplossing, is een video-tutorial, of ook ‘screencasting’ genoemd.

Voor Windows zijn daar heel wat mogelijkheden waaronder Camtasia, Captivate en Quick Screen Recorder. Al bij al goede programma’s die op een aangename manier werken. Na wat trials had ik besloten bij Camtasia studio te blijven. De meesten die mij kennen weten ondertussen dat ik een tweetal maanden ben overgestapt op Mac. Software op een Mac valt echt onder het motto ‘Just Works’… maar dan moet je eerst software hebben. Het lijkt er wel op dat software developers voor Mac ofwel het gat in de markt niet zien, of dat de screen recording bedrijven gewoon Mac over het hoofd zien.

De juiste software om mooie screencasts mee te maken, waar de kijker rustig kan volgen en waar de kwaliteit niet moet onderdoen voor hun Windows varianten, is moeilijk te vinden.
Er zijn een aantal mogelijkheden – om eerlijk te zijn best wel veel- wat dit soort software betreft voor de Mac. Na wat zoeken heb ik Screen Mimic gevonden dat echt wel exact voldeed aan mijn eisen voor een goed screencast programma.

Screen Mimic is enorm simpel qua gebruik: Start het op, stel in hoe groot je opname-gebied moet zijn, en of het moet meevolgen met de muis. Daarna neem je je video op. Eens je klaar bent kun je kiezen of je exporteert naar een SWF (Flash Movie), FLV (Flash Video) of Quicktime. Je kunt kiezen om het huidige audiospoor te gebruiken (Standaard was dat bij mij de microfoon) of om een extern bestand te gebruiken (vooraf opgenomen stem om de videobeelden te begeleiden). Gezien mijn doel is om achteraf gewoon een bestand te uploaden naar de server is het exporteren naar FLV echt wel perfect.

Screen Mimic is een Universal Application, en maakt dus volledig gebruik van het potentieel van de huidige Intel Macs. Een van de redenen waarom ik niet (zoals iedereen mij aanraadde) voor Snapz Pro X gekozen heb, is omdat de camera voortdurend in beweging is met de muisaanwijzer. Er is geen ‘dood vlak’ waarin de pijl kan bewegen zonder dat de camera meebeweegt. Bij Screen Mimic ligt dit anders. Ook neemt Snapz Pro meteen de screenshot functionaliteiten over. Dat zijn mogelijkheden die ik niet wil, en ook niet nodig heb. Uiteindelijk scheelt de prijs van Screen Mimic nog eens de volle 5$, dus was er voor mij geen twijfel mogelijk. De goedkopere software voldeed perfect aan mijn wensen.

Ik ben blij met mijn zoektocht (die toch wel enkele dagen heeft geduurd), en ik hoop dat ik binnenkort tijd vind om enkele tutorials op te nemen.

Alvast bedankt aan de mensen die tips gestuurd hebben

Onlangs werd op mijn schoolforum gevraagd hoe je nu een mail kunt verzenden vanuit Flash met AS3 (gezien de LoadVars klasse uit AS2 er niet meer is).
Toen besloot ik er een kleine tutorial over te maken, en die is er dan ook gekomen.

Tutorial: Mail verzenden vanuit Flash CS3

Veel plezier.

Vragen en suggesties zijn zeker welkom.

Een van de problemen waar ik al mee gekampt heb is het volgende:
Ik heb een externe USB schijf van 1TB groot. Deze gebruikte ik vroeger altijd op mijn Windows laptop. Het is dan ook maar normaal dat ik op die schijf een NTFS filesystem heb.

Het probleem is dat ik deze schijf nu wil gebruiken op mijn iMac. OSX kan echter alleen lezen vanop NTFS schijven. Vandaar mijn probleem: ik wil kunnen schrijven.
Op het internet heb ik wel oplossingen gevonden, maar geen van deze was echt volledig beschreven. Dat ga ik nu proberen te verbeteren

Eerst en vooral: Voordat je hieraan begint, maak een backup van de cruciale data. Normaal mag er niets mislopen, maar mijn ervaring leert dat Murphy een heel nuchtere persoon was.

1. Ontkoppel de NTFS USB Schijf van je Windows computer. Maak gebruik van ‘USB Apparaat uitwerpen‘! Als je gewoon de USB kabel eruit trekt zal de schijf nog door Windows gelocked zijn, en OSX zal hem niet kunnen mounten.
2. Download en installeer MacFuse.
3. Download en installeer NTFS-3G.
4. Herstart je computer.
5. Als je aangemeld bent, mag je de USB device pas inpluggen.
6. OSX mount de schijf: als je ‘Toon info’ aanklikt bij de schijf zal je bij de rechten zien staan: Read & Write

Ik ben geen Mac-Expert, dus als je vragen hebt kan ik geen antwoord garanderen. Ik sta zeker open voor suggesties, of opmerkingen.

Ik hoop dat ik jullie hiermee iets kon helpen

Om de tut te volgen heb je alleen een text-editor nodig (Notepad is al genoeg. Ik gebruik Dreamweaver ). Een Flashmovie kun je tijdens de tutorial zelf downloaden.

Basis kennis van HTML en ‘weten wat de Canvas in Flash is’ is vereist.

Tutorial:

We willen een Flashobject in een HTML pagina laten weergeven, en de onderliggende HTML gebruiken, om het achtergrond kleur te bepalen van het geheel.

Maak een nieuw html document aan en sla het op als ‘index.htm’ .

We willen nu kunnen bepalen waar we onze Flash willen laten weergeven. Hiervoor maken we een DIV object aan in HTML waar we later onze Flashmovie inladen.

Voeg dit toe aan de BODY in je HTML:

[html4strict]<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>[/html4strict]

In bovenstaande regel zie je meteen ook wat CSS staan. Dat is mijn manier van werken als ik iets wil centreren in het browservenster. Meteen ook een achtergrondkleur ingesteld oor deze DIV. #FF0066 for a better world
Om verder te gaan willen we nu (op een verantwoorde wijze) Flash in deze DIV gaan laden.
Mensen die Microsoft Internet Explorer 6 of Windows Internet Explorer 7 gebruiken zijn ongetwijfeld al op websites gestoten waar men eerst op een Flashobject moest klikken om het te activeren. Dit is een kwestie waar men veel naar verwijst als ‘Het Eolas Patent‘. Het gebeuren rond Microsoft en Eolas had als gevolg dat alle ‘ActiveX objecten‘ in de Microsoft browsers eerst moesten geactiveerd worden. Dit valt op te lossen door SWFObject of andere JavaScript oplossingen te gebruiken. Het fijne hieraan is dat we meteen ook verantwoorde markup in onze broncode hebben.

Download SWFObject.js en zet het in dezelfde map als je index.htm bestand.

Als de HTML pagina geladen wordt moet de browser weten dat we het SWFObject.js bestand willen gaan gebruiken. Dit doen we door de volgende tag in de HEAD-tag van ons HTML document te steken.

De volgende regel moet in de HEAD van je HTML document.

[html4strict]<script type=”text/javascript” src=”swfobject.js”></script>[/html4strict]

Nu hebben we nog een Flashobject nodig dat we in onze DIV willen laden.

Download deze Flashmovie en unzip deze ter hoogte van je index.htm. Je .SWF bestand staat dan in dezelfde map als je index.htm bestand.
Nota: Deze Flashmovie is niet door mij ontworpen of gemaakt. Ik eis geen rechten op.

Nu brengen we onze Flash en de DIV samen, door gebruik van SWFObject.

De volgende code komt onder de DIV in onze HTML.

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we dit resultaat nu in een browser bekijken zien we een FlashMovie, met 3 actieve mannetjes, maar de achtergrond is nog altijd zwart (het achtergrondkleur ingesteld in Flash). Hiervoor gaan we een extra parameter meegeven aan het SWFObject.

Maak van:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

het volgende:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we nu naar het resultaat kijken zien we weer de 3 actieve mannetjes, maar deze keer is de achtergrond pink! Het achtergrond kleur is nu #FF0066, wat we ingesteld hebben in onze DIV.style

Dit is de volledige source code die je nu zou moeten hebben.

[html4strict]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Tutorial: Transparante Flash</title>
<script type=”text/javascript” src=”swfobject.js”></script>
</head>

<body>
<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>
<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>
</body>
</html>[/html4strict]

Het resultaat kun je hier downloaden of hier bekijken.

Ik hoop hiermee een aantal mensen mee verder te kunnen helpen. Veel succes en vooral veel plezier!