Karakter sets in Flash

In een vorige post hadden we het over custom fonts en speciale karakters in Flash. Maar welke karakters embedden we nu best?

Bij het ontwikkelen van onze projecten houden we zoveel mogelijk rekening met de gebruiksvriendelijkheid. Het is dus niet meer dan logisch dat de eindgebruiker een website of applicatie voorgeschoteld krijgt in zijn of haar eigen taal, of tenminste een begrijpbare taal.
Voor sommige projecten vereist dit het ondersteunen van een ander alfabet, zoals bvb. het Cyrillisch of het Grieks.

cs4-charsets-01
Om karakters in een movie te embedden, hebben we in de Flash IDE (in dit geval de CS4 versie), een knop bij de eigenschappen van een tekstvak. Deze opent een venster waarbij we 1 of meerdere karaktersets kunnen aanduiden, of zelfs aparte karakters kunnen intikken die we mee willen embedden in onze file.
In dit venster kunnen we duidelijk zien welke karakters een bepaalde set omvat.

Als onze tekst echter in meerdere, vreemde talen moet getoond worden, is het soms onduidelijk welke karakter sets we juist moeten embedden. Om dit op te lossen kunnen we op deze website een XML bestand laten genereren, aan de hand van een tekstbestand waarin alle benodigde karakters staan.
Dit XML bestand kan gebruikt worden als UnicodeTable.xml, of kan de bestaande UnicodeTable.xml aanvullen (aan te raden). UnicodeTable.xml is een bestand dat door de Flash IDE gebruikt wordt, en dat alle karakter sets definieert die dan in het embed-venster komen (zie bovenstaande screenshot).

De door Flash gebruikte UnicodeTable.xml kun je op deze locatie terugvinden:

  • Windows Vista: <boot drive>\Users\<gebruiker>\AppData\Local\Adobe\Flash <versie>\<taal>\Configuration\FontEmbedding\
  • Windows XP: <boot drive>\Documents and Settings\<gebruiker>\Local Settings\Application Data\Adobe\Flash <versie>\<taal>\Configuration\FontEmbedding\
  • Mac: <boot drive>/<gebruiker>/Library/Application Support/Adobe/Flash <versie>/<taal>/Configuration/FontEmbedding/

Voor je UnicodeTable.xml wijzigt, neem je best een backup.

Zoals je kan zien staat elke karakterset in deze XML gedefinieerd, d.m.v. een node glyphRange. Deze node heeft 2 attributen, namelijk name en id. De id node wordt niet visueel getoond in de IDE, maar moet wel een unieke waarde bevatten. De waarde van de name node is wat we te zien krijgen in ons embed-venster, geef je eigen karakterset dus best een logische naam.

Welke tekens juist bij een bepaalde set horen kiezen we aan de hand van range nodes. Elke glyphRange node kan één of meerdere van die range nodes omvatten. Een range node definieert een tekenreeks, aan de hand van de <a href=”http://en.wikipedia.org/wiki/Unicode” title=”Unicode op Wikipedia”>unicode</a> waarde van het 1e en laatste karakter in die reeks. Als voorbeeld gebruiken we de voorgedefinieerde karakter set ‘Numerals [0..9]‘

<glyphRange name="Numerals [0..9] " id="3" >
    <range min="0x0030" max ="0x0039" />
    <range min="0x002E" max ="0x002E" />
</glyphRange>

Als we één van de vele unicode tabellen bekijken, kunnen we aflezen dat de unicode waarde 0x0030 het cijfer 0 voorstelt, 0x0039 staat voor het cijfer 9, en omdat we een range definieren zullen alle karakters tussen deze 2 ook binnen deze reeks vallen. Zoals we zien is het ook mogelijk om een enkel karakter als reeks te definiëren, dit gebeurt hier met de punt (.) die 0x002E als unicode waarde heeft.

Bij wijze van voorbeeld heb ik een karakterset gemaakt die ons Latijns alfabet met alle speciale tekens omvat, alsook het Cyrillisch en Grieks alfabet. De regels in commentaar zijn dubbele regels.

<glyphRange name="Latin Greek Cyrillic " id="27">
    <!-- Uppercase [A..Z] -->
    <range min="0x0020" max ="0x0020" />
    <range min="0x0041" max ="0x005A" />
    <!-- Lowercase [a..z] -->
    <!-- <range min="0x0020" max ="0x0020" /> -->
    <range min="0x0061" max ="0x007A" />
    <!-- Numerals [0..9] -->
    <range min="0x0030" max ="0x0039" />
    <range min="0x002E" max ="0x002E" />
    <!-- Punctuation [!@#%...] -->
    <range min="0x0020" max ="0x002F" />
    <range min="0x003A" max ="0x0040" />
    <range min="0x005B" max ="0x0060" />
    <range min="0x007B" max ="0x007E" />
    <range min="0x02c6" max ="0x02c6" />
    <range min="0x02dc" max ="0x02dc" />
    <range min="0x2013" max ="0x2014" />
    <range min="0x2018" max ="0x201a" />
    <range min="0x201c" max ="0x201e" />
    <range min="0x2020" max ="0x2022" />
    <range min="0x2026" max ="0x2026" />
    <range min="0x2030" max ="0x2030" />
    <range min="0x2039" max ="0x203a" />
    <range min="0x20ac" max ="0x20ac" />
    <range min="0x2122" max ="0x2122" />
    <!-- Basic Latin -->
    <range min="0x0020" max ="0x002F" />
    <range min="0x0030" max ="0x0039" />
    <range min="0x003A" max ="0x0040" />
    <range min="0x0041" max ="0x005A" />
    <range min="0x005B" max ="0x0060" />
    <range min="0x0061" max ="0x007A" />
    <range min="0x007B" max ="0x007E" />
    <!-- Latin I -->
    <!-- <range min="0x0020" max ="0x0020" /> -->
    <range min="0x00A1" max ="0x00FF" />
    <range min="0x2000" max ="0x206F" />
    <range min="0x20A0" max ="0x20CF" />
    <range min="0x2100" max ="0x2183" />
    <!-- Latin Extended A -->
    <range min="0x0100" max ="0x01FF" />
    <!-- <range min="0x2000" max ="0x206F" /> -->
    <range min="0x20A0" max ="0x20CF" />
    <range min="0x2100" max ="0x2183" />
    <!-- Greek -->
    <range min="0x0374" max ="0x03F2" />
    <range min="0x1F00" max ="0x1FFE" />
    <range min="0x2000" max ="0x206f" />
    <range min="0x20A0" max ="0x20CF" />
    <range min="0x2100" max ="0x2183" />
    <!-- Cyrillic -->
    <range min="0x0400" max ="0x04CE" />
    <!-- <range min="0x2000" max ="0x206f" /> -->
    <range min="0x20A0" max ="0x20CF" />
    <range min="0x2100" max ="0x2183" />
</glyphRange>

Adobe Stratus (beta)

Met de lancering van de Adobe Flash Player 10, biedt deze nu ook ondersteuning voor een nieuw protocol dat door Adobe zal ingevoerd worden namelijk: rtmfp.

RTMFP, of voluit: Real Time Media Flow Protocol, is een nieuw protocol dat developers in staat stelt peer 2 peer communicatie op te zetten tussen 2 (of meerdere) flash player instanties.

Dit heeft vooral als voordeel dat de belasting op de server heel minimaal blijft, het verkeer gebeurt namelijk enkel tussen de clients. Voor een volledig overzicht van wat de voor-en nadelen kan je best volgende PDF lezen.

Nu wat heeft dit met ‘Stratus’ te maken? Wel Stratus is een service, die zoals de titel doet vermoeden, voorlopig in beta is. Dit is een door Adobe gehoste service die via RTMFP werkt. Dus iedereen die een Adobe ID heeft kan opteren voor een Developer Key en zo de functionaliteit testen.

Op Adobe Labs staat verder informatie over Adobe Stratus.

Het voorbeeld dat door Adobe meegeleverd is vond ik zeer onduidelijk dus voelde ik me verplicht een eenvoudige test/demo applicatie te maken.

De applicatie is een chat applicatie die de standaard flow illustreert maar daarnaast ook de mogelijkheid bezit om tot een maximum van vijf deelnemers op te nemen. Om te connecteren dient men twee instanties van de link to openen en deze door middel van de unieke ID die gegenereerd wordt bij het opstarten van de app met elkaar te laten communiceren (copy paste de unieke id van een client in het “Connect to client” input veld van de andere client).

Dit voorbeeld heb ik gemaakt in Flex (view-source.enabled = true) wat volgens mij de workflow een beetje vereenvoudigd. Het voorbeeld is voorzien van commentaar zodat het  duidelijk wordt welke stappen allemaal moet gebeuren.
Chat app

Opmerkingen:
De reden waarom de applicatie maar een totaal van 5 clients aankan is omdat de NetConnection.maxPeerConnections default op 8 staat, deze 8 zijn als volgt gedefinieerd:

  • 1 NetStream die luisterd naar inkomende connecties
  • 4 NetStream objecten die luisteren naar inkomende boodschappen van de andere 4 clients
  • 1 NetStream die verantwoordelijk is voor uitgaande boodschappen
  • 1 NetStream die wordt gebruikt om te connecteren op een andere client

Dit heeft een totaal van 7 streams echter als de 6e client probeert te connecteren creëert de andere client nog een Stream waarna hij zijn maximum aan streams heeft bereikt en dus de applicatie breekt.
Ook niet te vergeten voor RTMP te laten werken dient je netwerk uitgaand UDP verkeer toe te laten.

Niet te vergeten dat dit voorbeeld een puur technische test is op basis van de  Stratus service. Feedback is welkom!

5 years Marlon: win een reis naar Palermo

5years-gameHet is zover! Doe mee aan het 5 Years Marlon spel, en win een reis naar Palermo. Of een bezoekje aan een uitstekend Gents restaurant. Of een i-Pod Shuffle. Of lekkere wijn.

Doe mee en win! Het is echt spotgemakkelijk.