Using the library as an html rendering engine in flash.

31 views
Skip to first unread message

dwarfy

unread,
Sep 19, 2009, 11:27:16 AM9/19/09
to htmlwrapper
Hi everybody !

First of all this project is great ! Good job done here :)

I'm kind of struggling here to do something.

I'm working in flash CS3 and I'd like to replace the

TextField.htmlText + CSS1 stylesheet combination offered by Flash CS3
which is so poor :'(

So I'd like to be able to render full html/css in flash.

First let's desribe my setup :
*********************************
I have a directory with :
- MankSans.swf
- style.css
- swfaddress.js
- test.html
- test1.fla
- test1.swf
- wrapper.js

Where test.html contains :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aa</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<p>blabla dans la catégorie CV</p>
</body>
</html>

and style.css contains :

html { height: 100%; }

body {
margin: 0; padding: 0; height: 100%;
font-size: 12px;
color:#FFOOOO;
}

p {
font-file: url("MankSans.swf");
font-family: "MankSans";
}

a {
color:#999999;
}


.redText {
color:#FF0000;
}

.blueText {
color:#0000FF;
}

.greenText {
color:#00FF00;
}

.boldText {
font-weight:bold;
}

.smallText {
font-size:8px;
}

.mediumText {
font-size:12px;
}

.largeText {
font-size:16px;
}



what I could get to work :
******************************
1) First test

In the first frame of my main timeline in my FLA movie, i added this :

import com.base.parse.Html;
var _Html:Html = new Html(this ,"test.html");

And I could get it to work by modifying the '-1' on the first line of
loadStyles() in com.base.parse.Html

And it worked , great !

2) Loading a string instead of a file.

var _str:String = "<html>\n"
+"<head>\n"
+"<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" />\n"
+"</head>\n"
+"<body>\n"
+"<p>blabla dans la catégorie CV</p>\n"
+"</body>\n"
+"</html>\n";

trace (_str);

var _Html:Html = new Html(this);
_Html.loadHTMLString(_str);


And I could get it too work too (I had to remove the xmlns in the
html tag ...?)
And I had to modify com.base.parse.Html at two places :

Firstly I changed the constructor so that if the url is null it doesnt
actually load it.
public function Html( tar:DisplayObjectContainer, urlStr:String =
null ) {
target = tar;
location = urlStr;
if (urlStr != null) {
loadHTML( location, onCompleteHTML );
}
}

Secondly, I added the function "loadHTMLString" Based on
"onCompleteHTML" :

public function loadHTMLString(htmlString:String) {
try {
var hd:String = htmlString;
hd = cleanLinks( hd );
//hd = hd.split( hd.substring(0, hd.indexOf("<head>") ) ).join
("<html>");
hd = cleanHTML( hd );
org_html = html;
html = new XML( hd );

trace(html);

loadStyles();

} catch( err:Error ) {
fixHtml( err );
return;
}
}

And that worked too (I had to remove xmlns in the html tag because for
some reason when it's there The stylesheet tag is not found ..)

Now what I could'nt get to work is to actually render this in a
movieclip instead of the maintimeline ...

I always get that error :

TypeError: Error #1010: A term is undefined and has no properties.
at com.base.draw::Element/com.base.draw::percent()
at com.base.draw::Element/com.base.draw::cleanTextValues()
at com.base.draw::Element/com.base.draw::cleanStyleObj()
at com.base.draw::Element/com.base.draw::cleanStyle()
at com.base.draw::Element/com.base.draw::makeStyle()
at com.base.draw::Element/make()
at com.base.draw::Element$iinit()
at com.base.parse::Html/render()
at flash.events::EventDispatcher/
flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.base.parse::Css/com.base.parse::loadFonts()
at com.base.parse::Css/com.base.parse::fontLoaded()

Which happen on line :

parentW = t["STYLE"].base.w - t["STYLE"].padding.l - t
["STYLE"].padding.r;

In the percent function from com.base.draw.Element ....

Any Help would be appreciated !!!

Also I'd like to formumate another request here.
I think it would be really GREAT to do an example about how to use
this library as HTML rendering engine for inside flash / flex !!
OR (and I could help on this) have a simplified version of this lib
that would only render for the usage I mentionned first ...


Cheers

Mathieu







dwarfy

unread,
Sep 19, 2009, 11:35:27 AM9/19/09
to htmlwrapper
Actually It seems this is also discussed here :

http://groups.google.com/group/htmlwrapper/browse_thread/thread/2433dc61263c1744#

(And there is no solution ?)

dwarfy

unread,
Sep 19, 2009, 1:21:27 PM9/19/09
to htmlwrapper

Hi again !

Actually I tested another approach with the same results...

I created a new FLA file with only the code I mentionned above for
displaying the html document.
That movie is working when I test it ..

Then I tried to include it in another movie as an external mc but with
no luck ..
I used :

var request:URLRequest = new URLRequest("htmlComp.swf");
var loader:Loader = new Loader();

function finished_loading (e:Event) {
var externalMovie = MovieClip(loader.content); // cast
'DisplayObject' to 'MovieClip'
stage.addChild(externalMovie); // add your swf directly to the stage

externalMovie.x = 200;
externalMovie.y = 200;
}

import flash.events.Event;
loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE,
finished_loading);

loader.load(request);

And I get the same error as above :( !!!!

TypeError: Error #1010: A term is undefined and has no properties.
at com.base.draw::Element/com.base.draw::percent()
at com.base.draw::Element/com.base.draw::cleanTextValues()
at com.base.draw::Element/com.base.draw::cleanStyleObj()
at com.base.draw::Element/com.base.draw::cleanStyle()
at com.base.draw::Element/com.base.draw::makeStyle()
at com.base.draw::Element/make()
at com.base.draw::Element$iinit()
at com.base.parse::Html/render()
at flash.events::EventDispatcher/
flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.base.parse::Css/com.base.parse::loadFonts()
at com.base.parse::Css/com.base.parse::fontLoaded()


Damn...
I was kind of sure it wouldn't work but I had to give it a shot ...

If anyone could help me ??????

Cheers

Mathieu

dwarfy

unread,
Sep 21, 2009, 6:23:45 PM9/21/09
to htmlwrapper
bump :)

Some activity in here ?

Tyler Larson

unread,
Sep 21, 2009, 6:38:13 PM9/21/09
to htmlw...@googlegroups.com

Have you looked in this method? The reason why you are having trouble
is because of scope.
A percentage is determined by the size of the parent displayObject, if
the system can't figure out what this is, of just can't find the
parent then you have a problem. You can get around this if you change
the way percentages work by giving it a different way to find parent
width or you can make html layouts that dont use percents.

I'm sorry for not getting back to you over the weekend. This isn't a
bug that I can fix at the moment but it should be pretty simple to fix
for your situation. The framework wasn't built with this case in mind.

-Tyler

Tyler Larson

unread,
Sep 21, 2009, 6:47:31 PM9/21/09
to htmlw...@googlegroups.com

This should be pretty easy to get working if you run this through the
debugger.
-Tyler

dwarfy

unread,
Sep 23, 2009, 8:13:27 PM9/23/09
to htmlwrapper
Hi !

I could make it work !!!! (with the simple example above anyway .. I
guess I should try more complex html and css files)

Great !! Thanks for your answer, it helped !

Here is how I did it ..

In Element.as I replaced all the tests :

if (element.name = "root1") {
do special case
} else {
do common case
}

by

try {
do common case
} catch (myError:Error) {
do special case
}

And it work in my case and also I think it shouldn't break the other
cases ...

What do you think ?

I can send you the new Element.as file if you want ? (just email me)

(I saw people having trouble with this situation in other posts in
this group)


UPDATE :

I think it might have broken the font loading .. (but the html is
displayed anyway, maybe not in the right font)

I get this message : You have loaded no fonts, this means you can
write no text.

Which I didn't have before ..

I will try to investigate that but it's too late here ...

Cheers and thank you again

Mathieu
Reply all
Reply to author
Forward
0 new messages