Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex, .NET

Adobe Flex: Article

Flash 8 and JavaScript: "Building an Image Injector"

Using ExternalInterface to update HTML
By David Vogeleer
Article Rating:
February 9, 2006 11:45 AM EST
Reads:
 33,574

This is where the content is going to appear. Save the file and push both the HTML and the SWF to a web server (or change the allowScriptAccess properties to "always" for local testing) and test it. You will see that when you click the submit button, the text in the TextArea component will appear under the SWF. And because your sending text that will render as HTML, you can use HTML tags like the following figure shows (see Image 4).

You can also change properties and call functions in another HTML window, as you will see in the final example.

Building the Image Injector
Now let's take what has been covered so far and apply it to a real world example by building an image injector. The idea for this example is that there can be a pop up window that will control an image (see Image 5) in the opening window. This is useful for testing different looks of a page, or in conjunction with a content management system (which is why the injector was originally created).

The first part of the injector example will be the page that will be receiving the new images. Open up Dreamweaver, start a new HTML page and place this code in it:

<html>
<head>
<title>My Favorite Picture</title>
</head>
<script>
function openInjector() {
window.open(ŒswapPic.html','changer','toolbars=no,resizeable=no,
scrollbars=no,width=410,height=410');
}
</script>

<body>
<h3>This is my Favorite image:</h3>
<a href="javascript: openInjector();"><div id="imageLoader">
<img src='imgs/water.jpg' border="0" /></div></a>
"p>(click the image to change it)</p>
</body>
</html>

The above HTML does a few things that are important. First it creates the JavaScript function for when someone clicks on the image (see Image 6). That function will open the pop up, which we will create later ("swapPic.html"). We also create the <div> tag we need with a default image already in it. And the entire div is wrapped with an <a> tag that will make it so when the user clicks the image, the JavaScript function will be called, and the pop up will appear. Before the actual injector is built, there are a couple of PHP pageshat will make the injector easier to manage. The first is a page that will grab all the JPEG images from a given directory and return them to Flash. The second page will create thumbnails of those images for displaying in Flash. Because the full size images can be of different size, it's important to make the thumbnails consistent for being displayed in the injector.

fileList.php

<?php
$fileList;
$picDir = $_POST[ŒsentDir'];//get the directory
$dir = opendir($picDir);//open the directory
while($file = readdir($dir)){
    //we only need the JPEGS for this example
    if(substr_count($file, ".jpg") > 0){
    $fileList .= $file . "~";
    }
}
//close the directory
closedir($dir);
//send the files back to Flash
echo "files=" . $fileList
?>

This file opens the directory passed to it from Flash, and returns a string of all the JPEG images separated by a tilde (~) character.

makeThumb.php

<?php
// The file, thumbnail size and zoom level
$filename = $_GET[ŒsentFile'];
$thumbSize = $_GET[ŒsentSize'];
$imgZoom = $_GET[ŒsentZoom'];

// Content type being returned
header(ŒContent-type: image/jpeg');

// Get new dimensions
list($width, $height) = getimagesize($filename);
if($width > $height){
$new_width = $height * $imgZoom;
}else{
$new_width = $width * $imgZoom;
}
//Set the starting point for the thumbnail creation
$sX = ($width-$new_width)/2;
$sY = ($height-$new_width)/2;

// create the image from the original
$image_p = imagecreatetruecolor($thumbSize, $thumbSize);
$image = imagecreatefromjpeg($filename);

imagecopyresampled($image_p, $image, 0, 0, $sX, $sY, $thumbSize,
$thumbSize, $new_width, $new_width);

// output JPEG
imagejpeg($image_p, null, 100);
?>

When this file is called from Flash, you pass it three parameters:

  • sentFile: the path to the JPEG file to use.
  • sentSize: the width and height the thumbnail needs to be returned in.
  • sentZoom: a floating point number between 1-0. The smaller the number, the more it zooms in.
This file does a lot. First it gets the current dimensions of the image. Then it uses those dimensions to get the largest square portion of the center of the image it can. Finally, it creates the new image and returns it back to Flash as a JPEG.

Now the HTML and the PHP pages are done, the final piece is the injector itself. Before anything is created on the stage, save this file as "swapPic.fla". Then create a second layer and call the top one ActionScript and the bottom one content. Reset the stage to 400x400 to fit nicely in the pop up. There is only a small header and a horizontal bar in the content layer because most of the interface will be built with ActionScript.

Published February 9, 2006 – Reads 33,574
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By David Vogeleer

David Vogeleer is the author of the newly release Flash 8 Professional Programming Unleashed from Sams publishing. He has been certified as both a Flash *Developer and Instructor and enjoys speaking and writing about Flash whenever possible. David currently works as a multimedia specialist at OSEC while still maintaining EMLlabs.com, a site dedicated to real-world Flash usage that he co-founded in 2004 and writing for FlashMagazine.com.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
SYS-CON Italy News Desk 02/09/06 01:05:15 PM EST

Flash has been communicating with JavaScript for a long time through getURL and fscommand, but with Flash 8 it's easier than ever. With the ExternalInterface class, you cannot only call JavaScript functions, but also have JavaScript call Flash functions. And now that JavaScript is getting more and more publicity in the form of AJAX (Asynchronous JavaScript and XML), the ability to seamlessly integrate your Flash content within your HTML content is essential.