CodeIgniter and Flash

The demo portion of my site was built using CodeIgniter. I have been working on adding some Flash/AS3 Class demos, so I had to figure out the best way to display the swf files. It was easier than I thought.

SWFObject

First I downloaded SWFObject. Whether you are using CodeIgniter or any other framework (or no framework), the swfobject is the best way to display Flash SWF files. I stored both the swfobject.js and expressInstall.swf files under my assets folder (located under root/assets/flash/swfobject/). I’ll discuss the swfobject in more detail later..

Config.php

As I do with all of my assets, I store the top-level location in my config.php file (system/application/config/config.php). In this case, I will also create configuration item for both the swfobject.js and expressInstall.swf. If I ever want to change the location, I can just update my config file.

$config['flash_assets'] = 'assets/flash/';
$config['swfobject'] = 'assets/flash/swfobject/swfobject.js';
$config['expressinstall'] = 'assets/flash/swfobject/expressInstall.swf';

The Controller

Next I set up my controller file. The first thing I do is set up my class variables:

class UrlLoader extends Controller {
 
       ...
	var $swfObject = '';
	var $swf = '';
	var $expressInstall = '';
        var $view_dir = '';
	...

Now I set these values in my constructor:

function UrlLoader() {
        parent::Controller();
        ...
    	$this->swfObject = base_url() . $this->config->item('swfobject');
	$this->expressInstall = base_url() . $this->config->item('expressinstall');
	$this->swf = base_url() . $this->config->item('flash_assets') .'imurlloader/imurlloader.swf';
        $this->view_dir = 'flash/urlloader/';
	...
}

Now I can use these values in any controller method.

function image() {
	$data['swfObject'] = $this->swfObject;
	$data['expressInstall'] = $this->expressInstall;
	$data['swf'] = $this->swf;
	$data['css'] = $this->view_dir . 'image_styles_jq.php';
        $data['page'] = $this->view_dir. 'image';
	$this->load->vars($data);
	$this->load->view('flash/main');
}

The Main View

The most important aspects of the main view is the loading of the swfObject, the css file, and the page view.

<head>
	...
        <link href="<?php echo base_url(); ?>css/styles.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="<?php echo $swfObject; ?>"></script>
	<?php $this->load->view($css); ?>	
</head>
<body>
...
<div id="body">
	<?php $this->load->view($page); ?>	
</div>
...
</body>

Remember, $swfObject defines the location of the swfobject.js file. $css points to the file:

$data['css'] = $this->view_dir . 'image_styles_jq.php';

The file will store any additional css stylings and will load the relevant swf file using the swfobject.

The CSS/SWFOjbect View File

<style type="text/css">
#loader {
	float:left;
	width:400px;
	height:400px;
}
</style>
<script type="text/javascript">
	var flashvars = {};
	flashvars.type = "image";
	flashvars.url = "<?php echo base_url() . $this->config->item('flash_assets') .'imurlloader/joneil.jpg'; ?>";
	var params = {};
	params.scale = "noScale";
	swfobject.embedSWF("<?php echo $swf; ?>", "loader", "100%", "100%", "9.0.0", "<?php echo $expressInstall; ?>", flashvars, params);
</script>

When loading an swf file using the swfobject, you need the name of the swf that you want to load, the container id (loader), the width, height, and the version of the flash file being loaded.

?View Code JAVASCRIPT
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");

In addition, you may opt to use the expressInstall.swf file. If a user does not have flash installed on their computer, this file will activate the Adobe Express Install. This option specifies the location of the expressInstall.swf file.

?View Code JAVASCRIPT
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");

Notice that I am also passing flashvars to the swf file. If I want, I can also add Flash specific param elements. In this case, I only add the ‘noScale’ option.

?View Code JAVASCRIPT
var params = {};
params.scale = "noScale";

The Page View

In my page view, I really only need to add the container that will hold the swf.

<div id="loader"></div>

That’s it. As you can see it is quite easy to use a Flash SWF with CodeIgniter. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks