1. Hit the Start Record button
2. Use your PC, program, or set of programs (each mouse click will register with the application and take both a screen capture of your monitor(s) as well as record meta data involving the context of the click)
3. Hit the Stop Record button
4. Save the output file

 
The output file is saved as a zipped folder which contains a .mht (MHTML) file. This file can then be viewed in a browser. This makes the instructions both accessible, easy to share, and easy to digest (as the file contains step-by-step screen captures). I think this is a very cool and easy to use utility. Despite the fact that this utility is inferior to video screen capture software, it is much cheaper, lighter, and accessible. I see many use cases for this tool, but I know PC help desk and PC customer service agents could benefit greatly from its use (for both providing instructions to clients and capturing steps from them). A simple Google search can lead you to stand alone versions that work on XP or Vista (I’m unsure if any versions of OSX have a similar product or even a better solution for that matter). Hope you find some good uses for it, peace.

• ip address
• my ip address
• get ip address
• what is my ip address

 
I think you get the idea. Anyway, just a cool trick I stumbled upon.

Introduction

I’ve had some ideas for personal apps floating around my head the past few months, but I hadn’t gotten around to building any of them until now. There were numerous times I found myself using an app on my phone to execute a single task or two, but I felt as though I didn’t need to actually launch the app and use a UI (I just wanted to execute a small subset of functionality within the app). I wanted to simply click a button to execute some action within an app, but not launch the app visibly and then have to manually exit out and destroy it. Call me lame, but I felt as though I was clicking/touching buttons more than I really needed to. This led me to the idea of an invisible app. I knew of Widgets obviously, but they didn’t fit my requirements. I was unsure if my idea was even possible, but I knew I wanted my app to abide (yes, The Dude does) by two things…

1. Lightweight in memory consumption (must use minimal resources and it must kill itself – to free up system resources)
2. Invisible/transparent (no UI)

 
Basically, I wanted to click an app icon on one of my home screens and have the app do the following, in order…

1. Launch app (invisible/transparent)
2. Execute some action(s)
3. Destroy itself (to free up memory)

 
I am aware that Android Widgets provide similar functionality, but Step 3 was not possible (correct me if I’m wrong here). Again, my specs require the app to destroy itself, not run in the background like Widgets can. As a result of these requirements, I figured out a way to achieve my goal. I leave you with How to Create Transparent Apps with Android.

Step 1 – Styles.xml

The first thing you need to do is create a custom style to apply to your app. This custom style is what will allow your app to be invisible. To accomplish this, simply create a new XML file in your res/values folder and name it styles.xml. The full code for the file is below…

[xml]

[/xml]

Step 2 – Update the AndroidManifest.xml

Now that we have our styles.xml created and saved we need to update our AndroidManifest.xml file. Updating this file ensures our app will use the invisible style we just created. To accomplish this, simply add the android:theme=”@style/Invisible” definition to your launch activity element. Here is an example…

[xml]
android:name=".MyActivity"
android:label="@string/app_name"
android:theme="@style/Invisible"
>
…

[/xml]

Step 3 – Execute Action(s)

Now that we’ve correctly ensured our Activity can launch invisibly, we will want to execute some action(s). In the onCreate() method of your launch Activity class you can trigger the methods that will execute your desired actions. Here is an example…

[java]
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//execute your app actions
executeActions();

//trigger the app onDestroy() method (the last step in the Activity Lifecycle)
finish();

//officially kill the process, and thus your app and its resources in memory
Process.killProcess(Process.myPid());
}
[/java]

When replacing the executeActions() with your own method(s) it may be wise to implement the snippet below. It enables your app to be “click through-able”. Basically, touches aren’t registered by your app so UI’s below your app can still be interacted with. Pretty cool if you ask me.

[java]
getWindow().addFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE); // click through-able
[/java]

Step 4 – Kill Your App

Once your app has executed the desired action(s) you call finish() (line 11 above), which triggers the onDestroy() method to execute. This method correlates to the last step in the Activity Lifecycle. Then you call Process.killProcess(Process.myPid()); which officially kills the process your app runs in (line 14 above). Having executed this last method ensures your app has officially been destroyed. You can go into Settings > Applications > Manage Applications and go to your app to see that it is no longer running. Success!

Step 5 – Conclusion

In retrospect this is a pretty easy thing to accomplish. Taking this concept a step further, you could easily not call finish() or Process.killProcess(Process.myPid()); until after a time delay or after getting confirmation from a service that a specific request went through. Here are some examples ideas I came up with…

• Use your phone as a remote to turn on an application on your laptop/desktop
• Use your phone as a remote/detonator to send a command(s) to an Arduino project
• Send an SMS message (or any message for that matter) with a prefilled body and recipient with a single click/touch
• Query a server for the current status of an account (and have it automatically send you a formatted email or SMS message) with a single click/touch

 
You could also show a Toast or post a Notification as confirmation that your app launched and executed your desired actions. Let me know of any cool ideas or use cases you come up with. Enjoy.

If you are interested in setting up AIR 3.2 in FlashDevelop, I highly recommend checking out this document created by Rosario Azzarello of http://www.gamedesign.ch/. The directions worked great for the most part, though there were three things I needed to change to make it work. I would suggest trying his directions first, but if it doesn’t work you can try what I did. There were three core things I had to do to get it working…

First

In Step 5 of the document I instead made a copy of my flexsdk directory (found in C:/FlashDevelop/Tools) and I renamed it flexsdk_air3_2. I then overwrote the flexsdk_air3_2 directory with the downloaded AIR 3.2 SDK. As a result I have both the AIR 3.1 SDK (which came installed with FlashDevelop 4.0.1 RTM) and my currently setup AIR 3.2 SDK as targets.

Second

I had to change what was done in Step 9.b. Here I instead selected the Manage… button. Next I did the following… (reference the image below)

1. Selected the … button in the Settings dialog
2. Selected the Add button in the InstalledSDK Collection Editor dialog
3. Selected the … button in the InstalledSDK Collection Editor dialog and updated the path to the  flexsdk_air3_2 directory (mentioned above)

Third (Last)

I opened up the SetupSDK.bat file in FlashDevelop (for editing, not running it) and updated the path to point to my flexsdk_air3_2 directory as opposed to the default flexsdk directory. The change looks like this…

From:

:: Path to Flex SDK
set FLEX_SDK=C:\Program Files (x86)\FlashDevelop\Tools\flexsdk

To:

:: Path to Flex SDK
set FLEX_SDK=C:\Program Files (x86)\FlashDevelop\Tools\flexsdk_air3_2

Conclusion

After doing those three things I was able to publish to my Android phone. Incorporating Captive Runtime worked as well (which is sweet excluding the increase in file size). FlashDevelop makes it super easy to get up and running with its AIR Mobile AS3 App template, and this fact just adds to my respect of FlashDevelop. It is a rad programming IDE!

Introduction

I”ve been testing the new capabilities of Flash Player 11.2 (and FP11 for that matter) and the addition of Stage3D is sick. You can get a breakdown of all the new additions from the release notes found here.

Anyway, I’ve noticed on forums that <many>some</many> people don’t use Flash Builder (I use/love FlashDevelop by the way) and have a hard time targeting newer runtimes of the Flash Player in Flash Professional. As a result I want to show you how to target newer Flash Player runtimes (specifically FP11.2) using Flash Professional CS5. I can attest that this solution works for both Flash Pro CS5 and CS5.5. It may just as easily work for Flash Pro CS4 and earlier, I just haven’t tested it (let me know if you get it to work). This also is not specific to targeting FP11.2, you should be able to do this for any new Flash Player release. Let’s get started.

Step 1 – Get the Goods

First you need to download the following from Adobe Labs. Reference the image below.

1. Flash Player 11.2 Plugin for your Browser.
2. Flash Player 11.2 playerglobal.swc.

The first download is important because it enables you to view what you’ve created targeting Flash Player 11.2 in a browser. Currently, Stage3D content cannot be viewed through publishing in Flash Professional, it must be viewed in a browser.

The second download is important because the playerglobal.swc is what provides the new API’s in Flash Player 11.2 for you to publish against. In essence, it is the new code available to you to compile into your SWF.

Step 2 – Hook Up Flash Professional – Place the playerglobal.swc

Now you need to make some quick changes so you can prep Flash Professional for Step 3. Reference the images below.

1. Go to your “Actionscript 3.0″ folder for Flash Professional, for me on Windows 7 it is C:\Program Files (x86)\Adobe\Adobe Flash CS5\Common\Configuration\ActionScript 3.0. This folder is responsible for providing the “playerglobal.swc” files (which again contain the AS3 code to publish against for a specific Flash Player target) to Flash Professional. Now create a new folder in this directory, I named mine FP11_2.
2. Now place your downloaded playerglobal.swc in this folder you just created. If when you downloaded the SWC its name was not playerglobal.swc rename it so.

Step 3 – Hook Up Flash Professional – Target the playerglobal.swc

Now you need to set up an XML file so Flash Professional knows where to look to publish against the Flash Player 11.2 playerglobal.swc you just set up. Reference the images below.

1. So go into your “Players” folder for Flash Professional, for me on Windows 7 it is C:\Program Files (x86)\Adobe\Adobe Flash CS5\Common\Configuration\Players. Here you should duplicate the XML file with the highest Flash Player target (the file I copied was FlashPlayer10_1.xml) and rename it. I renamed mine to match the folder I created in Step 2, I named it FlashPlayer11_2.xml.
2. Now open this new file in any text editor you’re comfortable with and change the following XML elements to match what is italicized below.
3. Change the XML player element to <player id=”FlashPlayer11.2″ version=”15″ asversion=”3″>. Version 15 is Flash Player 11.2, Version 14 is Flash Player 11.1, Version 13 is Flash Player 11, Version 12 is Flash Player 10.2, Version 11 is Flash Player 10.1, and Version 10 is Flash Player 10 – FYI.
4. Change the <name> element to <name>Flash Player 11.2</name>. This name shows up in Flash Professional when choosing your .FLA project target.
5. Finally change the as3 attribute of the <playerDefinitionPath> element to <playerDefinitionPath as3=”$(AppConfig)/ActionScript 3.0/FP11_2/playerglobal.swc” />. This is what tells Flash Professional where to find the Flash Player 11.2 playerglobal.swc you set up in Step 2 above. Just make sure the folder name matches, again I named my folder FP11_2 and this is defined in the as3 attribute of the <playerDefinitionPath> element you must change.

Step 4 – Open Flash Professional (Restart if Open)

Simply create a new AS3 project and go to File > Publish Settings and select the drop down for the player version. Select Flash Player 11.2 as highlighted below.

Step 5 – Create a Test .FLA

Save this FLA and follow the directions below to set up a quick test. Reference the image below.

1. Name the current layer txt, create a TextField instance on this layer, and ensure in the Properties Panel that it is a Classic TextField instance and that it has an instance name of txt.
2. Create a new layer and title it actions (normally I would use a Document class but for this tutorial I will use an Actions layer).
3. Open the Actions Panel (Window > Actions or use the shortcut F9) and paste the following code on Frame 1 of the actions layer.

[as3]
import flash.system.Capabilities;
import flash.events.MouseEvent;

//have your txt TextField instance print the Flash Player version that is currently running your SWF
txt.text = “Version = ” + Capabilities.version;

//try to use the new MouseEvent.RIGHT_CLICK event introduced in FP11.2
stage.addEventListener(MouseEvent.RIGHT_CLICK, onClick, false, 0, true );
function onClick(e:MouseEvent):void
{
txt.x = Math.random() * stage.stageWidth;
txt.y = Math.random() * stage.stageHeight;
}
[/as3]

Step 6 – Publish

Now we will publish a SWF and an HTML page to test in the browser. Make sure you run this test in a browser where you’ve downloaded the Flash Player 11.2 plugin mentioned in Step 1 above. Remember, Flash Professional currently does not allow you to preview your SWF content (that targets new APIs) without running it in a browser. As a result when you hit Ctrl + Enter (Control > Test Movie > Test) in Flash Professional you may get this error.

[as3]
TypeError: Error #2007: Parameter type must be non-null.
at flash.events::EventDispatcher/addEventListener()
at flash.display::Stage/addEventListener()
at FlashPlayer11_fla::MainTimeline/frame1()
[/as3]

This error can be ignored. Again the real test is when you run your content in the browser. Reference the image below.

1. Now publish your test by selecting File > Publish. A SWF and an HTML file should be created. Now simply open the HTML file in a text editor and replace <param name=”wmode” value=”window” /> with <param name=”wmode” value=”direct” /> (notice that you need to define this change in two places). By changing the wmode to direct you are giving the Flash Player plugin permission to allow your content to be rendered with the GPU of the machine (if possible, check here to see if your GPU is supported).
2. Now simply run this HTML file in a browser where you have the Flash Player 11.2 plugin installed.

You can download the test I created here.

Conclusion

Now when you test your HTML file you should see the version printed out in your txt TextField. You can also use the right button of your mouse to position the txt TextField instance randomly on the stage. Congrats! You’ve officially targeted FP11.2 with Flash Professional. Now dig into the new APIs and create some Stage3D content!

If you use the Chrome browser (which I highly recommend) you can quickly see what version of Flash Player, Unity3D, QuickTime, Java, and all other plugins you are running in your browser. You can also quickly disable or enable these plugins with a single click. This comes in handy personally as I have numerous versions of the Flash Player installed for testing and experimenting purposes. You simply enter “chrome://plugins/” in the address bar of Google Chrome and hit enter. I’d also recommend right-clicking this tab once opened and selecting “Pin Tab”. This way you can quickly access the list of your plugins to enable/disable them.

Introduction

This is a follow up to my previous post Tutorial: Tracking Browser Content Window Size with Google Analytics (1 of 2) where I explained how to incorporate a tracking scheme to read and record your site’s visitors browser dimensions (as opposed to screen resolution). This is powerful because you get data which informs you of the viewing area of the browsers of your visitors. You can come to your own conclusions with how to use your data, but you can quickly get an idea if certain content is out of your visitors viewing area and/or if your layout and design are as efficient as they could be. That said, I will now explain how to view this data in Google Analytics.

Icon

This icon is used in the images below and it highlights the areas of focus referenced in the steps.

Step 1 – Log In and Standard Reporting

First you need to log in to your Google Analytics account that you’ve synced with the Tracking ID that you set up via the previous post. Then you need to ensure you are viewing the Standard Reporting (icon 1) tab as shown below.

Step 2 – Content and Overview

Then you need to select the Content (icon 1) drop down and select Overview (icon 2).  Again here is an image for reference.

Step 3 – Event Category and Browser Dimensions

Next you need to select Event Category (icon 1) followed by the selection of Browser Dimensions (icon 2). From here you will be able to view the stats of the Event Actions that have been tracked. Again, these are Initial Size and Resize.

That is it. If you have any questions feel free to comment. Peace.

Introduction

Google Analytics is super powerful and the fact it is free is amazing. If you don’t know what it is and you work in Web Development it is a must that you introduce yourself to it (or some other form of analytic strategy). Check it out at http://www.google.com/analytics/. If you are here because you want to add Browser Size (as opposed to Screen Resolution) tracking to your Google Analytics account(s) then you’ve come to the right place. Enjoy.

Step 1 – Download resizeTracker.js

First you need to download resizeTracker.js.

Step 2 – Update resizeTracker.js with your Google Analytics Tracking ID

Next you need to open the downloaded resizeTracker.js file and update it. To update it simply do a Find and Replace for “YOUR_TRACKING_ID” and replace it with your actual Google Analytics tracking id. Simple.

Step 3 – Upload resizeTracker.js and Update your HTML page(s) 

Next you need to add the following script tags just under your <title> element of your HTML page(s). Like so…

[javascript]


[/javascript]

Line 1 is important because resizeTracker.js uses jQuery and this line ensures it is loaded in the page. Line 2 is responsible for ensuring resizeTracker.js gets loaded in the page.

* Make sure your correctly set up the src attribute on Line 2 to reflect where you’ve actually uploaded your resizeTracker.js copy. In other words make sure you replace the strings YOUR_WEBSITE and YOUR_PATH_TO_RESIZETRACKER with their respective string values.

Finally you drop the following script after your closing </body> tag of your HTML page(s). This checkInitialSize() call is what tracks the Browser Content Window size when the page first loads. Any subsequent resizes will be tracked via resizeTracker.js. Here is the script example.

[javascript]

[/javascript]

That’s it. Simple eh? In part 2 I will show you how to access the results in Google Analytics.