Android in Practice Shiny Metal: Applying Themes and Styles by Curtis Brenneman

Editor’s Note Dear Readers!

We are proud to introduce the June issue of Flash & Flex Developers magazine! This issue covers great deal of interesting topics especially on Andoid which seems to be hot and important topic lately. I highly recommend you to have a look at Android in Practice by Charlie Collins, Michael D. Galpin, and Matthias Kaeppler, and discover how to upgrade your standard Android system. Moving on to the Adventures in Actionscript by Huw Collingbourne, it is worth a while to get to know how to create interactive characters that can take and drop items found at locations in the game. After familiarizing with those two articles, we can move forward to see how to render items in Item Renderers in Practice by Jeremy Mitchell. I also recommend further articles written by professionals in Flash & Flex and graphics field. I hope that you will find the articles presented in this issue useful and that you will spend some pleasant time reading Flash & Flex Developers magazine. We put a great effort into this magazine collecting the best articles for our readers. We hope you will appreciate the content of Flash & Flex Developers magazine. You are welcome to contact us with your feedback. Enjoy reading! Best regards, Łukasz Kośka

Tip of the issue Smoothing bitmaps with jsfl

If you are creating code driven animations with bitmaps, e.g. rotating, or scaling bitmaps in your code, it is important to make sure that “allow smoothing” is checked off in the bitmap properties so that the images do not appear jagged. This can be a time consuming process, especially if you are using 3D animation rendered as many bitmaps. JSFL can provide an easy solution. Run this command: fl.outputPanel.clear(); var item _ array = fl.getDocumentDOM().library.items; var i = item _ array.length; while(i--){ var item = item _ array[i]; if(item.itemType == „bitmap”){ if(item.allowSmoothing

== false){ item.allowSmoothing = true;

} } }

Publisher: Paweł Marciniak Editor in Chief: Ewa Dudzic ewa.dudzic@ffdmag.com Managing Editor:Łukasz Kośka lukasz.koska@software.com.pl DTP Team: Ireneusz Pogroszewski Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Flex/ActionScript 101 Section Editor: Marc Pires marcpiresrj@gmail.com iPhone Development Section Editor: Ryan D’Agostino ActionScript in Action Section Editor: Huw Collingbourne Games Section Editor: Chris Hughes Contributing Editors: Csomák Gábor Proofreaders: Betsy Irvine, Patrick French

All rights to trade marks presented in the magazine are reserved by the companies which own them. Thanks to the most active and helping beta testers: Russell TangChoon, Lee Graham, Jassa Amir Lang, Ed Werzyn, Yann Smith-Kielland, Justus, Csomák Gábor, Kevin Martin, Charles Wong, Ali Raza, Almog Koren, Izcoatl Armando Estanol Fuentes, Lionel Low, Michael J. Iriarte, Paula R. Mould, Rosarin Adulseranee, Sidney de Koning To create graphs and diagrams we used company.

program by

Publisher: Software Press Sp. z o.o. SK ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing

Mathematical formulas created by Design Science MathType™

Software Press Sp. z o.o. SK is looking for partners from all over the World. If you are interested in cooperating with us, please contact us by e-mail: cooperation@software.com.pl

Distributing current or past issues of this magazine – without permission of the publisher – is harmful activity and will result in judicial liability.

Whilst every effort has been made to ensure the high quality of the magazine, the editors make no warranty, express or implied, concerning the results of content usage. All trade marks presented in the magazine were used only for informative purposes.

ATTENTION!

DISCLAIMER!

The techniques described in our articles may only be used in private, local networks. The editors hold no responsibility for misuse of the presented techniques or consequent data loss.

FFD magazine is available on iPad thanks to MONOGRAM Interactive, s.r.o.

06/2011 (24)

CONTENTS SPECIAL REPORT

FLEX DEVELOPMENT

BY LANCE SNIDER

BY JEREMY MITCHELL

06 Stock Assets in Custom Work Stock assets – whether they be code, design, audio, or photos – are tools that many designers and developers use to speed up and enhance their projects.

34 Item Renderers in Practice

INBRIEF

With the help of an Item Renderer, list-based controls can customize the appearance of the data provider’s data. In addition, the custom appearance can be controlled by conditional logic processed by an Item Renderer.

BY CSOMÁK GÁBOR

WEB DEVELOPMENT

ANDROID DEVELOPMENT

BY SEAN CAREY

08 News

10 Android in Practice: Shiny Metal: Applying Themes and Styles BY CHARLIE COLLINS, MICHAEL D. GALPIN, AND MATTHIAS KAEPPLER

Google has given developers the necessary tools to spice up their application UIs through a myriad of view attributes you can define or override for your views. As you can probably imagine, this can become a tedious and repetitive task, which is why Google added a theme engine to Android.

18 Android in Practice: Technique: The Action Bar BY CHARLIE COLLINS, MICHAEL D. GALPIN, AND MATTHIAS KAEPPLER

The Action Bar is an evolution of the menu idea. It has many of the same use cases, but it is more effective to use because it is more visible to the end user.

ACTIONSCRIPT DEVELOPMENT 24 Create Your Own Events BY SACHIN PATIL

While migrating AS 2.0 to AS 3.0 you can see you have lot of control on events. Then why to create your own event? […]. Custom event gives you power to control your own actions.

40 Mr Mixit

Mr. Mixit is mixing awesome jams for a screaming audience, but he needs help; some of his record labels have been broken apart, and users need to put them back together so they can be played.

BUSINESS DEVELOPMENT

44 Benefits of Using Document Management System BY IVAN MOJSILOVIC

Each company has its unique qualities: different business activities, the number of employees, costs, working environment, etc. but what all of them have in common is that they work with a lot of information necessary for performing their core business.

INTERVIEW

46 Interview with Luca Mezzalira BY FFD TEAM

48 Interview with Charlie Collins, Michael D. Galpin and Matthias Kaeppler – the Authors of Android in Practice BY FFD TEAM

ACTIONSCRIPT IN ACTION

28 Interacting with Game Objects BY HUW COLLINGBOURNE

This month Huw Collingbourne explains how to create interactive characters that can take and drop items found at locations in the game.

FLEX/ACTIONSCRIPT 101 32 In the Eye of the Storm BY MARC PIRES

Last month I presented some of the challenges, we faced during the development of Esus, this month I will continue my presentation with a list what I consider to be the most complex challenges that we may face.

06/2011 (24)

Sponsors of the Issue Influxis www.influxis.com ..........................................1, 2, 3

ActionScriptJobs.org www.actionscriptjobs.com ................................ 19

PlugrMan www.PlugrMan.com .......................................... 9

SapphireSteel Software www.sapphiresteel.com .................................... 35 MotoCMS http://www.motocms.com .................................. 39

Flash&Math www.flashandmath.com .................................... 11 Streaming Media www.streamingmedia.com/conferences/East2011/ ............................................................................. 15

Should Stock Assets be Used in Custom Work?

tock assets – whether they be code, design, audio, or photos – are tools that many designers and developers use to speed up and enhance their projects. That said, there’s a logistical, as well as ethical, question as to whether or not assets that someone else created belong in projects that you’re being paid to make custom. To answer these questions, as well as determine if these assets can help you, we need to look at your needs and expectations as well as the expectations of your clients. When it comes to custom design and development, every client has the same expectations – they care about cost, punctuality, and quality. Of course when I say quality, I’m referring to aesthetics and functionality, but in most cases that also includes uniqueness. How do you think your client would react if you delivered the most beautiful website they’d ever seen, but it looked just like their competitor’s site or a stock template sold to hundreds of other people? I’m guessing the great aesthetics and functionality would be overshadowed by the lack of uniqueness, making the overall product poor in the eyes of your client. As the developer, you have expectations too. Primarily, you need to make sure the hours you spend working for your client are worth it. Freelancers know better than anyone the truth of the old adage time is money. If you’re not producing, you’re not earning. On the converse, when you’re able to work quickly and efficiently, it’s reflected in your earnings. So the question becomes, when you need to balance costs, deadlines, quality, and your precious time, should you use stock and other assets you didn’t create? If so, when is it appropriate and how can you make it most effective? Let’s first determine the reason the client hired you. Maybe it’s because you’re a big name and using you gives them credibility. How many people buy paintings not because they’re beautiful, but because of who painted them? If that’s why you were hired, you should definitely create everything from scratch. To do anything else would be a misrepresentation. For everyone else, they probably hired you because they’ve been given some indication that you’d do a good job. Maybe they looked at your portfolio or heard good things from one of your previous clients. If that’s the case, you can safely

assume that the overall quality is more important to your client than who created it. Does using stock conflict with the client’s expectations? That really depends on how you’re using it. If you say it’s custom work and you buy a template, customize it a little, and pass it to the client, then yes, it does conflict. By no means is that custom work. Let me give a realworld example of an appropriate use of stock: A while ago I was contracted by an agency to do all the ActionScript work for the website of a major deodorant company. One part of the project involved a quiz with some silly questions.You answered the questions and it told you which deodorant was right for you. If you gave just the right combo of particularly sissy responses, instead of telling you which deodorant you should use, it would mock you as kittens and flowers rained down the screen. The code to make the kitten storm work was nothing more than a simple as3 particle creator. It was certainly something I could have done myself. However, the more quickly I could get the job done, the more money I would make, and the happier the client would be. I ended up buying a pre-made component for $8, spent about 5 minutes customizing it to my needs, and it was ready to go. I ended up using 4 pieces of stock in the project, saving me several hundred dollars worth of work, while allowing me to deliver a completely custom website that the client was thrilled with. Did this example conflict with the client’s expectations? Let’s see: Did it cost them any more? No. Did it slow down the project? No, it did the opposite. Was it still unique? Absolutely. From the client’s perspective, it was no different than if I had written the code myself. Really, using stock is no different than using any other preexisting code library, like TweenMax or Papervision3D. I’m sure the client would be far more upset at you charging them for the time you spent reinventing the wheel than using something that already existed. The biggest pitfall to avoid is changing the overall feel of your project in order to incorporate stock. It’s rarely a good idea to sacrifice consistency to save time. If you try to fit a square peg in a round hole, it’s going to be glaringly obvious. If you’re going to use stock, make sure it can be modified to perfectly meet your needs. Many game developing companies like to use stock

06/2011 (24)

3d for background elements and items that are more tedious than difficult to create. Why waste time and money paying your top talent to model the buildings that are a hundred yards away? Why not buy them premade from any number of stock 3d agencies and save your top guys for the game elements that the user will actually be focusing on. The same concept applies to Flash and Flex development. If you’re a great developer, why waste your time creating yet another contact form or simple video player? Save your time for the stuff you actually want to be developing. Using stock subtly is especially easy when it comes to code. First off, you don’t need to worry nearly as much about it being visually unique. Even if it doesn’t match your look perfectly, you can modify it to fit your needs. Writing code can be incredibly time consuming, even when it comes to the simplest of things, so using stock can be a huge time saver. I’ve found that I typically breeze through the difficult code and tend to get caught up for hours on the easy stuff. Even removing a small portion of the manual coding, like in the kitten example above, can save you a surprising amount of time. We’ve all had the experience where we’ve finished a project with plenty of time to spare, only to get a frantic a

06/2011 (24)

email from the client just hours before launch needing a critical change. We’ve also all worked feverishly through the night to try to accommodate said client. This is where stock can really be a life saver. Rather than trying to come up with new, untested code at 4am, you’re able to buy something pre-made to incorporate into your project to come through for your client. I’ve even had cases where stock was used as a temporary, last-minute bandaid, only to be replaced over the next few days with something that fit a little better. Stock is great in times of emergency. When used properly, stock can be an incredibly effective tool to help speed up your work, thus saving you money, while still delivering a high-quality, custom product.

LANCE SNIDER Lance Snider is a developer with over 10 years of experience working both in house and as a freelancer. Though his specialty is ActionScript, he also develops in Unity, PHP, and Javascript. Lance now acts as the marketplace manager for Envato, a series of sites where users can buy and sell stock assets, including Flash, Unity, 3d, Wordpress, After Effects projects and more. i

IN BRIEF

Don’t Miss Adobe Developer Week (June 20-24)

Calling all developers! Interested in building apps that run seamlessly across the Web, desktops and mobile devices for Android, BlackBerry Tablet OS and iOS with one tool, a common framework and a single codebase? Then look no further than Adobe Developer Week! Taking place June 20-24, this weeklong event will feature a series of free, live webinars via Adobe Connect hosted by Adobe technology experts. Learn how to take advantage of the newly released features and capabilities in Adobe Flash Builder 4.5, Flex 4.5, and Adobe’s enterprise software solutions to develop and deploy rich applications across multiple device platforms. Whether you’re new to Flash Builder/Flex development or a seasoned pro, there are 17 sessions for all skill levels and interests (e.g. Java, PHP, migrating from earlier versions of Flex, enterprise development and more). Register now to see live demos and chat with the experts during interactive Q&A sessions. For all the details and to sign up for webinars, visit the Adobe Developer Week site. source: Adobe Flash Platform Blog

SourceMate 3.0 Released

If you used SourceMate for Flash Builder 4 you’ll be glad, because they just released SourceMate 3 and it looks like it’s going to be very helpful for Flash Builder 4.5 users. Definitely check out the full feature list but some of the ones that look most interesting to me are: • • •

Generating ASDoc Comments The TODO/FIXME enabled in the Task pane All of the refactoring support

And the localization features look really helpful for anyone building applications that need to make use of resource bundles for localized apps. source: Ryan Stewart

Adobe Flash Player 10.3 is live, and some Incubator refreshments!

Flash Player 10.3 is live on desktop and Android, introducing many features such as: • • •

– Removes all the children from a container. MovieClip.isPlaying – Informs you if the MovieClip is currently playing. Large Bitmap Support – No limitations in BitmapData sizes! Yes, really cool

•

and Sound.loadPC – Allows you to inject compressed or PCM sound stream to the Sound object. Added matrix goodies, with : Sound.loadCompressedDataFromByteArray MFromByteArray

• • • • • •

Matrix3D.copyFrom()

Matrix3D.copyRawDataFrom(), Matrix3D.copyRawDataTo() Matrix3D.copyRowFrom(), Matrix3D.copyRowTo()

Matrix3D.copyColumnFrom(), Matrix3D.copyColumnTo() Matrix3D.copyToMatrix3D()

Adobe also released a new Incubator build introducing with new features such as: • • • • • • •

Async bitmap decoding G.711 audio compression for telephony H.264/AVC SW Encode for camera encoding Native JSON Support (JavaScript Object Notation) Pause/sleep/resume Event Garbage Collector Advice Secure random number generator

As you can see, there is some really cool stuff coming up. Adobe also fixed some stuff related to Molehill (bugs and little changes), and also fixed HW acceleration for Molehill in Chrome (it was disabled in the previous builds). Remember to use -swf-version=13 compiler argument to unlock the Incubator features and -swf-version=12 for 10.3 features. To author for 10.3 today, you will need also the 10.3 playerglobal.swc, available at http://download. macromedia.com/pub/labs/flashplatformruntimes/incubator/ flashplayer_inc_playerglobal_051211.swc. source: ByteArray.org

Flex 4.5 SDK, Flash Builder 4.5 and Flash Catalyst CS 5.5 Now Available!

Adobe released CS5.5 and the Flash community got several goddies with it. The most interesting part is that Adobe introduced a new subscription pricing plan which allows new and independent developers the option to try the CS5 Design premium edition for as low as $95 per month and the CS5 Master Collection for $129 per month. You already know what’s new in these builds (if not, read the previous issue’s news section). source: The Official Flex Team Blog

DisplayObjectContainer.removeChildren

News selected by Gábor Csomák

06/2011 (24)

ANDROID DEVELOPMENT

Android in Practice Excerpted from

Android in Practice By Charlie Collins, Michael D. Galpin, and Matthias Kaeppler In this article, based on chapter 4 of Android in Practice, the authors discuss Android theme development, which is tightly coupled to the application development and deployment and offers no mechanism to change an application’s theme unless the developer builds such functionality into the application. You may also be interested in…

For source code, sample chapters, the Online Author Forum, and other resources, go to http://www.manning.com/collins/

Shiny Metal: Applying Themes and Styles

et’s not beat around the bush; a typical stock Android application looks fairly unimpressive. Fortunately, Google has given developers the necessary tools to spice up their application UIs through a myriad of view attributes you can define or override for your views. As you can probably imagine, this can become a tedious and repetitive task, which is why Google added a theme engine to Android. First, we should get a common misconception about Android themes and styles out of the way; yes, you can deploy custom application themes for users to download and use but, first and foremost, Android themes are a tool for developers, not end-users. Many applications, such as the Firefox web browser, allow users to create their own themes and share them with others. That’s because Firefox’s theme engine is meant to be usable by end-users so it’s not exclusively open to the Firefox developers. That is typically not true for Android themes, because theme development is tightly coupled to the application development and deployment and offers no mechanism to change an application’s theme unless the developer builds such functionality into the application. So, what are Android themes and styles? Let’s focus on the last part first.

TECHNIQUE 1: Programming with style

You could, potentially, get a super-nifty looking application without writing a single style definition. You could. But would you want to? To understand the problem, consider this view definition: <?xml version=”1.0” encoding=”utf-8”?>

<TextView xmlns:android=”http://schemas.android.com/apk/ res/android”

android:text=”Hello, text view!” android:textSize=”14sp”

android:textStyle=”bold” android:textColor=”#CCC”

android:background=”@android:color/transparent” android:padding=”5dip”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

There’s quite a bit of noise. We have encoded a lot of information in this view definition that affects the view’s appearance. Does that really belong in a layout file? Layouts are about structure, not appearance. Plus, what if all of our text views are supposed to use the

06/2010 (24)

��

ANDROID DEVELOPMENT

same font size? Do we really want to redefine it for every single text view? This would mean that, if we were to change it, we would have to touch the code of all of the text views in our application.

Problem

Customizing view attributes (especially those that affect appearance) in your layouts leads to code clutter, code duplication, and generally makes them impossible to reuse.

Solution

Whenever you find yourself applying several related attributes directly to a view, consider using a style instead. A style is a surprisingly simple concept. DEFINITION A style in Android is a set of view attributes, bundled as a separate resource. Styles are by convention defined in res/values/styles.xml. If, for instance, we were to create a custom style for our text views, we could define any customized attributes in the style definition once, as seen in Listing 1. We took all the styling attributes from our view definition and put them inside a <style> element. A style is defined in terms of style items, each of which refers to an attribute of the view to which the style is applied. Styles can also inherit from each other: in this case, we’ve inherited from the default Widget.TextView style, which is semantically equivalent to copying down all attributes from the parent style to our own style. All attributes that are redefined in our style will overwrite any attributes of the same name that were defined in the parent style. Styles can be applied as seen in Listing 2. Note how we use the style attribute without the android: prefix. This is intentional – the style attribute is global and not defined under the android XML namespace. It is important to understand that styles are simply a set of view attributes bundled together. There are no type semantics; if you define attributes in a style and then apply the style to a view that does not have these attributes, the style will silently fail but you won’t see a corrresponding error. It’s up to the developer to design and apply styles in a meaningful way.

Discussion

Styles are really meant to alleviate two common design smells: for one, throwing code for defining appearance and code for defining structure into the same file is not a good separation of concerns. While you are building the screen layout, the actual styling is most likely done by someone who does not write application code.

Constantly messing about with the same source code files is almost like asking for merge conflicts during commits. (You do use a source code control system, don’t you?) Even if you take on both roles, a good separation of concerns helps to keep your code clean, readable, and easy to maintain. Speaking of maintenance, this brings us to design smell number two. Defining attributes for appearance directly in your view XML (or worse: in application code) makes them impossible to reuse. This essentially means that you will end up copying around the same style attributes over and over to other views of the same kind, which results in code duplication and proliferation. Code duplication is one of the worst engineering flaws a system can suffer from, and this is not exclusive to front-end development. It makes your code brittle and highly prone to regressions since every change you introduce must be performed not once but several times across different parts of your application. This makes maintenance and debugging a nightmare, especially when your projects grow big. A fundamental engineering principle, therefore, is never to encode the same information more than once in your application, which is commonly known as the Don’t Repeat Yourself (DRY) principle. Styles in Android help you to keep your view code DRY. You can pull out shared attributes from your views into a style resource, which can then be applied to many views while being maintained in a single point of your application. A question that remains is what can we actually style and which styles already exist so we can inherit from them? The answer is that anything defined in the android.R.styleable and android.R.attr classes can become part of a style, in other words, may be used as a value for a style item’s name attribute. Existing styles, on the other hand, are defined in android.R.style, Listing 1. A sample style de�nition for text views <?xml version="1.0" encoding="utf-8"?> <resources>

<item name="android:background">@android:color/ transparent</item>

</style>

</resources>

06/2010 (24)

Android in Practice

so anything defined in that class can be used as a value for a style’s parent attribute or even be applied directly to a view. As usual, underscores in the R class attribute names translate to dot-notation in view code so android.R.style.Widget_TextView_SpinnerItem becomes android:style/Widget.TextView.SpinnerItem. Now that you know about styles in Android, let’s take a look at the themes, as promised.

TECHNIQUE 2: Pulling it together with Android themes

We have already seen how to extract common view attributes into styles, but we’re still repeating ourselves. If we define a style for text views, we still have to apply the style manually to every single TextView. This is a clear violation of the DRY principle. It also opens new holes – what if we forget to apply the style to one of our views?

Problem

Bundling view attributes to styles is useful, but it’s only half of the solution. We still need to apply styles to all views that are targeted by the style. This should be done automatically.

Solution

The complete solution to this is – you guessed it – themes. Fortunately, explaining themes is fairly simple. Themes are styles. Yes, that’s right; it’s as simple as that. The only difference between a theme and a style like the one shown in the previous technique is that themes apply to activities or the entire application (which means, all activities in an application), and not to single views. The difference therefore is one of scope, not semantics or even structure. DEFINITION A theme in Android is a style that applies to either a single activity or all activities (in which case, it becomes the application’s global theme).

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/ apk/res/android"

android:text="Hello, text view!"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

#A Sets the custom style on this view

06/2010 (24)

<application android:theme=”@style/MyMoviesTheme” ...> ...

</application>

Listing 2. How styles are applied to views

style="@style/MyCustomTextView"

Since themes are styles too; they behave and are defined exactly like one (using the <style> tag). Since they are applied to activities, however, they take different style attributes than a widget style. You can identify style attributes meant for theme definitions by their Theme_ prefix in android.R.styleable. Let’s proceed and apply a theme to a sample app, MyMovies. We introduced the style concept using TextView, which is a very good example since it takes so many different attributes. In fact, we’ll show you another, even better way of cutting down on TextView attribute bloat. Our sample application doesn’t use many TextView elements so it would seem a little contrived to do that. Instead, let’s see if we can make our movie list look a little fancier. We want to have a background image for the application (something related to films) that will blend with the list. That basically means making its background transparent so that the window background shines through. We also want a couple of additional smaller changes such as rendering a fast-scroll handle. Listing 3 shows how we do that using a style definition. The theme definition shown in listing 3 (which uses the style element as well) applies custom styling to all ListView instances in the application and sets a custom window background (#1). The custom ListView style (#2) defines the attributes that all list views in this application will now share. We have defined a theme for our application, but we haven’t applied it to anything yet. Recall that themes may be applied to single activities or the entire application, so we need to tell Android what we want to style. Themes are applied in the manifest file using the android:theme attribute. If we were to apply it to a single activity, we would set that attribute on an activity element, otherwise we just set it on the single application element, as follows:

Simple, really. Figure 1 shows how MyMovies looks now that we have slapped some styling onto it. You can see how the window background is visible through the semi-transparent list view background. You can also see the fast-scroll handle at the right side of the list. You can grab it to scroll quickly, and it will fade out of your way when you stop scrolling.

Discussion

Just as you can define view attributes both in XML and in program code, you can also apply themes to an activity programmatically using Activity.setTheme. Nevertheless, this way of doing things is discouraged.

ANDROID DEVELOPMENT

It’s a good practice to do anything that can be done in the XML, and not in your application code. Calling setTheme will also only work before you inflate the activity’s layout; otherwise, the theme’s styles won’t be applied. This also means that you cannot simply change a theme on the fly (for example, through the click of a button), since you must restart the activity for it to have an effect. That covers the basics of defining and using styles and themes. Still, there are a few more things we need to tell you about. ListView is a complex beast and we’ll explain it right now. Styling the list views has a nasty pitfall that almost all developers new to Android come across.

TECHNIQUE 3: Styling ListView backgrounds

is a complex widget, and sometimes this complexity gets in your way when trying to change its appearance. In fact, we haven’t been honest with you when we showed you the code for the list view style in Listing 3, since it is lacking a setting that will prevent the style from being rendered correctly. If you try to apply a custom background or, as in our example, let the background of the window or another underlying view shine through, you may observe visual artifacts like flickering colors when performing scrolls or clicks on the list. On a related note, if you try to set its background to a transparent color expecting to see the widget rendered underneath the list, you’ll find that Android still renders the same old default black background. ListView

Problem

You apply a custom background (color or image) on a ListView but you don’t get the desired effect or get visual artifacts when rendering the list view.

you may encounter when working with a list with a custom background color.

Discussion

Regarding the value for the color hint, if you use a solid list background color, just set it to the same color value as the background. If you want the window background to shine through or use a custom graphic, you must disable the cache color hint entirely by setting its value to a transparent color (for example, #0000 or android: color/transparent). And that’s all. This is a rather obscure issue, but you should keep it in mind whenever you are working with ListView implementations that need custom backgrounds. The cacheColorHint wraps up our discussion of styles and themes, almost. There is one more set of tidbits we have about the styles in Android.

Useful styling tidbits

Ready to get even deeper into styling applications? You now know how to create and apply themes and styles but there is more to come. But, first, we have collected some generally useful tips and tricks about styling that we want to include in and round out this discussion. The Listing 3. A theme de�nition for the MyMovies app <?xml version="1.0" encoding="utf-8"?> <resources>

<item name="android:listViewStyle">@style/ MMListView</item>

<item name="android:windowBackground">@drawable/ </style>

film_bg</item>

Solution

These problems can be attributed to a rendering optimization ListView performs at runtime. Since it uses fading edges (transparency) to indicate that its contents are scrollable and since this blending of colors is expensive to compute, a list view simply uses a color hint (by default the current theme’s window background color) to produce a prerendered gradient that mimics the effect. The vast majority of the time a list view is rendered using the default color schemes and, in those cases, this optimization is very effective. Yet, you can run into the aforementioned anomalies when using custom color values for backgrounds. To fix this problem, you simply have to tell Android which color it should use as the hint color using the android:cacheColorHint attribute (Listing 4). Setting the cacheColorHint properly (or disabling it by setting it to transparent) will fix any obscure problems

<item name="android:background">#A000</item> #2

<item name="android:footerDividersEnabled">false </style>

</item>

</resources>

#1 A theme definition for our application #2 A style definition for list views

06/2010 (24)

ANDROID DEVELOPMENT

paragraphs that follow cover things that haven’t been mentioned yet, in no particular order but all of which we think will make your life easier when working with styles. In particular, we’ll demystify color values, tell you how to work with text appearances, and also introduce some rarely seen but useful style notations. You know – the real pro stuff!

Color values

When working with styles, you will often find yourself specifying color values either directly, using hexadecimal syntax, or by referencing a color resource (yes, colors can be resources too). Since, in the end, any color value in XML is defined using hex notation (identified by the # prefix), let’s briefly cover it now in case you’re not familiar with it. Color values in Android are defined using the Red/Green/Blue/Alpha (RGBA) color space, where each color is mapped to a 32-bit wide number, with the first 24 bits representing the three color components (8 bits per red, green, and blue, respectively) and the last 8 bits defining the alpha channel (the color opacity). Since each component may use 8 bits of information, the value range for each component is 0 to 255 (or 00 to FF in the hexadecimal system). A color value of #0000FF80 would, therefore, represent blue with 50% opacity. If you omit the alpha channel, opacity will be 100% and the color value is simplified to #0000FF or #00F. Watch out for the abbreviated color syntax When using the abbreviated color syntax (for example, #000 instead of #000000), watch out when defining the

alpha channel. For abbreviated color values with alpha channel, the alpha channel is defined first – the order is ARGB, not RGBA. Therefore, #F00A is not translucent red but dark opaque blue. It can get very tedious to type the color values. For one, you’re repeating yourself, which as we have learned before, is a bad thing. Worse maybe, these values are not very expressive unless you’re really good at mentally mapping hex values to a color space. Hence, you will typically define these values only once, as a color resource, which you can address using a human readable identifier. To do that, create a file colors.xml in your res/values folder and add the following code to it: <?xml version=”1.0” encoding=”utf-8”?> <resources>

</resources>

You can now reference this color from your views and styles as @color /translucent _ blue. Note that Android already defines a handful of colors for you this way. A commonly used predefined color is android:color / transparent, which is equivalent to a color value of #00000000. When in application code, you can also use the color definitions from the Color class but you cannot reference these from XML. One last thing about colors; colors defined as shown above can be used as drawables in Android. You can use colors whenever you could have also passed an image (for example, for backgrounds or a list selector).

Text appearance

We mentioned before that, when working with text styles, there is actually a better way than simply defining your text styles from scratch – Android’s text appearances. A text appearance is simply a style that contains elements that apply to any TextView in your app. Moreover, overriding these default styles will immediately affect all text styles in your application. For example, if you were to change the default text style to bold red across your entire application, you could do this: <style name=”MyTheme”>

<item name=”android:textAppearance”>@style/

</style>

MyTextAppearance</item>

Figure 1. The MyMovies title screen after some styling has been applied. Note how we included a transparent background image and added a fast scrolling handle

</style>

06/2010 (24)

Android in Practice

There are plenty of text appearance attributes of a theme, such as textAppearance (for default text), textAppearanceButton (for button captions), or textAppearanceInverse (for inverted text, for example, when highlighted). However, you will probably ask yourself, what’s the difference between this and simply defining a default style for TextView, as seen before? The differences are subtle, but important. First, the styling defined here will actually be applied to all TextView views, including subclasses. This is not the case for the textViewStyle attribute; it won’t affect text views such as Button or EditText, which both inherit from TextView. Second, the textAppearance attribute may not only be applied to a theme but also to a single TextView (and hence, also to a TextView style definition). This allows you to bundle shared text styles together and apply them en bloc to different kinds of text views – If you start styling the text in your application, you will want to do that using text appearances. Just let them inherit from Android’s default text appearance styles and overwrite only what you need to change.

Special style values

You have seen how to reuse styling attributes by bundling them together into styles and by letting styles inherit from each other. You’ve also seen the @ notation, which you use to reference the existing resources. This works well if you want to address the complete resource, but what if you only need a single value? Consider, for instance, a text style. Listing 4. Remember to set the cacheColorHint when using custom backgrounds <?xml version="1.0" encoding="utf-8"?> <resources> ...

Suppose you want to change the link color to the color Android uses for plain text but you don’t know its exact value. The primary text color is also not exposed as a color resource, since it’s variable; it changes with the theme. The solution is to use the ? notation. The ? notation (like @) only works in XML, and you can use it to address style items of the currently applied theme by their name. To stick with the example, if you want to set your application’s link color to the default text color, you could do this: <style name=”MyTheme”>

<item name=”android:textColorLink”>?android:attr/

</style>

textColorPrimary</item>

The last thing we’d like to mention is the @null value. You can use it whenever you want to remove a value that is set by default – in a parent style. This is probably only seldom required but it can make sense if you want to get rid of a drawable that is set by default. For instance, Android will set the windowBackground attribute to a default value but, if the window background is always obscured by your own views, you can simply remove it by setting it to @null. This will result in a slight performance boost. Android currently cannot optimize the views that are completely obscured, but this may change in future versions.

Summary

Styles are a complex topic, and the distinction between themes and styles is often confusing as to what they apply and which attributes they take. Hopefully, we could solve most of these mysteries so far. We started by showing how styles are defined and how they are applied to views. We then moved on and showed you how you can assign styles globally to your application using themes, and even sorted out some confusion with background styling in list views. As always, we suggest you play around with view styling. That’s the best way to get your head around a problem.

<item name="android:cacheColorHint">#0000</item> ...

</style> </resources>

#A Disable the color hint

06/2010 (24)

ANDROID DEVELOPMENT

Android in Practice Excerpted from

Android in Practice By Charlie Collins, Michael D. Galpin, and Matthias Kaeppler The Action Bar is an evolution of the menu idea. In this article, based on a technique presented in Android in Practice, you’ll learn how to show non-necessary but useful Activity-related functions to the end user without using the standard menu features of Android. You may also be interested in…

For source code, sample chapters, the Online Author Forum, and other resources, go to http://www.manning.com/collins/

Technique: The Action Bar

he menu concept in Android has a lot of merit to it. You could put many shortcuts and useful things in the menu. You could also put many contextual things in the menu. The big problem, of course, is that users may never look in the menu. The Action Bar is an evolution of the menu idea. It has many of the same use cases, but it is more Figure 1. The Action bar in action! effective to use because it is more visible to the end user.

Problem

You want to show non-necessary but useful functions that are contextual to the Activity the user is interacting with. You do not want to use the standard menu features of Android because of their usability issues.

Solution

The solution is to use the Action Bar, the evolution of Android’s menu system. The Action Bar is located at the top of the screen, thus it is very visible to the user. This solves the biggest problem of the menu system. Figure 2. Sharing a deal on the tablet

06/2010 (24)

ANDROID DEVELOPMENT

Figure 1 shows an example of the Action Bar in our tablet application. As you can see in the figure, the Action Bar is the top bar on the screen. In our example, it shows the icon of our app, several tabs, and a Share button. The application icon allows the user to navigate back to the home screen of the application. The tabs allow the user to change which section of eBay Daily Deals they are viewing. As Figure 2 shows, the share button allows them to share the deal they are looking at using other applications installed on their device. The Action Bar not only solves the problem of limited navigation but it can do much more as you see. We will take a look at the navigation tabs shortly but we will start with the application and share icons on the Action Bar. Listing 1 shows the code behind these features.

As you can see from Figure 2, the Action Bar shows off its roots as a menu. To create it, you implement the Activity’s onCreateOptionsMenu lifecycle callback method (#1). You could programmatically create the items on the Action Bar, especially if these elements depend on the state of the Activity. If not, then you can use XML to specify what should be in the menu. Here is the XML for the Action Bar seen in Figure 1: <menu xmlns:android=”http://schemas.android.com/apk/res/ android”>

<item android:id=”@+id/share_action”

android:title=”@string/deal_details_share_menu” android:icon=”@drawable/ic_menu_share”

</menu>

android:showAsAction=”ifRoom|withText” />

Listing 1. Action Bar app and share icons (from DetailsActivity.java) @Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.details_menu, menu); return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) {

case android.R.id.home:

Intent intent = new Intent(this, DealsMain.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); return true;

case R.id.share_action:

shareDealUsingChooser("text/*");

#3 #4

return true;

default:

}

return super.onOptionsItemSelected(item);

private void shareDealUsingChooser(final String type) {

// omitted for brevity, same as in chapter 2 } private String createDealMessage() {

// omitted for brevity }

#1 Loads menu data from XML

#2 Menu item is the canonical home value #3 Starts home activity

#4 Menu item id is the share_action from XML

06/2010 (24)

Android in Practice

Listing 2. Creating and managing Action Bar tabs (from DetailsActivity.java) public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.details);

app = (DealsApp) getApplication();

ActionBar bar = this.getActionBar();

TabListener listener = new TabListener(){ @Override

public void onTabReselected(Tab t, FragmentTransaction txn) {}

@Override

public void onTabSelected(Tab t, FragmentTransaction txn) { if (active){

}

changeTab(t.getPosition());

@Override

public void onTabUnselected(Tab t, FragmentTransaction txn) {}

};

for (int i=0;i<Math.min(6, app.sectionList.size());i++){ final Section section = app.sectionList.get(i);

Tab tab = bar.newTab();

tab.setTabListener(listener);

tab.setText(chomp(section.title)); if (app.currentSection != null &&

app.currentSection.equals(section)){

bar.addTab(tab, true);

} else {

bar.addTab(tab);

}

bar.setDisplayShowTitleEnabled(false);

bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); }

active = true;

private void changeTab(int position){

FragmentManager fm = getFragmentManager();

int orientation = getResources().getConfiguration().orientation; if (orientation == ORIENTATION_LANDSCAPE){

SectionDetailsFragment fragment =

(SectionDetailsFragment) fm.findFragmentById( R.id.section_list_fragment);

fragment.setSection(position);

} else {

FilmstripFragment fragment =

(FilmstripFragment) fm.findFragmentById(

R.id.section_filmstrip_fragment);

}

fragment.setSection(position);

#1 Gets the ActionBar for this Activity

#4 Wires up event listener to Tab

#3 Creates a new Tab

#6 Changes section displayed by Fragment

#2 Changes tab based on which tab is selected

06/2010 (24)

#5 Determines orientation

ANDROID DEVELOPMENT

As you can see, it specifies a single item, along with its title and its icon. In our example, both of these are externalized resources, so they could also be localized. Notice that we also set the showAsAction attribute. This was introduced in Android 3.0 and gives you options on when to display the menu item as an action and how to display it. You can set this to Always, but things could get messy if there is not enough room. Going back to Listing 1, we define the behavior of the Action Bar (what happens when the user taps on its items) by implementing the Activity’s onOptionsItemSelected method. This is also how we respond to the user’s tapping on the application icon (#2) in the left corner of the Action Bar. We identify this using the predefined resource ID home and then respond to it by clearing the Activity stack and (#3) sending the user to the home screen. Similarly, we identify tapping on the Share button by matching the ID defined in the menu XML against the ID of the selected MenuItem (#4). In this case, we invoke the shareDealUsingChoose method. This will bring up the UI shown in Figure 2. Going back to the Action Bar, we have now defined how to create the icons on it and how to give them behavior. Now, let’s look at how we created the tabs seen in Figure 1. Listing 2 shows this code. Starting with Android 3.0, every Activity can have an Action Bar and you can access it via the Activity’s getActionBar method (#1). The idea here is to programmatically create tabs and add them to the Action Bar. Each tab will need a TabListener to respond to being tapped on, so we create a single TabListener to use for all of the tabs. We implement its onTabSelected method (#2) and invoke the changeTab method based on the position of the selected tab. We will take a look at on changeTab works momentarily. Once we have a TabListener instance, we are ready to create the tabs and add them to the Action Bar. We programmatically create a tab (#3) and set its title and its TabListener (#4). Notice that we also specify which tab should be currently selected based on

what section is currently selected by the user. Finally, we tell the Action Bar not to display the title of the Activity and instead to show the tabs and use those for navigation. Now let’s look at the changeTab method that is invoked via the TabListener’s onTabSelected callback method. This method first checks to see the current device orientation #5. This is because the contents of the Activity will be different based on the orientation. It uses this knowledge along with the Activity’s FragmentManager to get a handle on the Fragment that is being displayed in the Activity. Then we simply set the section on the Fragment (#6) so it knows which section to display.

Discussion

Tabbed navigation is certainly not something new and unique to tablets. It has been a common way to organize web applications for many years and has been a part of Android since 1.0. These have always come via the TabHost and TabWidget classes. The TabHost has allowed you to create a series of tabs, each with its own Activity that will be displayed. The Action Bar tabs represent an evolution of this idea, similar to how the other parts of the Action Bar are an evolution of the menu.

Summary

With the Action Bar and its tabbed navigation mode, you can create tabs similar to how you create tabs for a TabHost. However, instead of associating a single Activity to a tab, you work within a single Activity and use Fragments. In our simple example we simply changed the content of the Fragment that was there. However, notice that the onTabSelected method was passed a FragmentTransaction object. This would allow you to perform a series of operations on the Fragments in the Activity, typically removing one or more Fragments and replacing them with one or more other Fragments. The Action Bar not only improves the legacy menu system, but it also builds on top of Fragments to provide you with a simpler but more flexible way to organize your application code.

Here are some other Manning titles you might be interested in: Android in Action, Second Edition W. Frank Ableson, Robi Sen, and Chris King Objective-C Fundamentals For iOS4 and iPad Christopher K. Fairbairn, Johannes Fahrenkrug, and Collin Ruffenach

06/2010 (24)

ACTIONSCRIPT DEVELOPMENT

Create Your Own Events The focus of this article is to know about power of your own events. Considering you are familiar with events, still we will see some brief introduction about events as it is basic of your own events.

What you will learn…

What you should know…

• • • •

• Basic of ActionScript 3.0 • Basic of OOP • Events

How to Create your own Events How to Create your own Class Overriding super class Use of Custom Events

vent means action, as Mouse Clicks, Mouse Moves, Error occurs, File loads. Whatever happens means event occurs. Flash have its own events like MouseEvent, KeyboardEvent, IOErrorEvent etc. While migrating AS 2.0 to AS 3.0 you can see you have lot of control on events. Then why to create your own event? I had that question. I always think, if I write little bit complex logic I will get output. But I got my answer. Custom event gives you power to control your own actions. I am not theoretical guy so not able to explain you. Let’s see it in my practical way… with example….. I created an example for loading bulk of images serially. For that, • •

•

I created my own event ( BulkImageLoaderEvent) who tells me that all images are loaded or one image loaded and also it passes me that loaded data. I created an object for loading all images where I wrote my business logic for loading bulk images one by one. Also assigns my BulkImageLoaderEvent to this object. Means my custom event controls actions in my custom class. I have some code on timeline to pass raw data.

BulkImageLoaderEvent Class

This is my custom event. Which helps in loading bulk of images.

It will tell me that all images are loaded also single image is loaded (see Listing 1). I imported Event Class. BulkImageLoaderEvent Class extends Event Class so that it can inherits all properties and methods from Event Class. I import Bitmap Class because in used Bitmap data type in BulkImageLoaderEvent Class as I am working on images, I think I need to use bitmap data type. public static const ALL_LOAD_COMPLETE:String=”AllLoadCo mplete”;

public static const SINGLE_LOAD_COMPLETE:String=”SingleL oadComplete”;

This defines your custom event string constant. ie It defines type of your event. Constructor function have some parameters, out of which $type, $bubbles, $cancelable are standard parameters of Event Class. Using super keyword we passed parameters to superclass ie Event Class. Remaining two $paramArr, $paramBit, we are going to use as per our use. I put paramArr and paramBit as public so that I can access them out side this class with its instance. clone() and toString() functions are belong to Event class and we override them with our two new variables. That’s it. Now lets attach it to our custom class to control its actions.

06/2011 (24)

Create Your Own Events

Listing 1. BulkImageLoaderEvent.as package

{

import flash.events.Event;

import flash.display.Bitmap public class BulkImageLoaderEvent extends Event

{

public static const ALL_LOAD_COMPLETE:String="AllLoadComplete"; public static const SINGLE_LOAD_COMPLETE:String="SingleLoadComplete"; public var paramBit; public var paramArr; public function BulkImageLoaderEvent($type:String,$paramArr:Array,$paramBit:Bitmap,$bubbles:

{

Boolean = false, $cancelable:Boolean = false) super($type,$bubbles,$cancelable) this.paramBit=$paramBit

this.paramArr=$paramArr;

}

public override function clone():Event

{

return new BulkImageLoaderEvent(type,paramArr,paramBit,bubbles,cancelable);

}

public override function toString():String

{

}

return formatToString("BulkImageLoaderEvent", "paramArr", "bitmap","type", "bubbles", "cancelable");

}

Listing 2a. BulkImageLoader.as package

{

import flash.display.*; import flash.events.*; import flash.net.*

import BulkImageLoaderEvent public class BulkImageLoader extends MovieClip

{

private var ImgArr:Array=new Array(); private var noOfImgLoaded=0;

private var currImgLoaded=0;

private var imgReq:URLRequest private var imgurl:Loader

private var imgLoadedArray:Array=new Array();

06/2011 (24)

ACTIONSCRIPT DEVELOPMENT

Listing 2b. BulkImageLoader.as public function BulkImageLoader(_ImgArr:Array)

{

ImgArr=_ImgArr

noOfImgLoaded=ImgArr.length-1 }

loadImage();

private function loadImage()

{

imgReq=new URLRequest(ImgArr[currImgLoaded]) imgurl=new Loader();

imgurl.load(imgReq);

imgurl.contentLoaderInfo.addEventListener(Event.COMPLETE,imgLoaded); imgurl.contentLoaderInfo.addEventListener(IOErrorEvent.IO_

ERROR,imgLoadedError); }

private function imgLoadedError(e:IOErrorEvent)

{

trace("Error")

imgLoadedArray.push(null);

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.SINGLE_LOAD_COMPL

ETE,imgLoadedArray,null,true,false))

if(noOfImgLoaded==currImgLoaded)

{

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.ALL_LOAD_COMPLETE

,imgLoadedArray,null,true,false)) }

else

{

}

currImgLoaded++; loadImage();

private function imgLoaded(e:Event)

{

imgLoadedArray.push(e.target.loader.content);

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.SINGLE_LOAD_COMPL

ETE,imgLoadedArray,e.target.loader.content,true,false)) if(noOfImgLoaded==currImgLoaded)

{

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.ALL_LOAD_COMPLETE

,imgLoadedArray,e.target.loader.content,true,false))

}

else

{

}

currImgLoaded++; loadImage();

06/2011 (24)

Create Your Own Events

Listing 3. TimeLine Code import BulkImageLoader;

bulkImageLoader.addEventListener(Bu

var xmlReq:URLRequest=new URLRequest("gal.xml")

lkImageLoaderEvent.ALL_LOAD_

var xmlurl:URLLoader=new URLLoader();

COMPLETE,AllImgLoaded);

var imgReqArr:Array=new Array();

bulkImageLoader.addEventListener(BulkIma

var imgLabelArr:Array=new Array(); var startX=0;

geLoaderEvent.SINGLE_LOAD_COMPLE

var bulkImageLoader:BulkImageLoader;

}

xmlurl.load(xmlReq);

{

var GalXML:XML

xmlurl.addEventListener(Event.COMPLETE,xmlLoaded); function xmlLoaded(e:Event)

{

GalXML=new XML(e.target.data); trace(GalXML)

TE,SingleImgLoaded);

function AllImgLoaded(e:BulkImageLoaderEvent)

}

addChild(e.paramArr[1])

function SingleImgLoaded(e:BulkImageLoaderEvent)

{

for(var i=0;i<GalXML.img.length();i++)

if(e.paramBit==null)

{

imgReqArr.push(GalXML.img[i].@src)

imgLabelArr.push(GalXML.img[i].@label) }

}

bulkImageLoader=new BulkImageLoader(img

Here we put our business logic to load all images (see Listing 2). I import all necessary classes. Also I import BulkImageLoaderEvent Class so that I can use this event. I declared all required variables. In constructor function I got Array which contain list of images path. loadImage() function loads images having path in ImgArr Array with index currImgLoaded. Imgurl Loader have EventListener to tell that image is loaded or there is file error. On imgLoaded function I check with counter whether all images are loaded or not if not loaded I call loadImage() function again. So that I can load next image. Now use of our custom event, dispatchEvent(new BulkImageLoaderEvent(BulkImageLoader

Event.SINGLE_LOAD_COMPLETE,imgLoadedArray,e.target.loader. content,true,false))

and

return;

addChild(e.paramBit)

ReqArr)

BulkImageLoader Class

trace("bitmap data not

present")

of type ALL_LOAD_COMPLETE and passes Array of all loaded bitmaps as its paramArr variable’s data. LoaderEvent

Timeline Code

In fla file: see Listing 3. Here I imported BulkImageLoader class so that I can use it. Here I put my business logic. I loaded XML file, parse it and while creating instance of BulkImageLoader Class I sent an Array which contain path of all files. And finally I assign BulkImageLoaderEvent of types ALL_ LOAD_COMPLETE and SINGLE_LOAD_COMPLETE. When ALL_LOAD_COMPLETE event occurs I got all bitmaps which are loaded through e.paramArr. And current loaded bitmap through e.paramBit in SINGLE_LOAD_COMPLETE event type. That is the power of custom event. Now I can reuse this code whenever I want. If you have any query regarding this article you can mail me chinu50patil@gmail.com. Its nice to play ActionScript with OOP…

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent. ALL_LOAD_COMPLETE,imgLoadedArray,e.target.loader.content, true,false))

here I dispatched BulkImageLoaderEvent of type SINGLE _ LOAD _ COMPLETE . Where single image is loaded and passes e.target.loader.content as its paramBit variable’s data. If error occurs I passed null value. And when all files loaded I dispatched BulkImage

06/2011 (24)

SACHIN PATIL Sachin Patil is a Flash,Flex,ActionScript 3.0 developer from India, having Hands on experience on rich internet application, gaming, papervision3d,e-learning. http://www.sachinpatilaction.blogspot.com/

ACTIONSCRIPT IN ACTION

Adventures In ActionScript Interacting with Game Objects This month Huw Collingbourne explains how to create interactive characters that can take and drop items found at locations in the game. What you will learn…

What you should know…

• How save and restore arrays of mixed object types • How to create objects that can manipulate their own associative arrays • How to transfer objects from one associative array to another

• The fundamental features of Object Orientation • How to create classes in packages • The essentials of objects and associative arrays

ver the last few months I’ve explained how to create a simple exploring type of adventure game. As explained in my last column, you can implement a game like this using Flex 3, Flex 4 or Flash without any Flex at all. You could even deploy it as a mobile application on Android. You can create it in any ActionScript editor or in a Flex IDE such as Flash Builder for Eclipse or Amethyst for Visual Studio.

Once again, I am concentrating on programming a text-based adventure based game. However, if you are an animator you could use the techniques explained in this series to create the data structures representing the world of the game and then add animated characters and objects instead of the plain text which I use. This month we will complete the fundamental framework of a game by adding features to let the player

Figure 1. Here I’ve used Amethyst to design the user interface of the game in Flex 4. The game now includes commands to take and drop objects to and from the various room locations

06/2011 (24)

Adventures In ActionScript – Interacting with Game Objects

collect treasures found in the various locations (Figure 1). It will also be possible to drop those treasures in other locations and to save the game so that it can subsequently be re-loaded and played from the point at which you left off the time before.

First, Build A Better Object

The first thing I want to do is to provide the objects in the game with ways of manipulating their own data structures. In ActionScript, a basic Object is able to contain a dictionary-like structure of key-value pairs which is generally called an associative array. Unfortunately, ActionScript objects do not contain methods for manipulating those data structures. In previous columns I showed how you can add this behaviour to a descendent of the Object class which I’ve called ObjectPlus. So, to provide associativearray manipulation methods for all the objects in my game, all I need to do is make the ‘root’ class in the game hierarchy descend from ObjectPlus. My root class is called Thing and this is its rewritten class declaration: public class Thing extends ObjectPlus

The ObjectPlus class provides the following read-only properties (that is, getter methods):

keys

This returns a sorted array of all the keys found in the object’s associative array.

values

keysAndValues

This returns all keys and values found in the object’s associative array as an array of {key: value} objects – sorted on key. In addition to the properties listed above, the ObjectPlus class provides the following methods:

containsValue( aValue:Object )

Returns true if value is found amongst the values in the object’s associative array, else returns false.

isKey( aKey:String )

Returns true if the value associated with aKey is null or if aKey is not found in the object’s associative array.

addAnObject

Given a string and an object, creates a key/value pair and adds it to the associative array to the of the current ObjectPlus object.

addObjects( anOb:Object )

Given an object, anOb, which contains an associative array, this method adds each element (a key/value pair) from anOb to the current ObjectPlus object The ObjectPlus constructor may also initialise a new ObjectPlus object with elements passed to it as an associative array. To do this it simply calls the addObjects() method: public function ObjectPlus( anOb:Object = null ) { addObjects( anOb );

}

This returns a sorted array of all the keys found in the object’s associative array.

In principle, I could now make each object maintain its own associative array of the treasures it contains,

Figure 2. When I load a saved game, all the objects are reconstructed from binary data – including the player, the rooms and all the treasures. The Amethyst debugger shows the positions of each treasure object

06/2011 (24)

ACTIONSCRIPT IN ACTION

Listing 1. Initializing Game Data public function initTreasures( ) : void {

t1 = { "sword": "a lovely golden sword" }; t2 = { "ring": "an emerald ring" };

t3 = { "knife": "a small silvery blade" }; t4 = { "carrot": "a dirty carrot" }; Cave.things.addObjects( t1 ); Cave.things.addObjects( t2 );

TrollRoom.things.addObjects( t3 );

CrystalDome.things.addObjects( t4 ); }

treasures = [t1,t2,t3,t4];

so that, for example, I would have a Room object that might contain two treasures like this: { „sword”: „a lovely golden sword”, „ring”: „an emerald ring” };

However, I think it’s confusing to treat a Room object as though it were itself a list of treasures. I think a better way to represent this would be to have a separate property called things to maintain any treasures contained within a room. Then, when I want to refer to the treasures in, for example, the TrollRoom I would do so using dot-notation: TrollRoom.things.

Creating Lists Of Objects

But it’s not only Room objects that may contain a list of things. A character in the game may collect things and thereby acquire an inventory of objects. So far my only character is the player of the game but if I were to extend the game I might add other interactive characters who would wander around from room to room collecting treasures. For that reason, I have encapsulated the behaviour of interactive characters in a class named Actor. The list of things has been placed into a class

called ThingHolder and both Room and Actor classes descend from ThingHolder. The ThingHolder class itself descends from ObjectPlus which provides all the routines for manipulating the associative array of things. For the sake of simplicity, I am currently representing treasures as simple key-value pairs in an associative array like this: {„ring”: „an emerald ring” }. Ultimately, however, you would probably want to create a dedicated Treasure class. Some treasures such as chests, boxes, sacks or bags might contain other treasures. Implementing that would be easy: just make the Treasure class a descendent of ThingHolder. In order to put some treasures into various rooms at the outset I add them in the initTreasures() method when the game is constructed (Listing 1). Incidentally, I’ve also added them to an array, treasures[]. This is not required during game-play but it provides a simple way to access the treasures if I want to free them (by setting them to null) as I have done in the afterLoading() method which initializes the treasure items using data that was previously saved to disk. You will see that I have also created a gameData array. This contains the _player object at index 0, followed by

Listing 2. Taking and Dropping Objects private function transferFromTo( obName : String, fromThings : ObjectPlus, toThings : ObjectPlus ) : Boolean { var done : Boolean = true;

if( fromThings[obName] != null ) {

toThings.addAnObject( obName, fromThings[obName] );

} else { } }

delete fromThings[obName]; done = false;

return done;

06/2011 (24)

Adventures In ActionScript – Interacting with Game Objects

Get The Source Code

The archive containing all the source code for this game is available for download from the SapphireSteel Software site at: http://www.sapphiresteel.com/tutorials/amethyst-tutorials/ actionscript-programming/article/adventure-game

all the Rooms. Once again, this array is not needed when playing the game; it is only needed to simplify saving and restoring. Let’s take a look at how that is done.

Saving and Restoring

I’ve explained the basics of data-saving in previous articles in this series. I implement this by saving data to ByteArrays and I’ve put the essential methods into my SaveLoad class. When saving and loading custom object types to and from ByteArrays, you must be sure that the saved data contains information on each of the classes. To do that I have registered my custom class names in my registerGameClasses() method: registerClassAlias( „room”, Room );

registerClassAlias( „objectplus”, ObjectPlus );

registerClassAlias( „thingholder”, ThingHolder ); registerClassAlias( „actor”, Actor );

Taking and Dropping Objects

Let’s now look at how the player is able to take and drop objects. This is, in fact, quite easy to implement. In the Game class I’ve written a method, transferFromTo(), that takes three arguments: obName which is the name of an object (e.g. sword), fromThings which is an ObjectPlus object containing the associative array from which the object is to be deleted and toThings which is the ObjectPlus object containing the associative array to which the object is to be added. See Listing 2. My takeObject() and dropObject() methods simply call transferFromTo() with the object name and the to or from lists. For example, this is how I move an item from the list of things in the current room to the player’s inventory: transferFromTo( thingToTake, currentRoom.things, _ player.things )

And now, you have all the fundamental features you need to create a complete adventure game. You can have one or more interactive characters (or indeed, you could have multiple players) which can explore a complex network of linked locations. The characters can take and drop treasures and you can save and restore the game. All you have to do now, is add the puzzles. That is where the fun really begins!

When the gameData array is saved, the class aliases are written into the binary file and when the data is reloaded (Figure 2) those aliases enable the data to be used to construct the appropriate object types. gameData = loadedData.readObject( );

If you need to assign data to a specific named variable after loading you should cast the data to the correct class. I’ve done this with the first item read back into the array which is assigned to _ player. I can then use the location property to assign the player’s current position (a Room object): _player = Actor( gameData[0] ); here = _player.location;

Make sure that any class that you need to save and restore has read/write properties to enable its data to be initialized. The end result is that the game can now save and reload data including the Rooms, the contents of the Rooms, the player, the player’s location plus any treasures which the player has collected. In other words, the entire game state can now be persisted so that you can save a game and restart it later on from the point at which it was saved.

HUW COLLINGBOURNE Huw Collingbourne is Director of Technology at SapphireSteel Software. Over more than 20 years, he has programmed in languages ranging from Ruby to C# and has been a technical columnist for computer magazines such as PC Pro and PC Plus. He is the software lead of the Amethyst Designer, the Flex user interface design environment of the Amethyst IDE for Visual Studio. SapphireSteel Software: http:// www.sapphiresteel.com/

FLEX/ACTIONSCRIPT 101

In the Eye of the Storm Facing the Challenges of Developing World Class RIAS – PART 2 Last month I presented some of the challenges, we faced during the development of Esus, this month I will continue my presentation with a list what I consider to be the most complex challenges that we may face. What you will learn… • How to overcome the common development • Managing clients expectations • Do more with limit resources

What you should know… challenges

RIA

et it does not list any technical issue, it is focused on dealing with the most sensible part of the chain, the people will be using our systems. Without any further ado, let’s get started.

Who do you work for ?

This question keeps banging my head every day and must bangs yours too. Think about it for a moment ... Who are you really working for ? It surprises me that some developers I’ve been talking to, miss this important point. Yet it is true we’re contracted to develop after our employer vision and most of the time this vision is aligned with the client’s needs, sometimes it’s not. It can happen mostly in small companies. In fact, we have two categories of clients: Internal and External. As internal client we are all the company staff – support staff, managers and so on. The external client is the end user – the one who will be effectively using and, most important, paying for our services. It’s very important that the main priority is the end user needs. Missing this key fact, can lead into development of systems that instead of helping the client, gives them more troubles to deal with.

Dealing with client’s requests

This one can be tricky sometimes, specially if the company you work for gives the clients the opportunity to customize the system to fulfill their needs. Mostly because one client request may be incompatible of another, etc. It imposes most of the time, a tremendous effort to make the client understand that the system already solves the problem they presented some other way or their requests are not viable in some way. One of the best solutions that I’ve seen and most small companies do is: Make your client part of your development process, listen to them carefully, take note of every request they make and implement the ones that will bring value to the

• Familiar with ActionScript Programming • Familiar with project management • Working with tight schedules

product and will help other clients too. Ooh, that’s very easy to do, some of you may say. But you’d be surprised how many companies I’ve seen missing this point. But sometimes it’s not possible to avoid the implementation of some requests – specially when dealing government clients and son on. In these situations, it is better is to have a second plan when things get wrong and you have to change the system once again.

Dealing with constraints

When working for a small company we have to deal with many constraints: money, tight deadlines and so on. The more constraints you have, more creative you will have to be to solve them with a minimum waste of time and money. Most important is not to sacrifice quality because, we don’t have the time to implement a feature the way we intended. At RGSistemas I and my colleagues have faced many constraints during the Esus development, but in each of them a great solution have emerged. So face them as a great opportunity to come up with elegant solutions.

Final Statement

Well people, that’s it for now, I really hope that this article have helped any developer out to face the challenges of developing RIA. Next month I will return with some interesting topic and a bunch of code – of course – see you there.

MARC PIRES Marc Pires is a system developer at RGSistemas. His work is focused on user interaction, components creation and so on. He also develops software for IOS (with Objective-C), Rest API with Ruby on Rails, and is always researching new technologies. Contact information: @MarcPires (Twitter); IChat: marcpiresrj@aim.com, www.rgweb.com.br

06/2011 (24)

FLEX DEVELOPMENT

Item Renderers in Practice

One characteristic of a well-designed Flex application is the presentation of data in a visually-compelling manner. Flex provides a number of list-based controls (DataGrid, List, TileList, HorizontalList, etc) responsible for the presentation of data. However, only with the help of an item renderer can a list-based control customize the display of the data. What you will learn…

What you should know…

• Why Item Renderers must implement the IDataRenderer interface • Why it’s important to understand that Item Renderer instances are recycled rather than recreated • How to access the ListData object from inside an Item Renderer

• Item renderer basics • How data provider controls work including List-based controls • Basic ActionScript and MXML

ist-based controls (DataGrid, List, TileList & HorizontalList) render the data assigned to their dataProvider property. See Listing 1. With the help of an Item Renderer, list-based controls can customize the appearance of the data provider’s data as you can see in Listing 2. In addition, the custom appearance can be controlled by conditional logic processed by an Item Renderer. We’ll look at this a bit later. A single instance of your Item Renderer class (ListIR) is created for each visible item of the list-based control. As the user scrolls through the items of a list-based control, Item Renderer instances are recycled rather than creating new instances.

Example

When Data Item #1 is removed from the list-based control’s display due to a scrolling action, the Item Renderer instance previously used to render Data Item #1 is recycled and used to display the data for Data Item #6. Item Renderers must directly or indirectly (through class inheritance) implement the IDataRenderer interface which enforces the implementation of 2 very important methods: get data() & set data(). With an implicit getter and setter in place for the data property, the Item Renderer instance can receive a data object passed from the host component (the list-based control) which represents the data for the item it is responsible to render (i.e. Data Item #6).

Listing 1. Using the dataProvider property of a list-based control <mx:Application xmlns:mx="http://www.adobe.com/2006/ mxml"

layout="vertical">

<mx:ArrayCollection id="ac"> <mx:Array>

<mx:Object name="tom" age="12" hair="brown"/>

<mx:Object name="sally" age="21" hair="green"/>

<mx:Object name="kate" age="16" hair="yellow"/>

<mx:Object name="bill" age="22" hair="brown"/>

<mx:Object name="chriss" age="23" hair="green"/>

<mx:Object name="yarb" age="34" </mx:Array>

hair="yellow"/>

</mx:ArrayCollection> <mx:List id="myList"

dataProvider="{ac}"

labelField="name"/>

</mx:Application>

06/2011 (24)

FLEX DEVELOPMENT

Example

If instance #1 of the Item Renderer is rendering the data for Data Item #6, the data for Data Item #6 is passed to instance #1 of the Item Renderer via the Item Renderer’s set data setter method. When an instance of an Item Renderer is recycled due to scrolling, the set data method is called and the applicable data object is passed. This is the point in which conditional logic can be applied to control the appearance of an Item Renderer (Listing 3).

��

�

��

�

��

�

��

�

��

�

��

Figure 1. List-based control with 5 visible items ��

Note

It is important to remember that Item Renderers are recycled and as such, their property values may reflect a condition met by the previous user of the Item Renderer instance (i.e. the Data Item). Therefore, it is important to reset properties to the default value when Listing 2. Using an external item renderer <mx:Application xmlns:mx="http://www.adobe.com/2006/ mxml"

layout="vertical">

<mx:ArrayCollection id="ac"> <mx:Array>

<mx:Object name="tom" age="12" hair="brown"/>

<mx:Object name="sally" age="21" hair="green"/>

<mx:Object name="kate" age="16" hair="yellow"/>

<mx:Object name="bill" age="22" hair="brown"/>

��

�

��

�

��

�

��

�

��

�

��

Figure 2. List-based control with 5 visible items - after scrolling the 2nd item

conditional logic fails. In the previous example, the reset is accomplished by setting the label’s font color back to black (0x000000) when data.age >= 21. Listing 3. Using conditional logic within an item renderer

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>

<![CDATA[

private var minAge:Number = 21;

<mx:Object name="chriss" age="23"

override public function set data(value:

hair="green"/>

<mx:Object name="yarb" age="34" </mx:Array>

Object):void {

super.data = value; // set the Item

hair="yellow"/>

Renderer's data object

</mx:ArrayCollection>

// inject additional logic if (data.age < minAge) {

<!-- Using an Item Renderer to control the

listLabel.setStyle("color",0xFF

display of data -->

0000);

} else {

<mx:List width="100%"

dataProvider="{ac}"

listLabel.setStyle("color",0x000

itemRenderer="com.flexdevelopers.ListIR"/> </mx:Application>  <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" text="{data.name + ' (' + data.age + ')'}" color="0xFF0000"/>

]]>

}

000); // default value

</mx:Script>

<mx:Label id="listLabel"

text="{data.name + ' (' + data.age + ')'}"/>

</mx:HBox>

06/2011 (24)

Item Renderers in Practice

In the previous example, we utilized a property of the data object (data.age) and a hard-coded value (21) to dictate the item’s appearance. However, certain scenarios may require access to property values outside of an Item Renderer’s scope to determine the appearance.

Listing 5. Using data binding to update the property of a custom class <mx:Application xmlns:mx="http://www.adobe.com/2006/ mxml" xmlns:comps="com.flexdevel

Example

The value of an HSlider in conjunction with the age property of the data object (data.age) should dictate the font color of each item’s label.

opers.*"

layout="vertical"> <mx:Script>

<![CDATA[

Public Property

Create a new public property for the listbased control exposed via a getter and setter. By extending an existing class and adding a new public property, our list-based control will have a place to store the value of an external property (i.e. the value of the HSlider’s value property). See Listing 4. The new list-based control’s public property Bind the new list-based control’s public property (MyList.minAge) to the value of the desired external property utilizing Flex’s data-binding utility Data-binding

]]>

import com.flexdevelopers.MyList;

</mx:Script> <mx:ArrayCollection id="ac"> <mx:Array>

<mx:Object name="tom" age="12" hair="brown"/>

<mx:Object name="sally" age="21" hair="green"/>

<mx:Object name="kate" age="16" hair="yellow"/>

Listing 4. Extending a built-in Flex component

<mx:Object name="bill" age="22"

// MyList.as extends List

<mx:Object name="chriss" age="23"

package com.flexdevelopers

<mx:Object name="yarb" age="34"

{

import mx.controls.List; public class MyList extends List

{

private var _minAge:Number; // new property public function MyList()

{ }

super();

public function get minAge():Number { return _minAge;

public function set minAge(value:Number):void

{

}

06/2011 (24)

hair="green"/>

</mx:Array>

hair="yellow"/>

</mx:ArrayCollection> <comps:MyList width="100%" dataProvider="{ac}"

itemRenderer="com.flexdevelopers.ListIR"

minAge="{hslider.value}"/>

<mx:HBox>

// new property getter and setter methods

}

hair="brown"/>

_minAge = value;

<mx:HSlider id="hslider"

minimum="10" maximum="50" value="20"

snapInterval="1"

liveDragging="true"/> <mx:Label text="Minimum Drinking Age: {hslider.value}"/>

</mx:HBox> </mx:Application>

FLEX DEVELOPMENT

Listing 6.Accessing the list-based control that uses the item renderer

Listing 7. Using invalidateList to re-evaluate the item renderer’s conditional logic

// update the new property's setter method to

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

// IMPORTANT: Without calling invalidateList, a

include invalidateList()

implements="mx.controls.listClasses.IDropInLis

tItemRenderer">

<mx:Script>

change to the HSlider will not impact // the appearance of the currently visible list

<![CDATA[

items

import mx.controls.listClasses.BaseList

Data;

import com.flexdevelopers.MyList;

// property required of IDropInListItemRenderer

public function set minAge(value:Number):void {

_minAge = value;

}

invalidateList();

exposed thru a public getter & setter private var _listData:BaseListData;

// getter & setter methods public function get listData():

BaseListData {

}

return _listData;

public function set listData(value:

BaseListData):void {

}

_listData = value;

override public function set data(value:

Object):void {

super.data = value;

// retrieve the value of the listbased control's new public property var minAge:Number = (listData.owner

as MyList).minAge;

if (data.age < minAge) {

listLabel.setStyle("color",0xFF

0000);

} else {

listLabel.setStyle("color",0x00

]]>

}

0000);

will provide real-time synchronization of the new public property (minAge) with the external property’s value (i.e. the HSlider’s value property). See Listing 5.

Provide the Item Renderer with access to a ListData object

To access the value of our new public property from within an Item Renderer instance, our Item Renderer must implement the IDropInListItemRenderer interface. This ensures a reference to the Item Renderer’s owner (the list-based control) is available to the Item Renderer, and consequently, so is our new public property as seen in Lisitng 6.

Value property changes

Make a call to the invalidateList method when the source of our new, bounded public property is changed (i.e. the HSlider value property changes). By calling MyList.invalidateList() each time the HSlider value changes, we ensure that the conditional logic of the Item Renderer is re-evaluated. InvalidateList forces each Item Renderer instance of a list-based control to call the data setter method. See Lisitng 7.

Conclusion

Using item renderers is a great way to give your listbased control a custom look. As a Flex developer, you will spend a lot of time working with item renderers. Hopefully, this article helped you get more comfortable with how they work.

</mx:Script> <mx:Label id="listLabel"

text="{data.name + ' (' + data.age + ')'}"/>

</mx:HBox>

JEREMY MITCHELL Jeremy Mitchell is an Adobe Flex architect and developer with a strong belief in user experience (UX), iterative development, and writing maintainable code. He also maintains a blog at blog.�exdevelopers.com.

06/2011 (24)

WEB DEVELOPMENT

Mr. Mixit In January 2011, Tampa, Florida-based HD Interactive (HDI), a web development company, set a goal to build quality games and apps for as many mobile devices and marketplaces as possible in order to reach a wide audience of users. What you will learn…

What you should know…

• Flash CS5 timeline animations vs. blitting. • Using transparent PNGs with JPEG compression for smaller �le size. • Creating seamless loops with Flash CS5 and uncompressed audio �les.

• Developing for iOS and Android is actually quite similar. • Flex is now called Flash Builder. HDI uses both Flash and Flash Builder and believes that, despite changes in the two programs, there is still a work-�ow between the two if it is done correctly. • Mr. Mixit is one of the �rst Flash games to be available on iTunes, in the Android Marketplace, and in the Amazon Android Store.

eing proficient in development for several devices will also help HDI create great client projects. So they started the year creating inhouse games and apps for Android and iPhone. The first big project of 2011 was a puzzle game created for Android and iOS using Flex and Flash called Mr. Mixit. The concept began with a fun club scene with a robotic DJ. In the game, Mr. Mixit is mixing awesome jams for a screaming audience, but he needs help; some of his record labels have been broken apart, and users need to put them back together so they can be played. To start, designer James Silvera created the graphics and animations in Flash, some of which include the robot’s head bobbing in time to the music and spinning records. Mr. Mixit was originally developed as an Android game, targeted to run specifically on the Samsung Galaxy Tab. At the 2009 Adobe MAX conference, iOS development with CS5 was introduced, which was a huge deal in the industry. In early 2010, HDI started developing a new game called ZenFlip, a great first crack at building an iOS game using CS5. Through practice, the company learned many tricks for optimizing the game to work for iOS, but it was just too big. At the time, there wasn’t a good target for iOS through Flash. HDI stopped development of ZenFlip for the iPhone. In late 2010, HDI focused its efforts on Mr. Mixit, a Flash and Flex game for Android tablets. Using his experience with iOS development, HDI creative director Todd Williams programmed the game using many of the optimization

techniques he’d learned. He began with a custom blitting framework, based on a technique where the program pulls in a sprite sheet or animations as a bitmap and then copies sections of the bitmap onto the stage. The bitmap updates its pixels to perform an animation instead of using ActionScript or animating on a timeline. This technique previously sped things up for iOS. Todd created sprite sheets for each of Mr. Mixit’s animations. When a player mixes the right turntable, Mr. Mixit mirrors the movement in animation. The sprite sheets replaced the Flash animations with bitmaps in order to optimize performance. But to Todd’s surprise, the game was considerably slower using the blitting technique on the Android OS. It seemed that Android and iOS were complete opposites. So Todd switched it up, removing any optimization techniques he had used as a result of his iOS experience. He realized that the game’s performance was better when animations built in Flash on a timeline were exported as a Flex component out of Flash CS5 – one of the coolest things he encountered while building the game. He was excited to see a timeline built animation used inside of Flex run so well in a mobile device! But the best part about this epiphany for developers like Todd is what it means in timesavings and graphic representation. Since James built the Mr. Mixit animations in a Flash timeline that could be used directly in the game, they are perfect. Todd did not have to re-program very much, so James’s vision came

06/2011 (24)

Mr. Mixit

across exactly as he designed it. Previously, in order to take designs from Flash into Flash Builder, Todd would have to deconstruct all the animations, and then rewrite each of them with code in Flash Builder using a tween engine. This means great time savings for Todd, who could focus on other tasks and did not have to reprogram every animation to optimize it for Android. Another issue HDI was able to work through was getting everything to look as James designed it. The new spark components in Flash Builder rely on a different skinning technique than the company was using in the past. To properly skin the game required Flash Catalyst, which did not have many of the tools Todd was comfortable using in Flash. If updates were required, having an extra program in the mix seemed to complicate things too much. It was very difficult to build and work with complex graphics, the kind Todd uses in other HDI games, with Flash Catalyst. Instead, he exported the artwork as Flex Components from Flash and built custom components based on it. By removing all the optimizations previously added in, the game ran seamlessly on Android. After finishing the game for Android, porting Mr. Mixit for iOS wasn’t an option until the AIR 2.6 SDK was released in beta. After a day of trying to get it to work on iOS, it ran amazingly well on iPad 2, but the performance on iPad 1 was slow. Todd was excited at the prospect of porting the game over, but the performance issue was very familiar to his previous experiences with ZenFlip. He was afraid of putting in a lot of work and getting so close but not having a product he would feel comfortable releasing

06/2011 (24)

in the end. He took the game and immediately applied techniques learned previously for iOS optimization. He assumed Android had a better vector renderer and iOS would run better with bitmap-based rendering. But that game still ran poorly on iOS. As a test, Todd put things back the way they were with Android. Once he targeted the GPU and undid all the bitmap caching and matrix optimizations, he exported it to iOS, and Mr. Mixit performed beautifully. But there were still some glitches in the audio files. HDI is traditionally a Flash shop. James, who provided all the graphics and directions for animations and transitions, is a Flash artist and animator. Todd also comes from a Flash background and likes to set up base components in Flash. By doing so, he has much more control over how things look because he is able to keep all the graphics in vector format. Historically, making audio loop seamlessly using MP3s has been a problem with developing in Flex. By importing uncompressed audio files into Flash, he can export and compress them without the gaps at the beginning and end of the audio file, which is typical with MP3 files. Todd also found that if he took PNG images with transparent backgrounds and pulled them into Flash builder, the size of the images were causing the application’s size to increase dramatically. When they’re pulled through Flash, they can be condensed using JPEG compression and retain the transparent background, thus creating an image the size of a JPEG but with the advantages of a PNG. This, of course, made for a smaller application size, which was a big deal for HDI, whose

WEB DEVELOPMENT

•

mission is to be able to work from Flash and Flex. The minor problems Todd had related to screen transitions; anytime the entire screen image had to change, it slowed way down on iOS. To solve this, he cut back the use of screen transitions. He also encountered some issues with embedded fonts in input text areas, but solving them fixed Mr. Mixit and the next test on iPad was successful. Mr. Mixit has been tested and runs well on iPad 1 and 2 and iPhone 4. HDI was truly amazed by the performance they were able to get in a Flash build. Originally, the company was skeptical about coding for two different operating systems and how they would behave. But they were able to use almost the same code for Android and IOS. In the end, HDI realized that the differences between Android and IOS, as far as programming for a game is concerned, are minute. The code varies by only 2-3%. This has big implications for developers! Once a developer has created a game for one operating system, the work to optimize the game for another is minimal. This enables developers to reach a much broader audience. The experience has taught Todd and the rest of the team at HD Interactive a lot: •

HDI was able to use actual Flash timelines to create animations. They didn’t think that would ever be possible, especially for mobile. When you’re able to combine an artist and developer together and they can use the same tool so the artists’ vision is truly expressed, that’s a big deal!

They learned they could create seamless loops with compressed AIF files instead of choppy loops done with MP3. Though AIF is 10x the size of MP3, Todd discovered he could go through Flash using MP3 compression on an AIF file from Flash and bringing it over to decrease the size. There is a huge benefit to using Flash instead of standard audio or image files. In the end, they learned that programming for iOS and Android are really quite similar. And changing technology will continue to make them more so.

HD Interactive will continue to update and improve Mr. Mixit. When asked if he would change anything, Todd said, You’re always learning new tricks and new techniques. We see things and say, I wonder if that would help or make it faster. A developer’s work is never done. Mr. Mixit is available now in the Android and Amazon marketplaces for only $.99. Thanks to Todd’s hard work, it is also for sale in the iTunes store, offering iPhone and iPad users the chance to jam out and play with the robot DJ. In the meantime, HD Interactive will continue to develop and grow as a company, finding new ways to create. They have already completed other applications for iPhone, iPad, Android, and look forward to creating apps for Blackberry and Nook. HDI will continue learning and building in-house applications and solutions for clients in 2011. To learn more, visit http:// www.hdinteractive.com or http://www.hdiblog.com.

SEAN CAREY Sean Carey leads the strategic vision, direction and growth of HD Interactive, an award-winning development company. As CEO, he guides the company to ensure that its mission and objectives are re�ected in the innovative products and services offered to clients. Sean founded HD Interactive in 2002. His strong belief in quality custom products and his drive to satisfy customers has been the basis for his company, and HD Interactive has grown to include several employees, all of whom share his ideals. HD Interactive has created projects for many of the world’s most recognized brands, including Kodak, Pepsi, Suzuki and Disney, using Flash, Flex and other Adobe technologies, as well as PHP and other popular coding languages. Sean received his bachelor’s degree from the University of South Florida and chose to further his education in technology, design and the internet by attending the International Academy of Design and Technology in 1994. He began his career at Hydrogen Media and served as Vice President of Development before leaving to start HD Interactive.

06/2011 (24)

BUSINESS DEVELOPMENT

Benefits of Using Document Management System In modern world, all companies are basically the same. And yet again, each of them is different and specific. What you will learn…

What you should know…

• why using dms can help your business • how dms can help your business • how to improve e-business

• what dms is • how IT services help businesses • what’s e-business

ach company has its unique qualities: different business activities, the number of employees, costs, working environment, etc. but what all of them have in common is that they work with a lot of information necessary for performing their core business. Therefore, they all have the same problems – filing, record keeping and the organization of documents. At the same time when it became obvious that the old way of running a business, with dusty archives, huge stocks of paper and registers and hours spent in a search for lost documents, just didn’t function anymore, system for document management appeared. Original form of this system was developed in the end of 80s, at the same time when huge amounts of information that needed efficient archiving, sorting and organizing into data base appeared. Since then, the number of information isn’t really reducing. Just the opposite. That is why this system is constantly being developed so it could follow the demands of modern business. Options which online document management system can offer today are really amazing. And the benefits it has in comparison to paper archives are immeasurable. To make it easier to compare, let’s look at the drawbacks of paper archiving using a description of a specific situation: when a new document appears in an organization, it should be filed into already stocked paper archive. This

procedure implies that the person in charge of filing (let’s called them person X) has to manually mark the page and put the document into a drawer or a locker that is alphabetically correspondent to the initial letter of the document. Logical, isn’t it? It automatically means that we have to pay person X for the time spent in getting to the archive and performing the task. If the locker is full, the document has to be put in some other place, which means that person X has to open a new locker, file the document and remember where they have put it. Information about the new place of filing this document is saved only in the memory of person X, where it is certain to remain – at least for a while. In the case that person X gets a better job offer and leaves your company – the information about the archiving place goes with them. In the meantime, the business develops, new clients, as well as new information, new documents, briefs, invoices, bills, order sheets, etc. appear. But, what if you happen to need the document we have mentioned earlier? You will lose valuable time on searching through your documents. And even if in the end you do manage to find and change the document, there is still a risk that you will misplace it again. The research shows that person X annually loses 150 working hours on searching for lost documents. It is simply unacceptable! That means that person X annually loses 150 hours which could have been spent

06/2011 (24)

Benefits of Using Document Management System

on making money and, in addition, they were paid for this kind of lost time. The next question we can ask you is the one linked to the number of persons X in your company. After you have answered the question, multiple the number of persons X with 150 annually lost working hours per person. Something that you have considered to be meaningless expense can prove to be a huge black hole which drains out company’s time and money. In case that more people need the same document to do their job and one of them doesn’t put the document back where it was, it can lead to a chaotic situation. The next question I ask here is how safe your documents really are when anyone can take them out of the locker? The possibility of having double documents is very often. It is enough to have the same document marked with different letters. That implies having twice as more papers, office material, and more lockers, less free space in your office as well as more need for a bigger office – all in all, having increased company’s expenses in all of the areas. If you use online document management system, you can solve 99.9 % of your problems linked to paperwork, and all that in only a few clicks. All new and existing documents will be transferred into electronic archive by a simple scanning and organizing of information in different folders and subfolders in their electronic form. You can assign them titles which remind you of their content, as well as giving a short description of the content itself. You can also make a back-up for all the information in your electronic office at any given moment. Each employee, client, and even an accountant can have a special user’s profile with specifically defined rights of access – all to avoid the possibility of all users having the ability to see all the documents. These profiles will include all the information needed for mutual cooperation. In that way, you eliminate time lost on personally taking the papers to your accountant, so that they could do their part of the job. The only thing you have to do is to place all the documents in their online office, and they can immediately start doing their job.

06/2011 (24)

Browsing the documents is done by a powerful browser, in only a few seconds. Criteria by which you can find certain document are numerous: name, description of the content, input date, a part of the text, the author, category it belongs to, etc. The control over documents is increased, because each information is kept – from the original version of the document, through any change (each is manifested through creating a new version of the document, which enables you to see what has been changed and when), all the way to the last version of the document or to its deletion. Now, the names of users who had done the changes are saved, as well as the information about when they had done the changes and, most importantly, what kind of changes they had made. All documents are in a virtual online office, which means that paper archives no longer exist and don’t take away any space in your office. The safety of you documents is guaranteed, because they are protected with encrypted code just like the one used in banking systems. Step into the future! Step into the office of the 21st century!

IVAN MOJSILOVIC CEO at E-75 IT Services Ivan Mojsilovic have started his professional carrier as a software developmenr in a small multinational company that specialized in gaming industry. After gaining experience in such environment, next logical step was to work in big company with lot of development teams and huge projects. With mixed experience from two different environments, a chaotic and extremely �exible and huge well organized and extremely slow and rigid, Ivan was able to see bene�ts from both and to mix best practices in order to create a better approach to the team and project organization. Ivans goal is to create the best possible working environment and processes to help people be productive as much as possible.

INTERVIEW

Interview with

Luca Mezzalira

Mart3 | The Flash Platform Company is an Italian agency focused on Flash Platform development that use those technologies to interact with people and real world. In fact the main focus of the company is create engaging experience with real world or solve enterprise production problems to save time. Mart3 is also an Adobe Authorized Training Center and takes part in national and international projects based on Flash Platform technologies.

You are Flash Developer could you tell our readers about your application, please?

Yes of course, mPresenter is an application launched last year that helps people in a conference during own presentation. In fact with a simple system composed by a smartphone (iPhone or Android) and a desktop application made with AIR you can manage your slides and when you are on the stage with your smartphone you can change slides, draw or point on them easily with your fingers.

Why is it so unique and why is it so interesting?

This is a good question, I personally think that it’s so interesting because is totally cross platform so you can have it on Linux, Mac or Win and also on Android and iPhone too. Another interesting feature is that mPresenter really helps you on the stage, I made several speech in last year with mPresenter and each time I solve problems on the stage with it. For example when you have a double monitor where are showed your slides and you need to highlight a concept or a value on the slide, with mPresenter you draw or point

on the slide in both screens, with a hardware solution you can highlight only one screen per time. This is only one of the benefit of mPresenter for now, but in our roadmap we have new interesting features to add in this software to create a real interactive experience during presentations.

To whom it is addressed?

Mainly is focused to speakers, project managers, teachers, business people or anyone who make presentation and needs an help on the stage. I used also with some friends of mine when I’d like to show photos of my holidays or my dog and I’d like to highlight details of them.

If I need to make my own presentation what I should do first?

Mpresenter is easy, first of all make your presentation with keynote or powerpoint, it’s the same. Export all your slides to images (jpg or png are goods enough) open mPresenter and drag or copy everything on the main window, then you’ll see all slides on the window. Now you can move them in the right place, add comments or delete.

04/2011 (24)

Interview with Luca Mezzalira

Before go to the presentation download mpresenter mobile from AppStore or Android Marketplace. Finally when you are on the stage you have to connect computer and smartphone to the same wifi connection and insert the IP address of your computer in the first screen of mPresenter mobile. Have fun!

Could you let us know why and when we should use it?

Mpresenter was born to help me during presentation then I decide to create a real product to share with people on mobile marketplaces. Today I’ve 4000 mPresenter downloaded from mobile marketplaces so it’s a good result for me, the right question probably is why not use it?! It’s free, it’s cross platform, it really helps you... I don’t find any real point to don’t use it.

We know now more about your mpresenter apps so could you tell us more how did you get started with Flash and Flex?

In the middle of night of 2004 I started to study Flash because during the morning I worked like warehouseman in a company. After 1 year an Italian web agency asked me to became a flash designer after seen my personal website (made with Flash of course). There I started with Actionscript 2, I’ve never used it before that experience, and I was really exciting to work with this new language, in fact I became a certified developer on Flash MX 2004. In an year I became freelance and I started to work with several italian agencies with good results. Then I became also Adobe Italy consultant in 2008 and this year Adobe Community Expert too. Now I’ve a company called Mart3 | the Flash Platform company, we are in 6 and in June we’ll grow again because we create a new company called Inside a Bit with another cool company, we will become 11 people and we’ll focus to make real innovation with Flash Platform, Jquery, Java and PHP.

What are your future plans regarding the app and your company?

For mPresenter I’m looking for venture capitalist to add the boost to this project, if I can’t find them I’ll go ahead with our forces but I’m sure that with the right boost mPresenter will become an amazing tool. On Mart3 side, we are growing a lot and I’m sure that we’ll take part in new interesting projects thankfully also by the merge of two vertical companies that will become a new concept of multimedia agency.

What features would you like to add to your application?

The most cool feature for me is a new mobile application dedicated to people audience that will see slide by slide on a tablet or smartphone what the speaker is showing during own speech and save or share them on social networks with a simple tap on the screen. This could open the doors to interactive sessions where people interact with speaker to create a real journey trough concepts, ideas and so on. But we have in mind several new improvements that make mPresenter an amazing tool to present own products, services or ideas.

Finally, please tell our readers, in your opinion, what development opportunities of the Flash/Flex world would be?

I personally think that Flash Platform will have an interesting future better than what we expect, I saw some posts from Flash Player team that talked about new features like multithreading, 3D implementation, Garbage Collector APIs, performance improvements and so on. We are living in the best moment of Flash Platform and I’m really proud to be part of this great community that everyday surprise me with amazing projects or ideas and I’m really inspired from those people that are really strong and insane to create Flash Platform stuff.

You have your own company Mart3. Could you let us more about it?

Of course, Mart3 is officially born in 2008 when I open my first office, it’s a company focused on Flash Platform development, we usually work in particular project, for example to create software for embedded devices, touchscreen, mobile devices (tablet or smartphone) and also enterprise application. We work in Italy, Switzerland and Singapore too, now we are approaching a new market in Middle East. I’m proud to say that Mart3 is my dream that become true.

06/2011 (24)

INTERVIEW

Interview with

Charlie Collins, Michael D. Galpin, and Matthias Kaeppler – the authors of Android in Practice

Android in Practice is treasure trove of Android goodness, with over 100 tested, ready-touse techniques including complete end-to-end example applications and practical tips for real world mobile application developers. Written by real world Android developers, this book addresses the trickiest questions raised in forums and mailing lists. Using an easy-tofollow problem/solution/discussion format, it dives into important topics not covered in other Android books, like advanced drawing and graphics, testing and instrumentation, building and deploying applications, using alternative languages, and native development.

Could you please tell our readers something about yourself? What do you specialise in?

Charlie Collins: I’m a software grunt with a background in web applications and web services. I have always been interested in mobile too. I’m also a longtime contributor to several open source projects, and a big believer in the open source philosophy. I’ve worked for several large enterprises, and several interesting startups. I’m excited about the convergence of mobile, tablets, web apps, and even large screens like televisions. Michael Galpin: My name is Michael Galpin. I am an Android engineer at Bump Technologies. Prior to working at Bump, I was at eBay for four years where I worked on eBay Mobile for Android, as well as many other mobile projects at eBay. Software development for mobile devices has definitely been my specialty over the last few years. Matthias Kaeppler: I am currently working for Qype.com, Europe’s leading website for local reviews, where I lead development of our mobile products. My background is mostly Web technology and Web development, but I jumped the Android train early on

(back in early 2008). Nowadays my focus is on Android testing and build automation, as well as designing and implementing Web services that drive mobile applications.

Could you please tell us something about your book?

CC: Android in Practice is the book I’ve wanted to be a part of for some time. It goes beyond the basics for more advanced readers, but also doesn’t skimp on the background for beginners. It’s been a challenging balance, but I think it has come together very nicely. Another big thing with this book is that it comes from experience. Not just my own (I’ve written several personal Android apps that are in the Market, and I work for a company that has several there too), but also from my very talented co-authors – Michael Galpin (currently at Bump, formerly of eBay) and Matthias Kaeppler (Qype). There are a lot of Android books out there now, but I think this one will distinguish itself as having a lot of invaluable information that others don’t have, and a goodl balance of introductory information as well.

04/2011 (24)

Interview with Charlie Collins, Michael D. Galpin, and Matthias Kaeppler

MG: The idea behind Android in Practice was a more advanced book for people who didn’t just want to dabble in Android or learn it as a hobby, but who wanted to make a career out of it. It certainly introduces a lot of theory and basics, but it also shows you techniques used in some of the most popular apps on the Android Market. MK: Our book is very much focused on actual, real-world problems that arise in day-to-day Android application development. We cover a broad range of topics, but focus on the important bits, such as: how can I build scalable user interfaces, in face of Android’s plethora of screen sizes? How do I minimize user frustration by building clever networking code, considering the flakiness of mobile data connections? We also cover topics that haven’t been covered in any other Android book in similar depth, like build management and test automation.

Why did you chose to work with Android and not with iOS?

CC: My decision to work with Android was really pretty simply, openness. The bottom line for me, being a long time open source advocate, was Android is open. Being able to see, and contribute to the source is huge. Clear and non-opaque market terms are also a big factor. I readily admit that Apple products are great, in many ways they are more polished and they have their advantages, but choice, and freedom to do what I want with my code, my applications, and my devices are more important to me. And, I think it’s a long race, Android has come a long way in the last few releases, and it gets better and better. A guided open source project with a consortium of companies and individuals supporting it will allow Android to continue to make strides in usability and features. MG: I have also worked in iOS, I even wrote some tutorials for Apple back when they first opened the App Store to developers and iOS was known as iPhone OS. I think Android is a superior technology for building apps especially. It has more advanced capabilities. If you look at a lot of the wishlists that iOS developers have for the next version of iOS, they are mostly things that have been part of Android for years now. MK: I have always been attracted by open source software, and I have even founded a few open source projects myself. The idea of being able to peek into the framework sources when you don’t understand what’s going on is very attractive. The entry barriers for getting started with Android are also very low compared to competitive platforms. You know Java? Good – download the SDK, and off you go.

Nowadays there is a lot of hype around the topic of Android. Why is it so interesting?

06/2011 (24)

CC: On the question of hype around Android, I’d argue that it’s not hype, it’s genuinely compelling and interesting. It’s an open platform that has seen a huge adoption rate by device manufacturers and mobile carriers, and it allows developers the freedom to build what they want in a variety of ways (with a less-than-perfect but still very compelling approach and set of APIs).. In my mind it’s an important platform for businesses, developers, and individuals, and it deserves a lot of the buzz. MG: As the saying goes, it’s the users stupid! Android has been the top smartphone OS in terms of new users for a while now, and the lead is only growing. It’s pretty obvious that soon there will be many more Android users than any other OS. All of those users are very attractive to a developer. MK: To developers it’s interesting because of its open nature, and because it builds on established technology like the Java language and related libraries, and the Linux kernel. To consumers it’s interesting because it offers a lot of choice, both in terms of hardware and software. Last but not least, it’s interesting because it’s Google who are driving the platform. There has always been a lot of traction behind Google’s products, and a company with a slew of widely established Web based products is more likely to deliver a well-integrated, seamless user experience to the consumer.

Who can benefit from using the Android applications? In other words, to whom is it directed?

CC: As to who can benefit from Android, I may have jumped the gun in my previous answer there, but I think it’s fairly obvious that end users, businesses and organizations, developers, and everyone involved benefit. It’s not an entirely altrusitic platform of course, Google and the other OHA companies created it to make money, but still, it has been beneficial for consumers and developers too. Consumers have more choice and a very capable open platform, and device manufactures and mobile carriers also have a platform they can customize and use in many ways. MG: The Android Market is incredibly diverse, just like the Android user base. There are apps for whatever you want to do. Yesterday I used an Android app to look up a home made ice cream recipe that I had saved on my laptop last year. Today I used an Android app to look up showtimes for a movie and then buy tickets for that movie. Everyone can benefit from Android apps, because there are apps for everything. MK: That’s still difficult to say at this point in time. There are of course the smartphone users, which were the primarily targeted market when Android took off.

INTERVIEW

Then the tablet craze started with Apple’s iPad, and Google put out Honeycomb, which added support for tablets. That’s all consumer electronics of course, but Android can do much more. Due to its low cost for device manufacturers and software developers, I can easily see it being adopted in non-consumer markets, too.

Is it possible to use Android in any other way than in the cell phone?

CC: Android on other than mobile phones you say? Yes, of course. Tablets are just becoming the new hotness and they are getting a lot of attention, but I think Google TV is also very interesting. It’s admittedly struggling with consumers a bit, but I am pulling for it. I think opening it up to developers and creating a Market, which there are rumors will happen later this year – will help a lot. Having a real app capability on more devices, including home automation (the new Android ADK), set-top boxes, tvs, opens up a world of possibility that I think can further benefit both consumers, developers, and businesses. MG: Well of course! There has been a lot of hype about Android tablets this year, and for good reason. I have two tablets, a Motorola Xoom and a Samsung Galaxy Tab 10.1. I love using them for reading books and playing games. Beyond tablets, Google has really opened things up recently with the Android Open Accessory Development Kit (ADK). This really allows a huge variety of physical devices to interact with Android smartphones and tablets. I am really excited to see where that goes. MK: Absolutely. As just mentioned it runs on tablets, but that’s only the beginning. Compared to iOS, Android is a platform, and can run on all sorts of electronic devices, like set top boxes, or car dashboards. Google recently announced the Open Accessory Development Kit which let’s Android devices talk to all kinds of devices, even lightbulbs. Personally I think that Google still has some surprises up their sleeves as to where they’re going with Android.

What are the predictions for future regarding the Android system?

Android with everything else. It’s been #1 in terms of new users and growth. Soon it will be #1 in terms of total users and apps. Surely it will have > 50% of the smartphone market in the next couple of years. For the tablet market, Android will probably take another year to catch up in terms of new users and growth, and from there things will follow a similar pattern to smartphones (though probably accelerated.) MK: I’m always careful with predictions, and I take all forecasts I read on the Web with a grain of salt. The market is too much in motion at the moment, and everyone wants to get a piece of the cake. One can say with some certainty though that Android’s trajectory in growth in impressive. I could easily see it becoming the number one smartphone OS in emerging markets, since it also runs on phones that are way cheaper than say the iPhone. Moreover, mobile payments are huge in countries like India, and Android was the first platform to introduce NFC (Near Field Communication) support with the Google Nexus S. Google just launched their Wallet app, which leverages NFC technology to pay on the go.

Do you customise your Android products or just use stock firmware?

CC: I do customize my personal Android products. I prefer the stock Android flavor over the carriers and device manufacturers experience. For this reason I often use custom ROMs. I’m a big fan of the Cyanogen series of ROMs, for example, and of the entire aftermarket experience you get with Android. MG: I use stock firmware, but I do customize my phone (a Nexus S) a bit. For example, I replaced the stock launcher and keyboard. I’ve been looking for a nice camera replacement as well, but so far haven’t found one to my liking. MK: Yes and no. I had Android phones that I customized, but my Nexus One is running a vanilla Android. I like the idea though that I could change that any minute :-) Thank you very much for your time helping preparing this interview.

CC: For future predictions I’d say that we’ll see more steady progress and even more adoption. I know that’s not going out on a limb, but it’s true. I am not sure if other venues like Google TV, or NFC, will survive and thrive or not, even if I would like them to. MG: Android is a classic disruptive technology, and there is really no sign that any competitors have any clue on how to compete with it. They are all clearly trying to either carve out or maintain their own little niche where they can work they can squeeze out as much money from their users as possible. That leaves

04/2011 (24)