Flex 4 | Kenneth Sutherland

Stop the mobile ActionBar from transitioning

By Kenneth | July 11, 2012 | Comments 0 Comment

I was creating a mobile AIR app and the app was to have an ActionBar at the top and depending on the view that was about to get pushed I didn’t want the ActionBar to have a transition effect. Sounds like a simple request, nope, no can do…

So after a bit of digging into the various classes ( mainly the ViewTransitionBase ) I came across what needed to be changed 🙂 but its a mx_internal so use the following fix with caution.

All of the various effects check the actionBarTransitionMode while they create the effects. Its just that the actionBarTransitionMode is always set to ACTION_BAR_MODE_FADE_AND_SLIDE and never changes from that value. What’s more the actionBarTransitionMode is a mx_internal variable so you can’t just call it yourself when creating a new effect.

So here is the fix.

Extend whatever effect you wish to use. e.g. SlideViewTransition
add the following lines to your extended class import import mx.core.mx_internal; and use namespace mx_internal;
Either inside your constructor set the value (if you don’t wish to change it at runtime) or create a setter to modify the value actionBarTransitionMode

Possible values are (these can be found in the ViewTransitionBase class),

ACTION_BAR_MODE_FADE:String = “fade”;

ACTION_BAR_MODE_FADE_AND_SLIDE:String = “fadeAndSlide”;

ACTION_BAR_MODE_NONE:String = “none”;

In my case I set it to ACTION_BAR_MODE_NONE as I didn’t wish to have any transition on the ActionBar.

[ad name=”ad-1″]

Debugging facebook apps locally (web based ones)

By Kenneth | June 1, 2012 | Comments 2 comments

If you’re wanting to develop a facebook app then there is loads of helpful stuff out there to get you going. Specifically I’d start here if you’re interested http://www.adobe.com/devnet/facebook.html.

But what they don’t tell you is how to debug your app without you having to FTP your files each time you change something. (If your facebook app is based on AIR and not a web app, then this doesn’t matter).

Firstly log into facebook and go to your app settings, it will probably look like the below. What you are looking for is the ‘website with facebook login’. This is used by facebook when your app logs in ( you’d never have guess that! ). Anyway if this doesn’t match the url of where your app is deployed then you will NOT be able to log in.

Change it to your local URL, in my case I’ve made it http://localhost/facebookLoginTest/index.html
The important bit is the localhost as my actual app isn’t run from index.html but when I set up the app on facebook I just put that in.

Now that your app can login you will now be able to debug, but the default settings in Flashbuilder don’t output your files to your localhost. So this is the second part to getting everything to work.

I’ve highlighted the two bits you need to change which is inside your projects properties (right click and select ‘Flex Build Path’).

Change the output folder to push your output files to the folder inside your webserver. I use XAMPP to setup my webserver etc

Also update the output folder URL, once changed when you hit debug it will load whatever URL is in that box + the html page. So as you can see I’ve changed my output folder URL to http://localhost/facebookLoginTest/ which when I run/debug my app gives me http://localhost/facebookLoginTest/FacebookTestApp.html?debug=true

That’s it.

[ad name=”ad-1″]

StateGroups – finally found a use for them

By Kenneth | May 30, 2012 | Comments 1 comment

State groups? Ever looked at them and though they look really useful but then can’t find a good use for them!
Well last year (yes its taken a while to finish of this post – hopefully its worth it), while developing some mobile apps I came across a great use for them. At the time their were also very few examples of using stategroups on-line and none in a practical setting.
So here goes, lets see how they’re done and where would be good to use them.

The problem

Mobile apps can have 1 of 3 DPI settings and this will change how your app looks. (320 DPI, 240 DPI and 120 DPI).
So we can think of each of these DPI’s as a state.
Then we can have a view and like most views you will use states. For example to have “Edit mode on” and “Edit mode off”.

That give is 2 different groups of states

Group 1 is the DPI setting.
Group 2 is the view mode.

Soloution

I always like to see working examples of something, bit like a picture & a 1000 words.
So below is a test app to change the values of and of course it has source code to view.

State groups example app — Click to open state group examples

I’ve also included below what I consider to be the important bits of the code to understand.
Check out the source code of the app for more detail.

These are the various combinations of states you can use together, and the list of the actual states.
For example you can’t set text.one and text.lowDPI on the same component.

Hopefully this will give you a bit of insight into how and where to use stateGroups. Very useful tool under specific circumstances.

[ad name=”ad-1″]

App story – on BBC site. Catch it live at MAX 2011

By Kenneth | September 28, 2011 | Comments 0 Comment

The application that I’m working on with the guys at Jampot has made the BBC news. Check out the article from the BBC.
http://www.bbc.co.uk/news/uk-northern-ireland-15075450

Also the guys are heading over to the Adobe Max 2011 conference so you’ll be able to see it live and see how easy it is to create a mobile app for all mobile platforms.

[ad name=”ad-1″]

iOS – Mobile dev, make sure you flush when you’re done.

By Kenneth | September 7, 2011 | Comments 1 comment

Developing for Apple’s devices can throw up a few little quirks that don’t happen when using Android devices.

This one happens if you are using shared objects to store information between sessions.
Basically, you should always call the flush mechanism whether you are adding more data to the shared object or if you are deleting something from the shared object.

What you find is if you have a shared object ‘shared’ with a value shared.data.firstValue = “something”, then you delete that value using

delete shared.data.firstValue;

if you try to access the value firstValue you will get null.
This is exactly what I’d expect.

Then lets say you exit the app and you either kill the app from running in the background or iOS stops it. Then the next time you load the app and access the shared object shared.data.firstValue you will get back “something” and not null.

You must flush the shared object for it to be stored locally, otherwise when the app is killed, the local storage will not have been updated.

[ad name=”ad-1″]

Linear and Radial gradients – visually explained

By Kenneth | February 24, 2011 | Comments 0 Comment

I was playing around with some code recently (Flex 4 code) and I went to create a simple background and not having Catalyst or similar to output a fxg file I went to create my own gradients with some code. After a couple of goes and not getting anything resembeling what I expect I decided to write a quick explorer.

I’ve done something similar ages ago with flex 3, so I thought I’d do this with flex 4 and perhaps look to expand it as an example of reskining an app with different skins. (source code may follow when I do this) So here is the first step. A simple explorer to help understand the values that are used to make a Linear or Radial gradient along with the entries that make the look how they look.

I think it should be self explanatory, but if not just post a comment.

Follow the link to open the explorer.

[ad name=”ad-1″]