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.

UML (Unified Modelling Language) is used to organize coding and development projects visually while being language agnostic. This is powerful because you can greatly decrease development time by creating a high level map of your entire program. In essence you create a visual map that defines class packages, class relationships, and the core methods and properties of those classes. In doing so you have a visual map of your program that you can reference to plan your development strategy and timing. UML is nothing new, but the implementation as well as the features of Crocus Modeller make UML simple, efficient, and fun.

Crocus Modeller

Crocus Modeller is an AIR (Adobe Integrated Runtime) application that really empowers development. It is designed specifically for the Flash Platform, but in communicating with the developer via email, they are considering supporting languages other than just Actionscript 3. You can read about the tool at the official website http://crocusmodeller.com/ to learn more and test drive the application. Below I’m simply going to point out my favorite features of the tool.

Favorite Features

Diagram to Code

This feature is super powerful, it enables you to auto create packages, classes, and the defined properties and method signatures that you’ve defined in your UML map. Take a test drive here and see how awesome this is for yourself.

Code to Diagram

This feature is just as powerful but enables you to create a UML map based on a preexisting project structure. This enables you to see the entire program from a bird’s eye view to understand the project without having to dig deeply into the source code.

Type Completion

Crocus Modeller actually auto-completes AS3, Flex, and your custom types. This is a must for any developer.

These three features are very powerful and extremely helpful. There are many other features that play a large role in Crocus Modeller, but these are the stand-outs in my book. Check out the rest of the features at http://crocusmodeller.com/features.html. I highly recommend you at least take the test drive for Crocus Modeller to see if it will help you. I have a strong hunch that it will as it is a very helpful and powerful tool. It also accomplishes something that isn’t an easy task… it makes using UML fun.

Introduction

I’ve been working and experimenting with AndEngine for a little over a year now and I wanted to share some information regarding the “Pinch and Zoom” functionality built into the engine. The engine itself makes it pretty easy to utilize multi-touch pinch and zoom, but documentation explaining how to do so is lacking. There are examples which will help developers understand the intended purposes of many of the engine’s core concepts, and they can be found at http://code.google.com/p/andengineexamples/ .

Anyway, for my implementation I created the class TouchAndCameraManager which, as you might guess, helps me manage user touches and the camera’s reactive behavior. Below are the core steps needed to complete pinch and zoom in Android using AndEngine.

Step 1 – Interface Implementation

You’ll first need to implement the following interfaces in your desired class.

• IOnSceneTouchListener
• IPinchZoomDetectorListener

[java]
public class TouchAndCameraManager implements IOnSceneTouchListener, IPinchZoomDetectorListener
[/java]

Step 2 – Initialize PinchZoomDetector Instance

Next, you need to create the PinchZoomDetector instance, I’ve named it mPinchZoomDetector. I’ve chosen to create my instance in my initialize() method, but this can be done in the constructor or any other method you chose for that matter.

[java]
// MultiTouch check
if (MultiTouch.isSupportedByAndroidVersion())
{
try
{
this.mPinchZoomDetector = new PinchZoomDetector(this);
}
catch (final MultiTouchException e)
{
this.mPinchZoomDetector = null;
}
}
else
{
this.mPinchZoomDetector = null;
}
[/java]

Step 3 – Initialize SmoothCamera/ZoomCamera Instance

Next, you need to initialize your SmoothCamera instance, I’ve named mine mCamera. SmoothCamera extends ZoomCamera by the way.

[java]
// SMOOTH_CAMERA_SPEED and SMOOTH_CAMERA_ZOOM_FACTOR_CHANGE are values you can play with to adhere to your liking.
mCamera = new SmoothCamera(0, 0, mPhysicalScreenWidth, mPhysicalScreenHeight, SMOOTH_CAMERA_SPEED, 0, SMOOTH_CAMERA_ZOOM_FACTOR_CHANGE);
mCamera.setBounds(0, mPhysicalScreenWidth, 0, mPhysicalScreenHeight);
mCamera.setBoundsEnabled(true);
mCamera.setZoomFactor(1f);
[/java]

Step 4 – Override Methods

Next, you’ll need to override the following methods of the two implemented interfaces. The methods are

• onPinchZoomStarted
• onPinchZoom
• onPinchZoomFinished
• onSceneTouchEvent

[java]
@Override
public void onPinchZoomStarted(final PinchZoomDetector pPinchZoomDetector, final TouchEvent pTouchEvent)
{
// mPinchZoomStartFactor is calculated on start as it is used in the onPinchZoom() method
mPinchZoomStartFactor = mCamera.getZoomFactor();
}

@Override
public void onPinchZoom(final PinchZoomDetector pPinchZoomDetector, final TouchEvent pTouchEvent, final float pZoomFactor)
{
if (pZoomFactor != 1)
{
// check bounds
float newZoomFactor = mPinchZoomStartFactor * pZoomFactor;
if (newZoomFactor <= mZoomMin)
mCamera.setZoomFactor(mZoomMin);
else if (newZoomFactor >= ZOOM_MAX)
mCamera.setZoomFactor(ZOOM_MAX);
else
mCamera.setZoomFactor(newZoomFactor);
}
}

@Override
public void onPinchZoomFinished(final PinchZoomDetector pPinchZoomDetector, final TouchEvent pTouchEvent, final float pZoomFactor)
{
// enable desired functionality because zooming is complete
}

@Override
public boolean onSceneTouchEvent(final Scene pScene, final TouchEvent pSceneTouchEvent)
{
if (mPinchZoomDetector != null)
{
mPinchZoomDetector.onTouchEvent(pSceneTouchEvent);

if (mPinchZoomDetector.isZooming())
{
// disable functionality that shouldn’t occur while zooming
}
else
{
// enable functionality that should occur while zooming
}
}

return true;
}
[/java]

Conclusion

Following the steps above will help you utilize AndEngine’s “Pinch and Zoom” functionality with ease. Feel free to experiment with the code snippets and/or ask any questions relating to this post.

Introduction

In working on projects and experimenting with memory management in Actionscript 3, I’ve come across a simple but very important checklist to properly remove objects from memory. The solution comes from looking back at chapter 14 of Essential Actionscript 3 by Colin Moock. The excerpt that triggered the light bulb above my head comes from the section “Disposing of Objects Intentionally” on page 273. It reads, “To eliminate all references to an object, we must manually remove it from any arrays that contain it and assign “null” (or some other value) to any variable that references it.”

The problem I had involved arrays. I thought removing objects that were in the array from the display list and setting their values to null as well as nulling the array itself would be enough. This isNOT the case however, you need to also manually remove the object from the array.

Solution

The checklist for properly enabling an object for Garbage Collection is as follows…

1. Unregister all listeners
2. Stop all timers and intervals
3. Stop playheads (timeline, video, audio, etc.)
4. Deactivate objects that would become unreachable if the object itself became unreachable. (nullify)

A good resource for catching up and/or learning more about Garbage Collection (the Flash Player method of removing objects from memory) would be Chapter 14 of Essential Actionscript 3 by Colin Moock or online at… http://www.adobe.com/devnet/flashplayer/articles/garbage_collection.html

Conclusion

It is very important (for Flash Developers particularly) to make a habit of creating a public method for virtually every custom class which utilizes this checklist for the objects of that class. The method name is of developer choice, but would most likely be something along the lines of… dispose(), destroy(), selfDestruct(), etc. This method would utilize the checklist on its objects to enable them for Garbage Collection.

As content is viewed on mobile devices (devices that will most likely lack in specs and the processing power compared to your desktop/laptop), performance will play a much bigger role and will be greatly noticed by end users. Simply viewing the demos of Flash on mobile devices found here and here, suggest to me that these Flash content instances employ great GC tactics and/or are very conservative in memory use.

Tangent

The “Flash on mobile videos” also suggest to me that Flash 10.1 is a great advancement and idea, but the hope of having the same Flash experience (desktop/laptop vs. mobile device) is just that a hope, a dream (only time will tell if Adobe can really make this a reality). Flash content seems to have gotten away with running on desktops/laptops while potentially having poor memory management. On a mobile device, this same content simply won’t. Though some blame could be put on the Flash Player itself, it seems the developers are most at blame. As a developer myself, it is our responsibility to be mindful and responsible for the memory management of our applications, tools, sites, etc.

Introduction

In experimenting with SWFObject 2, I came across the question, how do I enable my flash content to display full browser? I found a few solutions but found the following solution to work best for me. The implementation is simple and effective.

Solution

The solution comes after viewing the source for the page found at http://www.bobbyvandersluis.com/swfobject/testsuite_2_2/test_dynamic_fullbrowserflash.html. An explanation isn’t made, but the result is present in viewing the page, I have in turn created an explanation.

1. You must create a page using SWFObject, I used the AIR app Generator to streamline my HTML page build.
2. Ensure you set the “Dimensions” to “Percentage” and set 100 as the value for both the width and height.
3. Next you need to define some CSS (ideally in an external CSS file) and wrap your alternative content into another DIV tag. View the highlighted elements in the image below for visual reference.

Reference

Recently I was working with the TextFormat class and dynamic TextField instances in Actionscript 3 and was noticing a slight rendering error. It seemed as if some of the beginning and ending characters in the text field were being slightly cut-off. After doing some research I found the culprit and the solution as well. I found that the TextFormat object I was using to format the text of the TextField object(s) wasn’t being fully utilized.

The TextFormat object has two properties which can be used to fix this “cut-off” of text. They are the rightMargin and leftMargin properties and setting them will help to reduce and/or remove this “cut-off” effect (depending on the value set).

In my solution I used a value of 1 pixel for each property and ended up with my desired results. The value you use will be dependent on the placement of the TextField instance in accordance with other content as well as the font being used. This find was a simple yet effective solution. Simply setting the leftMargin and/or rightMargin properties of the TextFormat object that is formatting your TextField(s) instances will do the trick. Just ask yourself which side the “cut-off” is occurring and set a value to the correct property (trial and error the values until desired result is achieved).