Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

ActionScript: Using Lightbox With Flash

Monday, May 10th, 2010

I’m working on a portfolio site where I’m using Flash to display my work. When a user clicks on a link for a website that I designed, they will be taken to the actual website. But when the user clicks on the link for book cover or magazine, I want the large image to be displayed using lightbox (A JQuery Plugin). The primary reason is that I want to use lightbox is because the Flash movie has a height of 225 pixels – not nearly enough to display a large image. Surprisingly, with the help of ActionScript’s ExternalInterface Class and JQuery, creating this functionality was easier than I thought.

The ActionScript

First I set up the Flash Movie using the ExternalInterface class. This class enables Flash to communicate with Javascript (and from Javascript to Flash).

^?View Code ACTIONSCRIPT

package {
 
        import flash.dipslay.MovieClip;
        import fl.controls.Button;
        import flash.external.ExternalInterface;
 
        public class portfolio extends MovieClip {
 
                public function portfolio() {
                        var myButton:Button = new Button();
                        myButton.addEventListener(MouseEvent.CLICK, onBtnClick);
                        addChild(myButton);
                }
 
                private function onBtnClick(event:MouseEvent):void {
                        ExternalInterface.call("showLargeImage", "images/bookcovers/thisbook.jpg");
                }
        }
}

So in the constructor of my document class, I created a button. I added an event listener for the button click. When the button is clicked, I make an external call to a function named showLargeImage and pass it the path to the image that I want to be displayed by Lightbox.

The HTML page

On the html page where my flash movie resides, I first add links to JQuery and and Lightbox.

^?View Code HTML

<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

I then created a container to hold my image:

^?View Code CSS

#myImage {
        float:left;
}

The image can be placed anywhere on the page:

^?View Code HTML

<body>
<div id="myImage"></div>
</body>

I added the Javascript function that is called by the Flash movie in the head section of the page.

^?View Code JAVASCRIPT

function showLargeImage(url) {
	$('#myImage').empty();
	$('#myImage').append($('<a></a>').attr('href', url).html('hello'));
	$('#myImage a').hide();
	$('#myImage a').lightBox();
	$('#myImage a').click();
}

First I remove everything from inside the myImage div. Then I create an a tag giving it a href attribute whose value is the url that I passed from the Flash movie. I then addded text. I can be anything because I hide the a tag on the next line. I guess I could have also hidden it using CSS.

^?View Code CSS

#myImage a {
        display:none;
}

Next I call the Lightbox plugin and then simulate the click event.

That’s it. Lightbox displays the image as if it were called by clicking on a thumbnail on an html page. Fairly simple. With ActionScript’s ExternalInterface class (and JQuery), I do not have to be limited to a Flash-only interface. Enjoy

Categories: Actionscript, Flash, JQuery
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.