Home Tutorials Forums Articles Blogs Movies Library Employment Press


(Page 3 of 13)   « Prev  1  2  
  4  5  Next »
Here's Actionscript code for a "Tweet This" button for Twitter, or "Like" or "Recommend" button for Facebook. When the button is clicked, call the socialUpdate() function below, passing in the text and link that you wish to post. For example:

socialUpdate("twitter", "Views from space", "http://www.esa.int/esaHS/SEMG2856JGG_index_mg_1.html");

Both the text and the link can be blank. Here's the code to include:

function socialUpdate(site:String, text:String = "", link:String = "")
    // initialize
    var siteURL:String;
    var maxLength:Number;
    switch (site)
        case "facebook":
            maxLength = 255;
        case "twitter":
            maxLength = 140;
    // truncate passed text if necessary
    var availableTextLength:Number = maxLength - (link.length + 1);
    if (text.length > availableTextLength)
        text = text.substr(0, (availableTextLength - 3)) + '...';
    // construct url to site
    switch (site)
        case "facebook":
            siteURL = "http://www.facebook.com/share.php?u=" + encodeURIComponent(link) + "&t=" + encodeURIComponent(text);
        case "twitter":
            siteURL = "http://twitter.com/share?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(link);
    // open new popup window to site
    var urlRequest:URLRequest = new URLRequest(siteURL);
    navigateToURL(urlRequest, "_blank");

Truncating the tweet text and ending it with an ellipsis was something I saw on Sascha Kimmel's blog.

When creating a Facebook post for a web page, you can specify the page's title, description and thumbnail that appear on the Facebook post. This is optional, as Facebook will try to find a good thumbnail image and text for the page if they are not provided by you. To provide them, add the following meta tags to the HEAD section of the web page:

<meta property="og:title" content="Views from Space" />
<meta property="og:description" content="Photos of Earth from the International Space Station's Cupola" />
<meta property="og:image" content="http://www.esa.int/images/iss025e009840,0.jpg" />

The image for the thumbnail should be roughly square, with minimum dimensions of 50 x 50 pixels. It can be a PNG, JPEG, or GIF image.

Flex 3 or Flash doesn’t natively support using a color gradient as the color for text. Instead, you need to create a gradient bitmap and use a bitmap of the text as a mask against the gradient.
Here’s a quick function that does this, using the GradientCanvas class from Nick Schneble’s blog.  To use the function, pass in an ID of a Flex 3 text field, the X and Y coordinates at which the gradient text is to appear, and the name of a CSS class defining the gradient colors.

For example, if you had a text field that looked like:

<mx:Text text="Gradient Text" id="myTextField" x=”10” y=”10” />

Then the function call would look like:

drawGradientText(this, myTextField, 10, 10, "gradientStyle");

Your code would also need to include the GradientCanvas class, and define a CSS class like this:

.gradientStyle    {fill-alphas: 1,1; fill-colors: #ff0000, #0000ff; corner-radius: 0}

The complete function is:

    public static function drawGradientText(container:UIComponent, sourceText:Text, sourceTextX:Number, sourceTextY:Number, gradientStyleName:String)
       // check text height and width as zero values will lead to an invalid bitmap error
   if ( (sourceText.height < 1) || (sourceText.width < 1) ) return;

       // create a bitmap version of text to be used as a stencil
       var bitmapData:BitmapData = new BitmapData(sourceText.width, sourceText.height, true, 0);
       // use a matrix when writing into the bitmap to preserve transparency
       bitmapData.draw(sourceText, new Matrix());
       // convert the bitmap data into an image object to be able to add it to the flex stage as a UI Component
       var bitmap:Bitmap = new Bitmap(bitmapData, "auto", true);
       var image:Image = new Image();
       image.source = bitmap;
       image.cacheAsBitmap = true;
       // object and mask have to be directly over each other on the stage
       image.x = sourceTextX;
       image.y = sourceTextY;
       // add to the stage
       // create a gradient with the same size as the text bitmap
       var gradientCanvas:GradientCanvas = new GradientCanvas();
       gradientCanvas.width = sourceText.width;
       gradientCanvas.height = sourceText.height;
       // object and mask have to be directly over each other on the stage
       gradientCanvas.x = sourceTextX;
       gradientCanvas.y = sourceTextY;
       // set gradient colors
       gradientCanvas.styleName = gradientStyleName;
       // make the gradient's vector art available as a bitmap in Flash
       gradientCanvas.cacheAsBitmap = true;
       // mask the gradient with the text stencil
       gradientCanvas.mask = image;
       // add to the stage

Measuring bandwidth

YouTube’s speed testing site gives a good estimate of how fast videos can play on a computer. Video streaming servers often have their bandwidth limited for a particular connection to 140% of the highest needed bandwidth for the video to play, so it’s normal for a video to not fill up its buffer as fast as a network connection could allow.

YouTube’s numbers for its customers show that typical bandwidth for the USA is 4.21 Mbps. This is more than enough for online video applications. As a comparison, today’s high quality “HD” web video is about 3 Mbps, regular DVD is 5 Mbps, and Blu-Ray DVD is 40 Mbps. In 2005, typical web video was 0.3 Mbps (300kbps).

Reproducing a low-bandwidth environment

The easiest way to test on a low-bandwidth environment is to use a macintosh and ask the Mac OS firewall to limit the speed on a specific network port. This will limit the network speed on that port for the entire computer.

The ports that should be limited to simulate low-bandwidth web video performance issues are:
Port 80: Non-encrypted HTTP traffic
Port 443: Encrypted HTTPS traffic
Port 1935: Streaming RTMP video

These are the only 3 ports required to limit. Note that this will reduce bandwidth for all applications using these ports, so you will notice the performance difference for all web pages, not just the ones you are testing.

O'Reilly's Mac Dev center has a good introduction to the Mac OS firewall, and MacTipsAndTricks.com has a good overview of using it to reduce bandwidth.

As an example, to limit network activity to 50K a second (400Kbps, 0.4 Mbps), open a Terminal window in the Mac OS and enter the following:

sudo ipfw pipe 1 config bw 50KByte/s
sudo ipfw add 1 pipe 1 src-port 80
sudo ipfw pipe 2 config bw 50KByte/s
sudo ipfw add 2 pipe 2 src-port 1935
sudo ipfw pipe 3 config bw 50KByte/s
sudo ipfw add 3 pipe 3 src-port 443

To remove the bandwidth limiting, enter the following:
sudo ipfw delete 1
sudo ipfw delete 2
sudo ipfw delete 3

The bandwidth limits are set per port, so the browser's true bandwidth will be is higher because multiple ports may be used to render a page. HTML content is almost always loaded on port 80; streaming video is usually on port 1935. Once an HTML page has loaded and the video is playing, the bandwidth limit on streaming video will be accurate.
(Page 3 of 13)   « Prev  1  2  
  4  5  Next »
No blogs found.
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.