Editor’s Note
Dear FFD Readers,
Editor in Chief: Ewa Samulska ewa.samulska@ffdmag.com
W ow! Do we have a special issue for you this month! There is a lot to cover, so let’s get down to it. Make sure you check out Pdfbook 3D, on page 10 that talks about the cool page flipping technique you have seen on some e-magazines. One of the biggest problems most web developers face is, how to allow their customers to update their web site, with out any knowledge of web design and without messing things up? That is
Executive Editor: Ewa Dudzic ewa.dudzic@ffdmag.com Junior Editor: Marta Kobus marta.kobus@ffdmag.com DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Przemysław Banasiewicz przemyslaw.banasiewicz@software.com.pl Art Director: Agnieszka Marchocka agnieszka.marchocka@software.com.pl Senior Consultant/Publisher: Paweł Marciniak Production Director: Marta Kurpiewska Publisher: Software Wydawnictwo Sp.z.o.o 02-682 Warszawa, ul. Bokserska 1 Poland Worldwide Publishing Business addres: Software Media LLC 1521 Concord Pike, Suite 301 Brandywine Executive Center Wilmington, DE 19803 USA Tel: 1 917 338 3631 Tel: 1 866 225 5956 www.ffdmag.com Software Media LLC is looking for partners from all over the World. If you are interested in cooperating with us, please contact us by e-mail: cooperation@software.com.pl marta.kurpiewska@software.com.pl Subscription: software@emdnl.nl Distributed in the USA by: Source Interlink Fulfillment Division, 27500 Riverview Centre Boulevard, Suite 400, Bonita Springs, FL 34134 Phone: 239-949-4450. 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. Printed in Poland by: ArtDruk
where Content Management Systems (CMS) come into play. On page 12, read about the, soon-to-be-released AIR CMS application called Konductor. Gabor Csomak, reviews a product called Flash Optimizer 2, on page 14, and gives a very enlightening, practical review of this product. Today’s Web 2.0 has changed the Internet and is forcing companies to make changes on how they gather information from their customer’s experiences on their web site. Mark Piller (page 16), demonstrates how to use Google’s Data Analytics to track customer’s page views on a web site. Let’s not forget the animation aspects of Flash and there are articles on Animating with ActionScript, Creating your first ActionScript game in minutes, Flash DecalSheet System, Flikr in Flash and How to useYahoo! Maps in Flash, just to name a fewof the interesting articles in the ActionScript Development Section (pages 20 through 64). You need to mark that whole section as a Must Read! In the Desktop Interactions, there is a good article on Drag and Drop in AIR using Flash CS3 article that talks about how to create a typical data-driven business application can be created using Adobe CS3. Of course, there is always more and more when it comes to Flash and animation. Pages 78 through 90, talk about methods to display 3D objects in Flash Player, Blender to Flash work flow and a tutorial on How to view PowerPoint on YouTube. All are very interesting articles and like the rest, need to be marked as Need to be Read! And... look at our book reviews so you can get a glimpse of some great books to help you create your applications. As Chief Editor, I am proud to say that this is one of the best issues of FFD that we have published and we are proud of the work that the authors have taken to produce such great articles. Please keep up the good work and send in your articles, tutorials or product reviews, so that we can publish them in upcoming issues of FFD magazine. Again, I would like to personally thank the Beta Testers and Proofreaders for their excellent work and dedication to help make this magazine even better. They work hard and under deadlines, like we do to get each and every magazine out for your to read. My very Special Thanks go to Ed who gave us a hand when we most needed! Ewa Samulska ewa.samulska@ffdmag.com
To create graphs and diagrams we used program by company.
The editors use automatic DTP system Mathematical formulas created by Design Science MathType™
ATTENTION! Selling current or past issues of this magazine for prices that are different than printed on the cover is – without permission of the publisher – harmful activity and will result in judicial liability.
DISCLAIMER! The techniques described in our articles may only be used in private, local networks. The editors hold no responsibility for misuse of the presented techniques or consequent data loss.
03/2009 (5)
4
Contents
Flex Application Architecture JONNIE SPRATLEY From this article you will learn how important is the role of the Cairngorm framework. Google Analytics for Flash DOMINIC GELINEAU In this article Dominic shows you how to instal and send data to Google Analytics. Miniblog – Part 2 MATTHEW KEEFE This is the next part of the great article about the miniblog project. Check it out Desktop Interaction Drag and Drop in Air using Flash CS3 SIDNEY DE KONING This article will walk you through the process of dragging files in and out your application. ServerSide Interaction FLEXing your Business Application MITCHELL M. MAYNARD Mitchel will present how a typical data-driven business application can be accomplished with Flex 3. Sound and Animation New 3D Methods of Display Objects in Flash Player 10 DOUG ENSLEY AND BARBARA KASKOSZ With this article you will get the excellent opportunity to develop new 3D methods of Display Objects in Flash Player 10 Blender to Flash workflow DENNIS IPPEL In this article Dennis Ippel will teach you how to create a simple object in Blender How to view PowerPoint on YouTube ALEX SMITH This tutorial will show you how to share your powerpoint presentations with Youtube? Books Review Book review 52 62 64 68 72 78 84 90
Special Report
08
How to become a Flash/Flex Developer? MARK GROSSNICKLE The article touches upon the process of becoming a Flesh/Flex Developer. Tools Pdfbook 3D POWERFLASHER GMBH Konductor Enjoy managing content again with Konductor, the CMS platform focused on providing a seamless workflow from design right to content creation. Flash Optimizer 2: The only SWF compressor GABOR CSOMAK Flex Application Optimization Data Analytics and Tracking User- Behavior in Flex Applications MARK PILLER Mark Piller gives the great class on challenges of user behavior tracking in Flex apps ActionScript Development Animating with ActionScript LEE MCCOLL SYLVESTER Lee explains how to deal with Animation using ActionScript. Create your first ActionScript game in minutes DAMIEN DAVIDOVIC In this article David will guide you step by step from blank flash document to alien shooter game in minutes! Flash DecalSheet System JESSE FREEMAN With this article you will explore Bitmap images and the way to use them to skin your Flash App. Flickr in Flash – Creating a portfolio JASSA AMIRLANG In this article Jassa presents the next part of his Flickr article series -Portfolio How to use Yahoo! Maps in Flex ANDREI CRISTIAN IONESCU Andrei will show you how to combine Flex & Yahoo! Into the cool components and applications. 10 12 14 16 20 26 30 38 46
96
03/2009 (5)
6
Special Report
How to become a Flash/Flex Developer?
W hen I was in college I had a general idea of what I wanted to do, but I had no clue how to get there. Basically, I wanted to create rich interactive experiences. I knew that becoming a Flash developer would allow me to do so, but I did not know how to land a job as a Flash Developer. It is a common problem faced by many college students and, unfortunately, there is no simple answer. What's worse is that what works for one person may not work for another. Everyone's path is unique and therefore you won't truly understand how to become a developer until you already are one. Helpful huh? Don't be discouraged. Even though I can't give you the exact path to take, I can, however, point you in the right direction. After looking back at my meandering path that led me to become a Flash Developer I have compiled the following tips that will save you time and keep you on course. You must learn how to learn. Make sense? What I mean is, you have to be able to teach yourself and not depend on a professor to push you. If you want to become a developer, then you need reach out an grab it. You want to be good at Action Script? Read the books, browse the forums, look up tutorials, follow the blogs and give yourself assignments that will give you new skills and set you apart from your peers. Start the habit early and continue it throughout your entire career. During these exercises, I cannot stress enough the importance of learning how to do things the right way. Don't just go through the motions. Don't just copy and paste code. Figure out why the developer who wrote the tutorial laid out his project the way he did. See if you can find better ways of accomplishing the the same task. By better, I mean ways to use less memory, ways that are less processor intensive and ways that adhere to stronger Object Orient Programming standards. It's one thing to learn how to piece together an interactive website; it's another thing to create an interactive website that is scalable, has modular components and is based on code that is well written and easy for other developers to understand and change. Make it a point to learn the industry standards and to learn the proper way to code. Doing things the right way will make you much more appealing to the industry. If you don't manage your code correctly, no matter how good you are, you won't last long in a team environment. Internships Complete as many internships as your schedule will allow. Employers want to see real world experience, something no classroom environment can provide. Not only do internships provide this experience, they also provide a great networking opportunity that will drastically increase your chance of getting a job. During your internship, do your best to
make connections with your peers and then maintain these contacts even after the internship is complete. Even if you don't get a job at that immediate company, your connections may know of a place that is hiring and can put in a good word for you. If you haven't learned already, networking is one of the most important ways to get your portfolio in front of the right person. Build a Portfolio Sorry to say it, but unlike what you may have heard, your GPA and your degree mean absolutely bupkiss. If you don't have a portfolio, then you don't have an interview. In our field, your portfolio – not your resume – is your first impression. You should be building it from your first day at college and continue to build upon it throughout your career. Unfortunately, I did not learn this until after I graduated. I spent the summer after graduation making my online portfolio http: //www.ickydime.com , which is dated now, but at the time it allowed me to get my foot in the door. Don't wait like I did. Start putting it together as soon as possible. At first it could be as simple as posting images of projects on flickr, exhibiting examples of projects on your domain and writing about your experiences on a blog. Treat every project and assignment as a portfolio piece. Your work is your resume. It's a reflection of yourself. Treat it as such. In the beginning your portfolio may be broad. It could include some AJAX, some Flash work, some Flex, a sprinkle of PHP and a smattering of Photoshop. You'll find most students put everything on their resumes, even if they've only taken one class of it. This is fine while you are still learning and trying to figure out what you want to do, but once you know you want to become a Flash/Flex Developer, then make
EyeGlassGuide An interactive survey done for Transition Lenses: http:// www.eyeglassguide.com/tool/
03/2009 (5)
8
Special Report
sure your portfolio reflects that. Either remove the other elements or make them a footnote. The more experience you gain, the more you should be able to narrow down what you truly want to do. If you want to make games, make your portfolio full of games. If its microsites that you love, chaulk it full of examples of microsites that you have created. Rich applications you say? Sure, lets see them. Whatever your dream job is, make sure your portfolio is geared toward it and reflects the type of work you would like to do. Don't be afraid to leave out projects from your portfolio that are not the type of work you would like to be doing. Network with Brute Force Once you have a solid portfolio, reach out to companies in your area of interest and try to make a connection. Don't wait for job postings (although look there as well). Find companies, send them your work and see if they are interested. They may not have something now, but they could have something open up later. Also, if they seem receptive, ask for feedback on how to improve your portfolio. They see hundreds of portfolios and should be able to give you some great insight into ways of improving yours. Network with Patience Brute force networking isn't always successful. Sometimes the organizations are just too busy to look at every portfolio that passes their way, let alone write back a formal critique. Another downfall of Brute Force Networking is that you aren't establishing a close connection; instead, you are basically asking a favor of someone you haven't met. Networking with Patience, on the other hand, is a way to build connections that are mutually beneficial. The basic concept is for you to be in a situation in which you are helping each other out; therefore, it doesn't feel like a burden when you ask for help. The best way to Network with Patience is to dive into the Flash community by creating a blog, being active on forums and contributing comments to others' blogs. When you create a blog, be sure to include posts that explain things that you've learned. Try to supply source code and tutorials whenever appropriate. When you participate on the Flash forums, try to find questions that you can answer. Solving someone else's problem is not only a good way to establish a connection; it is always a great way to help master your trade. When commenting on other blogs, make sure you comment only when you have something to contribute to the conversation. Don't be the guy that posts just to add another link back to his blog. That is a quick way to lose a connection. Becoming an active member in the Flash community is not something that happens overnight. It takes time and patience; hence, Networking with Patience. But if you start early, you should have some solid
A rich Flash 10 site showcasing the world’s first robotic greensmower.
connections made by the time you are ready to search for a job. At that time, you can reach out to your friends and ask them if they know of places that are hiring. The difference between Patience and Brute Force Networking is that you are now asking your friends instead of asking complete strangers. Friends should be easier to approach and should yield a higher percentage of successful results. Just Do It (Nike Style) Let's say you can't find the perfect job. Do it anyway. You'll obviously have to do what you need to pay the bills. You should try to either get a job that is in a related field or a job that pays well so you don't have to work that much. Then during after-work hours and on weekends you should focus on whatever it is that you really want to do. Spend your free time freelancing for companies, doing projects for family and friends, joining competitions or even making up companies and making website comps for them just to expand your portfolio. In any case, always continue doing what you want to do and eventually you will end up doing it professionally. As I mentioned before in the Portfolio section, make sure you focus on your dream projects. It makes no sense wasting your weekends working on microsites if your dream job involves rich applications. If you focus on your dream projects, then eventually your hobby/night job will eventually catch a break and become your day job. Conclusion Everyone's path is different, but the general direction will be the same. As you move forward, you will find which paths work for you and which paths do not. Some Flash hopefuls will land a job right away with an internship; others may find luck with the Brute Force approach; and others still will have to rely on patience and practicing their skills after hours before they finally catch their break. In any case, you should focus on your craft, build your portfolio, become an active member in the Flash community and work on establishing a solid network of peers. Following these general tips will keep you on path toward landing a Flash/Flex developer job in the industry. With that, I leave you with an inspirational quote by Sarah Palin (Tina Fey): All you have to do is want it .
MARK GROSSNICKLE Mark Grossnickle is the Lead Flash Developer at The Basement Design & Motion ( http://thebasement.tv ), an interactive and digital design studio based out of Indianapolis, Indiana. You can learn more about Mark and his work by visiting his blog: http://blog.ickydime.com/
SurfTheCrowds Game we created for KFC during their promotion with Guitar Hero 4: http://www.surfthecrowds.com
03/2009 (5)
9
Tools
Opening up the third-dimension for print products on the internet with pdfbook 3D
by Powerflasher GmbH
It is no secret that Web 2.0 has long changed the internet. The three- dimensional component of the internet, Web 3D, is another significant development.
T he usefulness of something like 3D could make almost every industry rethink how they interact with the world. Also publishers and other companies offering media on the internet would benefit from this. Powerflasher Solutions recognized this and developed the new pdfbook 3D. Content, particularly print media or corporate publishing products, including for example books, magazines, catalogues or brochures, has changed to the point of being almost entirely digital. Today companies are already using different possibilities to present their print products on the internet or in multimedia applications attractively. But online-shops like Amazon and alsowebsites like Google Books show, how little convincing their
presentation often is. 3D is taking these print products to another dimension – both literally and, well, virtually. But high performance technology is required to realize this. Powerflasher Solutions have come out with a cutting-edge version of their long- time successful pdfbook. The currently used graphic-engine allows developers to integrate
a three-dimensional presentation of printed products into their internet presence or their graphical user interface (GUI). Besides, developers can embed video and audiomaterial or links into the company’s print products – which adds even more value. With pdfbook 3D the visual presentation of digital text has never been so close to
Figure 1 . Flip pages
03/2008 (5)
10
pdfbook 3D
the look and feel of a real book. The tool converts simple pdf-files into digital books and virtual print products have never been closer to reality. Using pdfbook 3D, the result is a digital book, which can be turned on the screen as if the reader would hold it in his own hands. The reader can intuitively flip through the pages of the pdfbook – just by clicking. The new Powerflasher pdfbook 3D lets print products become a real experience on the
screen. For the website visitor, the enriched reading experience makes browsing corporate media much more enjoyable. pdfbook 3Dmainly bases on Away3D – the realtime 3D engine for flash. Furthermore, pdfbook 3D is a flash application. That means, the tool only requires the flash player plug-in, which is already installed in 98 per cent of all browsers. pdfbook 3D has a lot of functions to create individual digital
Figure 5 . Logo signet
books. At the same time it is also easy to use. Powerflasher Solutions have optimized the user interface of their new pdfbook. Additional tools like the upload function for images and logos or the color picker make it easy to create a three-dimensional pdfbook in the company’s own corporate design. The developer can choose from multiple options for title, logo, colors and background. There’s also an option to select between hard- or soft-cover for the front and back side of the book. An index is generated automatically by using the new index function, at the same time being a highlight for the reader: Through the automatically generated index the reader reaches the requested page directly. With the integrated pdfbook- designer video clips, audio books and links are embedded into the pdfbook in a simple way. Thus, the reader gets a real surplus even compared to conventional books. Reading thereby becomes a multimedia experience that can help to grasp contexts in a new way. Just within a few steps digital books can be created and placed online. Even voluminous books that need a lot of storage capacity are available in short time and do not paralyze the client PC. Additional features allow the provider to give the reader the possibility to download, print or even share pages of the book via link or to send an e-mail or instant message to a friend. All those functions, which convince every marketing manager, can be inserted with little effort on the part of the developer. Under the aspect of modern marketing, the 3D-technology of the pdfbook enables developers to let consumers dive into a three-dimensional product – and changes consumers’ interaction with it drastically. Out of a simple pdf-file developers can create an individual and unique pdfbook matching their expectations exactly. The developer can choose among different versions of the pdfbook. The full- service package is the easiest way to use the tool. Hosting of the server component by Powerflasher is included. With this package no additional server software is required. Another way to develop using pdfbook is to install server and client components inhouse. For this purpose, the IT-system needs to meet special server requirements which are specified on the Powerflasher website www.pdfbook3d.p owerflasher.de/en .
Figure 2 . 3D representation
Figure 3 . Index view
Figure 4 . Print option
03/2008 (5)
11
Tools
Konductor Enjoy managing content again with Konductor, the CMS platform focused on providing a seamless workflow from design right to content creation.
O ne of the hardest challenges in the web design field is designing and creating a site that will be managed and updated by someone else. That someone else will eventually put on the hat of the webmaster – independently adding, updating and removing content often with little or limited web experience. Proprietary and open source tools abound for developers, but often require many hours (if not weeks) of technical implementation out of the hands of the designer – who is often left to find a local developer to address the technical task of cutting their design and then setting up web servers and databases. Frequently the end result is an expensive system that does not encourage proper design reuse and still requires server maintenance and training of the end users themselves. This gives the CMS industry a bad taste in the mouths of many designers. Set to release the first build of their AIR desktop application, Konductor is a new content management platform that simplifies the deployment of content management into websites. It combines an extensible service with a Dreamweaver plug-in and an AIR based content editor to create a seamless workflow from site designer to content owner. The designers workflow remains intact and uninterrupted – Dreamweaver can still be the tool of choice for creating the websites design and page templates. After templates are created and published to the software-as-a-service server – eliminating server setup and maintenance altogether – content management tasks are accomplished with the Konductor AIR desktop application. Dreamweaver Extension To start, a web designer installs the Konductor Dreamweaver Extension. A nice feature is the automatic site configuration that takes the
WebKit Page editing adopts the WSIWYG approach by making extensive use of WebKit to provide a real time html editing experience. Incomplete integration of the DOM in the AIR version of WebKit posed many challenges which could only be solved by extending upon it. In page editing mode, users have the standard text formatting capabilities such as applying styles and alignment with strict enforcement of proper XHTML. Editing modes are identified and highlighted so the average user can easily determine what they can and cannot edit. Asset Management Assets that are used in the site, such as images, pdfs, word documents, videos, are made available through the asset library. Users can add assets to their library by either manually adding them through the file OS browse window while in the asset library or, thanks to AIR, by selecting the asset(s) from the desktop and dragging it into the asset library. Adding an asset to the image library effectively uploads it to the server and it takes care of the file pathing and management. For image assets with a large file size, image optimization is presented as an option allowing the user to down sample the image
guess work out of site set up for the designer – no more having to search for passwords and directories as the server settings and transfer details are set for you. Once installed, the extension takes advantage of the native functionality in Dreamweaver and extending it to allow for additional information containing content, menu and form restrictions to be added, doing so with no additional code being added to the design. For most designers who use Dreamweaver, the extension is a nice and unobtrusive addition to their workflow. Konductor AIR Application Once templates are created and uploaded, content owners can begin managing their site with the Konductor AIR application. The application is geared towards a non tech savvy audience. Short, simple instructions provide the user with direction – avoiding the end result of abandonment caused by frustration. Managing content is divided into three major categories – page, menu and asset management. Page Management Page creation is as easy as associating a new page to a designer defined template of editable regions. Pages can be added, removed, and modified. The application supports a list and grid view, where the grid view shows actual thumbnail snapshots of the rendered html page it represents. There are several ways available to help a user organize and find pages. A search filter allows the user to filter the list of pages based on the name which makes it easy to manage and find specific pages in large sites. The concept of groups – allows the user to organize pages in whatever way is most intuitive to them. Adding a page to a group is a simple as dragging and dropping it onto the group.
Figure 1 . Konductor application
03/2008 (5)
12
prior to it being uploaded – no more trying to teach a marketing manager why and how to optimize an image. Menu Management Menu management allows the user to create contained navigation systems to be used by the site. Menus consist of items that can link in a variety of ways including: to an internal or site specific page, external or outbound page, a traditional mailto, an anchor in an internal page and to an asset such as an image or zip file. Creating a menu is as easy as adding a new menu group, and then adding menu items to it. One nice workflow feature is the ability to drag items located within the site such as pages or assets onto a menu to add it. One caveat is that a content owner can't just decide to add a menu anywhere at any time – the templates created by the designer dictates designated areas where a menu can be placed. FormManagement Form management is another robust feature of the application that takes the guesswork out of creating a complex form. Regions for forms must be designated by the designer in the template. Once a form region is identified, the content owner can easily create a fairly complex form by using the form builder. Users can determine if fields are required and dictate basic properties such as the max character input. The content owner is also given control over how the form is going to be handled in term of its submission. The user may also choose to save the submitted form information into a database to export to CSV at will, with no database setup required. Third Party Developers In terms of the Konductor platform, third party developers will have complete access to the services used by the application itself as the Konductor service includes a REST API, allowing them to create their own applications or widgets. Such as integration into Constant Contact, your favorite Blogging service or even Sharepoint documents. This could be an application exchange similar to the iPhone or Salesforce.com, but for websites. Future releases plan to have workflow improvements, advanced image optimization/ editing features along with better support of plugin media such as Flash and video. So whether you are a designer looking for a solid alternative to the current CMS options or an RIA developer looking to play with a great AIR application, go and check out Konductor . They have a couple of videos showing the application in use and demonstrating some of the features. http://www.konductor.net
03/2008 (5)
13
Tools
Flash Optimizer 2: The only SWF compressor by Gábor Csomák
First I was skeptical when I saw the Flash Optimizers advertisement. Can a SWF be half the size without quality loss? After testing Eltima Software's product for two weeks, I have to say: It is an excellent tool, a 'must-have' for a Flash developer, but let me warn you, you will not get your SWF's cut in half. Usually, I could trim them 10-20%, without visible difference and I think that is the reason why users will like it. The program will have a difficult task of making Flash CS4's publishing technique more efficient. My opinion is that Flash CS4 has a great method, since, for example, it does not include unused objects in the SWF, etc.. So, let us start the adventure and find out where can we save so many megabytes? Flash Optimizer can compress and optimize your: • Images – With Flash Optimizer you can convert all images to JPEG format, and compress them to a given quality level and you can also delete the meta data. • Sounds and Video – With this tool you can change the bit rate, frequency of the sounds and videos, you can convert sounds to mono, you can optimize their
streaming and all sounds will be converted to mp3. • Shapes and Morphs – It is ideal for deleting unnecessary points, invisible parts of shapes and you can compress and delete shapes and morphs, as well. Also, you can delete zero objects, which are not needed. Fonts – If the movie only contains 8 pixel high letters, then why would you include the whole fonts with larger sized letters in it? Play with the sliders Although the program has five presets , you can set and save as many as you want, but you will usually need to make changes for each SWF that you run the program on. All SWF's are different, so you have to play with the compression options to get the best result, but it is worth trying it. In 5 minutes you can optimize your SWF to be smaller and faster. All of the above mentioned can be selected and deselected and most of the options strength can be modified using a percent slider. So if you want to decompress only the sounds in your file you will only select the sound compression and set its properties (such as
bit rate, frequency, etc.). Flash Optimizer will do just that and leave the other parts untouched. You have lots of freedom to play with your SWF file's compression to find the best quality/size rate. As I have mentioned before, there are five preset options, which are recommended to start optimizing from and you can save your own presets with one click. You can also preview before saving and look at the original version and the compressed one at the same time or only at the compressed one, but on larger screen or even full screen. You will see a detailed, colorful info graph about the compression, so you will know what took up the space. The program also has a batch conversion mode. I think it is nice to have, but in my opinion, there is no real need to use it. It works fine, but who wants to compress SWF's at the same time with the same preferences? The only batch conversion I found useful was if you have some old Flash Player 6-8 SWF's, you can compress all of them with Zlib and they will be saved as Flash Player 9 movies. Great for banners and FlashLite I think the real strength of the program is in banners and FlashLite: both banners and
Figure 2. Optimization set
Figure 1 . Reduce swf file size
03/2008 (5)
14
Flash Optimizer 2: The only SWF compressor
FlashLite movies have to be small, and fast . I have noticed that after running the compressed SWF onmy Nokia N81 8GB phone they played much faster. To do this, you have to reduce the image sizes and other objects to run fast. Flash Optimizer does the trick. If you work with a banner and your SWF's a bit larger than the space you have, you can compress it easily to the correct size without much loss of quality. If most of your work is banner creation, then you need Flash Optimizer. Other facts The program is available for both Mac and Windows and I have to say that the look and feel is correct for both platforms. On Windows it is like the newOffice and you can find everything easily. On a Mac, it looks like a classic Cocoa App. It is pretty, easy to use and user-friendly. Although you can compress all pictures before importing them into the Flash movie's library, using this program is definitely the easiest way . Just with one click you can convert all of them to JPEG format and lower the quality. A few words about the disadvantages:
unfortunately the program supports Flash Filters (glow, etc..) in ‘Low’ preset only, but if you only compress for example the sounds in your swf, it’ll leave the Filters as normal. But, if you compress it without filters, the movie will run faster (but if you created it with filters, you will probably need them). It also doesn’t support Flash Player 10 swf-s yet, but Eltima Software assured me that by the time you’ll get this article, you can compress your Flash Player 10 movies also. Sometimes I have found the scrolling and playback a little buggy and once I had to view it in a standalone Flash Player. All of these problems I am sure will be corrected in the future. When you compare the old and the new movie, it does not synchronizes the mouse events on the two movies. For example, if you have a tic-tac-toe game, you have to click twice as much to see the result on both the new and the old one. I miss this feature. Using Flash Optimizer First I tried the Software on my most recent full-flash site is which is quite large, because I
I think the shapes were over compressed, so decreased it to 2%. I also checked to delete the pictures meta data. So the compression was started and it took 12 seconds. The view was sometimes buggy, I was not able to scroll and some mouse events did not work or only worked in the standalone Flash Player. The result: the compressed SWF file size decreased to 44% from the original size , the space was mostly gained on images. The shape's sizes were cut in half and the font lost 99% of its weight. I also lost some space in the 'Other' category. As I said, I embedded 100% quality JPEG format thumbnails in the file, so if I embed 90% quality files, this program would only mean 20% compression. So, if you are lazy like me, you need it. I also tested it on a photographer's full- flash site, which was under development. When I tried it with the preset named 'best', it converted it to 1.2 Mb from the original 1.7 Mb. Impressive. But, the images had very large pixels, like it had been censored. The logo was in vectorial format and looked messed up. So, I started again from the 'basic' settings. This time it had gained only 2%, but it looked as good as the original one. Then I tried setting image conversion to 15%. It looked the same. So, I used to use very good shapes and images in the Library. I noticed on the graph that the sounds were a big part of the file, because the client wanted a full song to be played on the site. I optimized the streaming and converted it to mono. In the end, I gained about 10% on the whole file. Best today Flash Optimizer is the only program that supports Flash Player 9, Zlib compression and all the Action Script formats. It does not need the FLA file and it saves the optimized file next to the original one; with a '_opt' ending (as default). The compression is fast, usually it takes about 15 seconds, which is very nice. You can preview the compression next to the original or in full screen. It shows you percents and amounts of where and how much space was saved. You can set everything, so the result will be exactly as you want it. In the end you will usually decrease the original SWF by 15% and you can compress images after exporting the SWF. Basically, you will gain most of the space with the images and the shapes. Unfortunately, there are still some bugs and I miss some functions, but it is a great application to have in our Creative Suite. It retails for about $99, but before buying, check out it for yourself, download the trial from http: //www.flashoptimizer.com
have kept the gallery's thumbnail images in the SWF. It took some time to download them. So I started the program, then I opened the SWF, and started to edit the compression settings. I set the images compression to 10%, because I did not want them to have big pixels. The video and the sounds was set to 30%, because there is hardly any video and sounds in it. I set the shape compression to 5%, because I did not want to loose the current look. I set all of them manually. The fonts were set to 31%, because there were only small texts. Here are the results:
Figure 3. Preview optimization result
GÁBOR CSOMÁK Student at Budapest University of Technology and Economics, and Flash Freelancer.
Figure 4 . Fullscreen
03/2008 (5)
15
Flex Application Optimization
Data Analytics and Tracking User-Behavior in Flex Applications
by Mark Piller
Application analytics is not something you think about when developing a Flex application. However, the importance of being able to analyze user- behavior should not underestimated.
extracting this data in the form of analytics and business intelligence. This article reviews the offerings by Google – Google Analytics and Midnight Coders – RIA Analytics. Both solutions can natively integrate with Flex at the ActionScript level and provide different features for tracking application events and user behavior. User Activity Tracking Monitoring and tracking user activity can be divided into the following three categories: • Tracking UI events – these are the events emitted by various user interface components. They typically represent a user action on a component (clicking, scrolling, typing, etc.). Tracking activity for these events produces results indicating the number of the percentage of users carrying out a particular action. • Tracking non-UI (application logic) events – as an application executes various workflows, it can emit events directly
What you will learn… • Challenges of user behavior tracking in Flex apps • Benefits of analytics for Flex applications • Available solutions for integrating Analytics into Flex • Sample integration ActionScript code
What you should know… • Have an idea about analytics • How to create a Flex application • How to add a 3rd party component to a Flex application project • Understand Flex events
Overview When compared with the traditional HTML- based sites, Flex applications run in a black box. Indeed, once an application is loaded into the browser, users have access to all the facilities without a need for additional page refreshes. As a result, traditional mechanisms for tracking user actions or navigation through an application are no longer applicable as there is no corresponding page fetching. The problem poses a technological as well as a business opportunity and several vendors launched solutions for tracking key metrics within Flex applications and
Level of difficulty
T he number of Flex applications going into production is quickly rising. A well-recognized, Flex- animated download progress bar can now be seen everywhere (unless it has been masterfully skinned RIAs have entered many areas from the enterprise, line-of-business applications to consumer-facing applications that solve productivity problems or add entertainment value. A common thread between all well- done RIAs is the User eXperience (UX) which adds excitement to either the same old boring tasks or introduces completely new approaches for visualizing or working with data. As exciting as production deployment is, it comes with its own challenges. For decision- makers and other managerial types, it is now less important to know that the application IS out there and IS working, but critical to know how well the application runs, if the users can navigate through, if after all the application is generating revenue or succeeds in new user registrations. This article reviews the strategies and technologies used to extract and visualize that kind of information. Welcome to Flex Analytics.
Listing 1. Reporting analytics data using Google Analytics API
xmlns:analytics="com.google.analytics.components.*" id="tracker" account="UA-111-222" mode="AS3" visualDebug="false" /> 03/2009 (5) 16 Flex Analytics 101 UI Events Tracking UI events is a very straight-forward task. When users interact with the UI components in a Flex application, events are emitted to notify the application code that a certain action (click, scroll, mouse over, etc) took place. Developers can write code to notify an Analytics engine about a particular UI action. Consider the following Flex button component: from the application logic layer. For instance, if a rich client executes a request to process a credit card transaction, an event may be issued indicating a successful or failed result. Tracking these events can provide important insight into the core business functions of an application. • Tracking time intervals (user activity and inactivity per component or screen), session duration – due to the lack of page fetches in a rich client application, web servers (and thus traditional analytics systems) cannot track the time a user spends on any particular screen or in an application state. However, it is a very important metric as it indicates whether users are struggling with application navigation, which might be a sign of a usability problem. Dimensionality Applications can submit data readings for analysis and create logical associations between readings and concepts in the application. These associations create metrics. For instance, you could have a metric for the number of clicks of some button which would indicate execution of a business function. Simple associations provide a very basic view of the data. In the example of the button click, all you would know is how many people actually clicked the button, but no more than that. However, for most of the applications it is essential to have a deeper analysis of the data. For instance, it may be important to know not only the percentage of users that executed a certain action, but how many of them came from a particular geographic area, are in a particular age group or of a certain gender. In fact, as you analyze the collected data, you may need to group it by different categories. For example, you may need to ask the system the following: generate a chart of the number of users from California, who are male between ages 25 and 30, who clicked the ‘Check Out’ button between the hours of 8:00am and 1: 00pm . In this example, application should be able to submit additional information for the button click metric. That additional information becomes the metadata of the submitted readings or dimensions. Creating custom data views by combining dimensions is called data slicing. Analytics products supporting dimensionality and data slicing enable businesses to work with data in order to extract valuable information about applications and business processes. Analytics and Flex Integration The subject of analytics may sound complicated, but fortunately integrating it into ActionScript is a relatively straight- forward task. Both Flex analytics solutions by Google and Midnight Coders provide Flex library components (SWCs) with the ActinScript analytics API. It would be a developer’s responsibility to integrate these components into the monitored Flex application. Below you will find a few examples of using these libraries for tracking various types of events described above in the ‘User Activity Tracking section. Listing 2. Reporting dimensional analytics data using Midnight Coders API private var dims:DimensionNames; private var dimValues:DimensionValues; private var indicator:ReadingIndicator; private function init():void { // set up the name of the dimension group – "My App" // and the names of the dimensions in the group dims = new DimensionNames( "My App", "OS", "Screen Resolution" ); // set up concrete values for the dimensions dimValues = new DimensionValues( dims, getOS(), getResolution() ); // configure reading indicator for the button. // the indicator automatically subscribes to the specified event // and reports data to the analytics server along with the dimensions indicator = new ReadingIndicator( dimValues, clickMeButton, MouseEvent.CLICK ); // start data collection agent DataCollectionAgent.instance.start(); } private function getOS():String { return Capabilities.os; } private function getResolution():String { return Capabilities.screenResolutionX + "x" + Capabilities.screenResolutionY; } 03/2009 (5) 17 Flex Application Optimization To do the same with the RIA Analytics by Midnight Coders, the code would look as shown below: public function transactionComplete( tx: Transaction ):void { reading = ReadingIndicator.create( dims, "Transaction count" ); reading.publish(); } Since the reading is associated with the same metadata, it is possible to generate custom queries by slicing the data using the available dimensions. Additional Analytics Facilities Data collection is one of the fundamental elements of any analytics system. In addition to being able to report usage data out of a Flex application, other analytics facilities may include: • Application heat maps – visualize mouse and keyboard activity for various application states. • Custom Dashboards and scorecards – enable companies to create a completely custom interface for visualizing analytics data. Dashboards may include data visualization widgets linked to the stream of readings. • Custom Key Performance Indicators (KPIs) – provide a way to perform custom calculation on top of the aggregated data and/or data from other data sources. The Midnight Coders solution supports all of these facilities in the RIA Analytics product offering. Conclusion One of the key differentiators of the RIAs is user experience and usability. Knowing how the users are using the application, whether they find it intuitive or what they struggle with is very important. Additionally, as with any other line-of-business application, being able to visualize an application’s performance relative to its business impact is the key success factor for many businesses. MARK PILLER Mark Piller is the founder and Chief Architect of Midnight Coders, Inc, where is responsible for company strategy and product development. Mark is passionate about elegantly designed software, ease-of-use and uncompromised usability. He can be followed on Twitter at twitter.com/ midnightcoder Figure 1. Viewing aggregates data using Midnight Coders Analytics Portal Krista Lapp many users with a particular OS or resolution clicked the button. It is also important to understand that the dimensions can include any metadata relevant to the submitted data. Below is a screenshot from the RIA Analytics Server Portal interface visualizing received data for the button, see (Figure 1). Business Logic Events Tracking non-UI events is not very different from the UI events. Consider the following function. Suppose the function is invoked when some business transaction completes and the server notifies the client code of the completed transaction: public function transactionComplete( tx: Transaction ):void { .. handle transaction completion here } To track the event with Google Analytics, you can use the same API as for the UI events: public function transactionComplete( tx: Transaction ):void { tracker = new GATracker( this, "UA-111- 222", "AS3", false ); tracker.trackPageview( "/transaction count" ); } On the 'Net • http://www.google.com/analytics/ – Google Analytics • http://www.themidnightcoders.com/products/ria-analytics – Midnight Coders Analytics 03/2009 (5) 18
Made with FlippingBook HTML5