HTML5 video tag is broken on iOS8 in standalone apps

As reported by some people on stackoverflow:

… video playback is broken under iOS8 in standalone apps (HTML pages added to the homescreen). This bug also effects players like Youtube and JWplayer.

Tests showed that the video starts loading but the video.readyState property will never be higher then 2 (data for the current playback position is available, but not enough data to play next frame/millisecond).

Here is my fastpace test: – open it on an apple device with iOS8, add the site to your homescreen, start the standalone app and hit the start button. (compare it with a normal browser like chrome or something). It even works normal on iOS8 safari – it’s only the standalone apps that are effected.

For now it looks like we just have to wait for Apple to fix this – the update to iOS 8.0.2 did not fix the bug.

[Update: 2015/03/13]
Today I installed iOS 8.2 on my iPad2 and iPhone5. Unfortunately the bug is not fixed.


Profiling Adobe Air Files With Adobe Monocle in FlashDevelop

Today Adobe released the long awaited profiling tool “Monocle” at Adobe Prerelease. If you use Flashbuilder you can just compile your file with ASC 2.0 which is included in Flashbuilder with the parameter -advanced-telemetry.

But if you use e.g. FlashDevelop you have to utilise the Python script which is included in the download package of Monocle to make the swf file ready to be profiled by Monocle. Make sure you compile with the newest Flex/Air SDK (download here) and install the lastest Version of Adobe Air (namely version 3.4).

Then just compile your Air app so the swf file is generated in bin. Now use the python script like this: yourswf.swf

If everything works fine it says: Added opt-in flag with no password (as long as you have not added when).

Now package your app, install it, start Monocle and then your Air App. You are good to go to profile your app to the deepest!


Why Robotlegs

I want to point out some reason why Robotlegs makes sense. For someone who does not know Robotlegs: It’s an Actionscript 3 framework that builds upon the Model-View-Control (MVC) code design pattern. In short: You can use it to seperate the logic of your application (controller) from the data (model) and the representation of it (view).
You can find implementations of MVC in divers frameworks and programming languages – frontend and backend alike. When you google MVC pattern you can read tons of articles about the pros and cons.

Communication between Objects made easy

Beside MVC there are two other features I really appreciate about Robotlegs. First, it has a build in event bus. You should know events from Flashs Display List. Objects that get created if the user “does something” with the user interface (e.g. MouseClick). These event objects can bubble up the display list (the hierarchy of nested displayobjects like Sprite or Movieclip). Thats nice as it is but the events are bound to the displaylist. In Robotlegs the objects share an eventdispatcher they can utilize to listen for events or to send events into the framework – and that is not limited to user interface elements nor the displaylist. The benefit is: You do not need to know the actual object that broadcasts the event meaning you do not need a reference to the broadcaster in your listening classes. Just listen to the event bus and everything works.

Robotlegs helps to reduce code

The other thing is automated Dependecy Injection (DI). (Google it for more information). What automatic DI does is it provides your classes with their dependencies. If you have a Car class and that class needs an instance of the Motor class to work properly when getting instantiated Robotlegs does it for you. That means you do not have to write construction code to first get a motor, instantiate it, then create a car and put the motor in it’s constructor. Code instructions like that are called boiler plate code, code with the sole purpose to create and combine objects, code that has no business logic. Sure you have to instruct Robotlegs on startup what objects are created at what time but that is, compared to manual creation and combining, a lot less code.

And it does not make it harder to understand

Some say using frameworks like Robotlegs bloat your code and DI makes it hard to understand what happens where. But these arguments are even more true for individual code. I had to get back to my last bigger project built with Robotlegs after 2 month. I found it really easy to put in new functionality because of the seperation due to MVC and DI. I just wrote another class, pointed out that this class needs an instance of the model when instantiated and was ready to go. Without Robotlegs I would have needed to break apart my code base and look for hooks in my code to put the new class into place – more boilder plate code or even restructuring other classes.

Robotlegs or other frameworks are not made for very very small projects like banner advertising because they naturally put in some kB for the framework classes but if your project is not restricted in that way give it a try. It not only makes your code more flexible but makes you think about object communication in general.

Making Fonts Ready For Embedding In Flash AS3

This article describes how you can utilize the Adobe Font Development Kit to rename fonts that Flash does not recognizes because of whitespace in the font name.

If you want to embed a font in AS3 you have to use the font name in the [Embed] metadata. Very often the name of the font is not the same like the name the font is represented in programs like Flash. You can find out the real name but just double clicking it. In a windows environment the internal font viewer opens and you can read the internal name at the very top.

The problems start if the name of the font contains whitespaces like this e.g :
“Univers LT 47 CondensedLt”.

Flash seems to have a problem with fontname like this and will throw an error like:

font 'Univers LT 47 CondensedLt' with normal weight and regular style not found

I do not know any other way around that problem but renaming the font internally. You can use commercial products for this but there is a cost free solution by Adobe.

The Font Development Kit provides us with some useful tools around TrueType and OpenType fonts. The tools are command-line tools without any GUI but you will see it’s easy enough! Follow these steps:

  1. Download the FDK from Adobe (you have to read and agree to the Licence Agreement)
  2. Unpack/Install the package to the folder of your choice (e.g. c:\AdobeFDK)
  3. Put the folder into your Windows Invironment Path so the tools are available from anywhere

Setting Up Your Environment For Adoble FDK

1. and 2. are obvious. Here you can find out how to put your FDK folder into the invironment path from windows. Add the following folder to the windows path:
where [yourPath] needs to be substituted by your path on your harddrive (obvious, isn’t it?).

When you are all set open a command line window (Start-Execute: type in:cmd) and change to the directory your wrongly named font lives in. Now it’s time to test if you setup the path correctly. Type : ttx -h and hit enter. The help description of the tool ttx should be shown. If yes, your are ready to go – if not, check the steps above.

Export A XML Dump Of Your Font

Now you can start to export a xml dump of your font to change the internal name. Type: ttx [yourFontName] (e.g: txx ArialRegular.ttf) and hit enter. Your command window should print something like: Dumping ‘ArialRegular.ttf’ to ‘ArialRegular.ttx’. If you look in your directory you will find exactly that file. Open it with your xml editor of choice (not notepad or any other encoding unaware editor) and you see a hugh xml file.

Changing The Internal Name

If you want have a look around in the xml file to get a glimpse of what a font is made of. But at the end you need to find the position where you need to change the name to get it working in Flash. Search for the name your font is named in Photoshop or Flash. Something like: “Arial Regular”. (pay close attention to the space between the words, thats why AS3 cannot use it. Occationally you will find some places where it is already named like “Arial-Regular”, but as long as you can find places where the name has whitespaces in it and you have the feeling (based on the words arround that position) that this section of the xml file deals with the name of your font, change it to another name without spaces (e.g Arial-Regular). Search for ANY occurance. Afterwards save the file.

Saving The XML Back To A Font File

Now you need to bring that change back into your font file. (making a backup copy of your original file is not neccassary since the tool will not overwrite an existing font file but do it if you want). You can build a font with your changed xml settings by typing:

ttx -m ArialRegular.ttx ArialRegular.ttf

The option parameter m tells the tool to merge a given ttx file with a font file. It should say something like: ‘Compiling ‘ArialRegular.ttx’ to ‘ArialRegular.ttf’. Have a look in your folder and you see that there is another *.ttf (or *.otf) file – your newly created Arial-Regular. Doubleclick the font file and you should see the new internal name “Arial-Regular” in your windows font viewer.

Try to embed that font file and everything should work like a charm.