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…”

CodeIgniter and Flash

Tuesday, April 27th, 2010

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.

^?View Code PHP

$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:

^?View Code PHP

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

Now I set these values in my constructor:

^?View Code PHP

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.

^?View Code PHP

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.

^?View Code PHP

<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:

^?View Code PHP

$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

^?View Code PHP

<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.

^?View Code PHP

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

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

Categories: Codeigniter, Flash
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.

2 Responses to “CodeIgniter and Flash”

Gabriel Martínez Portilla Says:
November 4th, 2010 at 11:06 pm

I am working with CodeIgniter and I can not implement your example, please could you put the files to download and understand it better …
krypton Says:
January 19th, 2011 at 8:44 pm

Minha duvida e nesse parte
//nao entendi se e pasta e a funcao
$this->view_dir = ‘flash/urlloader/’;

//no final e uma pasta chamada imurlloader e uma imagem
flashvars.url = “config->item(‘flash_assets’) .’imurlloader/joneil.jpg’; ?>”;
nao sei porque nao carrega o flash fiz como vc me indicou mas nao funciona

Se vc puder me ajudar!!!