• Home
  • Contact
  • Careers
  • Socialize With Us:
  • Send us Mail
  • Follow us on Twitter
  • Join our Facebook Group
  • /
  • Linkedin
  • /
  • Vimeo Videos
  • /
  • Youtube
  • /
  • RSS Feed
  • Search Site

  • About UsAwards & Bio
  • PortfolioOur Latest Work
  • TrainingTips & Tutorials
  • BlogGreat Articles

You are here: Home / Tag: Flex

Tag Archive for: Flex

Fixing Memory Leaks with Adobe Flash Builder

Category: Quick Tips     |     Tags: AIR, AS3, Debugging, Flash, Flex, Optimization

On a recent project, we had a performance problem. The AIR project’s requirements include the heavy adding/removing of UI elements and over time we could easily see the performance slowed. We knew there was a something wrong. It was a memory leak. A memory leak starts when an object is stored in memory but cannot be accessed by the running code. When the undesired object cannot be freed from memory, and is not usable, it is a leak. Over time the application may leak (or re-leak the same issue) more and more. Eventually the application may show signs of the leak or even become unusable.

User Experience Symptoms Of  A Memory Leak

  • During regular use the application becomes more and more sluggish/slow. If there is nothing ‘new happening’ onscreen and no heavy ‘rendering’ it is more obvious to notice the Framerate-per-second (FPS) lower. You can use a small debug window (such as Hi-Res-Stats formerly MrDoobs Stats) to show the current FPS and estimated ram usage to help you notice this. If you see the FPS run at 30 for example during the first minute of use and 20 after 5 minutes, there may be a memory leak.
  • The application quits suddenly. This could be for many reasons, but it may be that the application runs out of memory.
  • Flash throws the memory-specific error ‘flash.errors.MemoryError’
Even if you see one of these symptoms it may not be obvious that there is a problem or that the problem is a memory issue. Or perhaps your development machine is high powered with ample RAM, yet your target user’s machines are slow. You don’t see the issue, but your users will. So how can we diagnose the issue. Luckily, the Flash Builder IDE has a ‘Profiler’. This program runs alongside your application and serves several key roles. You can monitor your applications USAGE of memory over time, and see a live list of all OBJECTS in memory (including references to those objects).

Profiling To Find Evidence Of A Memory Leak

  • Run your application with the Flash Builder Profiler. Run -> Profile As… -> etc…
  • Watch the ‘Memory Usage’ Panel
  • Look at the curves of Peak Memory (Red) and Current Memory (Blue). The analysis is totally application dependent. In your particular application, if you expect memory not to grow, but you see it grow, that is a problem. If you expect the memory to drop (UI removed from stage, arrays and vectors emptied, etc…) and you don’t see it drop, that is a problem. Herein lies the art of memory profiling. Consider to add a button to ‘Reset Application’, then click it and see that indeed the Current Memory drops to zero (0).
  • Watch the ‘Live Objects’ panel. Compare the 1. ‘Cumulative Instances’ and 2. ‘Instances’. For each object. #1 shows the total objects every created since the application started and #2 shows only those currently in memory. If these numbers are the same, and should not be, that is a problem. Perhaps you feel you have deleted a sprite from the stage or deleted another object from memory yet it still exists.


Tools And Tips For Finding And Fixing Memory Leaks (Must Read!)

  • Memory Tracker – http://divillysausages.com/blog/tracking_memory_leaks_in_as3.
  • Solving Memory Leaks (FANTASTIC!) – http://www.tikalk.com/flex/solving-memory-leaks-using-flash-builder-4-profiler
If you want to play with a simple example you can download the example below (See ‘Member Resources’) below.

Example 1: Without Memory Leak

[actionscript3]
package
{
import flash.display.Sprite;
import flash.events.Event;

//USE A LOW FRAMERATE, SO WE CAN STUDY CLOSELY
[SWF(frameRate="1")]
public class MemoryLeakDemo extends Sprite
{

private var listOfDots_vector:Vector.<CustomDot>;
public function MemoryLeakDemo()
{
//REPEAT SOME CODE EVERY SECOND
addEventListener(Event.ENTER_FRAME, _onEnterFrame);

//CREATE A LIST
listOfDots_vector = new Vector.<CustomDot>();
}

protected function _onEnterFrame(event:Event):void
{
//EVERY FRAME WE…

//1. CREATE A NEW ‘DOT’ (A Red Circle Sprite)
//MEMORY NOTE: ‘var’ is a temporary variable.
//So CustomDot has 0 (permanent) references
var customDot : CustomDot = new CustomDot();

//2. ADD TO THE STAGE
//MEMORY NOTE: So CustomDot has 1 (permanent) reference; ‘this’
addChild(customDot);

//3. REMOVE TO THE STAGE
//MEMORY NOTE: So CustomDot has 0 reference
removeChild(customDot);

//So…
//THERE IS NO LEAK
//The GC will *mark* the ‘customDot’ as having 0 references and
//The GC will *sweep* it away from memory.

}

}
}
[/actionscript3]

Example 2: With Memory Leak

[actionscript3]
package
{
import flash.display.Sprite;
import flash.events.Event;

//USE A LOW FRAMERATE, SO WE CAN STUDY CLOSELY
[SWF(frameRate="1")]
public class MemoryLeakDemo extends Sprite
{

private var listOfDots_vector:Vector.<CustomDot>;
public function MemoryLeakDemo()
{
//REPEAT SOME CODE EVERY SECOND
addEventListener(Event.ENTER_FRAME, _onEnterFrame);

//CREATE A LIST
listOfDots_vector = new Vector.<CustomDot>();
}

protected function _onEnterFrame(event:Event):void
{
//EVERY FRAME WE…

//1. CREATE A NEW ‘DOT’ (A Red Circle Sprite)
//MEMORY NOTE: ‘var’ is a temporary variable.
// So CustomDot has 0 (permanent) references
var customDot : CustomDot = new CustomDot();

//2. ADD TO THE STAGE
//MEMORY NOTE: So CustomDot has 1 (permanent) reference; ‘this’
addChild(customDot);

//2B. CREATE ANOTHER REFERENCE TO THE DOT
listOfDots_vector.push(customDot);

//3. REMOVE TO THE STAGE
//MEMORY NOTE: So CustomDot has 0 reference
removeChild(customDot);

//So…
//THERE *IS* A LEAK
//While we are correctly calling removeChild
//There is a reference left in ‘2B’ above.

}

}
}
[/actionscript3]

Next Steps

  • Download the code and check it out! (See Member Resources)
  • Comment below with your thoughts.
  • NOTE: Flash Builder 4.7 (BETA2) has new Profiler called “Monocle“. It looks very exciting, yet this article focuses on the currently available (non-BETA) profiler.

Member Resources

[private_Free member]Enjoy this members-only content!

  • Download the source-code to the MemoryLeakDemo

[/private_Free member]

Considering Flash-To-Mobile Development

Category: Industry News     |     Tags: AIR, Flash, Flex, HTML5, Mobile

THE CHOICES

Software development has gone mobile. We see a large audience using smartphones and tablets, and as developers/marketers/entrepreneurs we want in. When planning such a project there are myriad decisions.

CHOOSE – THE PLATFORM

The choice of target platform (e.g. iOS) and target device (e.g. iPad2) is a primary consideration. Apple’s iOS hits the majority of the market but with time others will mature and may offer more competition. Moreover to hit your market you may be best served to offer your software to more than one platform and more than one device-per-platform. Quite quickly a rather conservative project can target 5-10 unique pieces of hand-held hardware.

CHOOSE – THE DEVICE

Each device offers unique features. The market-penetration, platform, processor-speed, input-capabilities, screen-size, and other factors are all important. Two major form-factor camps are ‘phone’ size and ‘tablet’ size. There is some overlap between these categories such as the Samsung Galaxy 1000.

CHOOSE – THE MONETIZATON

There are many monetization schemes possible. Here are a few of the popular ones;

  • Free – To gain experience and reputation.
  • Freemium – Offer a free version and market within the experience for a pay-version with more features.
  • Ads – Integrate video ads, animated ads, or still ads into the experience.
  • Micro-transactions – Offer bite-sized purchase opportunities which enhance the experience.

CHOOSE – THE DEVELOPMENT PATH

When the platform(s) and device(s) have been chosen, the path to develop must be chosen. In general there are two strategies

a) Native App Development – This means you use the 1st-party language (and tools) offered by the platform creators. This means using XCode tool with Cocoa framework coded with the Objective-C language when developing for iOS. Native development generally offers the very best potential performance (i.e. for high-end gaming) and tightest integration to the devices (e.g. detect battery level, etc…) and OS/marketplaces (e.g. iOS in-app-purchase).

b) Non-Native App Development – Many 3rd parties offer code libraries and tools to ‘speed up development’. Some of these are in the native language and some are not. Some of these non-native solutions offer the ability to ‘code once (so to speak) and deploy to multiple platforms’.

c) Mobile Web Development – Instead of a standalone application, an experience can be made available via web-browser and development to fit the size of the target (mobile) device(s). With HTML5 much is possible, but in general this is used for less-expressive less-device-specific experiences. It can also be a very inexpensive way to ‘break into mobile’, as you can use assets/code from your existing website..

CROSS-PLATFORM DEVELOPMENT

While the ability to develop one project for multiple platforms offers many advantages in saved development time and ease in maintenance, it also offers many challenges. Designing a compelling application that takes advantage of the unique features of each device and looks polished on the dizzying array of screen sizes out there can be daunting. For Flash-To-Mobile there are many resources on Adobe’s Mobile Devnet to help you learn the basics.

BACKEND

It is possible for an application to be self contained, including all data/assets with the original install. This is common for games. However many projects require internet connectivity. The data/assets loaded can reside on existing servers outside of your control, or can reside on your own servers. Custom backend solutions using typical backend languages (c++, Java, PHP, Python, etc…) may also be required. All of this depends on your particular project. In general any of the development-paths can contact any of these backend solutions, but some may connect more easily than others.

EXAMPLE…

Let’s assume you have a great new game and want to capture a ‘big audience’ with ‘modest investment’. If the application does not require deep-device-integration a recommended choice is to target both iOS (iPad1/iPad2, iPhone3G/iTouch3G, iPhone4G/iTouch4G) and Android (various devices). If your team has Flash expertise the Flash-To-Mobile publish path may be ideal.

FLASH-TO-MOBILE

With Flash CS6 and more-so Flash Builder 4.6, Flash/Flex developers can publish ONE codebase to MULTIPLE platforms. Using Adobe’s AIR 2.7 (latest public release) you can develop many platforms & Devices.

Compatible Target Platform/Devices: Web-Browser (Mac+Windows+Linux+Non-iOS Mobile Browsers), Desktop (Mac+Windows+Linux), iOS (Ipad1+Ipad2, iPhone+iTouch 3rd Generation, iPhone+iTouch 4rd Generation-Retina), Android (Myriad Devices), Blackberry Tablet OS (Blackberry Tablet).

Supported Flash-To-Mobile Device-Specific Features: Flash-To-Mobile does offer view-persistance, data-persistance, video playback, still-camera capture, still-camera-roll save/load, internet access, in-app web-browsing, accelerometer/gyroscope, Microphone, Geolocation, Multitouch, File-system access. Not all devices offer the same features. In the future ‘Native Extensions’ (see below) offer a solution.

Project Setup: A recommended options is one bulky Flex Library with (most) all code and assets, and then one Flex Project *PER PLATFORM*. You add/edit to the library and publish each of the projects as needed. You can test with an mobile-emulator (fastest) window that appears on your computer, or on the device via USB (best to test hardware features like accelerometer. The ‘flash’ code is converted to ‘native code’ (so to speak) before deployment.

Deployment: Upon completion the platform-specific file is uploaded to the platform-specific marketplace (e.g. iTunes’ App Store for iOS). A Flash-to-Mobile project sits along-side native applications. Ostensibly users have no idea the application was developed with non-native tools. The marketplaces do not delineate this or otherwise make that info available in any way to users. The end-user experience can be indistinguishable from a native app (project type and project polish depending).

NATIVE EXTENSIONS

In light of the ‘Device-Specific’ features listed above, Flash-to-mobile currently leaves us without everything we may want to do (e.g. iOS in-app-purchase). The yet unreleased (release date is ‘early October 2011’) Adobe AIR 3.0 will include ‘Native Extensions’. In short, this allows for *ANY* Flash-to-mobile project to access *ANY* feature on *ANY* supported device (Android / iOS / Blackberry Tablet). Developer will require knowledge of both AS3 (flash) as well as the Native language(s) on the target device(s) to add new features. Or your team can find free and premium extensions which the community could share. This is not just for mobile, this technology will also allow AIR on desktop computers and AIR on TV’s to integrate with those devices too.

LINKS

Native Mobile Development

  • Google Android
  • Apple iOS
  • Blackberry Tablet OS

Marketplaces

  • iOS App Store (iTunes)
  • Google’s Android Marketplace
  • Amazon’s Android Marketplace

Non-Native Mobile Development – Flash-To-Mobile

  • Flash-To-Mobile (Using Flash and/or Flex) for iOS/Android/Blackberry Tablet OS… also Desktop/TV/Browser
  • Success Bringing Flash Games to iOS
  • AIR 2.6 (Available in Full Release) – Commonly in use today.
  • AIR 3.0 (Available in Public Beta Now) – Offering Native Extensions and more.
  • Example of Best-Seller Flash-To-Mobile Game for iOS
  • Example of Best-Seller Flash-To-Mobile App for iOS
  • Flash-To-Mobile for iOS – Using SWC files to build large Flash and AIR projects with multiple SWF files

Non-Native Mobile Development – Others

  • Corona for iOS/Android
  • Corona vs Adobe AIR (Great Article)
  • RhoMobile for iOS/Android
  • Appcelerator for iOS/Android
  • Mosync for iOS/Android
  • Phonegap for HTML5 Mobile-Browsers

THE FUTURE

Some of what is coming in the future is listed below.. This may or may not all be included in the very-next tools. Recently Adobe has announced What’s new in Flex 4.6 SDK and Flash Builder 4.6.

I. The Second Coming (Halleluiah) – Flash-To-Mobile Native Extensions

This future feature will ostensibly allow Flash-To-Mobile projects to access *ANY* feature on *ANY* targeted device (e.g. in-app-purchase on iOS).

  • Adobe AIR 3.0 Native Extension – Explained!
  • Adobe AIR 3.0 Native Extension – Demo Mapview on iOS
  • Adobe AIR 3.0 Native Extension – Tutorial 1
  • Adobe AIR 3.0 Native Extension – Tutorial 2

Updated Febrary 23, 2012: See Here…

II. The Second Coming (Halleluiah) – Stage3D


Stage3D (Formerly codenamed ‘Molehill’) is a set of API’s available in the future that will ostensibly allow Flash Browser projects (using Flash Player 11) and Flash-To-Mobile projects (using Adobe AIR 3.0) to show high-grade hardware rendered 3D. Finally, the Flash Platform can truly compete as a 3D gaming engine. The same API (despite the name) can also be used for radically improved 2D gaming performance too.

NOTE: These API’s are low-level and challenging to understand. We expect 3rd parties will wrap this functionality with easy-to-use API’s for free/premium use.

  • Stage3D – Explained!
  • Stage3D – Demo!
  • Stage3D – How-To! (For 3D Gaming)
  • Stage3D – How-To! (For 2D Gaming)
  • Unreal Releases ‘Citadel’ – The first interactive demo of UNREAL engine running in Flash Player.
  • BlackSun Game for Stage3D

Update March 10, 2012: See Here…

III. The Second Coming (Halleluiah) – Air 3.2 = Stage3D for Mobile + Many Stage3D Frameworks

So with AIR 3.2  (See Adobe Press Release) we can use Stage3D for mobile. This means GPU-Accelerated graphics on iOS/Android. I think there is a marketable benefit on getting the Flash Player to compete against other 3D gaming solutions (such as Unity3D) and perhaps compete less with emerging 2D gaming solutions (such as HTML5 gaming) so I can sympathize with Adobe’s (better late than never) focus on 3D for Flash. This article “Why Starling (or any other 2D framework on top of Stage3D)?” explains some really good reasoning.

[tubepress video=”ZPHATCbnHE0″ embeddedWidth=”500″ embeddedHeight=”350″]

Mind-blowing Demo’s of AIR 3.2 on mobile

  • Five AIR 3.2 Stage3D Mobile Demos That Will Knock Your Socks Off 
  • Spaced Away is the first game in the iOS app store to feature Stage3D by developers Falanxia.

Regardless of why, Stage3D is here, and Starling’s power lies in how it uses the Stage3D – first available in Flash 11 and AIR 3.0. Stage3D is designed for GPU accelerated 3D. While its possible to use the Stage3D API’s directly, it is very difficult. There are 3D frameworks for AS3 , but for many game developers we can exploit its power for 2D gaming. That’s why Starling focuses purely on 2D. So an API like Starling helps developers make great content – quickly.

AS3 frameworks use Stage3D for 3D gaming;

  • Flare3D,
  • Alternativa3D,
  • Away3D,
  • Minko

AS3 frameworks use Stage3D for 2D gaming;

  • Starling
  • ND2D
  • M2D
  • AtomEngine
  • Citrus Engine (Recently Upgraded To Stage3D)

Key Articles I’ve written on the subject

  • Intro To the Starling Framework (Read It!)
  • Angry Birds Launches on Facebook with Starling

Stage3D Games

Spaced Away

Spaced Away

Falanxia brings its FWA Award –winning space physics puzzle game to both iPad and your web browser.

Play game Learn more

Angry Birds Facebook

Angry Birds Facebook

Join your friends on Facebook to take out Rovio’s famous pigs with enhanced special effects.

Play game Learn more

Waste Invaders

Waste Invaders

Waste Creative’s tech demo lets you blast aliens at a silky smooth 60 fps, across browsers and iPad, with Stage3D.

Show demo Get the source

Setup Flash Builder For AIR 3.2 Stage3D for iOS/Android

Category: Quick Tips     |     Tags: AIR, Flash, Flex, Mobile

Stage3D was introduced in Flash Player 11. It allows for GPU-Accelerated 2D and 3D performance in the Flash Player that is 1000x faster than before. It was not publicly available for AIR mobile projects until AIR 3.2.

There are lot of new significant features like mouseLock, middle click, right click, silent auto-update and Stage3D on mobile.

Super Easy Setup

  1. Download the new SDK (“Step 2”)
  2. Unzip the new SDK
  3. Open Flash Builder. Open Preferences. Search for “Installed Flex SDKs”. Look at the URL for an existing SDK. See the image below.
  4. Open Finder (or Windows Explorer) to that ‘sdks’ folder. Drag the new SDK next to the existing sdk(s).
  5. Open the same Flash Builder Panel. preferences panel again. Choose ‘add’ and browse to the new SDK. Don’t set it as ‘default’. But for each new project you create, it will be a choice for you to use.

For Step #3

Thats it. Enjoy!

Next Steps

Checkout other related articles.

  • Intro To The Starling Framework For AS3 with Stage3D
  • Angry Birds’ Screams on Facebook with Flash with Stage3D
  • What *IS* Wrong With AIR 3.0 Native Extensions!

Robotlegs Framework Template

Category: Quick Tips, Source Code, Standards & Best Practices     |     Tags: AS3, Flash, Flex, Mobile, Robotlegs

Robotlegs (from Robotlegs.org) is  a great architectural framework for AS3. It works for both Flash and Flex projects. I have been a fan since the beginnings of the framework and I even created the official “Robotlegs Framework Diagram“.

One of the drawbacks of using an architectural framework is the time required to setup the project. To help new developers, veteran developers, and myself, I create and update several templates for Robotlegs (RL). Each is a complete publishable “Hello World” type project. When I start any new RL project I begin with one of these Robotlegs Templates (RLT).

It kicks ass, enjoy!

Screenshots

It is a simple app. (Note images may vary slightly depending on template)

Mix-ins

I combine RL with some other fantastic technologies in some templates.

  • AS3-Signals – Events replacement
  • BabelFX – Language localization
  • Union Platform – Multiplayer

Next Steps

  • RLT_Web_Flex – The original! (See ‘Member Resources’ below)
  • RLT_Web_Flex_AS3Signals – My favorite! (See ‘Member Resources’ below)
  • RLT_Web_Flex_AS3Signals_BabelFX – (See ‘Member Resources’ below)
  • RLT_AIR_FlexMobile_AS3Signals_BabelFX – (See ‘Member Resources’ below)
  • RLT_AIR_FlexMobile_AS3Signals_Multiplayer – (See ‘Member Resources’ below)

Member Resources

[private_Free member]Enjoy this members-only content!

  • RLT_Web_Flex – The original!
  • RLT_Web_Flex_AS3Signals – My favorite!
  • RLT_Web_Flex_AS3Signals_BabelFX
  • RLT_AIR_FlexMobile_AS3Signals_BabelFX
  • RLT_AIR_FlexMobile_AS3Signals_Multiplayer

[/private_Free member]

RMC Primer: Resources to Learn Flash and Flex, Design and Development

Category: Full Tutorials     |     Tags: Flash, Flex

Information Overload ! ! !

As a speaker and consultant, I’m often asked a simple question about the Multimedia – “What should I learn and how should I learn it?” Years back I created a laundry list of resources and would forward it to interested parties. I’ve updated the list and it is below for all to enjoy.

UPDATE: This post is from 2009 and is generally focused on Adobe Flash. It may be useful to other types of developers too.

Part of the trouble with Flash development is that ‘Flash’ can do so many things. I’m lucky to meet talented individuals from a a dozen different disciplines that all use Flash; illustrators, animators, UI designers, hard core coders, professionals, students, teachers, managers, business developers, and hobbyists.

I wanted to take a step back and provide some insight and direction for how each other’s personalities can learn from the free, cheap, (and expensive) learning resources out there. I love to learn and love to teach. Happily I get to do a bit of both each week.

With the Multimedia Primer below, and reader contributed comments below it, I hope we can turn the maze of information overload into a network of sharing to help us all meet our goals.

ULTIMATE PATH LEARNING

Luckily, there are many great resources to learn. Wikipedia is a ridiculous resource. Its goal is to house the sum of humanities knowledge and provide it for free (WOW!). While Jimmy Wales is working on that gem, take a look at the list below. I hope it helps.

The road to learning is not easy. Its easy to get burnt out on a project all day and feel lifeless to sit down at night and learn for learning sake. I invite yo to find and focus on your end goals (whatever that means for you), get inspired to build passion, and burn that passion as you work your ass off to meet your goals.

Thanks in advance to all those who helped me learn in the past and continue to fuel me in the future. If you love or hate any of my links or can suggest others, please leave a comment!

  • BEST WAYS TO LEARN (ANYTHING)
    1. Get excited! Learning about what interests you is like swimming WITH the current.
    2. Get Paid to do it!If you or your manager does not allow for 20% of work time to learn, think seriously about making a major professional change and get on the trendy train of seeking more balance in your life (see # 7.5). When planning projects, don’t just take ones that are easy. Challenge yourself to accept new projects which are calculated-risks balancing familiar core concepts with some new-to-you tasks too.
    3. Get Pressure! Some pressure is good pressure. By placing time-sensitive criteria to specific goals ( I will learn how to float an image in CSS by the 1st day of next month), you are holding yourself accountable. We resist these types of deadlines for only one reason: We are afraid to ‘start’ something we may not finish it. Mark it on your calendar, START IT, and finish it. You’ll be far more thankful at the end of 30 days if you meet a few learning goals than if you managed to watch another dozen repeats of ‘The Office’ on TBS. (Awesome show BTW)
    4. Give Back! Its amazing how much you can learn by helping others. Showing someone a new technique, sharing a favorite book, or other things (like writing an amazing blog post, HAHA!) are all fantastic ways to re-learn the fundamentals, practice articulating concepts, and align your chi.

1. Resources from RMC

Learn from the tutorial resources available for digital software and programming.

  • Get Inspired By A Real-World Portfolio and fine art
  • Learn to Create Your Own Blog (Video)
  • Learn to Program AS3 for Flash & Flex
  • Get Hired By RMC
  • Done!

2. Resources from NowAndThere.com

Learn about lifestyle design, mindfulness, work/life balance, and World Travel. Be a digital nomad!

  • Be a full-time, seasoned professional traveler
  • Learn a foreign language and study in county of your dreams (such as Italy)
  • Make personal and professional mission statements, and annual goals (Set them, and follow-up!)

3. More Resources

INSPIRATION

  • Travel The World
  • TED: Ideas Worth Spreading
  • Des-veloper: Joshua Davis
  • Des-veloper: Erik Natzke

GENERAL DESIGN

  • Learn About Design That Doesn’t Work

GENERAL DEVELOPMENT

  • 10 Things Every Senior Flash Developer Should Know
  • 10 Things Every Web Developer Should Know
  • 10 Skills Developers Will Need in the Next 5 Years
  • Flash / ActionScript Developer Qualifications (Must Haves)
  • Things Every Flash Developer Should Know

CONFERENCES & EVENTS

  • 360 Flex
  • Adobe Max

ADOBE FLASH PLATFORM

  • Adobe Design Center
  • Youtube: “Learning Flash”
  • Lee Brimlow’s GotoAndLearn.com
  • http://www.kirupa.com Tutorials
  • Lynda.com: “Flash”
  • ActionScript.org

ACTIONSCRIPT 3.0 (AS3)

  • Lynda.com: “AS3”
  • Best Book Ever ActionScript The Definitive Guide (ASDG), and also Essential ActionScript 3.0

ADOBE FLEX

  • Adobe Development Center
  • Youtube: “Learning Flex”
  • Lynda.com: “Flex”
  • ActionScript.org

ADOBE FLEX / FLEX WORKFLOW

  • Workflows with Flash Builder & Flash Professional

LEARN ALTERNATIVES TO THE FLASH PLATFORM: Compare/Contrast/Stretch

  • Unity3D
  • Pros & Cons of HTML5 For Gaming
  • HTML5
  • JavaScript
  • AJAX

Perfect Flash CS5 Asset Template for Flash/Flex Workflow

Category: Quick Tips     |     Tags: Flash, Flex

A good designer-developer workflow is incredibly powerful in Flash Platform Development. Isolating the ‘art’ from the ‘code’ will allow both parts of your project to progress with limited dependence on the other. This will lead to more innovative ideas, a more flexible project, and less headaches for staff.

See more on that here.

To encourage good Flash library symbol organization in your artist, a template can be very helpful.

A few fundamental concepts embraced in this template:

  • Linked (important to coders) vs Non-Linked (Who cares about that? – So hide it!)
  • Styles (guided out stuff like specification screenshots) vs Assets (Programmatically important stuff)

Here is a screenshot.

Next Steps

  • Download the source code (See ‘Member Resources’ below) for a simple example.

Member Resources

[private_Free member]Enjoy this members-only content!

  • Download Flash CS5 Empty Assets Template File (For your next project).

[/private_Free member]

Flash-To-Mobile Dev: Flash vs. Flex

Category: Industry News     |     Tags: Flash, Flex, Mobile

Since Flash Professional CS5.5.1 and Flash Builder 4.5.1, its easier than ever to create great cross-platform / cross-mobile content. Flash-To-Mobile (as I generically call this solution) is a compelling choice when targeting iOS/Android and others.

However within ‘Flash’-To-Mobile to mobile development we have a choice in tools (Flash Pro, Flash Builder, FDT, More…), component frameworks (Flex 4.5.x vs Non-Flex), and application frameworks (none, custom, Robotlegs, PureMVC, others…).

Let’s assume we have a Flash-To-Mobile project to be created with Flash Builder. Flash Builder features many types of projects. Some are relevant to mobile development and some are not. For now, let’s consider two. How do we decide between using ‘ActionScript Only’ (Flash) vs ‘Flex Mobile’ (Flex) for the project setup?

THE CHOICES

The Flash vs Flex development paths are possible in both browser and desktop development. But here let’s consider the implications on mobile.

There was a time when the extra k-size of the classes required by the Flex framework and slower run-time performance of Flex components shaped were dramatic factors. Today these are insignificant/marginal factors for many of us with today’s faster internet connections and faster processors. The decision for flex or non-flex depends on other factors as we will see.

When creating a mobile-focused Flash Builder project we have these choices. Let’s take a look at each.

Flash Builder Mobile Project Types

  • 1. ActionScript Mobile Project – DocumentClass extends Sprite
  • 2. Flex Mobile Project – Main class extends ViewNavigatorApplication
    • Blank – This is the most vanilla setup. Its the most ‘raw’ of the Flex Mobile options.
    • View Based Application – Allows for View-Based architecture, but includes no navigation between the views. You must code that yourself.
    • Tab Based Application – Allows for View-Based architecture, and includes button-style navigation between the views automatically.

Flash Builder Mobile Project Options

  • Automatically Reorient – If this is checked then the application will automatically reorient itself between landscape and portrait when the user rotates the mobile device.
  • Full screen – If this is check then the app will launch in full screen mode and hide the status bar at the top of the mobile device.
  • Automatically Scale App By Screen Density (FlexMobile Only) – Selecting this option automatically scales the application and handles density changes when targeting your application across multiple device types with varying screen densities.

1. ActionScript-Only Projects

ActionScript-Only projects extend Sprite and do not include the Flex Framework. You can think of this as the most ‘raw’ starting point for your project.

This is the ideal choice if you don’t need the Flex framework in your project. But how do you know if you need it? If your application uses nontraditional User Interface (UI), for example a game which features oddly shaped menu buttons and key-input for gameplay, it may be best for Action-Script only. Also if your project is not data-intensive (loading, parsing, handling, filtering, binding, etc…) large data sets, it may be best for Action-Script only. Your team’s skills are important to consider too. If you have talented Flash developers with strong AS3 skills, but without Flex experience, it may make sense to use ActionScript only.

2. FlexMobile Projects

Mobile-Only Components?

During the Flex 4.x development cycle Adobe worked on a simplified, more performant set of ‘mobile only’ flex components. This included some, but not all of the standard Flex components. However that project was ended and all mobile-only components removed. Adobe trusted that the run-time would become more efficient, and devices would become faster, so they continued to work on exactly one set of Flex components. So today all of the components work for mobile and non-mobile projects. Advanced developers will notice that there are however different support classes and ‘modes’ for some components to address the unique nature of mobile vs non-mobile projects.

FlexMobile Screens

Mobile devices (phones and tablets) are small compared to our desktop and laptop computers. So designing with less real-estate takes some care. The “screen” metaphor is a solution that divides your application content into ‘screens’ or pages. By uncluttering your app and dividing your content into logical units your users can focus on one screen at a time.

Some Screen Considerations

  • Memory Management – Pushing dozens of screens can eat up all the memory available on the device
  • Transitions – Between screens. Those nice effects that help you create an application like a professional UX Designer
  • Passing data – From one screen to another
  • Preserving State – Of the app when the OS choose to close it
  • Integration with hardware buttons – For example using the Back button of the phone to navigate to the previous screen

ActionScript-Only vs Flex Mobile? – Checklist

Feature/Aspect ActionScript-Only FlexMobile
App’s Mood Game/Creative Business-App
Data Needs None/Few Heavy
UI Style Non-Traditional Traditional
Components None/Custom Many Available/Custom
CSS Capability Text Text, Components, Layout, DPI-,Device-,Platform-Respective

LINKS

More About FlexMobile

  • FlexMobile Views And ViewNavigator
  • Types of Flash Builder Projects
  • First FlexMobile Project: How-To

Flex Mobile Development Tips and Tricks

  • Data Handling
  • Styling Application Tabs and ActionBar

Flex Mobile Skinning

  • Optimized Skinning Basics
  • Handling Different Pixel-Densities
  • Multi-Platform Development

Flash Builder Custom Compiler Arguments

Category: Quick Tips     |     Tags: Flex

For a recent project I had the need for an as3-only swf to ‘preload itself’. See this post.

I solved it, but during that project I reoccurring but unsolved problem arose. How can I create a custom Flash Builder Compiler argument. I googled around and posted on twitter and emailed some colleagues. I found nothing. Perhaps I didn’t know how to ask the question properly (sometimes that happens with coding questions).

Recently I found the solution on another post here. Very cool.

I created a quick demo which summarizes my findings and posted below. But here is the 2-step gist.

1. Set Compiler Argument

Wherever you configure mxmlc (Project properties of Flash Builder or FDT or other Eclipse-based-tool or command-line, set a custom compiler argument.

[actionscript3 light=”true”]-define=FOO::bar,27[/actionscript3]

2. Use the Compiler Argument

Then anywhere in your AS3 you can access this variable.

[actionscript3 light=”true”]trace ("FOO::Bar: " + FOO::bar); //this will show ’27′[/actionscript3]

Advice

Alternatively you could use an external configuration file to do this. In my needs I needed access to this on ‘line #1’ of my code. I didn’t have time to wait for a configuration file to load and be parsed.

You could also create a class that returns values of

FOO::bar

for you. You can have something like

[actionscript3 light=”true”]myClass.getFooBar()[/actionscript3]

return that for you. This way you don’t have to spread the odd ‘::’ syntax around your code, and you can more easily change the compiler argument syntax with minimal AS3 changes.

Next Steps

  • Download the sourcecode (See ‘Member Resources’ below) for a simple example.

Member Resources

[private_Free member]Enjoy this members-only content!

  • Download the CustomCompilerArgumentsDemo.zip Flash Builder 4.5 as3-only Project.

[/private_Free member]

Using Embed & AssetManager for Flash/Flex Workflow

Category: Quick Tips     |     Tags: Flash, Flex

A good designer-developer workflow is incredibly powerful in Flash Platform Development. Isolating the ‘art’ from the ‘code’ will allow both parts of your project to progress with limited dependence on the other. This will lead to more innovative ideas, a more flexible project, and less headaches for staff.

There are many ways to incorporate your assets into a Flex (or AS3-Only project). Run-time loading reduces the footprint of your primary swf, but compile-time assets are more straightforward to implement and deploy.

For my projects (often AS3-Only projects authored OUTSIDE of the Adobe Flash CS5 program), or Flex 4.x projects – the assets are created in Flash CS5 and imported at compile-time.

The Flash ‘Embed’ tag handles this. There are many flavors of this. What I like is to have one fla generating one swf, that contains linked symbols (MovieClips and Sprites). I extend ONLY MovieClip and Sprite within Flash. For custom classes, I’ll make the connection between the code and the asset outside of Flash FLA. This reduces the ‘code’ that is in the faces of your artist, and reduces any programatic reason to open the Flash FLA. Thus, your artists can work in Flash-IDE and your developers can work not-in-Flash-IDE (Flash Builder, FDT, FlashDevelop, whatever…)

FYI, I use swf, not swc for one reason. The swc makes the assets available (in intellisense) in a global sense. I find that to be unnecessarily confusing. I like all the assets to be accessed only through the AssetManager class.

FYI, the AssetManager, is a nice buffer. Allowing you to have unique names for linkage in the FLA and Class names in the AssetManager (if desired). Over time, one can change without affecting the other, and without having to change code spread throughout your application.

Next Steps

  • See the sourcecode (See ‘Member Resources’ below) for a simple example project and assets file.

Member Resources

[private_Free member]Enjoy this members-only content!

  • Download this FDT 3.x AssetManagerDemo project containing all files. For Flash Builder, create a new project, unzip the download and drag in the files.
  • Download Flash CS5 Empty Assets Template File.

[/private_Free member]

Flash Builder Debugger Can’t Connect? Now It Can!

Category: Quick Tips     |     Tags: Flex

$#^& Debugger!!!

I can’t tell you how many times I’ve had a Flex project that stopped being debuggable. The App could be published from Flash Builder 4 as ‘Run’ or as ‘Debug’ as always, but in the latter there would be no connection made. This delays the project build and you have to work around the missing ‘trace()’ functionality.

Next Steps

  • This solution in the link (See ‘Member Resources’ below) worked great. It works for my MAC too! And I blog about it hoping only that someone finds the solution more readily now.

Member Resources

[private_Free member]Enjoy this members-only content!

  • http://therush.wordpress.com/2008/03/11/resolved-flex-builder-3-debugger-stopped-working/

[/private_Free member]

Page 1 of 212

Tag

3D AIR API AS3 AS3.5 AssetStore Augmented Reality Business C# Charity Debugging Design Patterns DevDiary ECS Architecture Experimental Flash Flex Game Design Game Design Prototypes Games GUI HTML5 Java Loom Mobile MVCS Architecture Optimization Project Planning PushButtonEngine ReactiveExtensions Review Robotlegs Smash Testing Unity3D UnityApplicantTest WordPress WordPress Plugin

Brazilean Developers

  • Abendita.com
  • dclick.com.br
  • dm9.com.br
  • Fellyph Cintra
  • IgorCosta.org
  • MonadaSolucoes.com.br
  • PossibleWorldwide.com.br
  • Unit9.com

Developers

  • Adobe Blogs
  • Ben Forta
  • Colin Moock
  • Enrique Duvos
  • Flash Mobile Blog
  • Jess Freeman
  • Kevin Hoyt
  • Lee Brimelow
  • Paul Trani
  • Quasimondo
  • Renaun Erickson
  • Ryan Stewart

Free Assets

  • Free Sounds
  • HasGrafics

HTML5 Games

  • Closure JS Library
  • Eloquent JS Manual
  • Game Framework – CraftyJS
  • Game Framework – EaselJS

Italian Developers

  • alchimedia.com
  • corlan.org/
  • creativesource.it
  • dimix.it
  • fabiobiondi.com
  • gnstudio.com
  • Interpreting-tech.com/bemobile/
  • leonardorisuleo.info
  • lucamascaro.info
  • mart3.org
  • mxml.it
  • nxn.it
  • pirosoft.it
  • Preload.it
  • sonnati.wordpress.com/
  • webgriffe.com

Products

  • Adobe.com
  • Amazon Kindle E-Reader
  • ElectroServer
  • F*CSS
  • Flash Development Toolkit (FDT)
  • O'Reilly PureMVC Book
  • Samsung Galaxy Tablet
  • Unity3D

RMC

  • RMC Consulting

Spanish Developers

  • Flash Adictos
  • HTML Cinqo
  • Tutoriales Flash

Tutorial

  • Active Tuts
  • AS3-to-Unity3D Training Videos
  • Doing 2D in Unity3D
  • Learning C#
  • Unity3D Tutorials

Unity3D Games

  • AS3-to-Unity3D Training Videos
  • Doing 2D in Unity3D
  • Learning C#
  • Matt Eley's Blog
  • Unity3D
  • Unity3D Tools
  • Unity3D Tutorials

Interesting links

Besides are some interesting links for you! Enjoy your stay :)

Latest Portfolio

  • Coins And PlatformsMarch 19, 2014, 6:04 am
  • Paddle SoccerMarch 2, 2014, 9:13 pm
  • Spider StrikeFebruary 21, 2014, 4:19 am
  • Custom Game System APIJuly 8, 2013, 8:05 am

Latest News

  • RMC Primer: Everything Virtual Reality (VR)September 3, 2016, 10:29 am
  • Unity3D Architectures: EntitasJuly 29, 2016, 11:15 pm
  • RMC Primer: Get A Job In Game DevelopmentAugust 19, 2015, 10:18 am
  • Unity UI: Overview – Part 1 of 3December 10, 2014, 9:55 am

Archive

  • September 2016
  • July 2016
  • August 2015
  • December 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • December 2012
  • October 2012
  • September 2012
  • July 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • October 2011
  • September 2011
  • August 2011
  • June 2011
  • April 2011
  • March 2011
  • January 2011
  • December 2010
  • October 2010
  • September 2010
  • April 2010
  • March 2010
  • January 2010
  • October 2009
  • August 2009
  • June 2009
  • May 2009
  • April 2009
  • January 2009
  • December 2008
  • November 2008
  • August 2008
  • May 2008
  • April 2008
  • February 2008
  • January 2008
  • December 2007
  • November 2007
  • October 2007
  • August 2007
  • May 2007
  • January 2007
  • October 2006
  • April 2006
  • March 1999

© Copyright 2006 - 2023 - Rivello Multimedia Consulting - RMC by Samuel Asher Rivello