Archive for the ‘Flash Builder Users Group’ Category

Going to the cloud has really expanded my list of options. I never dreamed I would be building Oracle databases and then teaching that technology to my users group (now reorganized from livelyfbug to Codemasters).


Oracle makes it easy (, and Amazon makes it easy ( So for pennies you build it online with Oracle and then shoot it up to Amazon for mobile deployment as a restful service using JSON objects.Apex online is free and Amazon has developer accounts for small usage. But be careful, if you check the wrong thing and turn on the service you could be in for a big bill! It happened to me 3 years ago – $100 over the weekend. OOPS!

Pushing excel to a database is really easy using APEX, check out the following tutorial on how it’s done:

If you want to learn more, this is the theme for my users group (now Codemasters) on Saturday. Here is a partial agenda:

Place and Time: Scheben Branch Library in Florence, Ky at 9:00 AM in the second floor conference room

Directions:US highway 42 in Union across from Union Kroger

Theme: From Excel to a Database

CMOD: Michael Lively

Speaker 1: James Lively – Code Breaker, Using Flash to Create a HTML5 Animation

Evaluator: Elyse Adams

Speaker 2: Richard White – Code Breaker, Cloud Data Base

Evaluator: Bill Luxon

Syntax of the Day: Cloud

General Evaluator: Chad Wooten

In addition, I will be handing out Codemasters materials and eval sheets.


On Saturday (7/28/12) at 9am at Panera Bread on Houston Rd in Florence, we will be having our Flash Builder Users Group. I will cover:

1) Using Codiqa to rapidly build HTML5 apps (
2) Creating HTML5 Animations with Adobe Edge (
3) Injecting pages using Backbone.js for Mobile Apps (releasing a few Youtube videos on this)
4) Developing the Flowers Bread iPad App (distributing the source code)

See you there – Mike

Meeting 6/16/12

Posted: June 14, 2012 in Flash Builder Users Group

This Saturday (6/16/12) at Panera Bread on Houston Rd in Florence Kentucky at 9am, I will be doing Windows 8 and Mobile Interface training. To log in remote use the following Adobe Connect link:

In addition to the Windows 8 training, I’ll discuss how you can make money building Metro Apps and I’ll be building a Mobile interface from scratch using JQueryMobile in Visual Studio.

See you there.


This tutorial shows you how to tap into your phone’s sensors by using Phone Gap and HTML5. Here you’ll build a simple Accelerometer and Geo-locator for cross platform deployment. The Visual Studio 10 source file is attached.

What’s Phone Gap?

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript. Phone Gap lets you use a single code base to publish to multiple platforms.


What you’ll be doing?

You’ll build your application in HTML and JQueryMobile using the Windows 7 Phone SDK in Visual Studio 10 and the cordova (or phone gap) JavaScript package. Then you’ll zip the www folder and upload it to the Phone Gap Build, here all the major phone applications will be created.

The API’s you’ll be accessing can be found (along with documentation) on the Phone Gap site ( and are: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, and Storage.

Note: When Adobe purchased nitobi it transferred Phone Gap to Apache Software Foundation and changed the name to Cordova. Cordova like Phone Gap is open source.

Getting Started

1. First download and install the Windows Phone SDK into Visual Studio 10.

2. Download Cordova (Phone Gap) from


3. Unzip the download above ( and navigate to


Note: In this case we choose the windows folder since we are developing using the Windows Phone SDK. But it doesn’t matter, all you are doing is creating an html page for the phone gap wrapper. You could have done the development in another platform.


Leave the as a zip file and copy and paste it into Visual Studio’s Project Templates -> Silverlight for Windows Phone folder

The full path is:

Documents->Visual Studio 2010->Templates-> Project Templates -> Silverlight for Windows Phone

If the Silverlight for Windows Phone folder does not exist go ahead and create it.

4. In Visual Studio 10, create a new project and choose Silverlight for Windows Phone (CordovaStarter). Name it Geolocator and hit OK.


A basic phone web structure will be created which contains the cordova JavaScript package and a basic html index page, as shown below in the Solution Explorer:
5. Download JQuery ( and JQueryMobile ( and drag them along with the JQueryMobile images into the www folder (as shown below) and add their references to your html page (see the attached source files).

HTML Page References to be added (in your index.html page)

  1.   <link rel=”stylesheet” href=””/>
  2.  <script src=”jquery-1.7.1.js”></script>
  3.  <script src=””></script>

Note: Remove the master.css link reference since you are using as your style sheet instead.

You are now ready to start programming in JQueryMobile, but wait there are other JavaScript libraries you can program in. Here are a few other JavaScript alternatives to JQueryMobile (just in case you want a little more chrome): Sensa Touch, JqTouch, KendoUI.

6. In the index.html page, the onDiviceReady method starts up when your device is ready. To it, add two navigator methods watch Acceleration and watch Position. These methods listen for changes to your Accelerometer and Geo-locator sensors and sends them to an onSuccess method as shown below in the code:

  1.  function onDeviceReady() {
  2.            //document.getElementById(“welcomeMsg”).innerHTML += “Cordova is ready! version=” + window.device.cordova;
  3.            console.log(“onDeviceReady. You should see this message in Visual Studio’s output window.”);
  4.            var options = { frequency: 1000 };  // Update every 1 seconds
  5.  navigator.accelerometer.watchAcceleration(onSuccessAccl, onError, options);
  6.  navigator.geolocation.watchPosition(onSuccessGeo, onError, options);
  7.        }

7. Then add the following onSuccess methods for the Accelerometer, Geolocation sensors and error method:

  1.   function onSuccessAccl(a) {
  2.            $(‘#aX’).html(a.x);
  3.            $(‘#aY’).html(a.y);
  4.            $(‘#aZ’).html(a.z);
  5.            $(‘#aTime’).html(a.timestamp);
  6.        };
  7.        function onSuccessGeo(p) {
  8.            $(‘#lat’).html(p.coords.latitude);
  9.            $(‘#lng’).html(p.coords.longitude);
  10.        };
  11. function onError() {
  12.     alert(‘onError!’);
  13. };

8. In the body tag of index.html add some JQueryMobile magic for formatting the data output:

  1. <body>
  2.         <div id=”home” data-role=”page”>
  3.             <div data-role=”header”>
  4.                 <h1>Sensors</h1>
  5.             </div>
  6.             <div data-role=”content”>
  7.                Accelerometer and Geolocation!
  8.                <br />
  9.                <p>Accelerometer Data</p>
  10.                <p id=”aX”></p>
  11.                <p id=”aY”></p>
  12.                <p id=”aZ”></p>
  13.                <p id=”aTime”></p>
  14.                <br />
  15.                <p>Geolocation Data</p>
  16.                <p id=”lat”></p>
  17.                <p id=”lng”></p>
  18.             </div>
  19.             <div data-role=”footer” >
  20.                 <a href=”#dialogpage”>Tech Footer</a>
  21.             </div>
  22.         </div>
  23.     </body>

9. Finally, in the properties folder change the WMAppManifest.xml file by adding a sensors tag as shown below.

Test the program by running Ctrl+F5 (Debug-> Start Without Debugging).
The Windows Phone has an Accelerometer simulator that helps you see the data change in 3D as shown below:

The Windows Phone has a Location simulator that lets you see the lat long change.

10.  Once your program is complete, zip the www folder and send it to Phone Gap Build to make it cross platform…more on that in our next tutorial!

Ted Landis, a GAIC java programmer from the towel, came over today for lunch to learn how to create mobile pages in Visual Studio 11. I’m in love (not with Ted) with Visual Studio 11. Microsoft has really stepped up to the plate in HTML5/JavaScript Development. Here is what we covered (note: this tutorial is still in draft form – which means I can’t spell):


Running JQueryMobile in Visual Studio using MVC4 – Getting Started by Michael Lively


In this tutorial we will use Visual Studio 11, JQueryMobile, MVC4, and the user agent. Let’s start by downloading everything.

  1. Download and Install Visual Studio 11 Beta and save to disk



2. Extract and Install using 7-Zip (or whatever works best for you)


3. Open Visual Studio 11 -> File -> New -> Project…->Choose ASP.NET MVC4 Web Application and name your project (TedsRazor in our case) ->Empty ->Razor ->OK and your project will be created. Note: Razor became available with MVC3.




4. When the package opens right click on the reference icon and choose Manage NuGet Packages (you can also do this in the console).



5. Choose online and search for JQuery Mobile and install the package. JQueryMobile will not be installed in your scripts library.


6. Note: If a package does not exist in NuGet (three.js for example) then download it to your machine (put it on the desktop for example), name it appropriately, and drag it from your desktop into your Scripts folder.





7. Right Click on the Controller folder and add a HomeController.


namespace TedsRazor.Controllers


public class HomeController : Controller



// GET: /Home/


public ActionResult Index()


return View();





The ActionResult will go to the Index page and return its View. Let’s now add that View.


8. In the Views folder create a Home folder. Right click on the Home folder and add an Index View. Make sure you choose the Razor Engine. The Razor engine will be our bread and butter for all development projects that we do. A Razor file had the extention cshtml and allows you to mix c#, html, and JavaScript (good by code behind). We’ve finally caught up with PHP!

There is no model at this time so don’t check Create a strongly-type view, this is not partial view and check Use a layout or master page. This will use the layout page which is in your shared folder that can be used for all your views. And it holds the base html page. Run the page by clicking Ctrl-f5. You should see the word Index appears on the screen. You can now write razor code.

9. Now to create a Mobile page all you have to do is create a Layout and Index page with the .Mobile separator. The program will determine if you are on desktop or Mobile and serve up the appropriate pages. Thus you can use the same control and model logic for both your Desktop and mobile application. Go ahead and create your Mobile Index and layout pages.

10. To familiarize yourself with JQueryMobile go to There are series of tutorials and sample code on this site that will help you get started. You’ll be using the data-role tag extensively in programming JQueryMobile.


11. In order to run JQueryMobile you must have the correct references in your layout page so drag the appropriate JQueryMobile references from your Scripts page over to your _Layout.Mobile.cshtml’s head tag (which is in your shared folder). Note: The jquery javascript package has to appear before the jquerymobile package since jquerymobile requires jquery (position is relevant here).

Viewport tag (so program resizes to device – desktop will ignore this tag)


<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />


Styles (drag from content folder)


<link rel=”stylesheet” type=”text/css” href=”../../Content/” />

<link rel=”stylesheet” type=”text/css” href=”../../Content/” />


Scripts (drag from scripts folder)

<script type=”text/javascript” src=”../../Scripts/jquery-1.6.4.js”></script>

<script type=”text/javascript” src=”../../Scripts/”></script>


Full _Layout.Mobile.cshtml page

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4.  <meta charset=”utf-8″ />
  5.  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
  6.  <title>@ViewBag.Title</title>
  7.  <link rel=”stylesheet” type=”text/css” href=”../../Content/” />
  8.  <link rel=”stylesheet” type=”text/css” href=”../../Content/” />
  9.  <script type=”text/javascript” src=”../../Scripts/jquery-1.6.4.js”></script>
  10.  <script type=”text/javascript” src=”../../Scripts/”></script>
  11. </head>
  12. <body>
  13.  <div data-role=”content”>
  14.              @RenderBody()
  15.  </div>
  16.  <footer>
  17.              <h4>Footer Test Stuff</h4>
  18.  </footer>
  19. </body>
  20. </html>

Index.Mobile.cshtml page being served up

  1. @{
  2.  ViewBag.Title = “Mobile Test Page”;
  3. }
  4.  <div data-role=”page”>
  5.  <div data-role=”header” data-theme=”b”>
  6.             <h1>Mobile Test Page</h1>
  7.  </div>
  8.  <div data-role=”content” data-theme=”e”>
  9.             <ul data-role=”listview” data-inset=”true” data-filter=”true”>
  10.                 <li><a href=”#”>Books</a></li>
  11.                 <li><a href=”#”>Kindle</a></li>
  12.                 <li><a href=”#”>Safari</a></li>
  13.                 <li><a href=”#”>Amazon</a></li>
  14.             </ul>
  15.             <a href=”#” data-role=”button” data-theme=”b”>Click Here</a>
  16.  </div>
  17. </div>



12. To Run your mobile program in your browser set up your user agent (see my blog post on how to do that)





You a razor mobile programmer!




We had a very successful 3D animation seminar this weekend (livelyfbug). We had a big group both online (on Adobe Connect) and at Panera Bread. Here are the notes from the seminar:


3D Animation Seminar by Mike Lively (Notes)

Introduction:  Three.js is an easy way to create 3D browser animation. Even though it is among a myriad of 3D JavaScript packages being created these days, it has the advantage of being rooted in a robust framework similar to Papervision3D, Away3D, and Molehill. It’s author Mr. Doob started off years ago creating PV3D experiments (me too) moved to Away3d, Molehill, and then to HTML5. Three.js detects if your browser will support Webgl and if not switches to the canvas tag.


The Three.js engine comprises about 180 pages of compressed JavaScript code and can be downloaded from Github at

In addition, please download the Three.js Boilerplate found at

You may want to view Mr. Doob’s learning blog as well at:


  1. Three.js is great for creating 3D animation experiments and for making 3D games. Thee.js makes many things that were hard to do in Flash versions of 3D easy. In addition, there are tons of examples in the three.js download which you can reverse engineer to create your own experiments. Over the next few months Jonathan and I will be producing a series of 3D experiments and Learning Games. Ultimately, our goal is to create a 3D learning management system.
  2. Examples

Unzip three.js go to the examples folder and run:

  1. webgl_terrain_dynamic.html


  2. webgl_morphtargets_md2_control.html
  3. webgl_morphtargets_md2.html


  4. webgl_loader_collada_keyframe.html


Please take some time now and click through some of the examples.

A. Elements of 3D



In three.js the important elements are the scene, camera, materials, lights, and renderer.

Materials are the key – they are being rendered!

B. Boiler Plate

When creating 3D experiments you don’t want to reinvent the wheel every time you write a program, starting with a boiler plate can be helpful.

Open up the boilerplate provided by Mr. Doob, run it, and then we will go through it line by line.


  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>learningthree.js boiler plate for three.js</title>
  5.         <meta charset=”utf-8″>
  6.         <meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
  7.         <script src=”vendor/three.js/Three.js”></script>
  8.         <script src=”vendor/three.js/Detector.js”></script>
  9.         <!– –>
  10.         <script src=”vendor/three.js/Stats.js”></script>
  11.         <script src=”vendor/threex/THREEx.screenshot.js”></script>
  12.         <script src=”vendor/threex/THREEx.FullScreen.js”></script>
  13.         <script src=”vendor/threex/THREEx.WindowResize.js”></script>
  14.         <script src=”vendor/threex.dragpancontrols.js”></script>
  15.         <link  href=”css/main.css” rel=”stylesheet”/>
  16.     </head>
  17. <body>
  18.     <!– three.js container –>
  19.         <div id=”container”></div>
  20.     <!– info on screen display –>
  21.     <div id=”info”>
  22.         <div class=”top”>
  23.             <a href=”” target=”_blank”>LearningThree.js</a&gt;
  24.             boiler plate for
  25.             <a href=”” target=”_blank”>three.js</a&gt;
  26.         </div>
  27.         <div class=”bottom” id=”inlineDoc” >
  28.             – <i>p</i> for screenshot
  29.         </div>
  30.     </div>
  31.     <script type=”text/javascript”>
  32.         var stats, scene, renderer;
  33.         var camera, cameraControl;
  34.         if( !init() )    animate();
  35.         // init the scene
  36.         function init(){
  37.             if( Detector.webgl ){
  38.                 renderer = new THREE.WebGLRenderer({
  39.                     antialias        : true,    // to get smoother output
  40.                     preserveDrawingBuffer    : true    // to allow screenshot
  41.                 });
  42.                 renderer.setClearColorHex( 0xBBBBBB, 1 );
  43.             // uncomment if webgl is required
  44.             //}else{
  45.             //    Detector.addGetWebGLMessage();
  46.             //    return true;
  47.             }else{
  48.                 renderer    = new THREE.CanvasRenderer();
  49.             }
  50.             renderer.setSize( window.innerWidth, window.innerHeight );
  51.             document.getElementById(‘container’).appendChild(renderer.domElement);
  52.             // add Stats.js –
  53.             stats = new Stats();
  54.       = ‘absolute’;
  55.       = ‘0px’;
  56.             document.body.appendChild( stats.domElement );
  57.             // create a scene
  58.             scene = new THREE.Scene();
  59.             // put a camera in the scene
  60.             camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
  61.             camera.position.set(0, 0, 5);
  62.             scene.add(camera);
  63.             // create a camera contol
  64.             cameraControls    = new THREEx.DragPanControls(camera)
  65.             // transparently support window resize
  66.             THREEx.WindowResize.bind(renderer, camera);
  67.             // allow ‘p’ to make screenshot
  68.             THREEx.Screenshot.bindKey(renderer);
  69.             // allow ‘f’ to go fullscreen where this feature is supported
  70.             if( THREEx.FullScreen.available() ){
  71.                 THREEx.FullScreen.bindKey();
  72.                 document.getElementById(‘inlineDoc’).innerHTML    += “- <i>f</i> for fullscreen”;
  73.             }
  74.             // here you add your objects
  75.             // – you will most likely replace this part by your own
  76.             var geometry    = new THREE.TorusGeometry( 1, 0.42 );
  77.             var material    = new THREE.MeshNormalMaterial();
  78.             var mesh    = new THREE.Mesh( geometry, material );
  79.             scene.add( mesh );
  80.         }
  81.         // animation loop
  82.         function animate() {
  83.             // loop on request animation loop
  84.             // – it has to be at the begining of the function
  85.             // – see details at
  86.             requestAnimationFrame( animate );
  87.             // do the render
  88.             render();
  89.             // update stats
  90.             stats.update();
  91.         }
  92.         // render the scene
  93.         function render() {
  94.             // update camera controls
  95.             cameraControls.update();
  96.             // actually render the scene
  97.             renderer.render( scene, camera );
  98.         }
  99.     </script>
  100. </body>
  101. </html>


C. Primitives

In the boiler plate change the primitive from a torus to a sphere by changing the geometry.

var geometry = new THREE.SphereGeometry( 100, 14, 7, false );

And then change material

new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( ‘textures/land_ocean_ice_cloud_2048.jpg’ ) } ;




Learn to look at Constructors! Not everything is in the documentation.

D.  Booleans (Easy to Integrate JavaScript Libraries with three.js)




E. Lights Example

From examples three.js: canvas_lights_pointlights.html



F. Importing a 3DSMax Object

Create your 3D object in 3DSMax and export it as a Collada file and then import it into three.js using the three.js Collada importer – it worked great.




var loader = new THREE.ColladaLoader();

  1. loader.options.convertUpAxis = true;
  2. loader.load( ‘aln/alncl.dae’, function colladaReady( collada ) {

dae = collada.scene;

skin = collada.skins[ 0 ];


dae.scale.x = dae.scale.y = dae.scale.z = 0.06;




} );

Also view webgl_loader_collada.html



Recently, I moved one of my user group mobile projects from PHP to C# (this is what I do when I get home from work for fun – I guess I chose the right profession). There are a number of reasons for switching from PHP, but basically I’m tired of piecing everything together. Plus, Visual Studio 11 (now in beta) offers a nice IDE for JQueryMobile complete with MVC4.

In addition to moving their project over to C#, I’m also showing them how to develop sites in the browser as opposed to using emulators.



Browser development is not a substitute for emulators or the real device, but if all you are working on is HTML and JavaScript it will really speed up things. Here’s what you do:


  • Change the User Agent of the browser to match your mobile device
  • Resize the window to be the same size as your mobile device screen, and use the browser’s built in developer tools to debug and test your site
  • Add a custom device if your device is not in the list


Sounds easy enough. But it depends on what browser you are using. For example, IE has a user agent switching feature already built in. Firefox requires an add-on.


Here’s how you do it in Firefox:


1. Install the user agent add on:


2. After restarting Firefox, choose your device or add a new user agent by clicking Edit User Agents…



Here’s the click path you need to follow: Default User Agent ->Edit User Agents… ->New ->New User Agents.


3. After clicking New User Agents, put in a description and paste in your user agent string. Here is one I used for an Android device (Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; HTC_DesireS_S510e Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1)



4. Hit OK, and then go back and choose your custom device. In my case it was Android.


5. Then resize your browser and navigate to a site (such as CNN below) and you will now be served up the mobile version of that site, as shown below:




It’s that easy. Here are a few resources to help you get started (and a few user agent strings to play around with).


Mobile Web Development Resources:


Mobile Web Best Practices:

Quirksmode Site:

User Agent Strings:


HTML5 and Related Web Applications:



Geolocation API:

Local Storage API:

Offline Application Cache:


Vendor-Provided Resources:


Getting Started with iOS Web Apps:


Web Applications Overview:

Targeting Screens from Web Apps:


IE Developer Guide:

Designing Web Sites for Phone Browsers (PDF):


Fennec (Mobile Firefox) Home Page:


Opera Mobile Home:

Opera Mobile 10 Intro:



Mobile Development on Desktop



User Agent Tools






User Agent Strings:

IE Mobile User Agent

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; <make>; <model>)


iOS User Agent

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

Mozilla/5.0 (iPod; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10


Opera Mobile User Agent

Opera/9.80 (S60; SymbOS; Opera Mobi/498; U; en-GB) Presto/2.4.18 Version/10.00


Android Chrome Mobile User Agent

Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; HTC_DesireS_S510e Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1


Mozilla Fennec User Agent

Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv: Gecko/20101203 Mozilla/5.O(Android;Linux armv7l;rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0 ( .NET CLR 3.5.30729)

Mozilla/5.0 (Maemo; Linux armv7l; rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0

Mozilla/5.0 (Android; Linux armv7l; rv:2.0) Gecko/20110103 Firefox/4.0 Fennec/4.0

BlackBerry User Agent

Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko) Version/ Mobile Safari/534.1+

Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko)


Note: Both and pluralsight have a great set of video tutorials on html5, JavaScript, and MVC if you are looking to get cranking in mobile.