Now, the close button (beautifully designed I know) is just meant to close the lightbox and nothing else. It works fine on all the desktop browsers, on Android tablets and on the BlackBerry Playbook. However when I got around to testing the iPad I found that the close button was not working at all. I tried to set the z-index of the close button and the video player but that did not seem to help at all.

After searching around the web for a while I came across a Stack Overflow article that said to use -webkit-transform-style: preserve-3d on the video element. However that did not work either. I have attached the example code below.

CSS:

#video {
  position: absolute;
  top:0;
  left:0;
  width:940px;
  height:539px;
  background:#fff;
  display: none;
}
#video:target {
  display: block;
}
.btn-close {
  position: absolute;
  top:0;
  right:0;
  padding:20px;
  display: block;
  background-color: #fff;
}

HTML:

<p>
  <a href="#video" class="btn-cta">Watch Video Now</a>
</p>

<div id="video">
	<video width="940" height="539" controls>
	  <!-- MP4 must be first for iPad! -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"  /><!-- Safari / iOS, IE9 -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"      type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"       type="video/ogg"  /><!-- Firefox3.6+ / Opera 10.5+ -->
	</video>
	<a class="btn-close" href="#">X</a>
</div>

I believe it has something to do with the way the iPad uses Quicktime to control HTML5 video.

Has anyone experienced this before? I would like some insight on this.

UPDATE: After a bit of research I have found out that if you have the default controls on a HTML5 video component, then the iPad overrides all touch events in that area. It seems that the only way around this issue is to create your own controls for the video player. A little annoying I must say, but it looks as though this is your only hope. :’(

Step 1: Download the latest Air SDK

Now this isn’t really necessary if you have Flash installed already, however it is nice to make sure you are up to date with everything.
Go and download the latest AIR SDK from the Adobe site and extract it, or follow my tutorial on setting up the latest AIR SDK with Flash CS5.5.

Step 2: Step Up FlashDevelop

Open your FlashDevelop AIR project and go to the Project > Properties menu. Go to the Compiler Options tab and find the SWC Include Libraries section under Advanced.

Click the browse (“…”) button and enter the path to the airglobal.swc which for me is in my Flash install directory C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\AIR2.6\frameworks\libs\air\airglobal.swc then click OK, then Apply and then click OK to close the Project Properties box.

Step 3: That’s all folks!

What? You thought there’d be more steps?
That’s it! Now you have all the wonderful code hinting for developing in Adobe AIR.

Your Thoughts

Do you use FlashDevelop? Was this tutorial useful for you? Have you found another great tool to code your AS3/AIR projects? Let me know in the comments.

Step 1: Download the AIR SDK

Go to the AIR SDK site and download the latest version for your platform and extract it.

Step 2: Backup your old AIR files

Make sure Flash is closed and then browse to your Flash install folder. On Windows you can find it in C:\Program Files\Adobe\Adobe Flash CS5.5\, on Mac you can find it in Applications/Adobe Flash CS5.5/.
Change the name of the AIR2.6 folder to something like AIR2.6_Old, or just delete it if you feel like a rebel.

Step 3: Update to the new SDK

Rename the unzipped folder to AIR2.6 and move it into your Flash CS5.5 directory. Browse inside the AIR2.6 folder to AIR2.6/frameworks/libs/air/ and copy the airglobal.swc file. Then browse to Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/ and paste the airglobal.swc to overwrite the existing one.

Step 4: Update the config files

Browse to Adobe Flash CS5.5/Common/Configuration/Players/ and open AdobeAIR2_6.xml, AiriPhone.xml, and Android.xml in a text editor. Update the version attribute of the player tag from 11 to 13 and then save the file.
If you are having trouble saving the files, it is most likely that you don’t have permissions for those files. This happened to me. To fix this (in Windows) right click  in the folder and click properties and go to the security tab. Click the edit button and then click on your username. Then in the “Permission for Users” section click the check box that says “Full Control” and click OK. You should now be able to save those files without any hassle.

Now browse to the Adobe Flash CS5.5/AIR2.6/samples/ folder and open descriptor-sample.xml in your text editor. Update the namespace URL to version 3.1 of the SDK. So the namespace should now look like “http://ns.adobe.com/air/application/3.1″. Save the file and you’re done.

Although it will say Air 2.6 in Flash, you will actually be using the latest version of the AIR SDK.

Your Say

Was this easy to follow? Did you run into any issues? Let me know in the comments.

Anyway this week I thought I would install Ubuntu and try and get some apps setup that I just can’t live without. One of the programs that I have been using a lot recently and really really love is Sublime Text 2. If you haven’t tried it yet, you should. It really makes my programming life easier. Plus, it’s multi-platform so you can install it on Mac, Windows and Linux.

Although this tutorial is specifically for Ubuntu users, almost all of it can be used on both Mac and Windows too.

Step 1 : Download it (DUH!)

Since I like to keep my programs on the cutting edge, I suggest downloading the latest dev build of Sublime Text 2. Either grab the 32 bit or 64 bit version for Linux depending on your current system.

Step 2 : Extract it

Once it has downloaded you can either extract it using the terminal or just use the Archive Manager that is built into Ubuntu. I just used the Archive Manager to extract it into a folder in my home directory called Applications. And now you’re basically done. Just go into the Applications/Sublime Text 2 folder and double click on sublime_text. If you prefer to run things via the console then cd into the Sublime Text 2 folder and run

./sublime_text

Create a symlink

Now this is one part that I was having some troubles doing. The way that many people said to put the link to it into /usr/bin. However I found that I needed to create the link in /user/local/bin. Open terminal and enter the following:

sudo ln -s ~/Applications/Sublime\ Text\ 2/sublime_text /usr/local/bin/subl

You can make the name of the link almost anything you want really. So instead of subl you could call it slime or sublime.

Once this link has been created you should now be able to open sublime text via the terminal by just typing:

subl

This will open sublime text. If you want it to open with the current directory you are in just add a space and a dot at the end.

subl .

The awesomeness doesn’t stop there!

To add to the awesomeness that is Sublime Text download and install Will Bond’s Sublime Package Control. The easiest way to install it is by opening the console in Sublime Text and running this command:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

After it has installed close and reopen Sublime Text and now your can press ctrl + shift + p  and you can now start installing some awesome packages by typing install and pressing enter. This will load the latest list of packages available.

The first one I suggest installing is called Fetch which is brought out by nettuts. Fetch will help you download either single files or an entire package such as html5boilerplate. You can add pretty much any file you like.

Another great one that I have been using is Prefixr. Prefixr helps you add the the browser prefixes to your css. So, for example, you just need to type border-radius, run it through Prefixr, and it will add all the browser prefixes such as -moz and -webkit.

UPDATE
After some great comments on this post I thought I would add an update to include how to add a destop/launcher icon.

Adding a launcher/desktop icon

Create a new file on the desktop called sublime.desktop. You could create this file with Sublime Text if you like.
If you don’t have it open already, open it in Sublime Text and add the following lines to it.

[Desktop Entry]
Name=Sublime Text 2
GenericName=Text Editor
Comment=Edit text files
Exec=subl
Terminal=false
Type=Application
StartupNotify=true
MimeType=text/plain;
Icon=/path/to/icon
Categories=GNOME;GTK;Utility;TextEditor;

If you are using a different command to open Sublime Text then the one I have been using in this tutorial you can update it in the part that says Exec=subl. Download a nice icon for Sublime Text like this one, and add the path to it in the file here Icon=/path/to/icon. Save the file and drag it into your launcher.

And there you have it! Not only can you do a quick launch from the terminal, but you also have a nice user friendly launcher to open Sublime Text 2.

Your thoughts

Have you tried sublime text yet? Do you have any other packages to suggest? Let me know in the comments.

Allow myself to introduce…myself. My name is Ed Moore. I am a Flash and Web developer originally from Australia, however I live and work in the small city/state/country of Singapore. I currently work at an advertising firm doing a range of different projects, with both flash and html.

My main aim of this blog is to provide information as well as some tutorials on a range of different topics in web development, including, html 5, css 3, javascript, jQuery, flash and actionscript. My plan is to also create some video tutorials down the line as I am really a visual learner, however I will try and provide a written “transcript” of the tutorial as well.

If anyone has any topics that you would like me to talk about please let me know.