Creating HTML output with Flash CS3

[Flep]

Have you ever tried to get an HTML output by Flash?

What is really interesting.

I played a little with the methods setTextformat and getTextFormat of Actionscript 3.0 and I managed to create an HTML page by Flash using PHP.

In practice I have a text field type input, I added a bold button and a component ColorPicker.

By selecting the text you can assign a format bold and change color.

Finally, calling a PHP script and passing the output of html text field, I generate an html page with the same format.

Clearly this is just an example of what could be done, open thousands of doors.

Create a text editor, an editor WYSIWYNG.

For any application that requires an output html by Flash, this is the first step in leave.

I create a FLA file with name main.fla .

Inside it I have an input TextField with instance name field_txt and a random text.


Also I have a MovieClip with name bold_mc and a ColorPicker component with name picker_mc.


I have a button with name send_btn too.


Finally I have 2 TextField that I use to embed the fots into SWF.


For those who don't know what embed fonts means, please read the following tutorial:


how to embed fonts in SWF.

Now I create the Document Class, file AS with name Main.as:

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.net.*;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			stage.focus=field_txt;
			
			addBoldListener();
			addColorPickerListener();
			addSendListener();
		}
		
		private function addBoldListener():void
		{
			bold_mc.mouseChildren=false;
			bold_mc.buttonMode=true;
			bold_mc.addEventListener(MouseEvent.MOUSE_DOWN,setBoldDown);
		}
		
		private function addColorPickerListener():void
		{
			picker_mc.addEventListener(Event.CHANGE,setColorChange);
		}
		
		private function addSendListener():void
		{
			send_btn.addEventListener(MouseEvent.MOUSE_DOWN,setSendDown);
		}
		
		private function setBoldDown(evt:MouseEvent):void
		{
			var f:TextFormat=field_txt.getTextFormat(field_txt.selectionBeginIndex,field_txt.selectionEndIndex);
			field_txt.setTextFormat(getBoldFormat(f,true),field_txt.selectionBeginIndex,field_txt.selectionEndIndex);
		}
		
		private function setSendDown(evt:MouseEvent):void
		{
			var variables:URLVariables=new URLVariables();
			variables.content=field_txt.htmlText;
			
			var request:URLRequest=new URLRequest("http://www.flepstudio.org/swf/PlayingWithSetFormat/myFormat.php");
			request.method=URLRequestMethod.POST;
			request.data=variables;
			
			var caller:URLLoader=new URLLoader();
			caller.addEventListener(Event.COMPLETE,htmlSent);
			caller.dataFormat=URLLoaderDataFormat.TEXT;
			try 
			{
				caller.load(request);
			} 
			catch (error:Error) 
			{
				trace('Unable to load requested document.');
			}
		}
		
		private function htmlSent(evt:Event):void
		{
			var caller:URLLoader=URLLoader(evt.target);
			var vars:URLVariables=new URLVariables(caller.data);
			var request:URLRequest=new URLRequest();
			request.url="http://www.flepstudio.org/swf/PlayingWithSetFormat/"+vars.answer;
			navigateToURL(request,"_blank");
		}
		
		private function setColorChange(evt:Event):void
		{
			var f:TextFormat=field_txt.getTextFormat(field_txt.selectionBeginIndex,field_txt.selectionEndIndex);
			field_txt.setTextFormat(getColorFormat(f,evt.target.selectedColor),field_txt.selectionBeginIndex,field_txt.selectionEndIndex);
		}
		
		private function getBoldFormat(fo:TextFormat,b:Boolean):TextFormat
		{
			fo.bold=b;
			return fo;
		}
		
		private function getColorFormat(fo:TextFormat,b:uint):TextFormat
		{
			fo.color=b;
			return fo;
		}
	}
}

I create a PHP script:

PHP Code:

<?php
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    
    $content=stripslashes($_POST["content"]);
    
    $file_directory = "files/"; //the directory you want to store the new file in
    
    $file_name = time();//the file's name, stripped of any dangerous tags
    
    $file = $file_directory.$file_name.".html"; //this is the entire filename
    
    $create_file = fopen($file, "w+"); //create the new file
    
    $chmod = chmod($file, 0755); //set the appropriate permissions.
    
    $header='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>'.$file_name.'</title>
</head>
<body>';
                
    $footer='
</body>
</html>';
    
    fwrite($create_file, $header."\n".$content.$footer);
    
    //attempt to write basic content to the file
    
    fclose($create_file);
    
    $answer=$file;
    echo "answer=".$answer;
?>

Create a folder with name " files " where the PHP will save the html files that generates with the Flash output.

Let's see the code

Importing the classes I need

import flash.display.*;

import flash.events.*;

import flash.text.*;

import flash.net.*;

Declare the class

public class Main extends MovieClip

Declare the constructor function

public function Main()

in which I add a listener of event Event.ADDED_TO_STAGE who calls a function named init.

In this way, we could also load this SWF into another with no code change !

Methods

init

removeEventListener(Event.ADDED_TO_STAGE,init);

I remove the listener of ADDED_TO_STAGE because it has been already dipatched.

stage.focus=field_txt;

set the focus on field_txt and call 3 methods


addBoldListener();

addColorPickerListener();

addSendListener();

addBoldListener

add a listener to the MovieClip bold_mc: MouseEvent.MOUSE_DOWN that will call a method with name setBoldDown

bold_mc.mouseChildren=false;

bold_mc.buttonMode=true;

bold_mc.addEventListener(MouseEvent.MOUSE_DOWN,set BoldDown);

addColorPickerListener

add a listener to the component picker_mc: Event.CHANGE that will call a method with name setColorChange ( once a color has been picked )

picker_mc.addEventListener(Event.CHANGE,setColorCh ange);

addSendListener

add a listener to the button send_btn: MouseEvent.MOUSE_DOWN that will call a method with name setSendDown

send_btn.addEventListener(MouseEvent.MOUSE_DOWN,se tSendDown);

setBoldDown

here I assign the bold format to the selected text of field_txt

var f:TextFormat=field_txt.getTextFormat(field_txt.sel ectionBeginIndex,field_txt.selectionEndIndex);

field_txt.setTextFormat(getBoldFormat(f,true),fiel d_txt.selectionBeginIndex,field_txt.selectionEndIn dex);

setColorChange

here I assign the color format to the selected text of field_txt

var f:TextFormat=field_txt.getTextFormat(field_txt.sel ectionBeginIndex,field_txt.selectionEndIndex);

field_txt.setTextFormat(getColorFormat(f,evt.targe t.selectedColor),field_txt.selectionBeginIndex,fie ld_txt.selectionEndIndex);

setSendDown

call the PHP passingthe value of the htmlText property of field_txt

var variables:URLVariables=new URLVariables();

variables.content=field_txt.htmlText;

var request:URLRequest=new URLRequest("http://www.flepstudio.org/swf/PlayingWithSetFormat/myFormat.php");

request.method=URLRequestMethod.POST;

request.data=variables;

var caller:URLLoader=new URLLoader();

caller.addEventListener(Event.COMPLETE,htmlSent);

caller.dataFormat=URLLoaderDataFormat.TEXT;

try

{

caller.load(request);

}

catch (error:Error)

{

trace('Unable to load requested document.');

}

htmlSent

this method will be execute when the PHP does the echo to Flash passing the name of file created

var caller:URLLoader=URLLoader(evt.target);

var vars:URLVariables=new URLVariables(caller.data);

var request:URLRequest=new URLRequest();

request.url="http://www.flepstudio.org/swf/PlayingWithSetFormat/"+vars.answer;

navigateToURL(request,"_blank");

getBoldFormat

this method changes the bold of the selected text

fo.bold=b;

return fo;

getColorFormat

this method changes the color of the selected text

fo.color=b;

return fo;

Stay tuned !

 

[partimer]

Hi there,

This is exactly what I've been looking for - the starting blocks to build an AS3 text editor. It'll take a while as I'm new to AS3 but I've already hit some stumbling blocks.

I'd like to produce this as an add on component to existing projects so need to move the code from a document class to an imported class - tried making some changes to the code but it simply seems broken now. Is there any chance you could advise on how to go about this?

Many thanks in advance,

Pt