close

Вход

Забыли?

вход по аккаунту

?

Flash & Flex. 2012.04

код для вставкиСкачать
FFDM 2012.04
4
04/2012 (34)
Dear Readers,
The first rays of spring sun bring a new Flash and Flex Developer’s 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 can’t 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 Kuźniarska and FFD Team
Editor: Adela Kuźniarska 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 D’Agostino
Games Section Editor: Chris Hughes
Contributing Editors: Pedro de La Rocque, Ali Raza, Csomák Gábor
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 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 program by company.
Mathematical formulas created by Design Science MathType™
ATTENTION!
Distributing current or past issues of this magazine – without permission of the publisher – is harmful activity and will result in judicial liability.
DISCLAIMER!
The techniques described in our articles may only be used in private, local networks. The edi
-
tors hold no responsibility for misuse of the presented techniques or consequent data loss.
Editor’s Note
5
04/2011 (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
Learn how to create animations using sprite sheets and Starling’s MovieClip class, the fundamentals of Starling’s 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 we’ll take a step back and focus on Starling’s core framework. Specifically we’ll learn how to work with textures to create images and bitmap animations
Flash vs. HTML5
22 Which Technology Is Better For Online Web Reporting – Flash vs. HTML5
ARTICLE FROM FLEXMONSTER.COM BY VOLODYMYR YAT
SEVSKY
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.
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 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 software’s. 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, E-Catalogues, E-
Journals, 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
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. I’ve 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.
Interview
34 Interview with Michael Ojo
BY RICHARD DAVEY AND PHOTONSTORM.COM 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. 6
IN BRIEF
04/2012 (34)
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
Unreal Epic Citadel demo is public
You guys may remember the announcement Adobe made at Max last year where Epic announced they were able 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
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 over to GitHub – https://github.com/StickSports/ANE-
Game-Center
– and grab the extension and also check out the source if you’re curious.
Source: The Flash Blog
REDWOOD CITY, Calif., March 30, 2012 (GLOBE NEWSWIRE) – News Facts
What: Informatica Corporation (NASDAQ: INFA), the world’s 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.Informatica’s 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
Adobe Gaming website
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
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 Alternativa’s blog: http://blo
g.alternativaplatform.com/en/2012/03/29/alternativa3d-
8-is-out-in-open-source/
.
Source: http://blog.alternativaplatform.co
m
News by Gábor Csomák (@csomak)
04/2012 (34)
8
CREATING ANIMATIONS
L
ast month we took our first look at the Starling Framework and learned how to create stunning GPU-accelerated particle effects. Now we’ll take a step back and focus on Starling’s core framework. Specifically we’ll 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. You’ll be introduced to Starling’s display list and use its MovieClip class to construct your first animation sequence from a sprite sheet. Along the way you’ll find out just how closely Starling’s display list is modeled on Flash’s own classic display list, making the framework relatively straightforward to work with.
Don’t worry if you haven’t 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.
Getting Started
You’ll need a suitable integrated development environment to work through this tutorial. I’ll be using Adobe Flash Builder 4.6, a trial version of which can be downloaded from www.adobe.com/downloads
.
You’ll 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 won’t be covering Flash Professional, 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-cs5-
and-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 Working with Sprite Sheets in Starling
Learn how to create animations using sprite sheets and Starling’s MovieClip class.
What you will learn…
• The fundamentals of Starling’s display list
•
How to create a texture atlas and de�ne 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
Figure 1. The �nal underwater scene complete with animating air bubbles
Working with Sprite Sheets in Starling
04/2012 (34)
9
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.
You’ll need to add Starling to your project’s 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 Starling’s source folder, which can be located within its package at: PrimaryFeather-Starling-Framework\starling\
src\
.
If you’d rather use the SWC, then click Next before selecting the Library path tab. Click the Add SWC button and browse to and select PrimaryFeather-Starling-
Framework\starling\bin\starling.swc
.
When done, click Finish and your project will be created.
Before we start coding, it’s important your project is using the correct rendering mode. Starling requires the use of direct-to-path rendering, which enables hardware acceleration via your computer’s GPU.
Direct rendering can be enabled by editing your project’s 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 you’re using Flash Builder 4.6 then you’re project’s setup is complete. If however you’re using an older version of Flash Builder or another IDE then refer to last month’s 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
With your development environment set up you’re ready to start coding. As with all Starling projects, we’ll 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 month’s. When calling Starling’s 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 Starling’s display list. We’ll get onto writing the BubblesExample class in a moment. Also, notice that an anti-aliasing level of 2 was set. We’ll be taking advantage of sprite scaling during this tutorial so a little anti-aliasing will help smooth any pixilated edges.
Creating your Root Class
With Starling initialized we can move onto the creation of a skeleton root class. Again, if you worked through last month’s tutorial you’ll already be familiar with these steps.
Within Flash Builder, add a new ActionScript class to your project’s src folder. Name the class BubblesExample and ensure that it extends starling.display.Sprite
. Don’t confuse Starling’s Sprite class with flash.display.Sprite
. Starling mimics many of the display classes used by Flash’s traditional display list, which can catch-out those new to the framework. Be careful, your IDE’s 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. Listing 1. Source code for the Bubbles class
package
{
import
lash
.
display
.
Sprite
;
import
lash
.
display
.
StageAlign
;
import
lash
.
display
.
StageScaleMode
;
import
starling
.
core
.
Starling
;
[
SWF
(
width
=
"640"
,
height
=
"480"
,
frameRate
=
"60"
,
backg
roundColor
=
"#85E9F3"
)]
public
class
Bubbles
extends
Sprite
{
private
var
starling
:
Starling
;
public
function
Bubbles
()
{
stage
.
align
= StageAlign
.
TOP_LEFT
;
stage
.
scaleMode
= StageScaleMode
.
NO_SCALE
;
starling
= new
Starling
(
BubblesExample
, stage
);
starling
.
antiAliasing
= 2
;
starling
.
start
();
}
}
}
04/2012 (34)
1
0
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. It’s within this handler where we’ll setup and use the resources required to construct the images and animations for our underwater scene. Let’s 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 you’ve already seen from creating the skeleton version of BubblesExample
, there’s also a Sprite class, which acts as a container for other display objects. Although similar, don’t confuse MovieClip and Sprite with Flash’s own native versions. The display classes we’ll be using during this tutorial can all be found within starling.display
. We’ll use the Image class to place a background image onto the screen. But before doing that it’s 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 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 you’re about to see, Starling takes care of much of the hardship involved when working directly with the GPU. Let’s now go ahead and add our background image.
Adding a Background Image
We’ll 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;
I’ve 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 project’s src
folder. The assets
sub-folder won’t 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;
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;
Now we can write some ActionScript to display the PNG as an image. Add the following private method to do this:
Listing 2. Our skeleton class representing the root of Starling's display list package
{
import
starling
.
display
.
Sprite
;
import
starling
.
events
.
Event
;
public
class
BubblesExample
extends
Sprite
{
public
function
BubblesExample
()
{
addEventListener
(
Event
.
ADDED_TO_STAGE
, addedToStage
);
}
private
function
addedToStage
(
e
:
Event
)
:
void
{
}
}
}
Figure 2. Starling’s display objects
04/2012 (34)
1
2
CREATING ANIMATIONS
private function setupBackground():void
{
backgroundTexture = Texture.fromBitmap(new BackgroundBitmap());
var img:Image = new Image(backgroundTexture);
addChild(img);
}
Starling’s 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 that’s where Starling’s MovieClip
class comes in. It displays an animation that’s depicted by a vector array of textures. Unlike Flash’s native MovieClip type, your animation can also be played back using a frame rate that’s independent of your SWF. It’s also worth noting that while Flash’s native movie clip can contain nested display objects, Starling’s MovieClip class cannot. While it’s perfectly valid to load or embed individual textures into your SWF – one for each frame of animation – a better practice is to pack your animation’s 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 sub-
texture consumes a rectangular region within the texture atlas. We’ll use the terms sprite sheet and texture atlas interchangeably throughout this tutorial.
Figure 4 shows the texture atlas that we’ll use for this tutorial. It’s 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 you’ll 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 texture’s 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
Working with Sprite Sheets in Starling
04/2012 (34)
1
3
create a texture that is not of a valid width or height, then Starling will pad each of your texture’s 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 texture’s 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.
It’s 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 tutorial’s sprite sheet has been created for you, when working on your own projects you’ll 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, let’s actually write some ActionScript to create and setup ours.
Instantiating the Texture Atlas
Embed the sprite sheet’s PNG within your BubblesExample class, and assign it to a member variable:
[Embed(source=”/assets/bubbles.png”)]
private var BubblesBitmap:Class;
You can download this PNG from http://
www.yeahbutisitflash.com/downloads/starling-tut2/
bubbles.png
. Copy it to src/assets/
within your project.
We’ll also be using Starling’s 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;
We’ll actually be assigning unique names to each of the texture atlas’ regions. Since all the regions belong Listing 3. Starling’s TextureAtlas class
private
function
setupTextureAtlas
()
:
void
{
bubblesTextureAtlas
= new
TextureAtlas
(
Texture
.
fromBitmap
(
new
BubblesBitmap
()));
const
WIDTH
:
int
= 128
;
const
HEIGHT
:
int
= 128
;
const
GRID_W
:
int
= 8
;
const
GRID_H
:
int
= 8
;
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
(
x
* WIDTH
, y
* HEIGHT
, WIDTH
, HEIGHT
);
subTextureName
= TEXTURE_PREFIX
+ addLeadingZeros
((
y
* GRID_H
)
+ x
);
bubblesTextureAtlas
.
addRegion
(
subTextureName
, region
);
}
}
}
private
function
addLeadingZeros
(
value
:
int
)
:
String
{
if
(
value
== 0
)
return
"00"
;
else
if
(
value
< 10
)
return
(
"0"
+ value
);
else
return
String
(
value
);
}
04/2012 (34)
1
4
CREATING ANIMATIONS
to the same animation, we’ll use a prefix for each name. Declare the following constant:
static private const TEXTURE_PREFIX:String = „bubble_”;
This will allow us to name the regions bubble _ 00
, bubble _ 01
, bubble _ 02
,... bubble _ 63
.
Now let’s 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 that’s 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 we’ll do it manually with the help of the addRegion()
method.
A nested loop is used to walk the sprite sheet’s 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 Flash’s Rectangle class, so ensure that it’s added to your list of import statements:
import lash.geom.Rectangle;
Now write a private method named setupBubbles() and call setupTextureAtlas()
from it:
private function setupBubbles():void
{
setupTextureAtlas();
}
We’ll add more to this method later. Finally call setupBubbles()
from your addedToStage()
handler:
private function addedToStage(e:Event):void
{
setupBackground();
setupBubbles();
}
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.
Using the MovieClip Class
While the goal is to produce many animated bubbles, we’ll 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. Let’s 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
xtures( TEXTURE_PREFIX);
The getTextures()
method is used to retrieve all sub-
textures 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 let’s create the movie clip and pass the sub-
textures to its constructor. We’ll 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 Starling’s MovieClip class and not Flash’s native version. Include it within your class’ list of import statements:
import starling.display.MovieClip;
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.pivotY = bubble.height / 2;
bubble.x = stage.stageWidth / 2;
bubble.y = stage.stageHeight / 2;
addChild(bubble);
You’ll be familiar with the x and y properties, but what about pivotX and pivotY
? They are used to set the display object’s origin within it’s own coordinate space. Think of the pivot point as being a pin through your movie clip. It’s the pin that’s 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 clip’s center.
Working with Sprite Sheets in Starling
04/2012 (34)
1
5
Build and run your project. Although you’ll see the bubble placed in the center of the screen, it won’t yet be animating. To update a movie clip’s 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 Starling’s 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 Starling’s default Juggler:
Starling.juggler.add(bubble);
You’ll need to import the core of the Starling framework in order to access the Juggler:
import starling.core.Starling;
Now rebuild and run your project. This time the bubble will smoothly and continuously animate.
Creating a Bubble Class
If we’d 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 Starling’s 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.
We’ll add some more functionality to this class in a moment but first let’s explore what’s 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 bubble’s 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 scene’s bubbles, ensuring that there is some variety.
Being a subclass of MovieClip
, it’s 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 isn’t actually used within the constructor. Instead it’s 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 Starling’s default Juggler.
Something that’s currently missing is the ability to set the bubble’s position. We’d like a random position for each bubble, so let’s add some code to the Bubble class’ addedToStage()
handler to do that:
private function addedToStage(e:Event):void
{
x = -(width / 2) + ((stage.stageWidth + width) * Math.random());
y = -(stage.stageHeight / 2) + ((stage.stageHeight * 2) * Math.random());
}
Listing 4. Our skeleton Bubble class
package
{
import
starling
.
core
.
Starling
;
import
starling
.
display
.
MovieClip
;
import
starling
.
events
.
Event
;
import
starling
.
textures
.
Texture
;
public
class
Bubble
extends
MovieClip
{
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
;
pivotY
= height
/ 2
;
scaleX
= scale
;
scaleY
= scale
;
Starling
.
juggler
.
add
(
this
);
addEventListener
(
Event
.
ADDED_TO_STAGE
, addedToStage
);
}
private
function
addedToStage
(
e
:
Event
)
:
void
{
}
}
}
04/2012 (34)
1
6
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 we’d like to add is the ability to move the bubble vertically upwards. We can achieve this by writing a public method that updates the bubble’s position each time it’s called. Add the following update()
method to your class:
public function update():void
{
y -= speed;
if(y < -(height / 2))
{
x = -(width / 2) + ((stage.stageWidth + width) * Math.random());
y = stage.stageHeight + (height / 2) + (height * Math.random());
}
}
As you can see, it uses your speed member variable to change the bubble’s y-position. The remainder of the code checks to see if the bubble has moved off screen. If it has then it’s randomly positioned below the stage, ready to float back in. This update mechanic helps to ensure that there’s a continuous flow of bubbles by re-using a bubble once it has drifted above the stage’s visible area.
Before we move on, save your Bubble class and move back to the BubblesExample
class. Let’s update its setupBubbles()
method to use your new Bubble class. First we’ll 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;
Now within setupBubbles()
, remove the previous code you’d written to display the bubble, and replace it with the following:
private function setupBubbles():void
{
setupTextureAtlas();
var frames:Vector.<Texture> = bubblesTextureAtlas.get
Textures(
TEXTURE_PREFIX);
bubble = new Bubble(frames, 2, 4);
addChild(bubble);
}
As you can see from the code above, when instantiating the bubble, we’ve specified that it’s to be twice it’s default size and should also move upwards by 4 pixels every time its update()
method is called.
To actually move the bubble we’ll 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 instance’s own update()
method:
private function update(e:Event):void
{
bubble.update();
}
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
We’ve covered a lot of ground in this tutorial, but let’s 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
SCALE_VARIANCE
:
Number
= 0.3
;
const
SPEED
:
Number
= 1.3
;
const
SPEED_VARIANCE
:
Number
= 1.0
;
var
bubble
:
Bubble
;
for
(
var
i
:
int
= 0
; i
< SMALL_BUBBLES
; i
++
)
{
bubble
= new
Bubble
(
frames
,
SCALE
+ (
Math
.
random
()
* SCALE_VARIANCE
)
,
SPEED
+ (
Math
.
random
()
* SPEED_VARIANCE
)
);
bubbles
.
push
(
bubble
);
addChild
(
bubble
);
}
}
04/2012 (34)
1
8
CREATING ANIMATIONS
Working with Sprite Sheets in Starling
04/2012 (34)
1
9
Listing 6a. Final version of the BubblesExample class
package
{
import
lash
.
geom
.
Rectangle
;
import
starling
.
core
.
Starling
;
import
starling
.
display
.
Image
;
import
starling
.
display
.
MovieClip
;
import
starling
.
display
.
Sprite
;
import
starling
.
events
.
Event
;
import
starling
.
textures
.
Texture
;
import
starling
.
textures
.
TextureAtlas
;
public
class
BubblesExample
extends
Sprite
{
[
Embed
(
source
=
"/assets/background.png"
)]
private
var
BackgroundBitmap
:
Class
;
[
Embed
(
source
=
"/assets/bubbles.png"
)]
private
var
BubblesBitmap
:
Class
;
static
private
const
TEXTURE_PREFIX
:
String
= "bubble_"
;
private
var
backgroundTexture
:
Texture
;
private
var
bubblesTextureAtlas
:
TextureAtlas
;
private
var
bubbles
:
Vector
.
<
Bubble
> = new
<
Bubble
>
[];
public
function
BubblesExample
()
{
addEventListener
(
Event
.
ADDED_TO_STAGE
, addedToStage
);
}
private
function
addedToStage
(
e
:
Event
)
:
void
{
setupBackground
();
setupBubbles
();
addEventListener
(
Event
.
ENTER_FRAME
, update
);
}
private
function
setupBackground
()
:
void
{
backgroundTexture
= Texture
.
fromBitmap
(
new
BackgroundBitmap
());
var
img
:
Image
= new
Image
(
backgroundTexture
);
addChild
(
img
);
}
private
function
setupBubbles
()
:
void
{
setupTextureAtlas
();
var
frames
:
Vector
.
<
Texture
> = bubblesTextureAtlas
.
getTextures
(
TEXTURE_
PREFIX
);
setupSmallBubbles
(
frames
);
setupMediumBubbles
(
frames
);
setupLargeBubbles
(
frames
);
setupHugeBubbles
(
frames
);
}
private
function
setupTextureAtlas
()
:
void
{
bubblesTextureAtlas
= new
TextureAtlas
(
Texture
.
fromBitmap
(
new
BubblesBitmap
()));
const
WIDTH
:
int
= 128
;
const
HEIGHT
:
int
= 128
;
const
GRID_W
:
int
= 8
;
const
GRID_H
:
int
= 8
;
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
(
x
* WIDTH
, y
* HEIGHT
, WIDTH
, HEIGHT
);
subTextureName
= TEXTURE_PREFIX
+ addLeadingZeros
((
y
* GRID_H
)
+ x
);
bubblesTextureAtlas
.
addRegion
(
subTextureName
, region
);
}
}
}
private
function
addLeadingZeros
(
value
:
int
)
:
String
{
if
(
value
== 0
)
return
"00"
;
else
if
(
value
< 10
)
return
(
"0"
+ value
);
else
return
String
(
value
);
}
private
function
setupSmallBubbles
(
frames
:
Vector
.
<
Texture
>
)
:
void
{
const
SMALL_BUBBLES
:
int
= 25
;
const
SCALE
:
Number
= 0.4
;
const
SCALE_VARIANCE
:
Number
= 0.3
;
const
SPEED
:
Number
= 1.3
;
const
SPEED_VARIANCE
:
Number
= 1.0
;
var
bubble
:
Bubble
;
04/2012 (34)
1
8
CREATING ANIMATIONS
Working with Sprite Sheets in Starling
04/2012 (34)
1
9
Listing 6b. Final version of the BubblesExample class
for
(
var
i
:
int
= 0
; i
< SMALL_BUBBLES
; i
++
)
{
bubble
= new
Bubble
(
frames
,
SCALE
+ (
Math
.
random
()
* SCALE_VARIANCE
)
,
SPEED
+ (
Math
.
random
()
* SPEED_VARIANCE
)
);
bubbles
.
push
(
bubble
);
addChild
(
bubble
);
}
}
private
function
setupMediumBubbles
(
frames
:
Vector
.
<
Texture
>
)
:
void
{
const
MEDIUM_BUBBLES
:
int
= 12
;
const
SCALE
:
Number
= 0.7
;
const
SCALE_VARIANCE
:
Number
= 0.3
;
const
SPEED
:
Number
= 1.9
;
const
SPEED_VARIANCE
:
Number
= 1.1
;
var
bubble
:
Bubble
;
for
(
var
i
:
int
= 0
; i
< MEDIUM_BUBBLES
; i
++
)
{
bubble
= new
Bubble
(
frames
,
SCALE
+ (
Math
.
random
()
* SCALE_VARIANCE
)
,
SPEED
+ (
Math
.
random
()
* SPEED_VARIANCE
)
);
bubbles
.
push
(
bubble
);
addChild
(
bubble
);
}
}
private
function
setupLargeBubbles
(
frames
:
Vector
.
<
Texture
>
)
:
void
{
const
LARGE_BUBBLES
:
int
= 6
;
const
SCALE
:
Number
= 1.05
;
const
SCALE_VARIANCE
:
Number
= 0.15
;
const
SPEED
:
Number
= 3.1
;
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
)
);
bubbles
.
push
(
bubble
);
addChild
(
bubble
);
}
}
private
function
setupHugeBubbles
(
frames
:
Vector
.
<
Texture
>
)
:
void
{
const
HUGE_BUBBLES
:
int
= 1
;
const
SCALE
:
Number
= 3.0
;
const
SCALE_VARIANCE
:
Number
= 0.4
;
const
SPEED
:
Number
= 6.0
;
const
SPEED_VARIANCE
:
Number
= 2.0
;
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
)
);
bubbles
.
push
(
bubble
);
addChild
(
bubble
);
}
}
private
function
update
(
e
: Event
)
:
void
{
var
bubble
:
Bubble
;
for
(
var
i
:
int
= 0
; i
< bubbles
.
length
; i
++
)
{
bubble
= bubbles
[
i
];
bubble
.
update
();
}
}
}
}
04/2012 (34)
2
0
CREATING ANIMATIONS
04/2012 (34)
code. We’ll create and animate multiple bubbles to give a realistic scene that has a sense of depth to it. We’ll do this by creating four layers of bubbles stacked on top of one another. The farthest back layer’s bubbles will be the smallest, with the top most layer’s bubbles being the largest.
To achieve this we’ll 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>[];
Now we’ll 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. Here’s the code: Listing 5.
As you can see, each bubble is created then added to the bubbles vector array and to Starling’s 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();
var frames:Vector.<Texture> = bubblesTextureAtlas.get
Textures(
TEXTURE_PREFIX);
setupSmallBubbles(frames);
}
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. It’s important to understand that you don’t 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 GPU’s memory.
All that’s left is to update each bubble’s position within the class’ update()
method. Make the following changes to walk through the vector array of bubbles and call each one’s own update()
method:
private function update(e:EnterFrameEvent):void
{
var bubble:Bubble;
for(var i:int = 0; i < bubbles.length; i++)
{
bubble = bubbles[i];
Listing 7. Final version of the Bubble class package
{
import
starling
.
core
.
Starling
;
import
starling
.
display
.
MovieClip
;
import
starling
.
events
.
Event
;
import
starling
.
textures
.
Texture
;
public
class
Bubble
extends
MovieClip
{
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
;
pivotY
= height
/ 2
;
scaleX
= scale
;
scaleY
= scale
;
Starling
.
juggler
.
add
(
this
);
addEventListener
(
Event
.
ADDED_TO_STAGE
, addedToStage
);
}
public
function
update
()
:
void
{
y
-= speed
;
if
(
y
< -
(
height
/ 2
))
{
x
= -
(
width
/ 2
)
+ ((
stage
.
stageWidth
+ width
)
* Math
.
random
());
y
= stage
.
stageHeight
+ (
height
/ 2
)
+ (
height
* Math
.
random
());
}
}
private
function
addedToStage
(
e
:
Event
)
:
void
{
x
= -
(
width
/ 2
)
+ ((
stage
.
stageWidth
+ width
)
* Math
.
random
());
y
= -
(
stage
.
stageHeight
/ 2
)
+ ((
stage
.
stageHeight
* 2
)
* Math
.
random
());
}
}
}
04/2012 (34)
2
0
CREATING ANIMATIONS
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. We’ll 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 Starling’s 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 Flash’s 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.yeahbutisit�ash.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)
2
2
FLASH VS. HTML5
D
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. 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.
Courtesy of taterboy.com
Which Technology Is Better For Online Web Reporting – Flash vs. HTML5
04/2012 (34)
2
3
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. It’s 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.
I’m 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.
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.
04/2012 (34)
2
4
REVIEW
E
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 software’s. 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, E-
Catalogues, 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 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. Figure 1. Flipbook
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 Flash-
drives, 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 PDF’s bookmarks or contents while creating publication.
•
Full-text Search – Allows us to search through publication contents.
Figure 2. Import pdf
04/2012 (34)
2
6
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 2’s 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, that’s 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
FlippingBook Publisher 2
04/2011 (34)
2
7
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 don’t 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; it’s 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. Publisher’s 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
Figure 6. Publish
Figure 5. Bottom-bar
04/2012 (34)
2
8
REVIEW
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! It’s time to reach to your readers. If you don’t 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 – It’s 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. 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
)
Summary
Product
FlippingBook Publisher 2
Version
2.2.16 (released: 3/3/2012)
Description
Generate �ip books with the page turn efect.
Features
Customizable Interface, Printing Pages, Fixed or Liquid Sizing, Book Zooming, PDF Download, Flexible Setup, Oi
-
ne EXE books support and Content Pro
-
tection
OS Requirements
Windows 7, Windows Vista, Microsoft Windows XP
Platform Supported
Windows, Mac OS X, and Web.
Manufacturer
Mediaparts Interactive
Website
http://�ippingbook.com
Cost
Basic – €199, Professional – €299, Professional – €499
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.
Figure 8. Share
�������������������������������
�
�����������������
�������������������������
�
��������������������������
�������� ������������������
���������������������
����������������������������������������������
���������������������������������������������
����������������������
�����������������������������������������������
�����������������������������������������������
�������������������������������������������������
������������������
� ���������������������������
������������������������������������������������
����������������������������������������������
�������������������������
����������������������������������������������������
������
��������� ����
����������������������
��
�� �����
������
��������������������������������
��������
�
���������������������������������������
�
�������������������������������������������������������������������������������������������������������������������������
��������������
���������
�����������������������
���������������������������
04/2012 (34)
3
0
FIXEL POWER TOOL
Hello github
First of all – we’ve 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 I’m glad I did! As a result I have reorganised the whole project structure. It’s now cleaner, easier to navigate and doesn’t rely on any classpath dependencies. Hoorah!
Comprehensive Getting Started Guide
I’ll 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. It’s included when you download from github, just look in the Docs folder.
Revamped Test Suite
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. I’ve 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.
Bugs, be-gone!
Lots of small bug fixes across most classes. And lots more in-line documentation added. I don’t think there is a class / function anywhere now that doesn’t 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, 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 it’s a monster…
04/2012 (34)
3
2
FIXEL POWER TOOL
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 you’ll 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 is where the FlxSpecialFX class comes in. It’s a handler for the new FX Plugin system, into which I’ll 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 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 I’m 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. I’m 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. I’m 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!
04/2012 (34)
3
4
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. T
he “car” and “racing” genre is heavily catered for in the Flash gaming space. But it’s 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? I’m 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. I’m not a developer myself. Photonstorm.com
04/2012 (34)
3
5
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 we’ve 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 we’ll upload to the popular portals like Newgrounds and Kongregate. That alone helps the game get a decent exposure. And after this we’ll reach out to the top gaming portal owners. This is sometimes a daunting (and time consuming) process, but if your game is good it’s 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.”
What goes into making a car game?
“In the new car game we’ve 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. Mini-
games include car washing, parking, painting, cone racing and professional (timed) versions of washing and parking.”
It’s 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 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. It’s the same in our games, except you’re moving a sponge around cleaning dirt away. The more you move, the more we alpha out the dirt layer!”
It doesn’t sound too dissimilar to “pet” care games on girls sites (groom, wash, play).
“This may surprise you, but we estimate that almost 70% of our players are female.”
That certainly explains the “nurturing” part! Don’t you ever get bored producing car games?
“I don’t 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. We’ll 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 doesn’t feel that much different from other niche areas such as Match-3, Pet Care or Hidden Object. It’s 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 you’ve written a “car care” or racing game then it might be worth dropping MojoCreatives a line to see if they’ll 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 I’m 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. I’m 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. I’m 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!
Документ
Категория
Информатика
Просмотров
1 784
Размер файла
5 486 Кб
Теги
flash, flex, adobe
1/--страниц
Пожаловаться на содержимое документа