Loading a image on the fly

genux — Mon, 26 Apr 2010 10:03:22 +0000

In flash you can load images from a remote server on-the-fly whilst the flash is running within the browser, here I am going to show how to load a image into a Image tag.

To start off you need to setup the environment to compile up the flash code into SWF file, (here is a previous tutorial where I have created the development environment for flash in creating the classic hello world)

As a side note, the image that I am loading I have taken from the openclipart website and it is off a laptop which I have made slightly smaller to load into the embed object within the HTML (web) page.

To start off, we first create a flash tag of Image (mx is the subscript as such of the flash library) with having the id of imageLoad, we can access the tag within the actual code, and then create a Button which once clicked calls a function called “loadImageIntoImageBlock” the event that is attached to the function is what happened to call this function which would be a mouse event.

	 x="30" y="30" id="imageLoad" />
	 label="Click here to load image" click="loadImageIntoImageBlock(event)" />

and now when the Button has been clicked we just need to call the function, which is below, the imageLoad is the ID name from the mx:Image above and then just need to alter the source to the image that is in the same place as the swf file.

private function loadImageIntoImageBlock(e:MouseEvent):void {
	imageLoad.source = 'johnny_automatic_laptop.png';
}

that is about it, here is the full source code, if you call this imageload.mxml

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	 x="30" y="30" id="imageLoad" />
	 label="Click here to load image" click="loadImageIntoImageBlock(event)" />
	>
		
			private function loadImageIntoImageBlock(e:MouseEvent):void {
				imageLoad.source = 'johnny_automatic_laptop.png';
			}
		]]>
	>
>

I always place my swf files within a bin directory, so if you create a bin directory where the above imageLoad.mxml file is and then run this (once your development environment is setup e.g. the PATH variable to find the mxmlc executable file), once that is place you can compile up the code into a swf by

mxmlc imageload.mxml -output ./bin/imageload.swf

which places the imageLoad.swf into the bin directory that was created.

Here is the web page code that will load the imageLoad.swf into a web page, if you save this as loadingimage.html within the same bin directory as above with the ‘johnny_automatic_laptop.png’ image within the same bin directory you can then open up the html page within your favourite web browser (Firefox) and then click on the button and it will load in the image. hey presto

<html>
<body>
src="imageload.swf" width="560" height="560">
</body>
</html>

Hello World

genux — Mon, 01 Feb 2010 20:21:56 +0000

Flex is the Flash SDK from Adobe, you can download a open source command line compiler from adobe (Flex open source page ). The Free SDK link is here.

Once you have downloaded the free SDK, you will need to place into the system. I have placed mine into /opt directory called flex_sdk_3, so something like (you will need to be root to do this!)

cd /opt
mkdir flex_sdk_3
cd flex_sdk_3
unzip <place where your free sdk is)

and then create a place for where you are going to be creating your flex scripts, I placed mine into my home directory under my programming/flex sturcture, so this is where I am

mkdir -p ~/Programming/flex/

The -p will create any directories that are not present there already, and also the ~ is for the home directory that user.

I then copied the flex-config.xml from the /opt/flex_sdk_3/frameworks directory into the Programming/flex directory and edited it to the new values.
The full differences between the standard flex-config.xml and the one that I have altered is below, but basically I have added into the xml elements values the new directory for where flex-sdk is (e.g. /opt/flex_sdk_3/) so that flex’s command line environment will know where to get the libraries to compile and create the swf (ShockWave Flash), but here are the elements that I have altered.

>
     >/opt/flex_sdk_3/frameworks 
>
     all the 's>/opt/flex_sdk_3/frameworks
>
   the >/opt/flex_sdk_3/frameworks path to the framework directory file.

Because the class structure follows the directory structure of the directories below the compiling environment, I created the following directory structure com/codingfriends/helloworld with

mkdir -p com/codingfriends/helloworld

which will create the whole structure if there is no directories there already.

Then you can place these two files into the helloworld directory

This is the class Greeter that is created and turned into a object within the swf file save this as Greeter.as

// the directory structure of where the class is.
package com.codingfriends.helloworld
{
	public class Greeter
	{
		private var name:String;
 
		// constructor
		public function Greeter(initialName:String="Ian")
		{
			name = initialName;
		}
 
		// sayHello returns a String
		public function sayHello():String
		{
			var result:String;
			// if the class private name is present
			if (name!=null && name.length >0)	
			{
				result = "Hello there, "+name+".";
			}
			// should never reach here on a basic run.
			else 
			{
				result="Hello there.";
			}
 
			return result;
		}
	}
}

var = variable and the type of variable or return variable is at the end of the definition e.g.

public var name:String; // this is a variable named "name" and it is of type String
public function sayHello():String // this is a function named "sayHello" and returns a String type

save this as Greeter_mx.mxml

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp();">
>

import com.codingfriends.helloworld.Greeter;
// the initialize application .. the start
private function initApp():void
{
	// create a new Greeter object with no passing in name
	var myGreeter:Greeter = new Greeter();
	// and say hello world 
	output.text+=myGreeter.sayHello();
	// create a new greeter with the name = genux instead
	var newGreeter:Greeter = new Greeter("genux");
	output.text+=newGreeter.sayHello();
}
]]>
>
 
 id="output" width="100%" textAlign="center"/>
>

The is the place where the code starts, the rest is just the adobe application settings, within the code there is a reference to “output”, which is defined in the

When you want to compile up the source code, you will need to add the /opt/flex_sdk_3/bin (which is where the mxmlc command line compiler for creating the swf file) to the console

PATH=$PATH:/opt/flex_sdk_3/bin

and then to compile up the source code

mxmlc -load-config flex-config.xml -source-path=~/Programming/flex/actionscript/ ./com/codingfriends/helloworld/Greeter_mx.mxml -output ./bin/Greeter_mx.swf

the -load-config will load the one in the present directory which I altered, and -source-path is there so that the base directory is used for compiling so the compiler will know where to get the com/codingfriends/helloworld/Greeter.as and Greeter_mx.mxml, and the -output is what the output flash file is/placed.

Here is the output of the Greeter.swf file.

Here is the difference (diff) between the flex-config.xml from the one that I edited and the one that was in the /opt/flex_sdk_3/frameworks directory.

53c53
<           <path-element>/opt/flex_sdk_3/frameworks/libs/player/{targetPlayerMajorVersion}/playerglobal.swcpath-element>
---
>           <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swcpath-element>
70c70
<          <path-element>/opt/flex_sdk_3/frameworks/libspath-element>
---
>          <path-element>libspath-element>
72,74c72,74
<          <path-element>/opt/flex_sdk_3/frameworks/libs/playerpath-element>
<          <path-element>/opt/flex_sdk_3/frameworks/libs/player/{targetPlayerMajorVersion}path-element>
<            <path-element>/opt/flex_sdk_3/frameworks/locale/{locale}path-element>
---
>          <path-element>libs/playerpath-element>
>          <path-element>libs/player/{targetPlayerMajorVersion}path-element>
>            <path-element>locale/{locale}path-element>
82c82
<             <manifest>/opt/flex_sdk_3/frameworks/mxml-manifest.xmlmanifest>
---
>             <manifest>mxml-manifest.xmlmanifest>

Coding Friends » Flex Flash

Loading a image on the fly

Hello World