Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Ffd 05 2012

10.370 visualizaciones

Publicado el

My Article on Flex in Software Development magazine

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Ffd 05 2012

  1. 1. ���������������� �������������������������������������������������� ������������������������������������ ���������������������������������������������������������������������������������� ��� ���� ����������� ����� ������� ������� �������� ���� ������� ����������� ���� ����� ������������� �������� ������������ ���� �������� �������������� �������������� ��������������������������������������������� ���������������������������������������������������������������������������� ���������������������������������������������������������������������������������� ������������������������������������������������������������������������������ ����������������������������������������������������������������������
  2. 2. �������������� ����������������������� ����������������������������������������������������������������������������� ���������������������������������������������������������������������������������� ������������������������������������������������������������������������������ �������������������������������������������������������������������������������� ������������������������������������������������������������������������������� �������������������������������������������������������� �������������������� ��������������������������������������������������������������������������� ���������������������������������������������������������������������������� ��������������������������������������������������������������������������������� ��������������������������������������������������������������������� ����������������� ������������������������������������������������������������������������� ������������������������������������������������������������������������������� �������� ����������� ������������ ������� ����������� ������������ ��������� ��� ���� ���������������������������������������������������������������������������� ��������������������������������������������������������������������������������� ������������������ ����� ������������������������������������ ���������������������������������������������
  3. 3. 4 05/2012 (35) Dear Readers, This month we want to share an issue devoted to Flex 4. There is a big portion of fresh articles waiting for you! As you will see there is a lot of helpful information. You can read for example about Flash Professional CS6, Flex & FXG, Flex & PHP and many more. After reading this issue you will be richer in knowledge and new skills. I’m sure that everyone will find something for himself/herself! Let’s start from the article about ‘Generating Sprite Sheets’ by Christopher Caleb. As he wrote, Flash Professional CS6 makes it incredibly easy to create sprite sheets while using the design and animation workflow that you’re already familiar with. With very little effort you’re able to create a compact sprite sheet that can be used in ActionScript projects or even other languages such as Java Script and Objective-C. Ralph Hauwert in his article describes Flash Premium Features and Unity Content. Adobe has recently announced “Premium Features for Gaming” for the Flash Platform which initially includes only Fast Memory Opcodes and Stage3D when used simultaneously. They have also announced a required 9% revenue share on Premium Features Licensed content that exceeds $50k in revenue. The next articles written by Harit Kothari is mainly about FXG (SVG implementation). It is not really a replacement for all scenarios. It isn’t really replacement to bitmapdata. Likewise skinned UIComponent, you really do not need bitmapdata for its weight and scalability issues. SVG manipulation is much easier and clean in terms of rendering, and that’s why Flex component, with its FXG skin looks beautiful in any size! From the article written by Sandeep Sharma you can learn that HTML5 fight with Flex is on: Flex SDK and Compiler open sourced MPL license, HTML 5 open standard WHATWG license, new 3d – graphics,(transformation scene, camera, lighting, change pixel data, effects) Real-time connection(HTML5 has websocket vs Flex has flash.net.socket), Drag and Drop (drag and drop across application, cross document, clipboard) with API’s flash. desktop.clipboard, Events.NativeDragevents, Flash.desktop.Transferabl eData Vs HTML5 DataTransfer and DragEvent. However, the article about Flash & PHP by Jigar Oza talks that as per the speed of the response is concerned, Remoting is the fastest method followed by HTTP service and Web Service. So we can say that Web Service is the slowest method for Flex and PHP connectivity. In the last but not least article, Daniel Abu wrote that he is still going to use Flex in the next couple of years as it allows him to create enterprise level desktop and mobile applications in a shorter time than any existing technology. Nevertheless, he is going to continue expanding his knowledge with new HTML5 frameworks as they come out. Find out something for yourself and enjoy reading! Paulina Śliwka & FFD Team Managing: Paulina Śliwka paulina.sliwka@software.com.pl Proofreaders: Patrick French Betatesters: r0mk1n.work@gmail.com Marketing Director: Paulina Śliwka paulina.sliwka@software.com.pl Editor in Chief: Ewa Dudzic DTP Team: Ireneusz Pogroszewski 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
  4. 4. 5 05/2011 (35) CONTENTS Creating Animations 06 Generating Sprite Sheets in Flash Professional CS6 BY CHRISTOPHER CALEB The domination of mobile devices and tablets has brought about new challenges for developers and designers. For animation, bitmaps are now preferred above vector graphics, which typically require more CPU resources. To improve the development workflow and to maximize performance, bitmap sequences are often packed into what is called a Sprite Sheet before being used. Unity Development Platform 14 Unity: Making (Flash) 3D Game Development Easy and Fun BY RALPH HAUWERT As was revealed last year, and has been confirmed again by Adobe in March, the list will be extended with Flash, which carries an incredibly high global install count. This is important to Unity Technologies as a company that can offer its development community another amazing option to be successful with the Flash Platform. Flex 4 and FXG 22 Flex 4 and FXG BY HARIT KOTHARI Flex application without real UI asset is like an amazing structure of building, without walls and furnished box! The core challenge is balancing UI and functionality. If you provide rich UI, but weak functionality, it doesn’t sustain long. In reverse, if you provide expected functionality, but dull or default UI, it may give kind of non touching feeling to user. Now the problem starts, you provide good functionality, and equally good UI, the application gives wow effect in demo, but in reality, it slows down and consumes too much memory, rendering being one of costly process! Flex 4 28 Future of Flex & Flash : Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV BY SANDEEP SHARMA Adobe outdoing competition for many years now has system in place for bringing future like IPTV (http:// blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet OS interfaces,photo editorslike photoshop, Word editors like Acrobat reader with compressed storage. Adobe has company which have been working ahead of time many years in many technology are like Acrobat reader, Photoshop with image processing algorithm implementations for naive users, for online picture editor for image enhancements using image processing algorithms (http://pixlr.com/editor/), Flex for AJAX/RIA. Flex and PHP 32 Different ways of connecting Flex to PHP BY JIGAR OZA Flex as its name suggests is very flexible technology framework. It can connect to almost all server side and scripting languages to connect to database and do other server stuffs. As it can connect to almost all languages, it can be hosted on all kinds of server platforms. The Future of Flex 34 What’s next for Flex? Will open sourcing it breathe new life into it or has it been “left out to die”? BY DANIEL ABU November 2011 will be a month long remembered by Flash developers, Apart from announcing the discontinuation of the Flash Player browser plugin development for mobile devices, Adobe announced its intention to donate the Flex SDK to the Apache Software Foundation. While the former, although perceived by the tech community as the demise of Flash, was seen by many Flash developers as a better use of Adobe resources.
  5. 5. 05/2012 (35)6 CREATING ANIMATIONS T he domination of mobile devices and tablets has brought about new challenges for developers and designers. For animation, bitmaps are now preferred above vector graphics, which typically require more CPU resources. To improve the development workflow and to maximize performance, bitmap sequences are often packed into what is called a Sprite Sheet before being used. One of the great new features of Flash Professional CS6 is the ability to export your timeline animations to a sprite sheet. Not only can sprite sheets be used in Flash-based projects, they can also be applied to a multitude of other technologies and frameworks. Essentially, you can continue to use Flash Professional as your animation tool, regardless of the development language your project is targeting. This tutorial will show you how Flash Professional CS6 can be used to generate a sprite sheet from several movie clip animations. Getting Started You’ll need Flash Professional CS6, a trial version of which can be downloaded from www.adobe.com/ downloads. For this tutorial, a FLA containing some animation has already been prepared for you to work with. Download it from www.yeahbutisitflash.com/downloads/sprite- sheets-cs6-tut/monkey.fla and open it within Flash Professional CS6. Launching the Sprite Sheet Generator Take a look at the FLA’s Library panel (Figure 1). There you will see three movie clips named Dazed, Jump, and Panic respectively. Collectively they represent a monkey in various animation states for a fictional game. Double-click the Jump movie clip to move into its timeline. You’ll see that this particular clip is animated Generating Sprite Sheets in Flash Professional CS6 Learn how to create and export a sprite sheet using Flash Professional CS6. What you will learn… • How to place timeline animations within a sprite sheet • How to manage the animations that appear within your sprite sheet • How to optimize the layout of a sprite sheet What you should know… • You should be comfortable working with Flash Professional Figure 1. Movie clips within the library
  6. 6. Generating Sprite Sheets in Flash Professional CS6 05/2012 (35) 7 across three frames (Figure 2) and that the monkey is built entirely from vector shapes. The other two movie clips are constructed in a similar manner. Although we’ll be exporting all the animation frames as bitmaps, you’re still free to create your artwork using Flash Professional’s familiar vector drawing tools. When you’re generating a sprite sheet you need to select a collection of clips whose frames you’d like added to the sheet. Let’s add all three of our movie clips to a sprite sheet. To do this, first click on the Dazed movie clip within the library. Now hold the shift key and click on the Panic movie clip. With all three clips selected, right-click any of the clips from the library and select Generate Sprite Sheet (Figure 3) from the context menu. Your sprite sheet will be generated and the Generate Sprite Sheet panel will appear. Viewing your Sprite Sheet Within the panel you’ll be able to see the sprite sheet that has been generated. It will contain a bitmap representation of each frame of animation from your three movie clips (Figure 4). Directly above the sprite sheet are two tabs named Sprite Sheet and Preview. For the time being, leave the Sprite Sheet tab selected. Given the sprite sheet’s fairly large dimensions you’ll also likely see scroll bars allowing you to pan around the sheet. At the bottom-left of the sprite sheet you’ll find a zoom field. Try setting the magnification to 50% for more comfortable viewing. Previewing Animation Sequences Before you export your sprite sheet, it’s possible to preview the bitmap representation of each of your animation sequences. Take a look at the Symbol Figure 2. The Jump movie-clip’s three frames of animation Figure 3. Generating a sprite sheet for the selected library clips Figure 4. The Generate Sprite Sheet panel
  7. 7. 05/2012 (35)8 CREATING ANIMATIONS information section on the left of the panel. It lists the names of the movie clips that were used when generating the sprite sheet. At present, the Dazed symbol will be highlighted. To preview its animation simply click the Preview tab directly above the image of your sprite sheet. You’ll see both frames from the Dazed animation being played quickly one after the other. At the bottom of the preview pane is a set of controls (Figure 5) allowing you to pause the animation and step through it frame- by-frame. Give it a go, and again, if you’re finding the preview area uncomfortably small then you can adjust its magnification to suit. It’s important to note that what you’re looking at here is a bitmap representation of your vector animations, and not the vectors themselves. You are seeing your animations as they will look when taken from the generated sprite sheet. Now preview the Jump and the Panic animations also. Simply click on each from the Symbol information section and step through their animation frames. Before moving on, it’s worth noting that you can exclude any of the symbols from your sprite sheet by simply unselecting them in the Symbol information section. To see the impact of this, first click on the Sprite Sheet tab to see your whole sprite sheet again then uncheck the Dazed symbol’s checkbox (Figure 6) in the list. You’re sprite sheet will be immediately regenerated with the animation frames from the Dazed movie clip removed. Add the Dazed symbol back into your sprite sheet by checking its checkbox again. Image Dimensions and Format When a sprite sheet is generated, Flash Professional CS6 automatically selects a suitable size based on the animation frames being added to it. It also selects the image format that the sprite sheet is to be saved as. For this tutorial’s sprite sheet, its dimensions were set at 1024 x 2048 pixels and a 32-bit PNG format was selected to allow transparency on each frame of animation. Both the sprite sheet’s dimensions and its image format can be changed from the panel’s Sprite Sheet output section (Figure 7). Let’s see how our sprite sheet is affected when we change its dimensions. Although you can change the width and height to any arbitrary value, the Generate Sprite Sheet panel provides a drop-down list of common sizes. Select 1024x1024 from the Image dimensions field’s drop- down list (Figure 8). You’ll see an exclamation mark appear next to the field indicating that there is now a problem. If you look at the bottom of your sprite sheet Figure 6. Omitting a library symbol’s frames from the sprite sheet Figure 5. The animation preview pane and playback controls Figure 7. The panel’s Sprite Sheet output section Figure 8. Manually selecting the sprite sheet’s dimensions
  8. 8. ������������������� ��������������� ��������� ����� ���� ��������������� �������������������� ������������ ������������� ����������� ���������������
  9. 9. 05/2012 (35)10 CREATING ANIMATIONS you’ll see that part of the final bitmap has been cropped due to the sheet’s reduced height. Correct this by either manually setting a larger size or by setting the Image dimensions field to Auto size. You may have noticed that the size automatically chosen by Flash Professional has a significant amount of unoccupied space near the bottom of the sprite sheet. Why doesn’t it simply crop the sheet’s dimensions to create a tighter fit? Well when it comes to graphics performance, a sprite sheet’s size can be vitally important. In order to maximize performance, applications often store their sprite sheets on the Graphics Processing Unit (GPU). GPUs however work best with dimensions that are of a power of two (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048). Layout Optimizations It’s important to know the maximum width and height supported by any hardware your application is targeting. For example, many GPUs have a size limit of 1024x1024 pixels. If you can’t squeeze everything onto a single sheet then you’ll need to export several sprite sheets to hold all your graphics. Fortunately Flash Professional provides some options that can be used to optimize the packing of your sprite sheet’s contents. Let’s see if we can reduce our sprite sheet’s height from 2048 pixels to 1024 pixels without compromising our artwork. Within the Sprite Sheet output section you should see a Trim checkbox. Trimming removes any transparent pixels from the border of your sprite sheet’s frames. Check the Trim checkbox and you should see the sprite sheet’s layout alter slightly. If you examine the sprite sheet’s height you’ll see that it has been reduced to 1024 pixels. The small savings that have been made by trimming each bitmap has allowed Flash Professional to organize your graphics within a 1024x1024 sprite sheet instead of a 1024x2048 sheet. This is quite a saving! It’s also possible to remove duplicate frames from your sprite sheet. If you look closely at your sprite sheet you’ll notice that frames 2 and 5 are identical, as are frames 3 and 6 (Figure 9 illustrates this by clearly marking the duplicate frames). Essentially there’s no need to store duplicates as you can simply use the first copy of each frame in your animations. To remove the duplicates, check the Stack frames checkbox directly Figure 9. Duplicate frames within the sprite sheet Figure 10. Removing duplicates with the Stack frames option Figure 11. Markers clearly indicating stacked frames
  10. 10. Generating Sprite Sheets in Flash Professional CS6 05/2012 (35) 11 underneath the Trim checkbox (Figure 10). You’ll now be left with free space within your sprite sheet, which can be put to good use if you have other graphics you’d like to pack onto the sheet. Additionally, markers will appear over the frames within your sprite sheet that are to be shared across multiple animations (Figure 11). Each marker will contain a number indicating just how many animations the frame will be re-used in. If it helps, think of the duplicate frames as having been stacked on top of one another. So far we’ve been using Flash Professional’s default packing algorithm. However a more sophisticated one is available that provides a higher packing ratio than the basic algorithm. To see how it might benefit us, first uncheck the Trim and Stack frames checkboxes. With these options removed your sprite sheet should once again be 1024x2048 pixels in size. Now, staying within the Sprite Sheet output section, find the Algorithm drop-down box and select MaxRects. Notice that the MaxRects algorithm is able to pack your graphics into a 1024x1024 sprite sheet (Figure 12) without help from the Trim and Stack frames options. It’s always worthwhile experimenting with the available algorithms to see which one will work best with your content. Exporting the Sprite Sheet Okay, using the current settings, let’s export our sprite sheet. Two files will be created – a bitmap image containing the sprite sheet’s graphics, and an XML file that defines the position of the animation frames within the sprite sheet. First we’ll need to specify which data format the XML file is to be output as. Flash Professional supports various frameworks that can utilize Figure 12. LHS: 1024x2048 sheet using Basic algorithm. RHS: 1024x1024 sheet using MaxRects Listing 1. The sprite sheet's XML �le <?xml version="1.0" encoding="UTF-16"?> <TextureAtlas imagePath="monkey.png"> <!-- Created with Adobe Flash CS6 version 12.0.0.481 --> <!-- http://www.adobe.com/products/flash.html --> <SubTexture name="Dazed0000" x="0" y="0" width="293" height="418"/> <SubTexture name="Dazed0001" x="0" y="418" width="293" height="418"/> <SubTexture name="Jump0000" x="293" y="0" width="282" height="367"/> <SubTexture name="Jump0001" x="293" y="367" width="282" height="367"/> <SubTexture name="Jump0002" x="575" y="0" width="282" height="367"/> <SubTexture name="Panic0000" x="575" y="367" width="314" height="277"/> <SubTexture name="Panic0001" x="575" y="644" width="314" height="277"/> </TextureAtlas>
  11. 11. 05/2012 (35)12 CREATING ANIMATIONS sprite sheets. However each framework requires the sprite sheet’s XML in a different format. Let’s target the popular ActionScript-based Starling framework. Simply select Starling from the Data format drop-down box. You can find it within the panel’s Sprite Sheet output section. Now all that’s left to do is specify a filename for the sprite sheet. At the bottom of the Generate Sprite Sheet panel is a Browse field. Enter monkey.png into the field and click the Export button to its right. A PNG file named monkey.png will be written to your FLA’s root folder along with an XML file named monkey.xml. Understanding the sprite sheet’s XML Although the sprite sheet’s XML file is mostly taken care of by your framework of choice, if you’re also taking care of coding duties then you do need to know the unique name that has been assigned to each of the sheet’s animation frames. It’s these names that you use when writing code to create animations or to simply display a single frame from the sprite sheet. Let’s find each frame’s name. Open the newly created monkey.xml file into a text editor and take a look at it. Listing 1 shows the file’s XML. As you can see, the XML is fairly straightforward and easy to understand. There’s a top-level <TextureAtlas> tag, which defines the name of the sprite sheet’s image file via the imagePath attribute. This successfully ties the XML file to the correct image. The remainder of the XML file contains a collection of <subTexture> tags, which are used to define the rectangular region of each of the sprite sheet’s frames. Notice that each <subTexture> tag contains a name attribute, which is used to declare a unique name for each frame. The names are constructed from the name of the movie clip that the frame originally belonged to, and an index position indicating its order within the animation sequence. This is illustrated in Figure 13 where each name is superimposed over its corresponding frame on the sprite sheet. Congratulations! You now know how to export a sprite sheet using Flash Professional CS6 and also understand the format of the XML file that represents it. Final Statement Flash Professional CS6 makes it incredibly easy to create sprite sheets while using the design and animation workflow that you’re already familiar with. With very little effort you’re able to create a compact sprite sheet that can be used in ActionScript projects or even other languages such as JavaScript and Objective-C. If you’d like to know more about sprite sheets or how to use them within your Starling projects then take a look at my Working with Sprite Sheets in Starling article from the April issue of Flash and Flex Seveloper’s Magazine. Alternatively pay a visit to the official Starling Framework website at http://gamua.com/starling. Figure 13. Your sprite sheet with frame names superimposed 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.
  12. 12. 05/2012 (35)14 UNITY DEVELOPMENT PLATFORM A s was revealed last year, and has been confirmed again by Adobe in March, the list will be extended with Flash, which carries an incredibly high global install count. This is important to Unity Technologies as a company that can offer its development community another amazing option to be successful with the Flash Platform. In short, it’s another way to help level the playing field for Unity developers. Unity Technologies at a Glance Unity Technologies was officially founded by David Helgason, Nicholas Francis, and Joachim Ante in Copenhagen, Denmark in 2004 but the Unity engine unofficially began treading its path in 2001 with the development of a game called GooBall. When it became clear that the tools developed to make the game were more successful creations than the game itself, focus shifted to creating a complete 3D engine and development toolset that anyone, anywhere could use to create high-quality games. The first version of Unity was launched at Apple’s Worldwide Developer Conference in 2005. Since that point, the popularity of Unity has risen steadily. In 2009, the $200 indie pricing was cut in favor of making the base product free for PC, Mac, and Web development while the $1500 Unity Pro provided extra features that “professional” developers desire. Support for mobile platforms (iOS and Android) and all major consoles (Wii, Xbox 360, PlayStation 3) has also helped position Unity as one of the most widely adopted game development tools in the world. The Unity community, one of the most positive, diverse, and helpful development communities on the Internet, has grown to over 1,000,000 registered developers with 300,000 of that number using the tools on a regular monthly basis. The 250,000 new registers in the last three months are also a pretty good indication of the exponential surge in popularity of the platform. Consequently the Unity Technologies employee count has continued to rise to support growth and is now around 175 employees spread across nine countries. Unity is constantly in a state of development and the latest update, Unity 3.5, brought some a great amount of additions and changes such as the new Shuriken particle system, massive improvements to lighting options, improved occlusion culling, and pathfinding systems at no additional upgrade cost. The Unity 3.5 beta also brought with it the Flash Developer Preview, giving all those who download the beta the chance to check out the Flash deployment tool and enter a creation contest to see who could build the best game over the holiday break between 2011 and 2012. The contest saw around 500 submissions, proving the Flash deployment add-on to be a great success. The Flash add-on preview is still available for anyone that downloads Unity 3.5 (Free or Pro) so everyone who Unity: Making (Flash) 3D Game Development Easy and Fun “Build Once, Deploy Anywhere”is a mantra that has helped propel the Unity development platform to the healthy global status it enjoys today. Up until now this idea of quick publishing to different platforms has included PC, Mac,Web (through UnityWeb Player and Native Client), iOS, Android, Xbox 360, PS3, andWii. What you will learn… • what is the Unity Technology • how to creating your own content using Unity Flash • what is the unity Flash-in-a-Flash Competition What you should know… • basics Adobe Flash understanding
  13. 13. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 15 loves making games for Flash can try it out! You can find out more about this later in the article. Unity and the Democratization of Game Development The core concept of “democratizing game development” has been, and is still, the foundation for every change and addition that is made to Unity. This means a particular focus on creating a full-featured engine with user-friendly tools for a price that anyone (especially indie studios) can afford. One of the biggest draws for Unity as a toolset has clearly been its quick learning-curve. Later on in this article, you will find a jumping-off point for Flash developers. Hopefully you’ll see the UI’s accessibility and efficiency as a testament to the amount of effort put into its development given the breadth and depth of Unity’s features. The interface manages incredible transparency for important features while hiding the less important guts so that only the few that really need access to them will have to look. The UI is presented visually to be familiar to those that use 3D Studio Max or Maya but is easily understood by all. Assets can be dragged and dropped into a scene with ease. At the same time, properties can be adjusted for objects individually or for “prefabs” that carry information about everything from visual style to control scripting with them across all instances of an object in project. The goal is to take the pain out of development and nowhere is this clearer than in the platform deployment tools where a click of a button is all it takes to convert a project from one platform to the next. Unity does the heavy lifting and developers are left with the clean-up tasks of optimization and bug hunting. That means if you’re developing a game for iOS or Android and you want to move it to Flash (or vice versa), you’ll barely have to lift a finger to make it happen. Unity also provides the best prototyping and gameplay testing environment in the industry. Games can be played in the editor while adjustments can be made on the fly. Values are adjusted without making any permanent changes to any underlying scripts. Instantaneous results make iteration efficient and fun. Making Teams Smaller and More Efficient While the tools and pricing are almost always the start of any conversation regarding Unity’s strengths and usefulness, two other democratization initiatives were introduced at the end of 2010 to provide new potential advantages to smaller developers: The Asset Store and Union Business Division. The Asset Store is an exchange for assets of all types (art, scripts, sound, editor extensions) that can be accessed directly from the Unity application. Creators can upload assets to the store where developers looking for an out-of-the-box solutions can purchase them. This simple concept allows for coders to find art, artists to find code, and everyone to add more functionality to Unity. Once an asset has been purchased (or downloaded for free) it can be immediately installed into the active project. The assets are all royalty free and can be used in any number of projects. The Store has seen great success in its first year growing from 64 asset packages to over 2,800 currently with some asset creators making a good chunk of money monthly. Union provides a distribution network to Unity developers that falls outside the realm of normal publishing. The service is free to all to join and has the potential to hook developers up to new avenues of distribution to emerging platforms such as smartphones that aren’t iOS or Android, set top boxes like Roku, and Smart TVs. Union will take care of porting the games to each platform, freeing up development resources to work on follow-up titles. Costs of porting the game will be taken from profits after which Union takes a minor 20% revenue share. Flash as a Unity Build Target When Adobe announced Stage3D (then still known as Molehill) to the world back in 2010, Flash became a viable target for Unity export. Stage3D is a lower-level hardware accelerated graphics API; which is needed for the complex 3D graphics the Unity Engine can produce in real time. As mentioned earlier, one of the most attractive things about the Flash Platform is its incredible reach. With more than 1.3 billion PC installs of the Flash Player, the potential target audience is huge. Unsurprisingly, Unity’s userbase indicated they wanted access to this audience so once Stage3D was announced, work commenced on the Flash deployment add-on. Porting the engine to work with Flash has been a massive undertaking. On the already existing targets, the engine runs as compiled native code directly targeting the device. Compare this to the Flash Player, where we cross-compile our engine, the Scripting API code, and finally the project code to ActionScript. Additionally, it cross-compiles shaders to Adobe’s AGAL Shader language and rewrite all project assets to Flash Player compatible formats. The most important thing to take away from this is that you, as a content creator, don’t have to worry about what platform you are targeting with Unity. Unity does that work so you can focus on creating your content using all of the same advanced runtime features such as physics, occlusion culling, particle systems and navigation meshes, when targeting to Flash. While the deployment tool is currently still in preview, there are already many users creating beautiful content
  14. 14. 05/2012 (35)16 UNITY DEVELOPMENT PLATFORM for Flash. The power of authoring for Flash using the Unity Editor will mean an acceleration in growth of great content for it. Unity’s Flash-in-a-Flash Competition The “Flash in a Flash” competition was great validation of how Unity helps developers are creating quality content faster. The contest, which started in December 2011, was in celebration of the release of the first version of the tool. It challenged developers to create new games or port their old ones over to Flash and judged both on creativity and technical merit. Many people did just that in a very short amount of time. After the two week deadline; the amount of entries into the competition alone shocked the Unity staff. With close to 500 entries, there was a ton of content to play and review! It turned out to be very tough to select the winner and the ten runners up. Considering the Flash exporter was in first beta at that point in time, entrants did an incredible job of utilizing it to create incredible games. Let’s have a look at the winner and some of the runners up. Winner: Tail Drift By Cameron Owen Tail Drift is a simple arcade racer in which you maneuver a red plane along a 3D candy-striped tubular track. The track runs below, above, and around floating islands and hot-air balloons that you have to avoid smacking into. It’s a bit like Retro Revolution meets Mario Kart. Ski Safari By Brendan Watts In Ski Safari, a charming casual game by Brendan Watts, you are a resilient little skier outrunning a deadly avalanche. Survive and gain points by making impressive jumps, collecting coins, and riding on the back of various animals that happen to be also zipping down the mountain! Use penguins to glide further, Yetis for increased toughness, and Eagles to soar to great heights! Aaaaa!!! for the Awesome By Owlchemy Labs and Dejobaan Games Landing yourself in traction was never so much fun. In this game you free fall through a floating cityscape high above the Earth’s stratosphere. Gather points by skimming alongside buildings, but, use your parachute to avoid crashing into them.
  15. 15. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 17 Flatboyz By Bento-Studio You are a cardboard hero dangling from a rope and gliding above the countryside. Below you are surly looking mortals clad in red bikini bottoms. You must pick them up to make them happy again – and give them new clothes! But watch out for the trees, rooftops, and other obstacles that can knock you off your rope. Start creating your own content using Unity Flash! The current release version of Unity 3.5 includes a public preview of the Unity Flash deployment add-on. It’s by no means final at this point but we wanted to get this in the hands of as many as people possible, as quickly as possible, to let everyone try it out and give us feedback. On final release this will become paid add-on to Unity but, right now, you can download a free copy of Unity and start deploying your Unity games to Flash. Longtime Unity users will find it easy to simply deploy their games to Flash as they would with any other new platform. Flash developers new to Unity will also find it exciting to build games for their favorite platform but also have the option to then release the game to multiple other potentially profitable targets. We will be focusing this next section of the article for people with a Flash / Flex background that are new to Unity. To follow along, you can get the free version of Unity 3.5 with our Flash Exporter preview at: http://unity3d.com/unity/ download/. An Introduction to Unity for Flash Developers Unity is a cross-platform development tool known for its simple learning curve and rapid development, but how does one get started using Unity? As a Flash user, it is important to remember that your first glance at Unity may seem alien, but our interface and workflow actually carries with it many parallels with Flash. Make a Scene! How Unity Content is Organized To create Unity games, much like Flash – games are arranged inside Scenes. These could be considered as Flash scene equivalents, while the overall Project, an equivalent to your .FLA files are folders containing the entire Unity project. The Scene you are currently working on is shown in the Scene view in Unity. This view is effectively a 3D equivalent to the main Stage in Flash. The key difference to note here is the infinite nature of 3D space – for this reason Unity provides simple navigation tools, akin to 3D modelling applications such as 3DS Max, Maya, or Modo for example. Don’t fear if you are unfamiliar with 3D navigation as the simple use of the Hand tool in Unity, along with modifier keys Alt / Ctrl allow you to pan, orbit, and zoom with ease. This infinite three-dimensional space also means that you should forget about the nature of dimensions as defined in Flash for the stage. What is shown onscreen in a 3D engine such as Unity is defined by the use of Cameras so try and think more in physical movie production terms – anything the audience sees is simply what the camera picks up. Naturally you can define the exported pixel dimensions for your exported Flash swf, but it’s important to ensure that you think three dimensionally. It may be daunting at first, but it soon becomes exciting as you begin to realise the possibilities and ease of realisation for dramatic and fun effects for your games. Scenes, along with other assets used to make your game, are shown inside Unity in the Project panel. This panel, accompanied by a Create button that allows you to generate various Unity specific assets, is your main focus for managing assets and handling import settings. It is the equivalent of the Library window in Flash. Hey! Nice Assets Unity handles any assets you can throw at it – everything from Photoshop files and 3D objects to video and audio. The great thing about keeping these assets arranged in Unity is that you’ll never need to reimport them. Import any asset into Unity’s Project panel (or simply save to the Assets folder, a subfolder of your main project folder) and your asset is registered by Unity. Need to update a file in an external package? This is as simple as saving in the external package you are working in (Photoshop for example) and switching back to Unity. Unity detects the change in the file and automatically re-imports and updates any part of the scene that uses your file. This straightforward pipeline ensures that your in game content is always up to date, and the Project panel itself gives you the opportunity to share assets and their settings with others in a team by exporting Unity packages. These are bundled files that incorporates all of its current settings for Import and any files that it
  16. 16. 05/2012 (35)18 UNITY DEVELOPMENT PLATFORM depends upon. For example, a 3D model may require a texture to accompany it. MovieClips, Instances, Prefabs, and Game Objects In Flash, we’re all familiar with the concept of creating a MovieClip – a self contained data template stored in the Library, and instanced via code or the editor – and it’s especially important in game development. In Unity, this concept is mirrored by what we call Prefabs. However, there are some subtle differences to be aware of. In Unity, any items in your scene are known as Game Objects, these can be saved into the Project (Library) as something called a Prefab (MovieClip). Once this is done, each game object that belong to this prefab is considered an Instance of it, but this is not just for storage purposes. Unity takes the template system one step further by allowing you to edit the Prefab by selecting it within the Project panel and edit in within the Inspector (akin to Flash’s Properties panel). This then updates the properties of any instances of it in your game’s Scenes, giving you flexibility to update infinite objects in your game at any time. Keep in mind that instances of a stored prefab can still be edited as individuals without affecting the group. If you then choose, edits made to this individual can be echoed back to the prefab, which will in turn update all of the fellow instances as a result. Hierarchy vs. Timeline : Frames vs. Realtime Another key difference to note when considering game development in Unity, is that your game runs as a realtime render. In Flash, we’re used to seeing objects we have placed onto the Stage in the Timeline, with a range of frames for duration of that item’s existence. Unity is a realtime engine and therefore keeps objects in the scene until a script tells the engine to remove the object. As such, the equivalent to the Timeline in Flash is the Hierarchy panel, but given its lack of need to show duration, the Hierarchy is simply a Hierarchical list of game objects in your current scene. Selecting any object in this list and double-clicking its name will focus the Scene view on it, and likewise, clicking on an item visually in the Scene view will select it in the Hierarchy. Oh Behave! Putting Game Objects to work in Unity While every object in your scene is a game object, the behaviour and properties of these objects are controlled by another core concept: Components. In Unity, you’ll see a Component top menu item that allows you to add various properties and potential behaviour to your game objects such as the Rigidbody component which adds Physics properties to an object. Once added, these components are listed in the Inspector (Properties) panel and can be adjusted visually or via scripting. Any game development task will inevitably come with a certain amount of scripting in order to achieve the behaviour you desire for your gameplay. In Unity, scripts are written in an individual basis, and applied to objects as behaviour components. Scripts are attached to objects and control them by addressing properties of the Components attached to the object they are on – or by addressing properties of another object in the active scene. Scripts can be written in UnityScript (Unity’s own API that uses JavaScript syntax), C#, or Boo. These languages will look familiar and will be easy to pick up for anyone with ActionScript 2 or 3 experience. Scripts are not simply restricted to controlling gameplay either. They can also be used to communicate with servers, save states and load in new game content, much in the same way that ActionScript does in Flash, and even to create new functionality for the Unity editor itself! Bouncing Ball: A Flash Classic Revisited For every Flash vet, there is a fond memory of their first Flash animation experience – the bouncing ball is very much the “Hello World” of the Flash scene. So let’s take that familiar concept and revisit it in Unity, as your first attempt at working with the package. Don’t worry, you won’t even need a classic motion-tween! With Unity open, make a new empty scene by choosing File > New Scene (Ctrl / Command – N) from the top menu. Now let’s make a ground plane for our action to take place upon, go to Game Object > Create Other > Cube, from the top menu. You will now see a new Cube in your Scene view, and an accompanying new item in the Hierarchy, named ‘Cube’. Now look at the properties of this new object by looking at the Inspector panel. It is a new cube object that in 3D terms we call a ‘primitive’ – these are simple shape objects such as a Cube, Sphere, Capsule or Cylinder (Figure 1). The Cube has 4 components attached to it, and these are shown in the Inspector panel under the headings Transform, Mesh Filter, Mesh Renderer, and Box Collider (Figure 2). Figure 1. Cube-will
  17. 17. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 19 These components do the following jobs: • Transform – defines the Position, Rotation and Scale of the object • Mesh Filter – holds the shape of the object • Mesh Renderer – controls the appearance of an object and can redefine appearance by having materials assigned to it • Box Collider – gives the object a physical presence in the game, it can now collide with other objects as a result Now let’s make this cube into a floor – set the Position values in the Transform component all to 0, and then set the X and Z values of Scale to 100. Now it’s a little dark in here right? Let’s add a light to brighten things up. In Unity you are working with a rendering engine, so lighting is controlled not simply by light and dark areas in your graphics, but by lights added to the scene. Go to GameObject > Create other > Point Light, then set the Position values for the new Point Light to X: 0, Y: 5 and Z: 0. You’ll now have a patch of light on the floor, a perfect place to make our ball bounce! But first, we need a ball. Go to GameObject > Create Other > Sphere. As you’re such an ace at positioning by now, place this sphere at X: 0, Y: 4, Z: 1. Now it’s time for some Physics! You’ll be pleased to know that Unity includes the Nvidia Physx engine, so all the work is done behind the scenes for you to create realistic simulations. Wiith the Sphere still selected in the Hierarchy, choose Component > Physics > Rigidbody. You will now see this component listed in the Inspector panel on the right, and you should note that the Gravity property is enabled by default, perfect! Testing your Scene at any time in Unity is easy. Simply Click the Play button at the top of the interface to see what our bouncing ball looks like so far. At this stage you will note that we have very little bounce to our ball. Your Sphere falls to the ground and stops in a wholly underwhelming manner. This is because in Unity, the response of differing surfaces colliding is handled by Physic Materials. In order to make the ball’s collider (its physical presence) ‘bouncy’ we must create a Physic material, with bouncy properties and apply it to the Sphere Collider component of the Sphere. Click the Play button again to stop testing your game – do NOT click Pause, as this will keep Unity in testing mode, meaning that changes made during this mode will not be saved. A great way to explore different settings for parameters without committing to them. On the Project Panel, click the Create button, and from the Drop down menu, choose Physic Material. Your new asset is created, and its name is highlighted immediately for you to name. Call this Bounce and press Return or Enter to confirm. Now, with this asset selected in the Project panel, you will see its properties in the Inspector panel. To make a bouncy material, leave the Friction settings on 0.4, but set Bounciness to 1 and Bounce Combine to Maximum. Now, apply this asset to our Sphere by dragging it from the Project panel, and dropping it onto the name of the Sphere object in the Hierarchy panel. This automagically applies this asset to the right component – the Sphere Collider, and if you select the Sphere now and look at this component you will see the Bounce asset you just created listed as the Physic Material this component is using. This means that whenever you adjust the asset in the Project panel, the behaviour of this ball will change (Figure 3). Figure 2. Components-will Figure 3. ballBounce-will
  18. 18. 05/2012 (35)20 UNITY DEVELOPMENT PLATFORM Congratulations, you just made a bouncing ball! Press Play again to see it! Now, to export this to Flash, we’ll select the File dropdown menu and click on Build Settings. Switch the target to Flash Player (preview) and click on “Switch Platform”. After this is done go ahead and build your project, selecting a name and location for it to save too. After the build process is done, a new Finder or Explorer window will open with a ready to go swf file, alongside a template HTML file for you to run. Done! Take Full Advantage of Your Target Platforms For Unity 3, we supplied an example project called Angry Bots; a great looking futuristic top-down shooter in which you fight some very angry robots while following the winding red lines to the exit of the facility you are trapped in. While Angry Bots is primarily a demo project to show off some of the features of Unity 3, it’s also a fun game to play. Currently it’s available as a playable game on the iOS and Mac AppStore, the Android MarketPlace, Google Webstore (Native Client), and the Unity website (Unity Web Player and Standalone). Now, with the addition of the Flash exporter the exact same game is available on game portals such Shockwave, MiniClip, and Kongregate as a Flash game. As a Flash developer using Unity, this is one of the primary advantages of using Unity. You have the ability to deploy content for all platforms we support now and those we will support in the future. This enables you to target platforms without having to learn platform specific development kits or rewrite your entire project to fit the target. Angry Bots does a great job at showing how to export the same project to different platforms, while still adjusting the content to take full advantage of the features of the specific platform. For example, while on a normal PC the inputs are mouse and keyboard, on a iOS device the only input is the screen. Adjustments can easily be achieved using Unity’s platform specific feature support. It also provides a beautiful demonstration of switching graphical quality based on the capabilities of the target platform. While the game looks great on even a modest smartphone or tablet, platforms with more gpu power such as desktop machine are able to do more. If you want that beautiful Depth-Of-Field effect on the highest quality level on those more technically capable platforms, it’s easily possible to do quality management for the specific platforms through scripting, user defined shader settings, and the Unity QualitySetting API. Other platform specific things like asset conversion to platform specific formats are automatically done by the editor. For example, in the case of Flash it converts all Audio to MP3 and all textures to compressed ATF textures; the settings for these assets and how they are imported are user definable per platform. For Flash both of these formats are configurable compressed formats, important for compact distribution over the web. Take Full Advantage of Flash Unity enables you to deploy to any Unity target with the least possible effort, but also empowers getting the best out of any of the target platforms. Some platform specific implementations are fairly unique to the platform itself and it can be advantageous to use these. In the case of the Flash Platform, a good example is the ability of peer-to-peer networking that is available through its Cirrus service. Since this is a quite large and Flash specific API, encapsulating it in a Unity API isn’t possible. Thus, when targeting Flash, it is possible to directly write and include ActionScript in your project and access it through an API called UnityEngine.Flash.Act ionScript. With this you are able to tap directly into Flash’s availableAPI’s such as the Realtime Media Flow Protocol. To start using ActionScript, in your project folder, create an ActionScript folder and directly drop your ActionScript .as files in there. It’s also possible to drop SWC libraries in your project and use those instead. To now communicate between your Unity C# scripts and ActionScript, use the UnityEngine.Flash.ActionScript API, which enables writing inline ActionScript in your C# file; here’s one example of such inline ActionScript in C#. ActionScript.Statement(„MyCustomActionScriptClass.Static Function(v)”, v); This way, you get the best of both worlds. While you get the ease of use, portabilty, and strength of Unity’s scripting, you can still directly access ActionScript and Flash API’s. While this allows you to use ActionScript inside your Unity project, it’s also possible to use your Unity project from a Flash / ActionScript project. This is important to be able to use and communicate with Unity content in your existing Flash project. With every Unity to Flash compiled project a UnityShared.swc file is written in the target build folder. Embedding this SWC in your existing project, there is an API available that allows you to load, size and communicate with your Unity project. From within Unity, you can now call Application.ExternalCall and this will be sent to the Flash host, while from the Flash host, you can use sendMessage to call functions on objects in Unity. In the current Flash preview, we are still changing these APIs based on user feedback and we invite you to try them out and give us your feedback.
  19. 19. Unity: Making (Flash) 3D Game Development Easy and Fun both are needed to target Flash. This means that Unity authored Flash content will fall in the category of content that will need a premium features license. While currently only the combined usage of Stage3D and Fast memory opcodes fall under the premium features licensing, Adobe has announced that while the Flash platform is evolving they will add features to the Flash Runtime that fall under the premium features license. One example of this given by Adobe is “instant play”, which enables client side asset caching, using a local storage API; this feature will greatly reduce download times for recurring play on large games, further making the end user experience smoother and stimulating returning players. A Note on Flash Premium Features and Unity Content Adobe has recently announced “Premium Features for Gaming” for the Flash Platform which initially includes only Fast Memory Opcodes and Stage3D when used simultaneously. They have also announced a required 9% revenue share on Premium Features Licensed content that exceed $50k in revenue. To be able to get the great performance and port the huge amount of functionality and features currently in the Unity engine, RALPH HAUWERT Adobe® Flash® 3D veteran,Senior Developer at Unity Technologies’ Copenhagen office As a technical expert with more than a decade of experience in online creative development and a strong background in Flash, Hauwert has been involved in several high pro�le and critically awarded projects, including the Anne Frank Annex Online 3D, KPN’s House of Tomorrow, Earthmine and Papervision3D. As an industry recognized leader and pioneer within the Flash community, he has set milestones in the �eld of Flash 3D and the open source Flash movement. Hauwert was one of the speakers at Unity Technologies’ Flash Day designed to introduce Flash users to the Unity development platform. About UnityTechnologies Unity Technologies is revolutionizing the game industry with Unity, its award-winning breakthrough development platform. Unity Technologies has more than 500,000 registered users worldwide – including Bigpoint, Cartoon Network, Coca-Cola, Disney, Electronic Arts, LEGO, Microsoft, NASA, Nickelodeon, Ubisoft, Warner Bros., large and small studios, indies, students and hobbyists – all using Unity to create games and interactive 3D, like training simulations and medical and architectural visualizations, on the web, mobile, consoles and beyond. Unity Technologies is aggressively innovating to expand usability, power and platform reach along with its Asset Store digital content marketplace and Union game distribution service so that it can deliver on its vision of democratizing interactive 3D technology. Unity Technologies is headquartered in San Francisco and has development offices worldwide. For more information, visit: http://unity3d.com. a d v e r t i s e m e n t
  20. 20. 05/2012 (35)22 FLEX 4 AND FXG N ow the problem starts, you provide good functionality, and equally good UI, the application gives wow effect in demo, but in reality, it slows down and consumes too much memory, rendering being one of costly process! Here comes FXG (SVG implementation) into picture. Scaled Vector Graphics is XML representation – definition of image or line art. As per O’reilly Flex 4 cookbook, “A FXG fragment is a grouping of graphical elements, such as shapes, text, and raster images, along with optional masking and filters that can be contained inline in MXML or within a FXG document with the .fxg file extension. FXG is a subset of MXML and does not include the ability to reference external classes or respond to runtime events, such as data binding and state changes. However, FXG fragments can be declared inline in MXML to take advantage of such features, which most skin classes in the Spark architecture employ.” SVG has been supported since Flex 3 with degrafa library, but not with that much flexibility or customization. Flex 3 was limited to: Listing 1. Flex 4 is the way to deal with different approaches, known as FXG component. Just like any other Halo or Spark component, FXG holds image definition (not extending UIComponent Class, albeit). With Flex 4 and mobile application development, FXG is very much required feature. Mobile application Flex 4 and FXG Flex application without real UI asset is like an amazing structure of building, without walls and furnished box!The core challenge is balancing UI and functionality. If you provide rich UI, but weak functionality, it doesn’t sustain long. In reverse, if you provide expected functionality, but dull or default UI, it may give kind of non touching feeling to user. What you will learn… • Reason for using FXG, and possible scope • Basics on FXG, easy migration from SVG • Basic capabilities achieved in FXG • Path for intermediate to advanced learning What you should know… • Familiar with ActionScript 3.0 language, basic Flex 4 understanding, comfortable with Flash Builder or similar IDE • At least rough idea about Vector Graphics or SVG Listing 1. Using SVG with Flex 3 <mx:Application xmlns:mx="http://www.adobe.com/ 2006/mxml" xmlns:Degrafa="http://www.degrafa.com/ 2007" layout="horizontal"> <mx:Script> <![CDATA[ [Embed(source="assets/flex3.svg")] [Bindable] public var flex_svg:Class; ]]> </mx:Script> <mx:Image source="{flex_svg}"/> <Degrafa:GeometryComposition graphicsTarget="{[cnv]}"> <Degrafa:Path data="M 0,0 L 100,0 L 100,100 L 0,100 z"> <Degrafa:fill> <Degrafa:SolidFill color="#EECCEE" /> </Degrafa:fill> <Degrafa:stroke> <Degrafa:SolidStroke color="#FF00FF" weight="3" /> </Degrafa:stroke> </Degrafa:Path> </Degrafa:GeometryComposition> </mx:Application>
  21. 21. Flex 4 and FXG 05/2012 (35) 23 has to be lightweight. It is well known fact that mobile devices are limited in hardware resources and memory availability. Components are best at its performance when skinned with FXG, instead of pure bitmapdata images. Another considerable approach to use FXG is for certain repetitive symbols like bullets or icons. Basically, FXG rendering and runtime manipulation is cheaper and easier than bitmapdata image like JPEG or PNG. The more effectively we use, better the performance is, be it mobile or desktop – AIR. FXG sources Many Adobe products such as Adobe Illustrator, Fireworks, Photoshop can export design to FXG file. Adobe Creative Suite tools can be used to convert SVG to FXG. Flex 4 supports version 1.0 and 2.0 of FXG. Of course, need some change if it is version 1. Dig into definition As stated above, FXG is a component declaration in a separate file, which holds image definition in XML like Listing 2. Declaration block <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> ….. ….. ….. </Graphic> Listing 3. Tag Declaration <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns: fxgComponent="*"> <fxgComponent:flexLogo height="100" width="300" x="0" y="10"/> </s:Application> Listing 4. Script Declaration <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns: fxgComponent="*" creationComplete="drawLogo()"> <fx:Script> <![CDATA[ import spark.core.SpriteVisualElement; private function drawLogo():void { flexLogoInstance = new flexLogo(); flexLogoInstance.x = 0; flexLogoInstance.y = 10; flexLogoInstance.height = 100; flexLogoInstance.width = 300; addElement(flexLogoInstance); } ]]> </fx:Script> </s:Application>
  22. 22. 05/2012 (35)24 FLEX 4 AND FXG format; it cannot hold reference to other FXG component. FXG tags have an implicit depth order. The order in which elements are defined defines their depth. Each tag is effectively drawn above its previous sibling. Children are drawn on top of their parents. FXG document has to use following namespace: http://ns.adobe.com/fxg/2008. Likewise in HTML, <html> is wrapper tag, FXG wraps content with <Graphic> tag, and has to explicitelly define version 2. FXG document/component supports its own set of datatypes such as angle, color, integer, length, number, identifier, percentage etc. It does not support any declarative syntax such of Flex such as <fx:Declaration>, <fx:Metadata>, <fx:Binding>, <fx:Script>, <fx:Style> or ActionScript 3 datatype such as <fx:Boolean>, <fx:Date>, <fx:Function>, <fx:int>, <fx:XML>. Deal with declaration The FXG has to be available as separate compliable component in form of .fxg file. Just like any other component, FXG can be declared either as tag or inside script block. Listing 5. Sample FXG Component <?xml version='1.0' encoding='UTF-8'?> <fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2"> <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L .749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z"> <fxg:fill> <fxg:SolidColor color="#FFFFFF"/> </fxg:fill> <fxg:stroke> <fxg:SolidColorStroke caps="none" color="#FF00FF" joints="miter" miterLimit="4" weight="20"/> </fxg:stroke> </fxg:Path> </fxg:Graphic> Listing 6. Sample FXG Library <?xml version="1.0" encoding="utf-8"?> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <Library> <Definition name="YellowRect"> <Group> <Rect height="5" width="5"> <stroke> <SolidColorStroke color="#00FF00" weight=".75"/> </stroke> <fill> <SolidColor color="#00FF00"/> </fill> </Rect> </Group> </Definition> </Library> <YellowRect x="0" y="0"/> <YellowRect x="0" y="50"/> <YellowRect x="50" y="0"/> <YellowRect x="50" y="50"/> </Graphic>
  23. 23. Flex 4 and FXG 05/2012 (35) 25 Listing 7. Sample FXG component with richtext capabilities <?xml version="1.0" encoding="utf-8"?> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <RichText> <content>This text is <span fontWeight="bold"> BOLD </span>,<br/>this text is <span textDecoration= "underline"> UNDERLINED </span>,<br/> and this text is <span fontStyle="italic"> ITALIC </span>.<p>This is a new paragraph.</p></content> </RichText> </Graphic> Listing 8. A sample application from O’reilly Cookbook – demonstrating bitmap mask applied to graphics <s:Application xmlns:fx="http://ns.adobe.com/mxml/ 2009" xmlns:s="library://ns.adobe.com/flex/ spark" xmlns:mx="library://ns.adobe.com/flex/ mx" creationComplete="handleCreationComple te();"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import spark.core.MaskType; [Bindable] public var masks: ArrayCollection; private function handleCreationComplete(): void { masks = new ArrayCollection( [ MaskType.CLIP, MaskType.ALPHA, MaskType.LUMINOSITY ] ); maskList.selectedIndex = 0; } ]]> </fx:Script> <s:layout> <s:VerticalLayout /> </s:layout> <s:DropDownList id="maskList" dataProvider="{masks}" /> <s:Graphic id="group" maskType="{maskList.selecte dItem}"> <s:Rect width="320" height="320"> <s:fill> <s:LinearGradient> <s:entries> <s:GradientEntry color="#000000" /> <s:GradientEntry color="#DDDDDD" /> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <s:mask> <s:Group> <s:BitmapImage source="@Embed('/ alphaBitmap.png')" /> </s:Group> </s:mask> </s:Graphic> <s:Group enabled="{maskList.selectedItem==MaskType .LUMINOSITY}"> <s:layout> <s:HorizontalLayout /> </s:layout> <s:CheckBox selected="@{group.luminosityInvert}" label="invert" /> <s:CheckBox selected="@{group.luminosityClip}" label="clip" /> </s:Group> </s:Application> [source : http://www.oreillynet.com/pub/a/flex/ excerpts/flex-4-cookbook/graphics.html]
  24. 24. 05/2012 (35)26 FLEX 4 AND FXG • Tag declaration (Listing 3) • Script declaration (Listing 4) This is about how to use; below is sample of an FXG component: Listing 5. Of course, when we export FXG from other applications like Photoshop, we should ignore and remove some non MXML graphic tags like <Library>, <Private>. Also such exported FXG, after removing such metadata tags, the tag has to declare with spark namespace, s:. This makes it usable MXML component. <Library>, <Private> such tags are supported in FXG, not in MXML. Similarly, FXG library can be defined as under: Listing 6. And with <fxgComponent:BlueShape/> declaration, it makes instance. width and height are two properties that identify FXG’s original dimension, which can be altered with viewWidth and viewHeight. With this we are limiting discussion on declaration and conversion. FXG can also include bitmapdata from source image like PNG, JPG, GIF. This should be used only if required. This is supported with <BitmapImage> in FXG or <s:BitmapImage> in MXML. For our primary purpose of making application lightweight, if we again wrap bitmap to FXG, it doesn’t really serve purpose! This decision should be wise. In nutshell, if FXG is declared as part of application i.e. <s:Application /> or so, it has to have prefix namespace. Text in FXG Text is also supported in FXG; with <RichText> if its version 2.0, <TextGraphic> if 1.0 . FXG <RichText> tag supports the child elements like <content>, <transform>. A good example of FXG component, self explanatory: Listing 7. <content> child tag supports elements like <p>, <span>, <br>, <tcy>, <a>, <img>, <tab>, <linkNormalFormat>, <linkHoverFormat>, <linkActiveFormat> Mask What explained so far is pretty short and primary, FXG is much more. Mask and Effects are interesting parts in this. There are two types of mask – clip & alpha. In clip masking, only the actual path, shapes, and fills defined by the mask are used to determine the effect on the source content. In alpha masking, the opacity of each pixel in the source content is multiplied by the opacity of the corresponding region of the mask. Let’s see a nice example straight from kitchen of O’reilly! (Listing 8). And when it runs, looks like: Figure 1. Wrapping Up FXG is not really a replacement for all scenarios. It isn’t really replacement to bitmapdata. Likewise skinned UIComponent, you really do not need bitmapdata for its weight and scalability issues. SVG manipulation is much easier and clean in terms of rendering, and that’s why Flex component, with its FXG skin looks beautiful in any size! Figure 1. Output References • SVG Primer for Flex – http://saturnboy.com/2009/06/svg- primer-for-�ex/ • FXG and MXML graphics – http://help.adobe.com/en_US/ flex/using/WS145DAB0B-A958-423f-8A01-12B679 BA0CC7.html HARIT KOTHARI Harit is a Flex and RIA developer by profession, based in India. He started career with Java development and quickly learned and moved towards Flex. He has also consulted small projects while working for short term in Dubai, UAE. Application and functional level challenges are his primary interests. Traveling and reading are his interests. He blogs at http:// harit.kotharee.com/ and whispers on twitter @harit.
  25. 25. 05/2012 (35)28 FLEX 4 A dobe has company which have been working ahead of time many years in many technology are like Acrobat reader, Photoshop with image processing algorithm implementations for naive users, for online picture editor for image enhancements using image processing algorithms (http://pixlr.com/editor), Flex for AJAX/RIA. Flash presented good threat to Microsoft as instead of writing to OS people can write to Flash same reason why Steve Jobs took stand against Flash. Adobe hence started to silent revolution of RIA. Photoshop, Illustrator, and the other design products in its Creative Suite make up more than 50% of Adobe’s revenue and have created a lot of loyalists. Adobe presence in unified communication with its connect platform for online meetings which competes with Microsoft live meeting and communication server (renamed Lync). People most often create documents using Word processing software but once those documents need to be stored in a fixed format for printing and official forms, they’re almost always converted to Adobe’s PDF format. Micorsoft XPS never stood competition against PDF format. Adobe Flex is a popular framework for building Rich Internet Applications (RIAs). The Flex framework is used to create SWF files that run inside the Adobe Flash Player. Today when we will see higher adoption of IP TV in future Adobe is well positioned to take on. Earlier Adobe flex write once and run on any browser (need not worry browser dependency) to today write once run on any device (Android, IPhone, or any tablet OS). Technology Landscape Technology is continuously evolving. Never people thought before AJAX came in that all system will web based. As in earlier system Client server system web Future of Flex & Flash: Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV Adobe outdoing competition for many years now has system in place for bringing future technologies like IPTV (http:// blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet OS interfaces, photo editors like Photoshop,Word editors like Acrobat reader with compressed storage. What you will learn… • Comparison of Flex competitors like HTML5 vs �ex • Augmented reality using Abode products • Gami�cation of Enterprise apps using �ex • Future trends, future usage evolution of Flex What you should know… • Basic knowledge of computer technology with suffice • Basic knowledge of AJAX • Basic Adobe Flex, AJAX, Flash,HTML5 Figure 1. The evolution
  26. 26. Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV 05/2012 (35) 29 client wait for completion for each request till then browser hangs. With coming of AJAX Asynchronous request does not need to wait for reply from Server for completion of request. Today what we See from Website to ERP like SAP PeopleSoft, oracle apps, to Business intelligence systems virtually every UI is Web Based. AJAX increased adoption of Web across different platform devices and interfaces. Across all this technologies the best choice of UI ends at flex. Demand and salary to AJAX programmer crossed Java programmers. Main component of AJAX was java script. But problem came later no support for JavaScript. In meanwhile Adobe was company very much into multimedia software like Flash, Photoshop. Needed to adopt to new Web paradigm. So necessity is mother of invention. Abode had flash player which was heavy when used with websites. So it came with AJAX product first time Flex which is blend of Flash’s graphics + AJAX (Evolution 1997 Flash player-->2000 Action Script 1.0- -> see Figure 1). Issues with JavaScript like not clean coding, no support form vendor, intuitive controls for new fast AJAX web systems were solved. Rich Internet Application evolved RIA evolved with Adobe Flex. Flex came with editor where user can code using Actionscript created with mix of JavaScript concept into Flash scripts. Action scripts we can code complex AJAX interface to be played on Flash player get support from Adobe while for javascript no support available. ActionScript program that has been optimized to death by an AOT compiler can, almost trivially, beat a JavaScript program that is optimized on the fly by the JIT compiler. The only way out would be to let the JIT compiler work till death, but that is not an option. JavaScript programs are untyped, (relatively) small programs that are shipped/loaded as source code, and then compiled and run on the fly. In contrast,ActionScript programs are typed, (relatively) large programs that are compiled to byte code, shipped/loaded as byte code, and then run on the fly. Flex came with more intuitive UI which never existed before like slider control, control for embedding video tag which later on HTML 5 could bring in 5 yrs later. So adobe was working 5 yrs ahead of time. Still today concepts like onscroll pagination and caching did not exit. some 5 yrs back for every website server side code .NET or Java or PHP or SAP or PeopleSoft but web client code was on Flex. Beautiful intuitive UI controls from sliders, Maps, dynamic grids, for OLAP olap grids, dynamic grouping and sorting it could handle huge data seamlessly the JavaScript latency issues also minimized. These features are now stand replicated with Microsoft sliverlight, ExtJs and other Java script libraries. Competition to Flex Technology wise competition to Flex include Curl, OpenLaszlo, Ajax, Mozilla way back in 2002 introduced XUL, from Sun Microsystem JavaFX, Microsoft Windows Presentation Foundation, Silverlight and HTML5. Examine the trend graph over period of time. HTML5 popularity has dwarfed competition as it is open source and work across platform (Figure 2). • Flex had moved to new battled field Devices. Is new java of devices write once and run on any device android, iPhone blackberry or any tablet OS. • Enterprise class programming Model: Use of constructs like strong typing, inheritance, and interfaces to program more efficiently. Extensive mobile and traditional components help speed Figure 2. source: trends.google.com showing search trends Flex competitors or related technology
  27. 27. 05/2012 (35)30 FLEX 4 development. Flex applications can access device capabilities such as GPS, accelerometer, camera, and local database. • End to End tooling for development: Build Flex applications more easily using Adobe® Flash® Builder® software, an enterprise-class Eclipse™ based IDE. Productivity features include on-device debugging and mobile simulators for testing across screen sizes and resolutions. • Server Integration: Integrate with all major back ends including Java™, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion®, and SAP using industry standards such as REST, SOAP, JSON, JMS, and AMF, PeopleSoft. • AJAX design patterns: On Object oriented programming on Action scripts design pattern are readily available. Even software claims today integration with flex for choice of UI whether its ERP like PeopleSoft or SAP, Oracle Apps, or Business intelligence system like SAP Business objects Excelsious, IBM Cognos flex interfaces. Each day new Members join group each day product realize it needs to provide interface to flex joins flex group. I remember on Cognos 8.0 did not had features like geographic reporting interfaces, intuitive grids with dynamic sorting and grouping, maps etc which only after integration with flex were possible for BI. Had no choice but to integrate Flex. I recommend everyone at least one download tour de flex and see the dynamic UI. I am sure you will start loving it. From YouTube to Google finance or yahoo finance everywhere you can see innovation of Flex controls (Figure 3). On contrary HTML5 is not threat but opportunity for Adobe Flex But Adobe has the most to gain if they become the major player in the HTML5 field by providing tools, framework and making the web standards evolve. And they are in a good position to get there. Adobe has already two great tools for HTML5, Muse and Edge. HTML5 fight with Flex is on: Adobe online games are beating HTML5 with over 1000 games written compared with few hundred on HTML5. HTML5 is already almost universally supported in mobile browsers and Adobe realized that Flash would never get that ubiquity across browsers. HTML is supported by 40% of web Browsers while Flash 99%. Feature supported are browser dependent with no 3D support while flash has plugin. Security: Flash is miles ahead: In order to hack HTML5 Right click view source while in flash you need to get swf file which is loaded through wrapper parent then hacker needs to go through 2 layers of encryption and obfuscation. Majority flash book games are flash. With Flex 4.5 SDK build and deploy applications for Google Android, Apple iOS and BlackBerry Tablet OS platforms leverage one tool, one framework and one codebase to deliver apps across leading mobile platforms, not to mention web and desktop as well. But then reality is still HTML5 has more issues with Andriod and iOS while Flex has few. Figure 3. source Finance.google.com (showing comparison of Adobe,Microsoft and Dow Jones index
  28. 28. Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV 05/2012 (35) 31 SANDEEP SHARMA Solution Architect/Product Manager, 10 + yrs experience SAP/Oracle Peoplesoft, Flex, AJAX, Business Intelligence, Datawarehousing, Enterprise Application Integration, Security. Worked with companies like SAP, Oracle Peoplesoft, Ness Technologies, Cognizant technologies. Loves Marathon running, Soccer, and adventure sports like Mountaineering. Flex is HTML 5 + more Flex is no.1 choice for enterprise complex, high-fidelity enterprise applications such as business dashboards, line of business tools, real-time trading applications and desktop replacement applications, and see leading companies in healthcare, financial services, communications and other industries standardizing on it. HTML5 has not matured yet. Flex is a choice for following reason: • SDK and Compiler open sourced MPL license, HTML 5 open standard WHATWG license, Adobe + on Flex new 3d – graphics, (transformation scene, camera, lighting, change pixel data, effects) • Real-time connection (HTML5 has websocket vs Flex has flash.net.socket), Drag and Drop (drag and drop across application, cross document, clipboard) with API’s flash.desktop.clipboard, Events.NativeDragevents, Flash.desktop.Transferab leData Vs HTML5 DataTransfer and DragEvent. • Adobe provide better file system (in HTML5 input type upload storage api vs Flex has File, FileStream, Filemode) (read/write capabilities), Offline Access Adobe air provides Resource(Windows application Vs Application cache) State (air.Event.NETWORK _ CHANGE _ URLMonitor vs navigator online) Data (flash.data.SQLConnection vs HTML5 has Database, SQL Transaction, SQLResultSet, Local Storage. New HTML 5 products which also use Action scripts as base new HTML5 products, Adobe Muse(TM) and Adobe Edge preview. Cloud: Adobe’s creative tablet applications+, such as Photoshop Touch, into everyday work – seamlessly synchronizing and storing files in the cloud for sharing and access on any device. Adobe Typekit launched in Oct 2011, the Web- based font library that pioneered the use of real fonts on websites, delivering more than 700 typefaces from leading foundries. Adobe Edge, a ground-breaking HTML5 development tool; and Digital Publishing Suite Single Edition, the technology behind the delivery of digital magazines on iPad. Adobe new Open source strategy: As Flex moves into a community-driven open source project, Adobe will make initial technical contributions and will also continue to provide a team of full-time Flex SDK engineers to contribute to the Apache project. Adobe is currently in the process of contributing the core Flex SDK (including advanced data visualization components), automation libraries, AIR SDK binaries, documentation, and specifications to the Apache Flex Project. Also contribute yet-to-be-released Spark components including ViewStack, Accordion, DateField, DataChooser, and an enhanced DataGrid. Other future contribution to project include Falcon JS new compiler for action script, Mustella a functional testing framework, BlazeDS code is already available at adobe.com/go/blazeds_source under the GNU Lesser General Public License, Version 3. BlazeDS provides Java based server-side remoting and web messaging technology allowing Flex clients to exchange typed binary data with the server and receive notification from other clients and servers. The messaging service also allows Flex applications to exchange messages with other non Flex, JMS-enabled applications. Flex Sparks components and the recent addition of the new mobile components provide a great and mature framework basis for a real open source effort Next generation Experiments on Flex. Gami�cation of Enterprise Software like ERP, BI, BPM etc Enterprise gamification to date has really been about marketing and customer engagement. By gamification it introduces unrealized concepts of social collaboration and create the ad hoc collaboration, engagement metaphor help companies realize these lofty social/ collaborative goals. people are more engaged, more able to understand and support the outcomes that matter to the enterprise, and they are being recognized and rewarded for these actions. Adobe with Flash based online games and enterprise grade Flex development platform is greatly positioned for that. Augumented Reality Augmented reality (AR) is a field of computer science that involves combining the physical world and an interactive, three-dimensional virtual world. For a complete project with Flash on AR visit http:// www.adobe.com/devnet/flash/articles/augmented_ reality.html. Video game industry is major employer of AR. Its not the end of game we have business intelligence system employing Augmented Reality (http://youtu.be/mTflf_ PqUYs). AR for ipad, android, ERP like SAP, Business Process management is getting lot of traction for all this Flex and Flash is greatly positioned. On SAP TV watch augmented reality (http://youtu.be/C4b2Npnbhz0).
  29. 29. 05/2012 (35)32 FLEX AND PHP F lex as its name suggests is very flexible technology framework. It can connect to almost all server side and scripting languages to connect to database and do other server stuffs. As it can connect to almost all languages, it can be hosted on all kinds of server platforms. Now let’s focus on our title of the article. Flex can be connected to PHP to connect to database and do other database activities. There are 3 ways of connecting Flex to any server side language: 1) Remoting, 2) Web Services 3) HTTP service. PHP can be used in all 3 ways. Flex with PHP by Remoting AMFPHP is one of the remoting ways to do it. AMFPHP is another open source framework provided by open source community. You just need to download the AMFPHP folder from its website and put that folder into your root folder of web server. Then from the following steps you can connect the PHP code through AMFPHP: Using mxml ----------------- <mx:RemoteObject id=”myRemote” destination=”phpclassname” source=”folder.phpclassname” endpoint=”{http://localhost/amfphp/ gateway.php}” showBusyCursor=”true”> <mx:method name=”Select_Gender” result= ”onGetGender(event)” fault=”onFault(event)”/> In the above code, • Select _ Gender is the php function in which some code is written to connect to database and get the required infromation for a particular gender. • destination is the php file name where the function is written. • and source is the folder where php file is located. And result and fault event will have result handler and fault handler functions to handle success and failure of the php function call. Another option for Remoting is WebORB which can also be used by Remoting to connect Flex with PHP. Flex with PHP by HTTP Service HTTP service is another way of connecting Flex with PHP. In this method you need to create PHP files on some remote server or on same server as php file. You need to call that php file by some Flex classes or tags with the help of HTTP protocal just like you are opening a url in a browser, and handle result and fault event of it. Following is the sample code for that: <fx:Declarations> <s:HTTPService id=”sampleTest” url=”{„+phpurl+”}abc.php” result=”sampleTest_resultHandler(event)” Different Ways of Connecting Flex to PHP Flex is a client side technology originally developed by Adobe and now Flex SDK transferred to open source Apache community and Flash builder, the editor for Flex, is still there with Adobe which will be supporting Flex SDK now. What you will learn… • Basic idea about web server folder structure. • Basic idea about web services. • Basic idea about http services. • You can do some php coding for select query also. What you should know… • You should have basic knowledge of Flex SDK and Flash builder. • You should have Object Oriented concepts clear of how to create functions etc. • You should have basic knowledge of Action script.
  30. 30. Different ways of connecting Flex to PHP fault=”sampleTest_faultHandler(event)” /> </fx:Declarations> <fx:Script> <![CDATA[ protected function initialize():void { sampleTest.send(); } ]]> </fx:Script> In the above code we have added an HTTP Service tag and added an actionscirpt function to call that http request by send method of the HTTP service. And we need to handle result and fault of that call in result handler and fault handler functions we have declared in the HTTP service tag. Flex with PHP by Web Service Web Service is the most common way to interact a service side technology to any client side technology. Because Web Service follows a common standard to sending and receiving data. There is the sample of code for connecting Flex with PHP by web service: <mx:WebService id=”sampleTest” wsdl=”http://localhost/flexapp/myfile.php?wsdl”> <mx:operation name=”SelectGender” resultFormat=”object” fault=”mx.controls.Alert.show(event.fault.faultStr JIGAR OZA Currently Working at Rightway Solutions as Flex Developer I have experience of 4+ years in Flex with .Net, PHP. I have worked on web applications, Desktop Applications and Mobile Applications in Flex. I have worked with almost all databases like MySQL, SQLServer, MS Access. ing)” result=”sampleTest_resultHandler(event)”/> </mx:WebService> In the code above we have declared a Web Service which is accessing a PHP web service defiled in WSDL property of Web Service tag. And we have called the php method by operation tag under Web Service tag. We have handled result and fault of the web service by result handler and fault handler functions. After presenting all 3 methods, I would like to focus on some more aspect of Flex and PHP connectivity. Security Remoting and Web Service are more secure ways than HTTP Service because HTTP service allows browser add ons such as FireBug to see what request was sent to server and what response came back. While remoting and web service doesn’t allow that. Speed As per the speed of the response is concerned, Remoting is the fastest method followed by HTTP service and Web Service. So we can say that Web Service is the slowest method for Flex and PHP connectivity. a d v e r t i s e m e n t www.flexer.info
  31. 31. 05/2012 (35)34 THE FUTURE OF FLEX N ovember 2011 will be a month long remembered by Flash developers, Apart from announcing the discontinuation of the Flash Player browser plugin development for mobile devices, Adobe announced its intention to donate the Flex SDK to the Apache Software Foundation. While the former, although perceived by the tech community as the demise of Flash, was seen by many Flash developers as a better use of Adobe resources. Flash platform developers rarely targeted the mobile browser plugin and it made no sense to continue investing in it, given that there were hundreds of devices it needed to support and several mobile browsers while almost each one required special attention (by Adobe as the plugin developer and by the Flash developers themselves for the content), this sort of fragmentation did not bode well for the mobile browser plugin along the years. The latter caught Flex developers truly by surprise. Some were thrilled to hear that now Flex truly goes open-source, allowing the community to contribute and to extend the platform as it sees fit. But some, mainly from the enterprise market, saw it as if Adobe was trying to “get rid” of Flex. The fear of the enterprise market was understandable, how can there really be a future to the Flex framework when Adobe controls AS3 and the Flash and AIR runtimes? If at any point, Adobe decided to stop development on either, what will become of Flex? Sure, Flex is open-source but without the runtimes, it’s pointless. In the FAQ published on the Adobe website a few days after the announcement, one of the questions was: “Does Adobe recommend we use Flex or HTML5 for our enterprise application development?” And the first paragraph said it all “In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles”. Although the rest of the FAQ focused on how committed Adobe was to Flex, how it’s still a viable technology and the fact that they are committed to their runtimes for what seems like a minimum of 3-5 years, the general feeling was as if Adobe has abandoned Flex and its developers. Did this move kill off Flex completely? Absolutely not! Will it make developers think twice before using Flex in a project? Perhaps. HTML5 Let’s say that you were given a certain project and you had to complete it in Flex and in HTML5, there’s a high chance that the HTML5 project would take longer to complete thus making it more expensive. Moreover, bringing the HTML5 project to its Flex counterpart’s robustness and quality may be deemed impossible in the state of HTML5 today. Flex developers, understandably, feel that HTML5 has nothing better to offer than Flex has in its current The Future of Flex What’s next for Flex?Will open sourcing it breathe new life into it or has it been“left out to die”? What you will learn… • Recent developments since Adobe decided to contribute Flex to the Apache Foundation • Is Flex still the right choice for large scale desktop applications? What you should know… • no prior knowledge is required

×