You are on page 1of 37

Editors Note

Dear Readers,
The first rays of spring sun bring a new Flash and Flex Developers Magazine to you and I have new fresh articles to share. First of all, take a look at the review of FlippingBook Publisher2 by Chetankumar Akarte. FlippingBook Flash Page Flip Engine is a tool for generating a realistic page flip effect with some easy clicks. Use this knowledge if you want to start an online magazine, want to publish your catalogue, or your own book. FlippingBook is the best solution for you. For those of you who cant decide what to use during online web reporting you should read the article from Flexmonster. com by Volodymyr Yatsevsky, who helps you to decide Which Technology is Better for Online Web Reporting Flash or HTML5? Do you know MojoCreatives? Mojocreatives is an online development and publishing company. Their passion is to create Games that are fun and engaging for everyone. Mojocreative is one of the fastest growing gaming networks online. They work with flash games, shockwave games, mobile games and applications. Mojocreatives was founded in December 2010 by Michael Ojo. In the interview from Richard Davey and photonstorm.com you will find a nice talk about the making of Car Games in Flash.As always, Csomak Gabor brings us some news. Read his article and check what Adobe are preparing for developers! Have you tried FlippingBook publisher2? If not, read article by Chetankumar Akarte who will provide you with his opinion about this electronic medium. Enjoy! Adela Kuniarska and FFD Team

Editor: Adela Kuniarska adela.kuzniarska@software.com.pl Proofreaders: Garry Schafer, Michael Jovel,Alberto Jose Argon Alvarez, Nick Middleweek, Ranjan Rajendran, Ed Werzyn DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Senior Consultant/Publisher: Pawe Marciniak Flex/ActionScript 101 Section Editor: Marc Pires marcpiresrj@gmail.com iPhone Development Section Editor: Ryan DAgostino Games Section Editor: Chris Hughes Contributing Editors: Pedro de La Rocque, Ali Raza, Csomk Gbor Publisher: Software Press Sp. z o.o. SK ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing If you are interested in cooperating with us, please contact us by e-mail: cooperation@software.com.pl 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. 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 SmithKielland, Justus, Csomk Gbor, 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

Mathematical formulas created by Design Science MathType

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

ATTENTION!

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.

DISCLAIMER!

04/2012 (34)

CONTENTS
InBrief
6 AIR 3.2 RC SDK available on Adobe Labs!
NEWS BY GABOR CSOMAK

You will be able to develop fully GPU accelerated mobile content with AIR 3.2 for iOS and Android using the same Stage3D APIs you are using today on the desktop. It allows you to distribute AIR captive runtime versions of apps, enabling you to publish apps immediately to marketplaces such as the iOS App Store, Android Market, and Amazon Appstore. We recommend that you update your applications with the GM build when it is available.

Creating Animations
8 Working with Sprite Sheets in Starling
BY CHRISTOPHER CALEB

book available in electronic form. EBooks provides a great alternative to print books without having to fork out thousands of dollars to design and publish a print book; you can generate quality eBook with minimal expense. You can easily become authors overnight and earn income from selling online eBooks. The wide circulation, availability, and interactivity of eBooks have changed the way traditional print books are consumed by the market. So, Say thanks to eBooks softwares. FlippingBook Publisher 2 by Mediaparts Interactive allows you to Create, Edit, Modify, Publish your book content with some clicks. You can create digital EBooks, E-Magazine, E-Brochure, E-Catalogues, EJournals, E-Manuals and lots more with real life-like flip page book effect.

Fixel Power Tool


30 Flixel Power Tool A monster of an update!
BY RICHARD DAVEY AND PHOTONSTORM.COM

Learn how to create animations using sprite sheets and Starlings MovieClip class, the fundamentals of Starlings display list, How to create a texture atlas and define its regions, know the basics of animation playback. Last month we took our first look at the Starling Framework and learned how to create stunning GPU-accelerated particle effects. Now well take a step back and focus on Starlings core framework. Specifically well learn how to work with textures to create images and bitmap animations

The Test Suite was a great idea, but was getting cumbersome. So I have refactored it extensively. Tests are now stored in sub-folders relating to the tool they apply to. Ive also dropped the Flx part of the test class names. There are lots of new tests, and the suite has grown in size vertically to accommodate the layout changes.

Flash vs. HTML5


22 Which Technology Is Better For Online Web Reporting Flash vs. HTML5
ARTICLE FROM FLEXMONSTER.COM BY VOLODYMYR YAT SEVSKY

Interview
34 Interview with Michael Ojo
BY RICHARD DAVEY AND PHOTONSTORM.COM

If you want to develop two identical projects in Flex and HTML5, there is a high probability that the HTML5 project will be more expensive. But I doubt that anyone will even try to reach the Flex-level quality in an HTML5 project. Any HTML5 enterprise project will have lower requirements in the first place. From the very beginning parameters like reliability, ability to adapt to different the screen sizes and densities will be simplified. Instead of implementing these features, the functional specification will include testing under seven browsers, and developers will spend most of their time in the debugger.

Mojocreatives is an online development and publishing company. Their passion is to create Games that are fun and engaging for every one. Mojocreative is one of the fastest growing Gaming network online. They work with flash games, shockwave games, mobile games and applications. Mojocreatives was founded in December 2010 by Michael Ojo.

Review
24 FlippingBook Publisher2
REVIEW BY CHETANKUMAR AKARTE

Electronics medium like computer, mobile, iPhone, iPads revolutionize book and publication industry. EBook is an electronic version of a printed book or a
04/2011 (34)

IN BRIEF

AIR 3.2 RC SDK available on Adobe Labs!

Adobe announced the availability of AIR 3.2 (Release Candidate) with Stage3D support for mobile. You can download it now on Adobe Labs. You will be able to develop fully GPU accelerated mobile content with AIR 3.2 for iOS and Android using the same Stage3D APIs you are using today on the desktop. It allows you to distribute AIR captive runtime versions of apps, enabling you to publish apps immediately to marketplaces such as the iOS App Store, Android Market, and Amazon Appstore. We recommend that you update your applications with the GM build when it is available. And this is just the beginning of the surprises we have for you, this is going to be an exciting year. The team cannot wait to see what you guys will create, what we have received already from developers on our prerelease looks stunning, as usual I am sure you guys will find very creative ways to use Stage3D for all types of content. Some Stage3D games are already out in the iOS Appstore, such as Spaced Away, Falanxia, Geometry Arena, Delta Strike. Source: Bytearray

over to GitHub https://github.com/StickSports/ANEGame-Center and grab the extension and also check out the source if youre curious. Source: The Flash Blog

REDWOOD CITY, Calif., March 30, 2012 (GLOBE NEWSWIRE) News Facts

What: Informatica Corporation (NASDAQ: INFA), the worlds number oneindependent leader in data integration software,announced today that the company is hosting a multi-city hands-onMDM(Master Data Management) workshop roadshow around the globe.Informaticas MDM experts will help attendees minimize MDMimplementation risk by explaining the differences between the twoMDM approaches*, so the attendees can determine the better approachfor them based on specific business requirements and can understandMDM implementation best practices. Senior IT leaders who are planning MDM projects will gain: An understanding of the differences between two im plementationapproaches: pre-packaged MDM and business-model driven MDM andwhich approach works best for their business. A quantitative realization of costs and benefits of usingeither approach based on their specific use case. A set of MDM implementation best practices and the opportunityto build a business case during the workshop based on insights frompast successes and current projects Source: www.informatica.com/events

Unreal Epic Citadel demo is public

You guys may remember the announcement Adobe made at Max last year where Epic announced they were able

Adobe Gaming website

to target Flash Player now. You can now see this live by visiting the Unreal website http://www.unrealengine.com/ flash/. Make sure you have the RC version of Flash Player 11.2 installed. In case you are running Chrome, just type about:plugins (in the url) and select the Flash Player 11.2 you installed rather than the embedded one. Source: Bytearray

http://gaming.adobe.com: a place to discover what Flash enables for game development, showcase content but also a place to help developers get started with the technology. And finally, a place to show the world what Flash can do. Source: Bytearray

Alternativa 3D is now opensource

Free iOS Game Center ANE now available!

Richard Lord, a very talented game developer based out of the UK, has released a free and open-source extension that enables you to tap into Game Center on iOS. Big thanks to Richard for creating this free extension. Go on

Popular 3D framework from Russia Alternativa Platform is now opensource. The source code has been published to github and is available here: https:// github.com/AlternativaPlatform/Alternativa3D. You can read more here on Alternativas blog: http://blo g.alternativaplatform.com/en/2012/03/29/alternativa3d8-is-out-in-open-source/. Source: http://blog.alternativaplatform.com

News by Gbor Csomk (@csomak)

04/2012 (34)

CREATING ANIMATIONS

Working with Sprite Sheets in Starling


Learn how to create animations using sprite sheets and Starlings MovieClip class.

What you will learn


The fundamentals of Starlings display list How to create a texture atlas and dene its regions The basics of animation playback

What you should know


How to use Flash Builder or a similar IDE such as FlashDevelop or FDT You should be comfortable developing with ActionScript 3.0

ast month we took our first look at the Starling Framework and learned how to create stunning GPU-accelerated particle effects. Now well take a step back and focus on Starlings core framework. Specifically well learn how to work with textures to create images and bitmap animations. This tutorial will walk you through the steps required to create an underwater scene complete with animating air bubbles (Figure 1) that rush towards the surface. Youll be introduced to Starlings display list and use its MovieClip class to construct your first animation sequence from a sprite sheet. Along the way youll find out just how closely Starlings display list is modeled on Flashs own classic display list, making the framework relatively straightforward to work with. Dont worry if you havent attempted last months tutorial. Although it helps, you should still be able to jump straight into this tutorial, even if you have no prior experience with Starling.

both CS5 and CS5.5 can be manually configured to support Stage3D and the Starling framework. Detailed instructions can be found at http://blogs.adobe.com/ rgalvan/2011/11/adding-fp11-support-to-flash-pro-cs5and-cs5-5.html. Now install the Starling API to your development computer via GitHub. Download and extract a zip file of the Starling framework from https://github.com/ PrimaryFeather/Starling-Framework. You can find the Starling API Reference, tutorials, and other great

Getting Started

Youll need a suitable integrated development environment to work through this tutorial. Ill be using Adobe Flash Builder 4.6, a trial version of which can be downloaded from www.adobe.com/downloads. Youll also need Flash Player 11.1 installed in your browser. You can update to the latest version by visiting http://get.adobe.com/flashplayer. Although we wont be covering Flash Professional,

Figure 1. The nal underwater scene complete with animating air bubbles

04/2012 (34)

Working with Sprite Sheets in Starling

resources on the official website at http://gamua.com/ starling/help. With Starling downloaded, launch Flash Builder and create a new ActionScript 3 project by selecting File > New > ActionScript Project. Name your project Bubbles and opt for a Web application type. Youll need to add Starling to your projects build path. This can be done from the New ActionScript Project panel by linking your project to the Starling library source code, or to the provided precompiled SWC library. To use the source code, click Next then select the Source path tab. Use the Add Folder button to add Starlings source folder, which can be located within its package at: PrimaryFeather-Starling-Framework\starling\ src\. If youd rather use the SWC, then click Next before selecting the Library path tab. Click the Add SWC button and browse to and select PrimaryFeather-StarlingFramework\starling\bin\starling.swc. When done, click Finish and your project will be created. Before we start coding, its important your project is using the correct rendering mode. Starling requires the
Listing 1. Source code for the Bubbles class
package

use of direct-to-path rendering, which enables hardware acceleration via your computers GPU. Direct rendering can be enabled by editing your projects HTML template file and passing an additional parameter. To do this, open the Package Explorer panel by selecting Window > Show View > Package Explorer. Within your project, expand the html-template folder and right-click on index.template.html. From the context menu, select Open With > Text Editor to open the file within Flash Builder. Within the template file, add a new line of code to set the wmode attribute to direct then save your change:
attributes.wmode = direct;

If youre using Flash Builder 4.6 then youre projects setup is complete. If however youre using an older version of Flash Builder or another IDE then refer to last months tutorial for a list of additional steps you may need to perform. Additionally take a look at the following resource on the Starling website: http:// gamua.com/starling/first-steps.

Setting Up Starling

import flash.display.Sprite;

import flash.display.StageAlign; import starling.core.Starling;

import flash.display.StageScaleMode;

[SWF(width="640",height="480",frameRate="60",backg
public class Bubbles extends Sprite

roundColor="#85E9F3")]

private var starling:Starling; public function Bubbles()

With your development environment set up youre ready to start coding. As with all Starling projects, well begin by initializing the framework. From the Package Explorer panel, open your Bubbles.as class and enter the ActionScript shown in Listing 1. The code is almost identical to last months. When calling Starlings constructor, we passed a class named BubblesExample as the first argument. This class will be our root display object and container for all other content within Starlings display list. Well get onto writing the BubblesExample class in a moment. Also, notice that an anti-aliasing level of 2 was set. Well be taking advantage of sprite scaling during this tutorial so a little anti-aliasing will help smooth any pixilated edges.

Creating your Root Class

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE; starling = new Starling(BubblesExample, starling.antiAliasing = 2; } starling.start(); stage);

With Starling initialized we can move onto the creation of a skeleton root class. Again, if you worked through last months tutorial youll already be familiar with these steps. Within Flash Builder, add a new ActionScript class to your projects src folder. Name the class BubblesExample and ensure that it extends starling.display.Sprite. Dont confuse Starlings Sprite class with flash.display.Sprite. Starling mimics many of the display classes used by Flashs traditional display list, which can catch-out those new to the framework. Be careful, your IDEs auto completion will likely default to the flash.display classes rather than starling.display. Always check your package imports as this is a common mistake.

04/2012 (34)

CREATING ANIMATIONS

Add the ActionScript shown in Listing 2 to your class and save it. Within the constructor, a listener is added for the ADDED_TO_STAGE event. When your root display object has been added to the stage you will be free to add content to it via the addedToStage() handler. Its within this handler where well setup and use the resources required to construct the images and animations for our underwater scene. Lets move onto that by adding a background image.

Starling and GPU Theory

Starling provides many display object types (Figure 2) that can be found within the starling.display package. The Image class is ideal for displaying a static bitmap image, whereas the MovieClip class can be used to perform animation. As youve already seen from creating the skeleton version of BubblesExample, theres also a Sprite class, which acts as a container for other display objects. Although similar, dont confuse MovieClip and Sprite with Flashs own native versions. The display classes well be using during this tutorial can all be found within starling.display. Well use the Image class to place a background image onto the screen. But before doing that its useful to understand a few concepts related to GPU programming. GPUs are extremely fast at drawing triangles, which are commonly used to construct the complex 3D graphics used in video games. However these triangles
Listing 2. Our skeleton class representing the root of Starling's display list
package

can also be used to construct 2D images. This is done by joining two triangles together to form a quad. The GPU can then apply a texture across the two triangles to depict a 2D image within a scene. Figure 3 illustrates this process. For those unfamiliar with the term, a texture is essentially a bitmap image stored in GPU memory. A texture must be mapped to a quad before it can be made visible. Conveniently, GPUs are also extremely efficient at texture mapping. As youre about to see, Starling takes care of much of the hardship involved when working directly with the GPU. Lets now go ahead and add our background image.

Adding a Background Image

Well start by embedding the PNG that represents the background. Add the following private member variable to your BubblesExample class:
[Embed(source=/assets/background.png)] private var BackgroundBitmap:Class;

Ive made this PNG available at http:// ww.yeahbutisitflash.com /downloads /starling-tut2/ background.png. Simply point your web browser to the image and download it to an assets sub-folder within your projects src folder. The assets sub-folder wont currently exist so create it using Windows Explorer or Finder depending on your operating system of choice. The PNG will need to be stored on the GPU as a texture. Declare the following private member variable for this:
private var backgroundTexture:Texture;

import starling.display.Sprite; import starling.events.Event;

The Texture class belongs to the starling.textures package and needs to be declared within your class list of import statements:
import starling.display.Sprite; import starling.events.Event; import starling.textures.Texture;

public class BubblesExample extends Sprite

public function BubblesExample()

addEventListener(Event.ADDED_TO_STAGE, addedToStage);

Now we can write some ActionScript to display the PNG as an image. Add the following private method to do this:

private function addedToStage(e:Event):void

{ }

Figure 2. Starlings display objects

10

04/2012 (34)

CREATING ANIMATIONS

private function setupBackground():void { backgroundTexture = Texture.fromBitmap(new var img:Image = new Image(backgroundTexture); } addChild(img); BackgroundBitmap());

Starlings Image class expects a Texture object to be passed to its constructor. To convert our PNG to a texture, the static Texture.fromBitmap() method is used. Once instantiated, a call to addChild() is made to add the image to the display list. Finally, make a call to setupBackground() from within the class addedToStage() handler:
private function addedToStage(e:Event):void { } setupBackground();

Build and run your project. You should see an image of your background.png file displayed on screen.

Preparing a Sprite Sheet

As you can see, adding static images is trivial, but what about animation? Well thats where Starlings MovieClip class comes in. It displays an animation thats depicted by a vector array of textures. Unlike Flashs native MovieClip type, your animation can also be played back using a frame rate thats independent of your SWF. Its also worth noting that while Flashs native movie clip can contain nested display objects, Starlings MovieClip class cannot. While its perfectly valid to load or embed individual textures into your SWF one for each frame of

animation a better practice is to pack your animations frames into a sprite sheet, or what Starling refers to as a texture atlas. A texture atlas is a large texture that contains a collection of smaller sub-textures. Each subtexture consumes a rectangular region within the texture atlas. Well use the terms sprite sheet and texture atlas interchangeably throughout this tutorial. Figure 4 shows the texture atlas that well use for this tutorial. Its 1024x1024 pixels in size and is evenly sliced into 64 regions. Each region represents a frame of animation used to depict a bubble as it moves under water. The animation frames are ordered left-to-right and top-to-bottom. In other words, the first frame of animation is at the top-left corner, and the last frame can be found at the bottom-right. The horizontal and vertical lines have been added for illustration purposes and do not appear in the final version of the PNG. Also, the PNG youll be using will actually have a transparent background. Creating and using a texture atlas carries several advantages. Firstly, packing all your animation frames onto a single texture provides a performance benefit. The GPU can only work with one active texture at a time. If your graphics are stored across multiple textures then the GPU needs to switch between them, which will lead to a performance hit. Packing everything onto a single texture can significantly increase performance. For example, many video games attempt to place all graphics for a single level onto the one texture atlas to prevent texture switching from taking place. Secondly, texture atlases can help consume less GPU memory. GPUs allocate memory using powers of two (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048) for each of a textures dimensions. If you attempt to

Figure 3. Texturing a quad to create a 2D display object

Figure 4. A texture atlas consisting of 64 frames of animation

12

04/2012 (34)

Working with Sprite Sheets in Starling

create a texture that is not of a valid width or height, then Starling will pad each of your textures dimensions to the nearest power of two. For example, a 33x17 pixel bitmap will actually be allocated the same amount of memory as a 64x32 bitmap. It should be noted that a textures width and height do not need to match. Also a texture cannot exceed 2048x2048 pixels in size. So how can using a texture atlas save you memory? Imagine you are working with 225 frames of animation, each of which is 33x33 pixels in size and needs to be stored on the GPU as a texture. Due to the power of two constraint, each frame would actually be stored on the GPU as a 64x64 texture, meaning that a total of 921,600 pixels worth of data would need to be stored. In other words, a whopping 3,600 KB of GPU memory would be required! If on the other hand, all 225 frames of animation were packed onto a single sprite sheet then they could be arranged in such a manner (15 columns each containing 15 frames) as to collectively consume only 495x495 pixels. Considering once again the power of two constraint, the sprite sheet would be stored on the GPU as a 512x512 texture, which totals 262,144 pixels and consumes only 1,024 KB. A significant saving over storing each frame as an individual texture. Its important you grasp this concept as texture memory on even modern GPUs can be exhausted fairly quickly. Always try to pack your graphics onto a texture atlas to save memory. Thirdly, working with texture atlases can improve load times when reading the PNG data from the filesystem. This is especially true on mobile platforms where multiple read requests can lead to significantly longer loading. A texture atlas will require only a single load operation, which is faster than performing multiple operations to retrieve a series of individual PNGs. While this tutorials sprite sheet has been created for you, when working on your own projects youll need to create the sprite sheets yourself. There are many free and commercial tools available to help you to do this. One worth looking at is the excellent Texture Packer Pro, which is available for both Windows and Mac OS X. Texture Packer can be downloaded from www.texturepacker.com. Okay, now that you understand what a texture atlas is, lets actually write some ActionScript to create and setup ours.

You can download this PNG from http:// www.yeahbutisitflash.com/downloads/starling-tut2/ bubbles.png. Copy it to src/assets/ within your project. Well also be using Starlings TextureAtlas class to define each of the regions that make up our animation frames. Declare the following private member variable for this:
private var bubblesTextureAtlas:TextureAtlas;

The TextureAtlas class belongs to the starling.textures package and needs to be declared within your class list of import statements:
import starling.textures.TextureAtlas;

Well actually be assigning unique names to each of the texture atlas regions. Since all the regions belong
Listing 3. Starlings TextureAtlas class
private function setupTextureAtlas():void

Texture.fromBitmap(new BubblesBitmap()));
const WIDTH:int = 128; const GRID_W:int = 8; const GRID_H:int = 8;

bubblesTextureAtlas = new TextureAtlas(

const HEIGHT:int = 128;

var subTextureName:String;

for(var y:int = 0; y < GRID_H; y++)

for(var x:int = 0; x < GRID_W; x++)

var region:Rectangle = new Rectangle(

subTextureName = TEXTURE_PREFIX + x);

x * WIDTH, y * HEIGHT, WIDTH, HEIGHT); addLeadingZeros((y * GRID_H) +

bubblesTextureAtlas.addRegion(subTextureName, } region);

private function addLeadingZeros(value:int):String

Instantiating the Texture Atlas

Embed the sprite sheets PNG within your BubblesExample class, and assign it to a member variable:
[Embed(source=/assets/bubbles.png)] private var BubblesBitmap:Class;

if(value == 0) return "00"; else return String(value);

else if(value < 10) return ("0" + value);

04/2012 (34)

13

CREATING ANIMATIONS

to the same animation, well use a prefix for each name. Declare the following constant:
static private const TEXTURE_PREFIX:String = bubble_;

You now have a texture atlas loaded into memory, with each of its regions defined. Now we can go ahead and create an animation using each of the sub-textures defined by the regions.

This will allow us to name the regions bubble _ 01, bubble _ 02,... bubble _ 63.

bubble _ 00,

Using the MovieClip Class

Now lets write a method that will instantiate the texture atlas and actually define its regions. Add the following code to your class, including a support method thats needed to add leading zeros when naming the regions: Listing 3. The first line of code in the setupTextureAtlas() method creates a TextureAtlas instance. Its constructor expects a Texture object to be passed to it, which is once again created using the static Texture.fromBitmap() method. Optionally, an XML object can also be passed, which defines the texture atlas individual regions. However, for this tutorial well do it manually with the help of the addRegion() method. A nested loop is used to walk the sprite sheets 8x8 grid of animation frames. We know that each frame is 128x128 pixels in size making it relatively easy to calculate the rectangular region that encompasses each frame. A Rectangle object is created for this purpose and passed to each addRegion() call along with a unique string identifier for the frame. Each string identifier is constructed from the TEXTURE_PREFIX constant declared earlier and, the current iterator value of the inner and outer loops. This ensures that each region is correctly named, working down the sprite sheet from left-to-right. The setupTextureAtlas() method made use of Flashs Rectangle class, so ensure that its added to your list of import statements:
import flash.geom.Rectangle;

While the goal is to produce many animated bubbles, well start by creating just one. An animation is displayed by creating a MovieClip instance and passing it a vector array of sub-textures. Remember a sub-texture is simply a region defined within a texture. Lets start by retrieving the sub-textures from your texture atlas. Add the following line of code to your setupBubbles() method:
var frames:Vector.<Texture> = bubblesTextureAtlas.getTe TEXTURE_PREFIX); xtures(

The getTextures() method is used to retrieve all subtextures that start with a certain string. We simply passed our TEXTURE _ PREFIX constant to it, guaranteeing that all the sub-textures belonging to our texture atlas would be returned. Now lets create the movie clip and pass the subtextures to its constructor. Well also specify that our movie clip is to animate at 30 frames per second:
var bubble:MovieClip = new MovieClip(frames, 30);

Remember, we are working with Starlings MovieClip class and not Flashs native version. Include it within your class list of import statements:
import starling.display.MovieClip;

Now write a private method named call setupTextureAtlas() from it:


private function setupBubbles():void { } setupTextureAtlas();

setupBubbles()

and

Finally we can use the following few lines of code to position the movie clip at the center of the screen and add it to the display list:
bubble.pivotX = bubble.width / 2; bubble.x = stage.stageWidth / 2; addChild(bubble);

bubble.pivotY = bubble.height / 2; bubble.y = stage.stageHeight / 2;

Well add more to this method later. Finally call setupBubbles() from your addedToStage() handler:
private function addedToStage(e:Event):void { setupBackground(); setupBubbles();

Youll be familiar with the x and y properties, but what about pivotX and pivotY? They are used to set the display objects origin within its own coordinate space. Think of the pivot point as being a pin through your movie clip. Its the pin thats used when placing your movie clip at its specified x and y positions. Transformations such as scaling and rotation will also take place from the specified pivot point. In the above code snippet, we placed the pivot point at our movie clips center.

14

04/2012 (34)

Working with Sprite Sheets in Starling

Build and run your project. Although youll see the bubble placed in the center of the screen, it wont yet be animating. To update a movie clips animation its advanceTime() method needs to be continuously called. You could do this manually, or let Starling take care of this for you. To offload your animation to Starling, simply pass your movie clip to Starlings default Juggler object. The Juggler is responsible for calling advanceTime() on all objects added to it. At the end of your setupBubbles() method add your movie clip to Starlings default Juggler:
Starling.juggler.add(bubble);

each bubble, so lets add some code to the Bubble class addedToStage() handler to do that:
private function addedToStage(e:Event):void { x = -(width / 2) + ((stage.stageWidth + width) * y = -(stage.stageHeight / 2) + ((stage.stageHeight * } 2) * Math.random()); Math.random());

Listing 4. Our skeleton Bubble class


package

Youll need to import the core of the Starling framework in order to access the Juggler:
import starling.core.Starling;

import starling.core.Starling; import starling.events.Event;

import starling.display.MovieClip; import starling.textures.Texture; public class Bubble extends MovieClip

Now rebuild and run your project. This time the bubble will smoothly and continuously animate.

Creating a Bubble Class

If wed like to create multiple bubbles then it makes sense to encapsulate our bubble code within its own custom class, otherwise the BubblesExample class could become quite messy. We can do this by extending Starlings MovieClip class. From Flash Builder, add a new class named Bubble to your src folder and specify starling.display.MovieClip as its superclass. Add the ActionScript shown in Listing 4 to your class and save it. Well add some more functionality to this class in a moment but first lets explore whats currently there. The class constructor accepts three parameters. The first is a vector array of textures that represent the bubble animation. The second is used to scale the bubbles size and the third will be used to assign a vertical speed to the bubble. These last two parameters will help customize each of the underwater scenes bubbles, ensuring that there is some variety. Being a subclass of MovieClip, its important that super() is called to correctly initialize the base behavior. Both the vector array of textures and a frame rate are passed to the superclass constructor to achieve this. Also, notice that the speed parameter isnt actually used within the constructor. Instead its stored by a member variable of the same name for use later. Finally, you can also see that the updating of the animation has been brought directly into the Bubble class. The constructor takes care of animation updates by passing the class instance directly to Starlings default Juggler. Something thats currently missing is the ability to set the bubbles position. Wed like a random position for

static private const FPS:Number = 30; private var speed:Number; public function Bubble(

frames:Vector.<Texture>, scale:Number = 1.0, speed:Number = 1.0

) {

super(frames, FPS);

this.speed = speed;

pivotX = width / 2; scaleX = scale;

pivotY = height / 2; scaleY = scale;

Starling.juggler.add(this); addEventListener(Event.ADDED_TO_STAGE, } addedToStage);

private function addedToStage(e:Event):void

{ }

04/2012 (34)

15

CREATING ANIMATIONS

The bubble will now be placed randomly on the stage, and can even appear above and below the stage area. This will be ideal for creating a realistic spread of bubbles in our underwater scene. Now the final piece of functionality wed like to add is the ability to move the bubble vertically upwards. We can achieve this by writing a public method that updates the bubbles position each time its called. Add the following update() method to your class:
public function update():void { y -= speed; {

twice its default size and should also move upwards by 4 pixels every time its update() method is called. To actually move the bubble well need to call its update() method from an ENTER_FRAME event handler. Listen for the ENTER_FRAME event by adding the following line of code at the end of your class addedToStage() handler:
addEventListener(Event.ENTER_FRAME, update);

Now write the actual update() handler, and call the bubble instances own update() method:
private function update(e:Event):void { } bubble.update();

if(y < -(height / 2)) x = -(width / 2) + ((stage.stageWidth + width) * y = stage.stageHeight + (height / 2) + (height * } Math.random()); Math.random());

As you can see, it uses your speed member variable to change the bubbles y-position. The remainder of the code checks to see if the bubble has moved off screen. If it has then its randomly positioned below the stage, ready to float back in. This update mechanic helps to ensure that theres a continuous flow of bubbles by re-using a bubble once it has drifted above the stages visible area. Before we move on, save your Bubble class and move back to the BubblesExample class. Lets update its setupBubbles() method to use your new Bubble class. First well need to declare a member variable to hold a reference to the bubble. Add the following line of code next to your class other member variable declarations:
private var bubble:Bubble;

If you publish and test the latest version of your code, you should see a larger version of your bubble moving up the screen. Once it has moved off the top of the screen, it will re-appear at the bottom. Now we need to get this working for multiple Bubble instances.

Adding Multiple Bubbles

Weve covered a lot of ground in this tutorial, but lets wrap things up by putting some finishing touches to our
Listing 5. Bubble base type
private function setupSmallBubbles(frames:

Vector.<Texture>):void

const SMALL_BUBBLES:int = 25; const SCALE:Number = 0.4; const SPEED:Number = 1.3; const SCALE_VARIANCE:Number = 0.3; const SPEED_VARIANCE:Number = 1.0; var bubble:Bubble;

Now within setupBubbles(), remove the previous code youd written to display the bubble, and replace it with the following:
private function setupBubbles():void { setupTextureAtlas();

for(var i:int = 0; i < SMALL_BUBBLES; i++)

bubble = new Bubble( frames, SCALE + (Math.random() * SCALE_VARIANCE), ); SPEED + (Math.random() * SPEED_VARIANCE)

var frames:Vector.<Texture> = bubblesTextureAtlas.get TEXTURE_PREFIX); Textures(

bubble = new Bubble(frames, 2, 4); } addChild(bubble); }

bubbles.push(bubble); } addChild(bubble);

As you can see from the code above, when instantiating the bubble, weve specified that its to be

16

04/2012 (34)

CREATING ANIMATIONS

Listing 6a. Final version of the BubblesExample class


package var frames:Vector.<Texture> =

import flash.geom.Rectangle;

bubblesTextureAtlas.getTextures(TEXTURE_ PREFIX);

import starling.core.Starling; import starling.display.Image; import starling.display.MovieClip; import starling.display.Sprite; import starling.events.Event;

setupSmallBubbles(frames); setupLargeBubbles(frames); } setupHugeBubbles(frames);

setupMediumBubbles(frames);

import starling.textures.Texture;

import starling.textures.TextureAtlas; public class BubblesExample extends Sprite

private function setupTextureAtlas():void

[Embed(source="/assets/background.png")]
private var BackgroundBitmap:Class;

bubblesTextureAtlas = new TextureAtlas(

Texture.fromBitmap(new BubblesBitmap()));

[Embed(source="/assets/bubbles.png")]
private var BubblesBitmap:Class; static private const TEXTURE_PREFIX:String =

const WIDTH:int = 128; const GRID_W:int = 8; var subTextureName:String; const GRID_H:int = 8;

const HEIGHT:int = 128;

"bubble_";

private var backgroundTexture:Texture;

for(var y:int = 0; y < GRID_H; y++)

private var bubblesTextureAtlas:TextureAtlas; private var bubbles:Vector.<Bubble> = new

for(var x:int = 0; x < GRID_W; x++)

<Bubble>[];

var region:Rectangle = new Rectangle(

public function BubblesExample()

subTextureName = TEXTURE_PREFIX +

x * WIDTH, y * HEIGHT, WIDTH, HEIGHT); addLeadingZeros((y * GRID_H) + x); , region);

addEventListener(Event.ADDED_TO_STAGE, addedToStage); }

bubblesTextureAtlas.addRegion(subTextureName

private function addedToStage(e:Event):void

setupBackground(); setupBubbles();

private function addLeadingZeros(value:int):String

addEventListener(Event.ENTER_FRAME, update); }

if(value == 0) return "00"; else return String(value);

else if(value < 10) return ("0" + value);

private function setupBackground():void

backgroundTexture = Texture.fromBitmap(new
var img:Image = new Image(backgroundTexture);

private function setupSmallBubbles(frames:

BackgroundBitmap());

Vector.<Texture>):void

addChild(img);

const SMALL_BUBBLES:int = 25; const SCALE:Number = 0.4; const SPEED:Number = 1.3; const SCALE_VARIANCE:Number = 0.3; const SPEED_VARIANCE:Number = 1.0; var bubble:Bubble;

private function setupBubbles():void

setupTextureAtlas();

18

04/2012 (34)

Working with Sprite Sheets in Starling

Listing 6b. Final version of the BubblesExample class


for(var i:int = 0; i < SMALL_BUBBLES; i++)

bubbles.push(bubble); } addChild(bubble);

bubble = new Bubble( frames, SCALE + (Math.random() * SCALE_VARIANCE), ); SPEED + (Math.random() * SPEED_VARIANCE)

private function setupHugeBubbles(frames:

bubbles.push(bubble); } addChild(bubble);

Vector.<Texture>):void

const HUGE_BUBBLES:int = 1; const SCALE:Number = 3.0; const SPEED:Number = 6.0; const SCALE_VARIANCE:Number = 0.4; const SPEED_VARIANCE:Number = 2.0; var bubble:Bubble;

private function setupMediumBubbles(frames:

Vector.<Texture>):void

const MEDIUM_BUBBLES:int = 12; const SCALE:Number = 0.7; const SPEED:Number = 1.9; const SCALE_VARIANCE:Number = 0.3; const SPEED_VARIANCE:Number = 1.1; var bubble:Bubble;

for(var i:int = 0; i < HUGE_BUBBLES; i++)

bubble = new Bubble( frames, SCALE + (Math.random() * SCALE_VARIANCE), ); SPEED + (Math.random() * SPEED_VARIANCE)

for(var i:int = 0; i < MEDIUM_BUBBLES; i++)

bubbles.push(bubble); } addChild(bubble);

bubble = new Bubble( frames, SCALE + (Math.random() * SCALE_VARIANCE), ); SPEED + (Math.random() * SPEED_VARIANCE)

private function update(e: Event):void

bubbles.push(bubble); } addChild(bubble);

var bubble:Bubble;

for(var i:int = 0; i < bubbles.length; i++)

bubble = bubbles[i]; bubble.update();

private function setupLargeBubbles(frames:

Vector.<Texture>):void

const LARGE_BUBBLES:int = 6; const SCALE:Number = 1.05; const SPEED:Number = 3.1; const SCALE_VARIANCE:Number = 0.15; const SPEED_VARIANCE:Number = 1.5; var bubble:Bubble;

for(var i:int = 0; i < LARGE_BUBBLES; i++)

bubble = new Bubble( frames, SCALE + (Math.random() * SCALE_VARIANCE), ); SPEED + (Math.random() * SPEED_VARIANCE)

04/2012 (34)

19

CREATING ANIMATIONS

Listing 7. Final version of the Bubble class


package

import starling.core.Starling; import starling.events.Event;

import starling.display.MovieClip; import starling.textures.Texture; public class Bubble extends MovieClip

code. Well create and animate multiple bubbles to give a realistic scene that has a sense of depth to it. Well do this by creating four layers of bubbles stacked on top of one another. The farthest back layers bubbles will be the smallest, with the top most layers bubbles being the largest. To achieve this well need to use a vector array to hold all the bubbles. Within your BubblesExample class, declare a vector array that has a Bubble base type:
private var bubbles:Vector.<Bubble> = new <Bubble>[];

static private const FPS:Number = 30; private var speed:Number; public function Bubble(

frames:Vector.<Texture>, scale:Number = 1.0, speed:Number = 1.0

) {

super(frames, FPS);

this.speed = speed;

Now well write a private method that creates the first layer of bubbles. These bubbles will be the smallest and will have relatively low speeds to give the impression that they are far off in the distance. The speed and size of each bubble will also be random to add a little more variety and realism. Heres the code: Listing 5. As you can see, each bubble is created then added to the bubbles vector array and to Starlings display list. Now move back to the class setupBubbles() method and make the following changes to setup the layer of small bubbles:
private function setupBubbles():void { setupTextureAtlas();

pivotX = width / 2; scaleX = scale; scaleY = scale;

pivotY = height / 2;

addEventListener(Event.ADDED_TO_STAGE, addedToStage);

Starling.juggler.add(this);

var frames:Vector.<Texture> = bubblesTextureAtlas.get TEXTURE_PREFIX); Textures(

public function update():void

setupSmallBubbles(frames);

y -= speed; {

if(y < -(height / 2))

x = -(width / 2) + ((stage.stageWidth + width) * Math.random()); Math.random());

y = stage.stageHeight + (height / 2) + (height * }

private function addedToStage(e:Event):void

x = -(width / 2) + ((stage.stageWidth + width) y = -(stage.stageHeight / 2) + * Math.random());

Notice that we pass your texture atlas sub-textures directly to the setupSmallBubbles() method. This allows us to share the same sub-textures with each of the bubbles. Its important to understand that you dont need to create a new texture atlas for each Bubble instance. In fact, doing so would be wrong as it would force an identical texture to be uploaded to the GPU for each bubble, and would very quickly exhaust the GPUs memory. All thats left is to update each bubbles position within the class update() method. Make the following changes to walk through the vector array of bubbles and call each ones own update() method:
private function update(e:EnterFrameEvent):void { var bubble:Bubble; {

((stage.stageHeight * 2) * Math.random());

for(var i:int = 0; i < bubbles.length; i++) bubble = bubbles[i];

20

04/2012 (34)

bubble.update();

Build and run the latest version of your code. You should now see 25 randomly sized bubbles drifting up the screen. Adding the remaining three layers is trivial. Well need to write a setupMediumBubbles(), setupLargeBubbles() and setupSmallBubbles() method. Each will create slightly larger and faster moving bubbles than the previous. Once written, all three methods should be called from within your setupBubbles() method. Take a look at the code in Listing 6 for the final changes required for the BubblesExample class. You can also see the final version of the Bubble class in Listing 7.

Final Statement

You should now feel comfortable working with some of Starlings core features and have a good understanding of how sprite sheets are used to create animation. While developing with Starling can be a little more time consuming than using the drawing and animation tools provided by Flash Professional, it does provide GPU accelerated performance that is many times faster than Flashs classic display list. This will allow you to write more sophisticated games and apps that will run well not only on desktop but mobile devices such as iPhone.

CHRISTOPHER CALEB
Christopher Caleb is a professional Flash developer and author of Flash iOS Apps Cookbook. He is currently lead Flash developer at WeeWorld an avatar-based social network and virtual world for teens. Christopher blogs at www.yeahbutisitash.com and tweets as @chriscaleb. If you nd anything he says vaguely interesting then feel free to send him an email at info @christophercaleb.com.

04/2012 (34)

FLASH VS. HTML5

Which Technology
Is Better For Online Web Reporting Flash vs. HTML5
The latest news that ran almost simultaneously on Flex and Flash technology has risen lots of discussion over the Internet. With the Adobe statement to donate Flex to Apache foundation and respectively the end of Flash player support for mobile devices, many newsmakers and bloggers were observing Flash technology as the one that has to be replaced with a current new standard of HTML5.

espite we can see a number of HTML5 sample applications roaming across the web, the enterprise applications market is not so fast. The pressure of HTML5, although having a significant pressure on development teams, is still analyzed under scrutiny by business analytics and team leads. A very good look into this issue was given by Farata Systems blog:

If you want to develop two identical projects in Flex and HTML5, there is a high probability that the HTML5 project will be more expensive. But I doubt that anyone will even try to reach the Flex-level quality in an HTML5 project. Any HTML5 enterprise project will have lower requirements in the first place. From the very beginning parameters like reliability, ability to adapt to different the screen sizes and densities will be simplified.

Courtesy of taterboy.com

22

04/2012 (34)

Which Technology Is Better For Online Web Reporting Flash vs. HTML5

About Flexmonster.com

Flexmonster is one of the leading team that provided custom Flex applications development services. We are specializing in Rich UI extranets, dashboards and music/ video streaming solutions. We are proud of our team expertise in the Flex/Flash/.Net/ AJAX development and Internet consulting areas. Our members are motivated to learn and grow every day to have the best competitive advantage: modern knowledge and abilities.

Instead of implementing these features, the functional specification will include testing under seven browsers, and developers will spend most of their time in the debugger. http://flexblog.faratasystems.com/2012/01/27/enter prise-development-flex-or-html5 HTML5 itself defines an updated standard of the previous HTML 4.01 version. By introducing additional markup and objects like <canvas>, the HTML5 itself is still the web document markup language. In the middle of this technology stack, which HTML5 term refers to, lies the updated CSS3, which now provides a bunch of additional perks for web developers like animation, transition effects and image filters. The controlling part of this takes Javascript and its high level application libraries such as JQuery or Node.js, allowing also a complete ability to interact with backend using asynchronous data requests (referred as Ajax and also now becoming standard REST). Beside mentioned components, HTML5 still relies on the same set of HTML, CSS and Javascript that was known for decades and more often referred as DHTML or part of Web 2.0. Considering our challenging task of FAST and RELIABLE visualization of web reports consisting mainly of big data, we focus around capacity of each platform to load big chunks of facts. The information, taken either from CSV reports or OLAP cubes, should

load at once and in a way user can drill-down and filter the pivot grid in real-time. The question we frequently ask ourselves can HTML5 technology stack fulfill such requirement? According to our initial research, most OLAP Grids based on HTML and Javascript can operate only around 5 to 10 thousands of data rows. A higher number results in unexpected crash of the javascript runtime machine, and, consequently, the browser itself. On the contrary, the Flash Player runtime still allows us to render and operate millions of records with up to 100mb loaded at reasonable time within Flexmonster Pivot. Despite a common misconception of HTML5 as being a completely new development platform, it is still being a sum of technology brought to us with a common, yet upgraded, components we know the addition of canvas and video tags, the CSS3 which was supported by HTML4 as well and Javascript which has not changed at all in its specification. Since Flash technology development is not stopped as well, it gives developers opportunity and advantage to provide fast and effective enterprise BI tools as long as technology itself allows them to do so.

VOLODYMYR YATSEVSKY
My passion is helping people do their businesses better and convey bold value to their customers. My current ventures are: - LiveArt is doing online design dream for our customers. We are an experienced company that always seeks any opportunity to leverage online design and web-to-print business with the help of Flash technology. - Seggia is about high-tech lighting furniture with the help of rotational molding technology and best designs. Its safe, convenient, cool and atmospheric. My competence as a project, account and company manager with over a 10-year experience in the industry covers anything from basic webdesign up to SaaS development, product line management, RIA and Web 2.0 projects, marketing research, analysis and implementation. This helps me much in running all current and new ventures. Im always open to new ideas and opportunities.

SPECIALTIES
Entrepreneurship, Startup, Project Management, CRM, Key Accounting, Process Management, System Analysis, Marketing, Sales, Web Development, Programming, Force.com platform, Salesforce CRM.

04/2012 (34)

23

REVIEW

FlippingBook Publisher 2
Electronics medium like computer, mobile, iPhone, iPads revolutionize book and publication industry. EBook is an electronic version of a printed book or a book available in electronic form.

Books provides a great alternative to print books without having to fork out thousands of dollars to design and publish a print book; you can generate quality eBook with minimal expense. You can easily become authors overnight and earn income from selling online eBooks. The wide circulation, availability, and interactivity of eBooks have changed the way traditional print books are consumed by the market. So, Say thanks to eBooks softwares. FlippingBook Publisher 2 by Mediaparts Interactive allows you to Create, Edit, Modify, Publish your book content with some clicks. You can create digital E-Books, E-Magazine, E-Brochure, ECatalogues, E-Journals, E-Manuals and lots more with real life-like flip page book effect. Flip page refers to the effect of flipping through the pages of a digital document as if it were a physical document. A flip page application is often made in Adobe Flash and requires the Adobe Flash Player to run in a browser window. The benefit of having a flip page document is that it affords the user experience

of reading an actual copy of a physical document or magazine. FlippingBook Publisher 2 import any documents, including PDF, Word, Excel, PowerPoint and other files like images, photos into your publications and with some clicks; it get converted in to interactive flipping book. One great thing of FlippingBook Publisher 2 is that it can generate such a flexible publication that run on mobile devices like iPhone, iPad, and Adobe Flash supported Android devices. Even you are not limited to the creation of online publications only. If you need to distribute your publications using CD/DVD or Flashdrives, you can create EXE/Apps files that run on Windows and Mac OS X. Now, we are going take a look at some more features of the FlippingBook Publisher 2. Table of Contents Provides a smart, multi-level customizable navigation to switch to any page. It gets created automatically from your PDFs bookmarks or contents while creating publication. Full-text Search Allows us to search through publication contents.

Figure 1. Flipbook

Figure 2. Import pdf

24

04/2012 (34)

REVIEW

Social Networks Integration Awesome Social Networks integration allows you to share book info on Facebook, Twitter and you can share them via e-mail. Search Engine Optimization Search Engines play a vital role to devote traffic towards your website. FlippingBook Publisher 2 allows creation of search engine friendly books for Google, Bing, Yahoo and other search engines. Your book becomes your valuable asset to attract huge traffic. Google Analytics Integrated FlippingBook Publisher 2 comes with Google Analytics integration. What you just need to do... input your Google Analytics UA Number while publishing eBooks to analyze and monitor the traffic of the publications in a new way. Customizable Skin FlippingBook Publisher 2 comes with three skins and a dedicated skin editor which allows you to customize background, buttons, tooltips, windows, fonts, colors, icons and lots of stuff. Arrow key based page navigation FlippingBook Publisher 2 provides simple arrow key based page navigation which makes reading quite comfortable. Up and Down arrow makes page up and down respectively. Left and Right arrow helps to load Previous and Next page. Built-In FTP-Client FlippingBook Publisher 2 contains a simple and convenient FTP-client which allows you to upload your publications to the site quickly.

Continuous Zooming The high-quality vector SWF-pages, created using Publisher, activate the multi-level zoom function by double-clicking or using the mouse wheel. Wide Pages Support Import double-page spreads quickly and easily. Publisher 2 will automatically determine and properly configure such pages, and you will no longer have to split and arrange them manually. Content Protection FlippingBook Publisher 2s corporate edition provides you more secure ways of protecting your publications from unauthorized access and unwanted copying. Publ.com http://publ.com/ is premium, cloud based, dedicated publications storage service allows you to store and share your publications with your clients and business partners with uninterrupted access from any part of the world.

FlippingBook Publisher 2 a closer look

Now we are going to see how FlippingBook Publisher 2 does all these things for you. Import option allows us to select document for generating our eBook. FlippingBook Publisher 2 provides variety of options while importing. We can set any of the conversion type from swf, jpg or png. We can add complete book or selected pages. Imports links, table of contents. Create mobile as well as basic HTML version and export necessary assets for that. Yes! You have done a beautiful book with real life-like flip page book effect is ready for you. Now, you need to give some finishing touch, thats it. FlippingBook Publisher 2 provides a high degree of customization. You can customize book title, loading message, background, flip sounds and much more almost everything can be customized easily. FlippingBook Publisher 2 provides three main customization tabs viz Properties, Text Captions and Skin Editor. Properties Tabs help to edit books basic properties like reading style, book size, window size, books copyright,

Figure 3. toc

Figure 4. Bottom-bar

26

04/2012 (34)

FlippingBook Publisher 2

Figure 5. Bottom-bar

Figure 6. Publish

Google Analytics setting, Font Setting and many more custom settings. I like Font Setting option, Font Setting allows us to use custom font. We can easily transform complete book for non English language. Means Language is not an issue while publishing a book with FlippingBook Publisher 2. Select your favorite font, modify text with the help of Text Captions Tab and export it, now your book is ready to serve in the non English language. Your pdf has no bookmark? Not an issue; dedicated Table of Contents editor is there to take care of generation of new TOC for your publication. You can add new Title and Point it to the desired page. You can add a group and which contain titles and page pointers. This simply helps you to generate multilevel TOC. Now any page of the book can be reached in a moment. Table of Contents can be easily enabled from the Bottom Bar or you can force it to be shown by default from the settings. Even you can save Table of Contents and use them latter as per your need. Bottom Bar of the book reader is highly customizable. You can enabled or disable several options. Suppose you dont wish to allow taking print, selecting and copying text or download original book. Just disable those options and it will not show on reader. Nice and simple!!! You are done with all settings; its time to test or publish your eBook. Testing your publication is quite simple and straight forward. Select Preview publication from publication menu. All is well and you are ready to publish? FlippingBook Publisher 2 provides you three options. You can directly upload output to FTP Server or Publish to HTML for Web based online distribution or share it for offline reading on Windows/Mac OS X through CD/ DVD/USB Sticks. Security plays an important role while delivering publication online or offline. Publishers corporate edition

helps you to protect your contents. It supports several integrated methods of protecting your publications from unauthorized access and unwanted copying of content. Publisher 2 provides three levels of contents security. Password Protection You can simply set a password for user which user needs to enter to see the publication. Content Protection The pages of your online and offline publications are SWF Files which may be misused. Content Protection option encrypts each

Figure 7. Securing Contents

04/2011 (34)

27

REVIEW

Summary
Product Version Description Features FlippingBook Publisher 2 2.2.16 (released: 3/3/2012) Generate ip books with the page turn effect. Customizable Interface, Printing Pages, Fixed or Liquid Sizing, Book Zooming, PDF Download, Flexible Setup, Offline EXE books support and Content Protection Windows 7, Windows Vista, Microsoft Windows XP Mediaparts Interactive http://ippingbook.com Basic 199, Professional 299, Professional 499

OS Requirements Figure 8. Share

Platform Supported Windows, Mac OS X, and Web. Manufacturer Website Cost

page in a unique way and makes a special relation between them that they cannot be viewed outside of the scope of your publication. Allowed Domains This option restrict the viewing of your publication only on the domains you have specified. Unauthorized view on any other site/domains will generate an access error. Now, all you have done! Its time to reach to your readers. If you dont have hosting place or you are looking for fast and cloud based solution? Publ.com is there for you to take care of all of your publication hosting and distribution related stuffs. An Integrated menu allows you to publish directly on Publ.com. You need to just provide Publication name, description and need to check some check boxes whether you want keep a backup, publish for mobile or basic HTML version. Publ.com provides a smart way to share details about your newly uploaded publication. You can view your publication in browser; send details by mail, share link through Facebook or Twitter, Insert publication to your site, one click update, backup or restore. Publ.com is there to take care of your publication. Some of the Advantages FlippingBook Publisher is: Independence All your data is stored on your Server (or on Publ.com). Full Control on the data; you do not need to depend on anybody. Simplicity Its very handy to use FlippingBook Publisher. No need of any prerequisite of any Server Side Technology. Flexibility Provides full customization over the design. Searching Allow to Search book Contents and shifting to any page. Security Protect your valuable contents from unauthorized access.

Conclusion

FlippingBook Flash Page Flip Engine is a very tool for generate the realistic page flip effect with some clicks. If you want to start an online magazine or want to publish your catalogue or a self written book. FlippingBook is the best solution for you.

CHETANKUMAR AKARTE
Chetankumar Akarte is a BE (Electronics) from Nagpur University, India. He has about 5 years of experience in the design, development and deployment of Web, Windows and mobile based applications with expertise in C#.NET,VB.NET, JavaScript, Java, Android etc. In his spare time, Chetan maintains a technical blog http:// www.tipsntracks.com. He has been the technical reviewer for 2 books published by Packt Publishing and he has even released an application to the Android market which allows readers to read PDF and Marathi books! (https:// play.google.com/store/apps/details?id=sahityachintan.andr oid.pdfview)

28

04/2012 (34)

FIXEL POWER TOOL

Flixel Power Tool


A monster of an update!
The Flixel Power Tools are going from strength to strength, and last night I finally completed the v1.5 update, and its a monster

Hello github

First of all weve moved to github! After getting extremely annoyed at the downtime of my Google Code project I decided to bite the bullet and learn git. And Im glad I did! As a result I have reorganised the whole project structure. Its now cleaner, easier to navigate and doesnt rely on any classpath dependencies. Hoorah!

Revamped Test Suite

Comprehensive Getting Started Guide

The Test Suite was a great idea, but was getting cumbersome. So I have refactored it extensively. Tests are now stored in sub-folders relating to the tool they apply to. Ive also dropped the Flx part of the test class names. There are lots of new tests, and the suite has grown in size vertically to accommodate the layout changes.

Ill admit it although the tools were pretty easy to use, they did assume a lot of prior knowledge to get up and running with them. This has now been addressed by way of a PDF guide. It takes you through the process of download, install and use, step-by-step. Its included when you download from github, just look in the Docs folder.

Bugs, be-gone!

Lots of small bug fixes across most classes. And lots more in-line documentation added. I dont think there is a class / function anywhere now that doesnt have in-line documentation with it. Some classes have had a few changes, for example the Color and Gradient classes now fully support alpha channels in all colours given,

30

04/2012 (34)

FIXEL POWER TOOL

is where the FlxSpecialFX class comes in. Its a handler for the new FX Plugin system, into which Ill carry on expanding and adding new FX (and hopefully the community will too!). Right now there are two FX plugins Rainbow Line and Plasma, but lots more are coming

so check your code before wading right in but if something like the FlxHealthBar starts looking strange after you update, it probably just needs the colour changing to AARRGGBB format.

New classes!

Of course there are some new classes too FlxScrollingText takes the best parts of FlxBitmapFont and FlxScrollZone and merges them to create extremely flexible scrolling text fields. Just feed it with a FlxBitmapFont and youll get a Sprite back that you can stick anywhere in your game, with fluidly scrolling text running through it. Update the text in real-time, have the sprite delete itself once the text ends (or wrap to the start), bounce it around, scale it, alpha, rotate it. Pretty cool really 3 Test Suite tests included. And finally the introduction of FlxSpecialFX. The more I worked on the Power Tools the more I realised they were splitting into two key areas: tools for your game, and tools that just created visual effects. So it made sense to me to start splitting them out which

RICHARD DAVEY AND PHOTONSTORM.COM


Photon Storm are Richard Davey and Ilija Melentijevic. This is our place on the web where we publish our HTML5 and Flash games, artwork and tutorials. We like writing about all facets of game development and sharing cool links now and again. For my day job Im the Technical Director of Aardman Digital, the online department within Aardman Animations most famously known for Wallace and Gromit, Shaun the Sheep and Creature Comforts. Part of the work our department does is to create games and online experiences based around our key brands. Prior to joining Aardman I spent years working in the games industry for a ne company called The Game Creators. They produce software that allows anyone to create decent games on the PC with relative ease. Im still in close contact with the guys there and will be blogging about anything exciting I see on their horizon. I consider myself a hardcore gamer, and have always loved gaming since I saw my rst ever Atari 2600. Im also an Atari otaku. The Atari ST holding a special place in my heart, which is why I built this site dedicated to it. So if my code experiments have a seriously retro avour to them, that is why!

32

04/2012 (34)

INTERVIEW

MojoCreatives
talk about the making of Car Games in Flash
Mojocreatives is an online development and publishing company. Their passion is to create Games that are fun and engaging for every one. Mojocreative is one of the fastest growing Gaming network online. They work with flash games, shockwave games, mobile games and applications. Mojocreatives was founded in December 2010 by Michael Ojo.

he car and racing genre is heavily catered for in the Flash gaming space. But its also large enough that there are companies dedicated just to producing these sorts of games. MojoCreatives is one such company and in this short interview I caught up with their CEO Michael Ojo about this unique space in the gaming spectrum:

What got you into car games?

I got into the whole online gaming gig back in 2007. It was just something I stumbled upon really. I had enjoyed playing Flash games online and figured why not make my own? Im a total car / auto fanatic. And racing games are my favourite genre, so it made sense that I would try to make a game like this. Im not a developer myself.

34

04/2012 (34)

Photonstorm.com

I create the game idea, concepts and design style. We then use either our in-house coders or work with other studios such as IriySoft. My first game was called Crazy Mustang and was finished in December 2008. It was extremely popular with plays now in the tens of millions. Since then weve released another 11 car games.

How do monetise your games?

All our games are free to play but carry ads. We release them on our own sites (like ArcadeLot.com) and of course well upload to the popular portals like Newgrounds and Kongregate. That alone helps the game get a decent exposure. And after this well reach out to the top gaming portal owners. This is sometimes a daunting (and time consuming) process, but if your game is good its worth it in the long run. Right now we are gearing up to release at least one new game every month and some will be accompanied by mobile versions.

take it to the body shop for had it customised. Then to a car wash for cleaning and details and finally go on a driving course, and so on. Instead we ended up taking 3 main concepts from this story line and merged them into one single title. The car washing game has the simplest concept. Think of it like using a paint brush in a tool like Photoshop. Its the same in our games, except youre moving a sponge around cleaning dirt away. The more you move, the more we alpha out the dirt layer!

It doesnt sound too dissimilar to pet care games on girls sites (groom, wash, play).

What goes into making a car game?

In the new car game weve just released we chose a different route by compiling several mini car-related games into one. We read a lot into our users statistics and know that the average user only spends about 5 minutes per game. So we felt safe taking this approach. This way they get to play a variety of smaller car games in one hit. Minigames include car washing, parking, painting, cone racing and professional (timed) versions of washing and parking.

This may surprise you, but we estimate that almost 70% of our players are female. That certainly explains the nurturing part! Dont you ever get bored producing car games? I dont think we can ever get bored with car games! For one this is our main niche and we know there is a high demand for car oriented games. Yes we are currently working on other game styles including shooting and stunt bikes Stay tuned for release dates. Well also look at using Stage3D if it fits our needs and concepts in the future. I find it fascinating that such a rich ecosystem exists around what is a very specific sub-genre of game. It doesnt feel that much different from other niche areas such as Match-3, Pet Care or Hidden Object. Its just nice to know that if you do find your speciality, the Flash gaming world is large enough to support you in that. And if youve written a car care or racing game then it might be worth dropping MojoCreatives a line to see if theyll license your game from you. Play Car Game on Arcade Lots

RICHARD DAVEY AND PHOTONSTORM.COM


Photon Storm are Richard Davey and Ilija Melentijevic. This is our place on the web where we publish our HTML5 and Flash games, artwork and tutorials. We like writing about all facets of game development and sharing cool links now and again. For my day job Im the Technical Director of Aardman Digital, the online department within Aardman Animations most famously known for Wallace and Gromit, Shaun the Sheep and Creature Comforts. Part of the work our department does is to create games and online experiences based around our key brands. Prior to joining Aardman I spent years working in the games industry for a ne company called The Game Creators. They produce software that allows anyone to create decent games on the PC with relative ease. Im still in close contact with the guys there and will be blogging about anything exciting I see on their horizon. I consider myself a hardcore gamer, and have always loved gaming since I saw my rst ever Atari 2600. Im also an Atari otaku. The Atari ST holding a special place in my heart, which is why I built this site dedicated to it. So if my code experiments have a seriously retro avour to them, that is why!

Its amazing that people are happy playing games that are as much to do with caring for a car, as they are racing them.

Yes, the most common car games you will find online today are the two dimensional track riding games like Crazy Mustang. When we launched Crazy Mustang it was a real hit, and we thought about making our new game a sequel. But instead we chose simple games that the player will spend a short break playing. Originally the concept of the game was supposed to tell a long story: The player buys a car from a dealer. They

04/2012 (34)

35