Sunday, September 22, 2013

5. Installing and Configuring

When people think of Adobe Flash, they usually say something like "Isn't that dead?"
For better or worse, Adobe has kept the name Flash to describe two completely different technologies, Adobe Flash Player and Adobe Flash Development products. The first is a consumer product and the later are professional products. So it makes sense that most people do not even know that the professional products even exists; and therefore most people do not know the power they have.

Flash player is not dead! In fact, it now has the abilities of the most advanced 3D gaming systems. It does not try to complete with HTML either. If you want to build a website, use HTML. If you want to build a high end application that runs on EVERYTHING, use Flash. 

You might be asking: What does Flash have to do with Apache Flex? 

As I explained in an earlier blog, Apache Flex's engine is nothing without a development environment. Since Adobe originally built Apache Flex, Adobe has made it so that you can also compile your application directly from Adobe Flash Professional, a design and animation product. Therefore, you can build a simple development environment with simple design and animation using Flash Professional. But, to build high end applications, DO NOT use Flash Professional as your code editor.

The diagram below outlines the Flash Development environments using three code editors that can generate mobile, tablet and websites (in the form of an HTML file and a "swf").

Compiling using Flash Professional, Flash Builder and Flash Develop 

Technically, the Flash Compiler is currently known as the "Falcon" compiler. A new product called Falcoln JS, under development will allow users to generate HTML / JavaScript from the same Flash development environments.
MXML and Actionscript are the languages that you can use to code your application.  In addition, Apache flex also supports Java, C++, C# and Objective C languages too. 

You are now ready to choose your development environment. If you wish, you can download a code editor from the links I provided in the previous post. Or, you can simply follow along and see how easy it is as I continue. 

Adobe Flash Builder

Most of my examples will be using Flash Builder. I will include project files and examples using Flash Develop in future blog posts. If you choose to use Flash Builder, you can follow along as I explain each step.

Once you install your application, you can create a new project using the File \ New menu (in Flash Builder).

 


























As you can see, you can create many different projects. If you are building a simple application that you want to work on all mobile and tablets, choose Flex Mobile Project. If you want a simple application for a websites, choose Flex Project. If you are building a high end application, you will actually be building many projects to support your entire application. For now, lets start with a Mobile Project.

If you use Flash Develop, you would create a new project using the Project menu. As you can see, it has many of the same choices. 

Flash Develop - New Project Dialog












Once you create a project, name it and save it, you will see the following buttons on the top menu (in Flash Builder). 





These buttons compile and run your application on your connected device or through a simulator on your computer. The buttons from left to right are Debug, Run, Profile. You will use Debug most of the time. To see the application run at the speed that it will when it is finished, choose Run. To test the memory and performance of the application, choose the Profile button.

When you are finished writing your application, choose the Export Release Build from the Project menu.

If you choose Debug with a Mobile project, can choose from many configured mobile devices as you can see below. You can also add new ones as they are released. This is not the full list of supported devices, just the ones I have configured to be tested.



Which language do I choose?

Do you already know HTML? if so, you already know the basics of MXML. If not, I will explain everything in later posts.

If you need the performance that is required to deliver a high end 3D game with lots of graphics, you will need to choose Actionscript with NO MXML. If this is not the case, you can choose MXML with Actionscript.

If you are building a high end application, you will need to separate the application into multiple projects. Each one can be have their own language and are independent of the others.

Here is an example of project files needed for a high end multi-platform application with Apache Flex.
  1. Data Model Project: Written with Actionscript.
  2. Test Suites Project: Written with Actionscript.
  3. Mobile Application View and Controllers: Written with MXML and Actionscript.
  4. Web Application View and Controllers: Written with MXML and Actionscript.
The information in your application is managed by the Data Model Project that generates a library file that the other projects use. The Test Suites Project runs automated tests against the library file. The last two projects are responsible for the logic to run and display on the specific platforms. If an advanced technique is required, it can be written for the specific device using C++, Java and Objective-C then included with one of the last two projects.

In my next blog I will discuss the topic of backing up data using a version control system and data repository, one of the most important aspects of development. 

 PREVIOUS -- NEXT

2 comments:

  1. hi, congrats for the article, im a flex developer and i need to create a mobile application, i would like to create one code and run in most environments as possible, like you said flex application can run in android, ios, even in some TVs, but my question is the growing market of windows phone devices, flex will not support them? do you have any news about that? thanks

    ReplyDelete
    Replies
    1. Sorry for the delay, I just read your question. Adobe is considering adding Windows 8 Modern UI for the Air next release. There is an active suggestion on Adobe's Feature development tracking site at: https://bugbase.adobe.com/index.cfm?event=selectBug&CFGRIDKEY=3648920

      Also, in March 2013, Microsoft started enabling Flash Player on Windows surface by default: http://techblog.tv/enable-microsoft-surface-flash-support-web-sites/

      Delete