Adobe Flash – Content Creation & Localization Guidelines

This article was originally written in English. Text in other languages is provided via machine translation.

1. Purpose of this document
This blog is an outcome of an extensive study undertaken to identify best practices in localization of Flash based content.

Localizing structured content through translation management tools (like SDL WorldServer) can be a simple process. However unstructured content like text appearing in Flash videos is not easy. To add to it, tracking the efficiency of the linguistics becomes all the more difficult for unstructured content.

The blog covers all aspect of Flash localization including creating the English content the right way; so that it becomes localization “friendly”. This should result in cost and time savings; which is multiplied by the number of target languages should yield sufficient dividends.

2. Extraction of Text from a Flash animation

The difficulty of Flash animation localization depends on the globalization level of source – usually English Flash animations. During the localization process, all localizable text is extracted from the source animation, replaced by localized versions and localized strings are modified according to the style guides- including choice of font size, family etc. Occasionally localizable text is not included in the text layers but presented as graphics. Therefore the source animation has to be fixed in the first place to have it ready for localization. As a first step of Flash animation localization is to extract all localizable text from the animation. This is possible by using commercial tools such as “Flash Localization Tool” or renaming source .fla file to the .zip archive (just change extension from .fla to .zip) and extracting all .xml files from “LIBRARY” subfolder of the .zip. See Figure 1 and Figure 2 for more details.


Figure 1 – list of Flash archive with LIBRARY subfolder

Figure 2 – list of text layers in .xml format stored in the LIBRARY subfolder of a Flash archive

Flash native format is a zip archive with defined structure. Having a baisc knowledge of it enables one to easily extract all text layers from the animation. Once done, the only task remains to locate the text within the extracted .xml files and provide the translators with .ini file (if the translation is to be completed by using Trados CAT). Text layers in .xml files can be found surrounded by <characters>Your text</characters> XML tags.
The XML stores the information about font size, family and style (besides storing the localizable text). Most of this information like font family can be easily modified for all text if source font does not support the target language alphabet. For more details about Flash XML file please see Figure 8.

Best Practice # 1:
Never modify texts within text layers with help of action script. It will be difficult to understand script.

3. Pseudo localization
“Pseudo localization” is a process to ensure the animation is ready for localization and all localizable texts is in the text layers only. During this process all strings currently contained in text layers (.xml files) are replaced by pre-defined string, e.g. by “X”. Original .xml files in the LIBRARY subfolder are replaced by modified ones and when this action is completed, render.swf should be played back in Flash player. By playing these renders it is possible to locate any remaining text which was not pseudo localized for various reasons.
Text originally present in the text layers is displayed as “X” in this render. In case there is still any readable text it usually comes from embedded video, graphics or an action script. One can find example of pseudo localization in Figure 3, Figure 4 and Figure 5.

Figure 3 – Example of pseudo localization. All strings except “What’s new” were changed to “X”. “What’s new” is a graphics in Flash animation and thus can’t be easily edited.

Figure 4 – Same screenshot as in Figure “3″ but now localized into Russian. As you can see also “What’s new” is correctly localized. In this case source was fixed and localizable graphical texts were updated to text layers.

Figure 5 – Another example of pseudo localization. Displayed asset is a screenshot from an application and the only editable text is in the upper right corner. In this specific case, it was decided NOT to fake it and leave it in English as the font size was too small

Best Practice # 2:
Apply Pseudo localization to find out any localizable text whichis not in text layers within Flash project. If your project has been globalized ever since the ideal way, pseudo localization can be skiped.

 

4. Text layers in Flash animation
There are many ways to insert text into Flash animation. For example, avoid inserting graphical text (letters as graphical objects) and work with text layers only. If this is the case, DO NOT break text into multiple strings, and keep it in one string only, unless specifically required. Any separation in multiple substrings will result intext segmentation inside .xml file and can lead to loss of context during translation and thus incorrect localization of it’s substring.
In Figure 6 and Figure 7, one can find text “Loyal customers like you save with special upgrade pricing. Adobe Photoshop Elements & Adobe Premiere Elements is now a perfect 10!”
This sentence is separated into two different text layers. Such separation will result into segmentation of strings in the .xml file as well and translator will see them as two separated strings without any relationship between them, see Figure 8.

Figure 6 – “Loyal customers like you save with special upgrade pricing. Adobe Photoshop Elements & Adobe Premiere Elements is now a perfect 10!” text separation into two substrings. On this figure, the first part is visible.

Figure 7 – Second part of text “Loyal customers like you save with special upgrade pricing. Adobe Photoshop Elements & Adobe Premiere Elements is now a perfect 10!”

Figure 8 – Representation of substrings in the .xml file. Every substring is enclosed in the <DOMStaticText> tag inside .xml file.

It is not recommended to split a string into shorter substrings but rather keep them in one text layer whenever possible. Advantages of this approach are:
1. Localized string is well ordered so that localized substrings do not need to be reviewed by native speaker after localization and postprocess.
2. String is not divided into shorter substrings inside .xml file.
Today’s version of Flash allows authors to keep strings with different font family, color, style, size etc. in one text layer. Additionally, there is no need to separate them into several text layers. Keeping source strings in one text layer helps translators and localization engineers to spend less time on translation and post-processing of localized strings in the animation. It also decreases the chance of issues related to word order. In Figure 9 you can find example of complex string (part of the text is in yellow with bigger font) in one text layer.

Figure 9 – Complex string in one text layer only. There is no need to put text in yellow into a separate text layer. With today’s Flash you can create such complex strings.

Best Pratice #3:
Keep the number of text layers within Flash project as low as possible. If any text formatting is required, do it only one text layer (as much as possible).

 

5. Embedded Videos
Many a times, Flash animations may contain embedded videos. These embedded videos can be easily found in Flash object library under “Embedded Video” type, please see Figure 10.
If there are any segments to be localized within embedded videos and only the render has been provided, it will be very difficult and time consuming to localize such strings. In special cases, when the video is carefully analyzed, some text can be “faked“ with small effort.
However, animated text (Figure 11) or static one with moving background is almost impossible to edit and in order to localize this type of source it is necessary to spend many hours to fake just one or two seconds of the final render. The source simply needs to be re-created which increases the effort manifold.
With editable video project file one can modify all text layers inside embedded video and prepare localized versions of those videos.

Figure 10 – Embedded video “soccer.flv” with animated localizable string

Figure 11 – Example of localizable text within the embedded video impossible to fake, text is animated

Best Practice #4:
Embedded videos with localizable texts within Flash project increase the time and effort for localization manifold.
The best way to do is extract all text from Video, localize it, replace all localizable texts and create localized render first. Without editable video file, the only (harrowing) option is to try to fake text within embedded video, which is usually impossible. So DO NOT embed text/assets in videos if you want to localize it. Provide assets and video separetely instead.

6. Screenshot Animations
One can also create an animation inside the Flash project from a series of screenshots. See example of screenshots series in Figure 12 and Figure 13. Text in the screenshots are localizable ones and a source .psd with editable text layer needs to be created initially. Once completed and the text is replaced with a localized version, screenshooting of the localized series can be carried out.
If you have source editable .psd available, please provide it to your localization engineer. Moreover, text effects used in the localized Flash will be identical with those in the source Flash.

Figure 12 – Screenshot series. You can see both preview of the screenshot and also sequence of screenshots in the Flash timeline

Figure 13 – End of the screenshot series in the Flash animation. Text “The Big …” is animated within the series and every screenshot adds one letter of the text into the animation.

Best Practice#5: For any localizable text within a graphics (graphical text), it is important to provide source English assets. If source editable asset is not provided, it has to be re-created by localization vendor first to be able to replace text by a localized version and create render for Flash project. During re-creation of editable source asset some effects can be overseen and hence missed in localized version.

 

7. Buttons & Active Layers
It is vital to keep all buttons with localizable texts as “Movie Clip” type in the Flash project and not to use mixture of different Flash types to simulate button functionality. If button functionality consists of more Flash types, it is very likely that during post processing, the engineers may unintentionally use incorrect alignment of these objects in relation to each other inside certain frame. As a result, this will lead to a functional impact on the flash file, and in some cases, rending it corrupt
An example of corrupted button is described in Figure 14. Here the button consists of graphical text in the yellow box and active layer (shown as a blue frame) which plays role of “clickable” area. You may observe that the box is not aligned with active layer and the left side of this button will not be clickable. Additionally, right side contains an overlapped area which is active which is not correct.

Figure 14 – Corrupted button “What’s new”. Active layer (blue frame) is not aligned with yellow box.

Creating buttons as “Movie clip” will avoid similar issues in Flash animations. Sometimes, modification of assigned action script is required as well.

Best Practice #5:
Active layers outside of button in Flash can lead into misalignment within localized version of Flash. It requires once to resize button and active layer objects with every change in the no. of text characters in the button. Buttons created correctly eliminate potential misalignment risks and decrease the number of button re-sizings by a significant number.

 

8. Flickering
In some Flash players, localized text can exhibit “Flickering“ effect i.e., text is moved by one or a few pixel to left, right, up or down when the cursor is hovered over it. See Figure 15 for more details.

Figure 15 – Flickering in detail – the image is composed from two screenshots of the same part re-captured after few seconds later to see one pixel position changes

The only way how to fix the „Flickering“ issue is to convert text layers within localized Flash project into curves and render into final format. Graphical text (curves) doesn’t show the “Flickering“ effect any more

Best Practice #6:
Flickering effect is visible in some players only. It is recommended to use Flash players without Flickering effect. Otherwise, localized text layers have to be converted into curves before rendering into final format. When multiplied by number of target languages, effort will turn out to be huge.

 

9. Acknowledgements/Credits

This document was prepared from an independent study done in Photoshop Elements 11 by Jakub Škrabal & Petr Knápek from Moravia, and Akulaa Agarwal & Manish Kanwal from Adobe.

Please note that it can be applied to any Adobe/Non Adobe projects requiring localization of text and other assets in Flash files. For any questions, please feel free to reach out to Akulaa Agarwal(akulaa@adobe.com) and Manish Kanwal (mkanwal@adobe.com).

Invoking ICU from Adobe AIR Applications (Part 2): using Flash Builder 4.6

This article was originally written in English. Text in other languages was provided by machine translation.

In my previous blog article http://blogs.adobe.com/globalization/invoking-icu-from-adobe-air-applications-2, I demonstrated using the AIR3 ActionScript Native Extensions feature to invoke ICU from an AIR application. I used the AIR developer tools to compile and build various components. In this article, I demonstrate the same using the prerelease version of Adobe Flash Builder 4.6. It is much simpler to do this in Flash Builder avoiding the cumbersome command line.

The prerelease version of Adobe Flash Builder4.6 has a new Flex SDK version 4.5.2, which has AIR3 integrated. Please download the sample files as follows.

You will need the following software to build an ICU extension for AIR platform.

1 Building ICU extension for Adobe AIR

Adobe AIR t native extensions, also known as ‘ane’ or ‘ANE’ files are archived packages. These consist of

  • ActionScript wrapper classes calling into external DLLs
  • The external DLLs
  • XML file describing details of external DLLs

The archived ANE files are used just like SWC libraries in integrating into an AIR application. In other words, ANE file is a library and it has public ActionScript APIs.

Covering all details about the ActionScript extension is too much for this blog article, but I will explain the steps to build this sample and run. Below are the sequential steps and commands.

1.1 Building Windows AIR ICU Extension DLL

1) The AirIcuExtensionWin folder has the Visual studio solution ‘AirIcuExtension.sln’. Open this in MS VS2010.

2) The file AIRIcuExtension.cpp has the necessary code needed to interface with Adobe AIR 3. It also has the wrapper routines calling ICU C functions.

3) This is a DLL project and the build output is AirIcuExtension.dll

1.2 Building ActionScript Library in FB 4.6

1.2.1 Building the ActionScript library

Create a new ActionScript Library project and name it AirIcuExtension. See the downloaded ActionScript FB4.6 library project.

1.2.2 Packaging ActionScript native extension

To package an ANE, you still need to do it in commandline. FB 4.6 does not have a feature yet to generate ANEs in the IDE.

Open the bin\AirIcuExtension.swc is a zipped archive. Open it using WinRAR or WinZip program and extract the library.swf file in the swc package into the AirIcuExtension\bin folder.

The folder src\resources contains file extension.xml, AirIcuExtension.dll and ICU dlls icudt48.dll, icuuc48.dll, icuio48.dll and icuin48.dll. The file external.xml defines the external library details to AIR runtime.

For simplicity, place the AirIcuExtension.dll, ICU dlls and extension.xml files in AirIcuExtension\bin folder. All these files are packaged into a zipped archive called AiricuExtension.ane using the following command.

C:\FB4.6\sdks\bin\adt -package -storetype pkcs12 -storepass <passwd> –keystore <AIR certificate> -tsa none -target ane AirIcuExtension.ane extension.xml -swc AirIcuExtension.swc -platform Windows-x86 library.swf AirIcuExtension.dll icudt48.dll icuin48.dll icuio48.dll icuuc48.dll

Using Adobe FlashBuilder4.6 or C:\FB4.6\sdks\bin\adt program, one can generate an AIR certificate.

The output is an archive file AirIcuExtension.ane in the AirIcuExtension\bin folder.

1.3 Building the Test program AirIcuExtensionTest.mxml

Now that we built and packaged the native extension package AiricuExtension.ane, we are ready to use this and call ICU services in a test program.

The folder AirIcuExtensionTest\src contains the test file AirIcuExtensionTest.mxml. The descriptor file AirIcuExtensionTest-app.xml has the details of native extension.

Flash builder4.6 has a new feature to link Flash applications with ANE files. As you see from the FB4.6 project properties ‘Flex Build Path’ command, there is a new tab for Native Extensions. Using ‘Add ANE’ button, add the AirIcuExtension.ane file present in the AirIcuExtension/bin folder as shown below.

Also see the ‘Flex Building Package’ command in the project properties, there is a new tab for Native Extension. Please make sure that the check box for AiricuExtension is On.

The output swf file AirIcuExtensionTest.swf is placed in the bin-debug folder.

1.4 Building AIR package for executing AirIcuExtensionTest

The final step is to package the above AirIcuExtensionTest .swf and AirIcuExtension.ane files into an AIR executable folder. We can do this in FB4.6 now instead of using tedious command line.

  • IN FB4.6, select AiricuExtensionProject and execute menu command Project->Export Release Build…
  • In the ensuing dialog, choose Signed native installer radio button. We can only create native installers as we are using OS specific ANE package.
  • In the Native Extensions tab, make sure that the AirIcuExtension.ane checkbox is On.
  • Finish creating the release build after entering the correct AIR certificate credentials.

The output of the above command is an installer AirIcuExtensionTest.exe. By executing it, you can install the test program.

2 Conclusion

The sample illustrated how to invoke ICU from ActionScript. The AIR ICU extension is easy to build using the upcoming AdobeFlash Builder 4.6 release. ANE is a great feature for AIR developers and AIR applications can make use of the platform or ICU provided globalization services.

Format date and time in non-Gregorian calendars

This article was originally written in English. Text in other languages was provided by machine translation.

Although the Gregorian calendar is the most used civil calendar, there are other calendars used in different countries and regions.

Islamic calendar is used in many Islamic countries and it has quite a few variances. Japan uses the imperial calendar which identify the year with an era name(年号, nengō) and a number. Thailand uses a calendar that counts in the Buddhist era.

With flash.globalization package, you can easier format a date in non-Gregorian calendars. See the code below.

Adobe’s Latin American user communities show off their talent and passion

This article was originally written in English. Text in other languages was provided by machine translation.

Recently I had the opportunity to attend two events organized by Adobe users in South America: Adobe En Vivo and Flash Camp Brasil.

Adobe En Vivo (Buenos Aires, Argentina)http://www.adobenvivo.com/argentina2011

Now in its fourth edition, “Adobe En Vivo” (‘Adobe Live’) was organized by Maximiliano Firtman and Mariano Carrizo, co-managers of ARFUG (Argentina RIA and Flex User Group). Hosted in beautiful Buenos Aires (Argentina), this well-attended event was targeted at Spanish-speaking developers and designers using Adobe’s tools and technologies in these regions.

Most event sessions focused on mobile development. Presentations covered topics such as how to get started with mobile development, game development, 3D development, multiscreen development, monetization, as well as content creation and management using Adobe tools. Most speakers were managers of Adobe user groups from throughout Latin America and Spain.

I had the pleasure of meeting and socializing with most of the event speakers. I was impressed by their mastery of Adobe tools and technologies, their presentation skills, and overall, their ability to work together in raising the profile of the Spanish-speaking Latin American community of Adobe users. This must be no easy feat, given that they come from 8 different countries.

Flash Camp Brasil (Maceió) – http://flashcampbrasil.com.br

Once again, beautiful Maceió, located in the tropical state of Alagoas in Northeast Brazil, hosted Flash Camp Brasil, a professionally-organized event led by Demian Borba, CEO of Action Creations and manager of the Jornada Adobe Brasil user group.

Some big industry names, from both Brazil and abroad, shared their expertise with the crowds here. This highly-publicized conference attracted many professionals from throughout Brazil, and featured sponsor stands, professional video makers and photographers, a user group stand, and even a space for attendees to unwind and play videogames.

I had the privilege to meet many Adobe Brazilian users, and I was impressed by their passion for Adobe and its products, and their energy. Also, I was surprised by a last-minute invitation to join John Koch in delivering the welcome keynote to an audience of aprox. 500, which proved to be an exciting experience.

If you haven’t attended one of these user-organized events yet, you should definitively consider it. It’s not only a great place to learn, but also to meet and network with industry peers. Check out Adobe’s groups site for the user group of interest nearest you, there you will find information about upcoming events.

I also want to acknowledge the great work by John Koch, Adobe Community Manager for Latin America and Asia, who invited me to these events, and who gives these communities enormous support and encouragement.

Leandro Reis,
Senior Program Manager, Globalization

How to create a localized DateChooser in your Flex app

This article was originally written in English. Text in other languages was provided by machine translation.

 

Xie Fang

By default the DateChooser in Flex shows the English UI. You need to set the dayNames and monthNames properties to localized strings so that it shows the language you want. But do you know that all these localized names are available in the flash.globalization package? Here’s how to get the localized names.

First, create a DateTimeFormatter object with the locale you are interested in the <fx:Script> section

Alternatively, if you feel more comfortable with MXML than ActionScript, you can use a MXML DateTimeFormatter in the <fx:Declarations> section.

Second, create a vectorToArray function for type conversion in the <fx:Script> section, we will explain a little more in the next step.

Third, in your <mx:DateChooser> component, set the dayNames and monthNames properties.


And since you are using the DateTimeNameStyle enums, you want to import them in <fx:Script>

Here, the getWeekdayNames and getMonthNames methods give the localized names as a vector of string. And vectorToArray function is used to convert them to array before assigning them to the DateChooser. The getFirstWeekday method gives the first day of the week for the locale. For example, many european locales use Monday as the first day instead of Sunday.

That’s it. Now run your app and you will see the DateChooser UI is showing in Chinese.

Change the locale to British English (en-GB) and Arabic, Saudi Arabia (ar-SA) to see how the locale changes the first day of week.

Think that this doesn’t save time than hardcoding? Such as:

It is true if you just need to localized to your language. But imagine you need to localize in multiple languages, or languages you don’t know, or you want language switchable by users at run time. Using flash.globalization is more scalable.

To learn more features provided by flash.globalization package, check out the ActionScript API documentation.