Juan Sanchez

In iOS 4.2, Apple introduced the ability to access the accelerometer via Mobile Safari. Other native iOS applications offer a feature of auto-scrolling forwards and backwards when an iOS device is tilted. With access to the accelerometer data, I wanted to see if I could recreate this same feature in Mobile Safari.

The initial implementation only took about 4 lines of code and was fairly simple. I just updated the top scroll position of the page based on the y tilt of the device. From there I just added things like reseting the initial tilt of the device when you load the page and allowing to to reset it manually with a button.

You can view the final example on your iOS device here. Keep in mind that you must have iOS 4.2 for this to work.

A while back I helped create a set of custom themes for Flex 4 that worked for both Flex 3 and Flex 4. I wrote about this process for another article, but I thought I’d share it here as well. Thing may have changed since we used this approach, so let me know if you have issues.

When creating a theme it is important to consider that the Flex 4 SDK also allows for Flex 3 components to be used side-by-side with Flex 4 components. This means that skin artwork you create for Flex 4 components won’t get applied to Flex 3 components. However, there is a way to repurpose your pixel-perfect artwork for use with Flex 3 component skins. Be warned though, getting things to work properly will require some technical steps in MXML.

Part of the Flex 4 SDK includes a special skin class called SparkSkinForHalo. This class allows  you to repurpose your skin artwork and assign it to a Flex 3 component. While it does take an additional effort to account for the Flex 3 components, the additional skins will help insure consistency for both Flex 3 and Flex 4 components. Let’s see how it works.

1. Create a new folder and name it HaloSkins.
2. Create a new file called HaloButtonSkin.mxml and save it into the HaloSkins folder you just created.
3. Open the MXML file that contains your Button Skin artwork for your Spark components.
4. Copy the all the markup and paste it into the HaloButtonSkin.mxml file replacing any markup that might be there.
5. Locate the line that uses the s:Skin tag and in its place use local:SparkSkinForHalo. You also need to change the State tags from s:states to local:states and add a definition for the local namespace.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<local:SparkSkinForHalo xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:local="mx.skins.spark.*">
 
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
 
<s:states>
 
<local:State name="up"/>
 
<local:State name="over"/>
 
<local:State name="down"/>
 
<local:State name="disabled"/>
 
</s:states>

1. Delete the RichText, which is the label for the Button, from the skin. The reason you want to do this is that Halo components already have a label defined as part of the component.
2. That’s all you need to do for the skin. Now, you need to assign the skin to the Flex 3 Button.
3. Go into your CSS file and create a new style declaration for a Button with the MX prefix.

1
2
3
4
5
6
7
8

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
mx|Button
{
skin: ClassReference('components.HaloSkins.HaloButtonSkin');
}

1. All that’s left is to test the skin. Add an mx:Button to your primary view and run your application. You should see that the Flex 3 Button looks the same as the Flex 4 Button. You may need to define the mx namespace.

Now that you know how to reuse your skin artwork you can take the same steps to make sure all your components for Spark and Halo look the same. For an extensive view at how to do this across all components you can refer to the sample skins provided as part of the latest builds of the Flex 4 SDK.

Note: You can make a custom theme using only CSS, but keep in mind that the CSS properties for Spark skins and Halo skins are quite different. Refer to the documentation for both SDKs to learn about what styles are supported or take a look at some of the sample CSS themes provided with recent builds of the Flex 4 SDK.

via Zen Coding v0.5 on Vimeo.

A couple months ago I needed to add the ability for a user to copy a text string to their clipboard while on an HTML page. I did some searching around and tried a few solutions, but finally settled on Clippy.

Clippy is used on GitHub quite a bit and the source was made available, but it relied on haXe. I needed something that could be used in a familiar application, so I took the Clippy source and made it work with Flash CS4. Some parts might be a bit hacked together, but hey, it works. Here’s an example:

If you’re interested in the source, you can download this sample:

Download Clippy for Flash CS4

All you have to do is change the variable in the HTML to what you want to be copied, alter any of the graphics drawing commands you want in the FLA and just publish a new SWF out.