Creating a Scroller for a UIElement

A UIElement has a scrolling component which can either be a vertical, horizontal or a custom scroller. 


Create a basic scroller with the default style
I'm going to show you how to create a horizontal scroller as an example so create a UIElement and set its background like below, ensure you specify the width and height:

carousel = new UIElement();

carousel.background=new ShapeRectangle(carousel);

carousel.background.colours=[0xFF0000,0xFF0000];

carousel.background.alphas=[1,1];

carousel.background.width=200;

carousel.background.height=50;

Now we have to provide is with our layout decorators, the first is a horizontal layout and the second is a padded layout. Both of these layouts must be added to the element and in the order shown in the example for this to work. Make sure you set all the padded layout properties as shown below.

carousel.layout = new HorizontalLayout(carousel);

carousel.layout.horizontalGap=5;

carousel.layout = new PaddedLayout(carousel.layout);

carousel.layout.top=10;

carousel.layout.left=10;

carousel.layout.right=10;

carousel.layout.bottom=10;

The next thing to do is to create all the objects which will be in the scrollable area. I created a function to create 20 dummy UIElements via a function, below is the function call and the functions which are executed..

createBoxes();
/////

private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
   addElement();
}
}
////
private function addElement():void{
        var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}



Finally we create the scroller then set its properties and build the UIElement. You need to provide the scroller with either the scrollHeight or scrollWidth depending on the scroller you have created.


 carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

To Hide Scroller
You need to set the scrollBarVisible to false but after the arrange of the element.


Full code:

private var carousel : UIElement;
public function TestCarousel() {

carousel = new UIElement();
carousel.background=new ShapeRectangle(carousel);
carousel.background.colours=[0xFF0000,0xFF0000];
carousel.background.alphas=[1,1];
carousel.background.width=200;
carousel.background.height=50;
carousel.layout = new HorizontalLayout(carousel);
carousel.layout.horizontalGap=5;
carousel.layout = new PaddedLayout(carousel.layout);
carousel.layout.top=10;
carousel.layout.left=10;
carousel.layout.right=10;
carousel.layout.bottom=10;
createBoxes();
carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

}
private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
trace("building");
addElement();
}
}
private function addElement():void{
var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}
}

Facebook Applications Details

Facebook loads your application through an Iframe so your web page will be hosted on your own server.


Dimensions 
The width provided for your application is 760px maximum, the height is not restricted so that is flexible. 

Actionscript 3.0 : Adding A Version Number

To keep track of different versions of your application you should introduce version numbers. I place my version numbers in the 'context menu' (when you right click on the Flash). 


To do this we first create a variable to hold the version number, below is an example:


private var versionNumber : String = "1.0";


Then we create a new context menu and a new ContextMenuItem (this is an item which sits in the context menu), we provide the ContextMenuItem  with a String parameter which is the version Number. We have to push the menu item  into the context menu that we have just created and set the applications context menu to the new one. Make sure you set your objects to null to keep your application clean. 



var cm : ContextMenu = new ContextMenu();
var versionN : ContextMenuItem = new ContextMenuItem("version: " + versionNumber);
cm.customItems.push(versionN);
contextMenu = cm;
versionN = null;
cm = null;

Actionscript 3.0 : The Foundations For Your Application

This example below has the initial structure to start coding your application. It does two things, the first is that is sets the stage properties and creates a resize handler in case  you require it and the second is that the application waits for the stage to initiate and then you can begin creating your elements, this ensures that the stage is ready before you start calling stage or stage methods. Calling the stage before the stage is ready will through errors.

package 
{
import flash.events.Event;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Sprite;
        [SWF(backgroundColor="#2d3845", frameRate="31", width="780", height="570")]
public class Main extends Sprite
{
public function Main()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);
if (stage)
{
init ();
} else 
{
addEventListener (Event.ADDED_TO_STAGE, init);
}
}
private function init (evt:Event = null):void
{
removeEventListener (Event.ADDED_TO_STAGE, init);
}
private function resizeHandler(event : Event) : void {
}
}
}

Checking Flash Vars


In all my application a create a function to check for flash vars because you can use them to configure your application. Below in the init function I created a call to a 'checkFlashVars'. 


private function init (evt:Event = null):void
{
//stop the listener
removeEventListener (Event.ADDED_TO_STAGE, init);
//check flash vars
checkFlashVars();
//load data xml
loadDataXML();
}
In This function I created checks for certain flash vars that can help configure the application. The example below checks for 'dataUrl' and 'dataFileName' flashvars, I check them through a Class that I created (I will explain later on) which has help methods to access flashvars. 


private function checkFlashVars() : void 
{
if(flashVars.getFlashVar("dataUrl"))
{
appData.addData("dataUrl", flashVars.getFlashVar("dataUrl"));
}else{
appData.addData("dataUrl", appData.DEFAULT_DATA_URL);
}
if(flashVars.getFlashVar("dataFileName"))
{
appData.addData("dataFileName", flashVars.getFlashVar("dataFileName"));
}else{
appData.addData("dataFileName", appData.DEFAULT_DATA_FILENAME);
}
}
FlashVars Class
This Class stores the flashvars in an object and then using a helper method it allows easy access to the flashvars.


1.create a instance in the Main Class: 
private var flashVars : FlashVars;


2. Initiate it and store the flashvars:

flashVars = new FlashVars();
flashVars.data= LoaderInfo(this.root.loaderInfo).parameters;



3.The FlashVars Class



package com.data {
/**
* @author Fahim
*/
public class FlashVars {
private var _data : Object;


public function get data() : Object {
return _data;
}


public function set data(value : Object) : void {
_data = value;
}
public function getFlashVar(value:String):String{
return _data[value];
}
}
}

Actionscript 3.0 Jargon

What is a Proxy Class?
When you need to get data from an external source or create a virtual object (I will explain this later) then you require a Proxy Class. A Proxy Class will handle the communications between your application and the external source or API. The Proxy Class will handle the data calls and errors then it will dispatch an event to the event of success or failure. 


Virtual Proxy Class?

This is useful to manipulate  an object before it has loaded. A good example of this is when we load an image, we store the image as an object and then add the image to the stage before its loaded. Now we can manipulate this image (change the dimension or add filters) before its loaded, this is called virtual Proxy.

Actionscript 3 Cross-site Scripting in 3 Easy Steps

When you build a flash project which needs to talk to a page or an swf on another domain, you will find that there is security issues surrounding it. Adobe doesn't allow “cross-site scripting” unless the called domain has a file to tell the the swf that is can access the domain.

Reasons why?

Well, if you built a script which an swf calls to obtain information then a hacker can download the swf and place it on their site and access your data. Your data might be confidential and someone has ripped off your swf to obtain the link and use the information for their own benefit.

How to use cross-site scripting?

You can find plenty of example on the adobe site but I have been doing it for a web development company called vanilla active and we use it often so I will try explain my way. We have a server which contains many domain names so this example that a will give you will work well for both a single domain and multiple domains.

Structure

the swf(the one calling a page on another server)
|_ root of the server(not the httpdocs but before) contains a xml file
|_ httpdocs(of the called page) contains another xml file


STEP 1

The root(not httpdocs) needs a policy xml file,this grants flash access to the httpdocs. Example below:

"<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
</cross-domain-policy>"

The policy which I have place in this file allows any domain to go beyond the file to the called root directory to check the permissions set in there.

STEP 2

Now place a XML file into the location of the script which flash is going to access. Example below:

"<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>"

In this file I have allowed access from any domain by using the * in the policy. However this is not secure so you should change it to allow only the swfs domain name. You can add more of this code to allow more than one domain.

<allow-access-from domain="www.the-swfs-domain.co.uk" />


STEP 3
In the action script, flash needs to access the second policy xml using the code below.

Security.loadPolicyFile("http://www.the-called-domain.co.uk/crossdomain.xml");

It takes time get the hang of it but it becomes an easy and secure way to call other domains.

StateManager

The state manager works like a traffic light system or it can be used light switch system. The traffic light system has a number of states and when one is turned on the rest turn off. The light switch system has a list of states which can have more than one state turned on.

1. first you have to create a string of state names as shown below:

public static const UNIT_WEIGHT_METRIC : String = "UNIT_WEIGHT_METRIC";

public static const UNIT_WEIGHT_IMPERIAL : String = "UNIT_WEIGHT_IMPERIAL";

public static const UNIT_HEIGHT_METRIC : String = "UNIT_HEIGHT_METRIC";

public static const UNIT_HEIGHT_IMPERIAL : String = "UNIT_HEIGHT_IMPERIAL";

2. Create a StateManager and add each state to it, by default the reserved value is set to false which means the states acts in the traffic light system so if you want to use the light switch system you must set the reserved value to true as shown below.

configState = new StateManager();

configState.addState( UNIT_WEIGHT_METRIC, true );

configState.addState( UNIT_WEIGHT_IMPERIAL, true );

configState.addState( UNIT_HEIGHT_METRIC, true );

configState.addState( UNIT_HEIGHT_IMPERIAL, true );

3.All the states by default are turned off, in order to turn on a state you must do the following.

configState.stateKey = Survey.UNIT_HEIGHT_IMPERIAL;

4.To turn off a state you need to do the same as above as the state manager will check the state and switch it.

5. To check if the state is turned on or off you do the following.

if ( configState.compare( Survey.UNIT_HEIGHT_IMPERIAL))

Facebook share link for Youtube Channels

You can create customised links for Facebook which show a description and an image when the link is generated. 

Facebook looks at the meta tags on the linked page and grabs data/content from the them. The description comes from the description tag which looks like the example below:

<meta name="description" content="Welcome to Fahim Chowdhury&#39;s Channel">

The image also has its own tag but there are two tags to insert to ensure it works, below is an example of those tags.

<link rel="image_src"href="http://i2.ytimg.com/i/AmJMOq-gvBcO8rYFsEmMBg/1.jpg?v=b7e829"> <meta property="og:image" content="http://i2.ytimg.com/i/AmJMOq-gvBcO8rYFsEmMBg/1.jpg?v=b7e829">

When building a Youtube channel you do not have access to the meta tags however Youtube have created a way for you to edit them.

Editing Youtube channel for Facebook share link

Open the channel page and click on the profile 'edit' button as show below.

Once the profile editing options opens locate the 'Channel Description' and enter your desired description for your Facebook share link description.

How to add an Icon Image for a Facebook share link

We need to edit the account image which will then be apart of the meta data.

First locate the 'Account' tab as shown below.

On the 'Account' page locate the 'profile setup' on the left hand side and click on it.

In the 'Profile setup' screen click on 'change picture and upload the image that is required for the Facebook share link.

That's it, now you can test the Facebook share link by pasting the Youtube channel link into your wall post. below is the outcome of this example.