Added basic HTML5 export (no colors or ActionScript yet

This commit is contained in:
Skyler Lehmkuhl 2012-01-12 13:46:14 -05:00
parent 852003809b
commit 06d8d18618
3 changed files with 262 additions and 67 deletions

245
base.js
View File

@ -1,21 +1,12 @@
<html>
<head>
<style type="text/css">
canvas { border: 2px solid #000; position:absolute; top:0;left:0;
visibility: hidden; }
</style>
</head>
<body>
<canvas id="canvas1" width=500 height=500></canvas>
<canvas id="canvas2" width=500 height=500></canvas>
<script>
//-------------------------- BEGIN JAVASCRIPT --------------------------------\\ //-------------------------- BEGIN JAVASCRIPT --------------------------------\\
var fps = 50 var fps = 50
//var fps = 10;
var cr; var cr;
var canvas; var canvas;
var _processingobj var _processingobj;
var _lastmouse = [0,0];
var _global = {};
var appendError = function(str){ var appendError = function(str){
throw new Error("DEBUG: "+str) throw new Error("DEBUG: "+str)
@ -46,12 +37,17 @@ function _timerBase () {
DrawingBuffer=1-DrawingBuffer; DrawingBuffer=1-DrawingBuffer;
//canvas = Buffers[DrawingBuffer]; //canvas = Buffers[DrawingBuffer];
draw() _root._draw(_rootFrame)
if (!(_lastmouse[0]==_root._xmouse&&_lastmouse[1]==_root._ymouse)) {
// Mouse moved
_root._onMouseMove()
}
for (i in this.funcs){ for (i in this.funcs){
this.funcs[i]._draw() this.funcs[i].onEnterFrame();
} }
Buffers[1-DrawingBuffer].style.visibility='hidden'; Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible'; Buffers[DrawingBuffer].style.visibility='visible';
_lastmouse=[_root._xmouse,_root._ymouse]
} }
} }
@ -66,6 +62,23 @@ function ave(x, y, fac) {
return y - fac*(y-x) return y - fac*(y-x)
} }
function getObjectClass(obj) {
/* Returns the class name of the argument or undefined if
it's not a valid JavaScript object.
*/
if (obj && obj.constructor && obj.constructor.toString) {
var arr = obj.constructor.toString().match(
/function\s*(\w+)/);
if (arr && arr.length == 2) {
return arr[1];
}
}
return undefined;
}
function Frame () { function Frame () {
this.actions = '' this.actions = ''
this.run_script = function() { this.run_script = function() {
@ -86,13 +99,42 @@ function MovieClip() {
The duplicateMovieClip() method allows you to create a movie clip instance based on The duplicateMovieClip() method allows you to create a movie clip instance based on
another movie clip. another movie clip.
*/ */
this._frames = [new Frame()] this._layers = [new Layer(this)]
this._currentframe = 1; this._currentframe = 1;
this._playing = true; this._playing = true;
this._x = 0;
this._y = 0;
this._xscale = 1;
this._yscale = 1;
this._rotation = 0;
Timer.add(this) Timer.add(this)
this._draw = function (sttc) {
/////////////////// TODO: RECAST THIS. ROOT AS MOVIECLIP. DRAW THROUGH HIEREARCHY
this._draw = function (frame,frame2,r) {
_processingobj = this _processingobj = this
for (var i in this) { if (!frame2) {
this._x = frame._x
this._y = frame._y
this._xscale = frame._xscale
this._yscale = frame._yscale
this._rotation = frame._rotation
} else {
this._x = ave(frame2._x, frame._x, r)
this._y = ave(frame2._y, frame._y, r)
this._xscale = ave(frame2._xscale, frame._xscale, r)
this._yscale = ave(frame2._yscale, frame._yscale, r)
this._rotation = ave(frame2._rotation ,frame._rotation, r)
}
//log(this._x)
cr.save()
cr.translate(this._x,this._y)
cr.rotate(this._rotation*Math.PI/180)
cr.scale(this._xscale*1.0, this._yscale*1.0)
/*for (var i in this) {
if (this._frames[this._currentframe-1]==undefined) { if (this._frames[this._currentframe-1]==undefined) {
for (var j=0; j<this._currentframe-1; j++) { for (var j=0; j<this._currentframe-1; j++) {
if (this._frames[j]) { if (this._frames[j]) {
@ -113,8 +155,11 @@ function MovieClip() {
this[i]._draw(this._frames[this._currentframe-1][i]); this[i]._draw(this._frames[this._currentframe-1][i]);
} }
} }
}*/
for (i in this._layers) {
this._layers[i]._draw(this._currentframe,this)
} }
if (this._frames[this._currentframe-1]) { /*if (this._frames[this._currentframe-1]) {
if (this._playing) { if (this._playing) {
this._frames[this._currentframe-1].run_script() this._frames[this._currentframe-1].run_script()
} }
@ -131,8 +176,29 @@ function MovieClip() {
this._currentframe = 1; this._currentframe = 1;
} }
} }
}*/
if (this._playing) {
var lessthan=false
for (var i=0; i<this._layers.length; i++) {
if (this._layers[i]._frames.length>this._currentframe) {
lessthan=true;
this._currentframe++;
break;
}
}
if (!lessthan){
this._currentframe = 1;
}
} }
cr.restore()
this._previousframe = this._currentframe this._previousframe = this._currentframe
if (!frame2) {
frame._x = this._x
frame._y = this._y
frame._xscale = this._xscale
frame._yscale = this._yscale
frame._rotation = this._rotation
}
} }
this.play = function () { this.play = function () {
this._playing = true this._playing = true
@ -140,6 +206,104 @@ function MovieClip() {
this.stop = function () { this.stop = function () {
//Timer.remove(this) //Timer.remove(this)
this._playing = false this._playing = false
}
// Implemented?
this.onData = function () { //No
}
this.onDragOut = function () { //No
}
this.onDragOver = function () { //No
}
this.onEnterFrame = function () { //Yes
}
this.onKeyDown = function () { //No
}
this.onKeyUp = function () { //No
}
this.onKillFocus = function () { //No
}
this.onLoad = function () { //No
}
this._onMouseDown = function () {
for (var i in this) {
if (getObjectClass(this[i])=='MovieClip') {
// TODO: Add bounds checking.
this[i]._onMouseDown();
}
this.onMouseDown()
}
}
this.onMouseDown = function () { //No
}
this._onMouseMove = function () {
for (var i in this) {
if (getObjectClass(this[i])=='MovieClip') {
// TODO: Add bounds checking.
this[i]._onMouseMove();
}
this.onMouseMove()
}
}
this.onMouseMove = function () { //No
}
this.onMouseUp = function () { //No
}
this.onPress = function () { //No
}
this.onRelease = function () { //No
}
this.onReleaseOutside = function () { //No
}
this.onRollOut = function () { //No
}
this.onRollOver = function () { //No
}
this.onSetFocus = function () { //No
}
this.onUnload = function () { //No
}
}
function Layer (parent) {
this._frames = [new Frame()]
this._parent = parent;
this._draw = function (currentframe) {
_processingobj = this
cr.save()
for (var i in this._parent) {
if (this._frames[currentframe-1]==undefined) {
for (var j=0; j<currentframe-1; j++) {
if (this._frames[j]) {
last = j
}
}
for (var j=this._frames.length; j>currentframe-1; j--) {
if (this._frames[j]) {
next = j
}
}
if (this._frames[last][i]) {
this._parent[i]._draw(this._frames[last][i],this._frames[next][i],(currentframe-last)/(next-last));
}
}
else {
if (this._frames[currentframe-1][i]) {
this._parent[i]._draw(this._frames[currentframe-1][i]);
}
}
}
if (this._frames[currentframe-1]) {
if (this._parent._playing) {
this._frames[currentframe-1].run_script()
}
}
cr.restore()
}
this.stop = function () {
this._parent.stop()
}
this.play = function () {
this._parent.play()
} }
} }
@ -190,7 +354,12 @@ var Stage = {
} }
var root = {} var _rootFrame = new Frame()
var _root = new MovieClip()
_rootFrame._root = {}
_rootFrame._root._x = 50
_rootFrame._root._y = 40
/*if (canvas.getContext) { /*if (canvas.getContext) {
cr = canvas.getContext("2d"); cr = canvas.getContext("2d");
@ -205,9 +374,9 @@ function draw() {
cr = canvas.getContext("2d"); cr = canvas.getContext("2d");
for (i in root) { for (i in _root) {
if (root[i]._draw) { if (_root[i]._draw) {
//root[i]._draw(true) //_root[i]._draw(true)
} }
} }
} }
@ -223,33 +392,3 @@ function stop() {
} }
/*--------------------------------------- */ /*--------------------------------------- */
var a = new Shape()
a._shapedata = [["M",0,0],["L",400,0],["L",400,200],["L",0,200],["L",0,0]]
var b = new MovieClip()
b.a = a
b._frames[0].a = {}
b._frames[0].a._x = 100
b._frames[0].a._y = 20
b._frames[0].actions = 'this.a._x = this.a._x + 1'
root.b = b
b._frames[50] = new Frame()
b._frames[50].a = {}
b._frames[50].a._x = 50
b._frames[50].a._y = 40
b._frames[100] = new Frame()
b._frames[100].a = {}
b._frames[100].a._x = 75
b._frames[100].actions = 'stop();'
b._frames[100].a._y = 120
b._frames[150] = new Frame()
b._frames[150].a = {}
b._frames[150].a._x = 100
b._frames[150].a._y = 20
setTimeout('b.play()',20)
//------------------- END OF JAVASCRIPT ------------------------\\
</script>
</body>
</html>

View File

@ -178,10 +178,31 @@ def run_file(self=None):
svlgui.execute("open -a "+osx_flash_player_loc+" test.swf") svlgui.execute("open -a "+osx_flash_player_loc+" test.swf")
elif svlgui.PLATFORM=='win32': elif svlgui.PLATFORM=='win32':
win_flash_player_loc = "" win_flash_player_loc = ""
svlgui.execute('start '+win_flash_player_loc+" test.swf") svlgui.execute('start '+win_flash_player_loc+" test.swf")
elif svlgui.PLATFORM.startswith('linux'): elif svlgui.PLATFORM.startswith('linux'):
linux_flash_player_loc = "" linux_flash_player_loc = ""
svlgui.execute('xdg-open '+linux_flash_player_loc+" test.swf") svlgui.execute('xdg-open '+linux_flash_player_loc+" test.swf")
def create_html5(root):
retval = "<head>\n\
<style type=\"text/css\">\n\
canvas { \n\
border: 2px solid #000; position:absolute; top:0;left:0;\n\
visibility: hidden; }\n\
</style>\n\
</head>\n\
<body>\n\
<canvas id=\"canvas1\" width=500 height=500 ></canvas>\n\
<canvas id=\"canvas2\" width=500 height=500></canvas>\n\
<script src=\"base.js\">\n\
</script>\n\
<script>"+"".join([i.print_html() for i in svlgui.Library])+root.print_html()+"</script>\n</body>\n</html>"
return retval
def run_html(self=None):
global root
print "RUNNING"
root.descendItem().activelayer.frames[root.descendItem().activelayer.currentframe].actions = MainWindow.scriptwindow.text
open("SDFGHJK.html", "w").write(create_html5(root))
def box(x, y, width, height, fill=None): def box(x, y, width, height, fill=None):
@ -208,6 +229,7 @@ def shape(x, y, fill=None):
return shape return shape
root = svlgui.Group() root = svlgui.Group()
root.name = "_root"
root.level = True root.level = True
root.onMouseDown = onMouseDownGroup root.onMouseDown = onMouseDownGroup
root.onMouseUp = onMouseUpGroup root.onMouseUp = onMouseUpGroup
@ -237,13 +259,13 @@ elif svlgui.SYSTEM=="android":
MainWindow = lightningbeam_windows.MainWindowAndroid() MainWindow = lightningbeam_windows.MainWindowAndroid()
MainWindow.stage.add(root, 0,0) MainWindow.stage.add(root, 0,0)
svlgui.FOCUS = MainWindow.stage svlgui.FOCUS = MainWindow.stage
layers = svlgui.Group() layers = svlgui.Group(skipl=True)
b = svlgui.Image("media/object_active.png",0,0,True,MainWindow.layerbox,16,1) b = svlgui.Image("media/object_active.png",0,0,True,MainWindow.layerbox,16,1,True)
layers.add(b) layers.add(b)
MainWindow.layerbox.add(layers,0,0) MainWindow.layerbox.add(layers,0,0)
frames = svlgui.Group(onload=onLoadFrames) frames = svlgui.Group(onload=onLoadFrames,skipl=True)
b = svlgui.Image("media/keyframe_active.png",0,0,True,MainWindow.timelinebox,16,1) b = svlgui.Image("media/keyframe_active.png",0,0,True,MainWindow.timelinebox,16,1,True)
frames.add(b) frames.add(b)
frames.onMouseDown = onClickFrame frames.onMouseDown = onClickFrame
frames.onKeyDown = onKeyDownFrame frames.onKeyDown = onKeyDownFrame
@ -294,12 +316,12 @@ def quit(widget):
def add_keyframe(widget=None): def add_keyframe(widget=None):
root.descendItem().add_frame(True) root.descendItem().add_frame(True)
b = svlgui.Image("media/keyframe_active.png",root.descendItem().activeframe*16,0,True,MainWindow.timelinebox,16,1) b = svlgui.Image("media/keyframe_active.png",root.descendItem().activeframe*16,0,True,MainWindow.timelinebox,16,1,True)
frames.add(b) frames.add(b)
MainWindow.timelinebox.draw() MainWindow.timelinebox.draw()
def add_layer(widget=None): def add_layer(widget=None):
root.descendItem().add_layer(root.descendItem()._al) root.descendItem().add_layer(root.descendItem()._al)
layers.add(svlgui.Image("media/object_active.png",0,root.descendItem().layers.index(root.descendItem().activelayer)*32,True,MainWindow.layerbox,16,1)) layers.add(svlgui.Image("media/object_active.png",0,root.descendItem().layers.index(root.descendItem().activelayer)*32,True,MainWindow.layerbox,16,1,True))
print root.descendItem().layers.index(root.descendItem().activelayer)*32 print root.descendItem().layers.index(root.descendItem().activelayer)*32
#MainWindow.layerbox.draw() #MainWindow.layerbox.draw()
def delete_layer(widget=None): def delete_layer(widget=None):
@ -381,7 +403,8 @@ svlgui.menufuncs([["File",
"Export .pdf", "Export .pdf",
"Export Animated GIF"], "Export Animated GIF"],
["Tools", ["Tools",
("Execute",run_file,"/\r")], ("Execute",run_file,"/\r"),
("Execute as HTML5",run_html,"/\\")],
["Modify", ["Modify",
"Document", "Document",
"Convert to Symbol", "Convert to Symbol",

View File

@ -212,6 +212,7 @@ if SYSTEM=="osx":
m.save_cmd.enabled = 1 m.save_cmd.enabled = 1
m.open_cmd.enabled = 1 m.open_cmd.enabled = 1
m.run_file.enabled = 1 m.run_file.enabled = 1
m.run_html.enabled = 1
m.create_sc.enabled = 1 m.create_sc.enabled = 1
m.add_keyframe.enabled = 1 m.add_keyframe.enabled = 1
m.add_layer.enabled = 1 m.add_layer.enabled = 1
@ -837,9 +838,10 @@ class TextView(Widget):
self.scroll_page_down(); self.scroll_page_down();
class Image(object): class Image(object):
def __init__(self,image,x=0,y=0,animated=False,canvas=None,htiles=1,vtiles=1): def __init__(self,image,x=0,y=0,animated=False,canvas=None,htiles=1,vtiles=1,skipl=False):
global Library if not skipl:
Library.append(self) global Library
Library.append(self)
self.x = x self.x = x
self.y = y self.y = y
self.minx = x self.minx = x
@ -1170,6 +1172,9 @@ class Shape (object):
miny = property(getminy) miny = property(getminy)
maxx = property(getmaxx) maxx = property(getmaxx)
maxy = property(getmaxy) maxy = property(getmaxy)
def print_html(self):
retval = "var "+self.name+" = new Shape();\n"+self.name+"._shapedata = "+str(self.shapedata)+";\n"
return retval
class framewrapper (object): class framewrapper (object):
#Wraps object per-frame. Allows for changes in position, rotation, scale. #Wraps object per-frame. Allows for changes in position, rotation, scale.
@ -1553,6 +1558,8 @@ class Group (object):
if frame<len(self.activelayer.frames) and self.activelayer.frames[frame]: if frame<len(self.activelayer.frames) and self.activelayer.frames[frame]:
self.activelayer.currentframe = frame self.activelayer.currentframe = frame
self.activelayer.activeframe = frame self.activelayer.activeframe = frame
def getobjs(self):
return [item for sublist in self.layers for item in sublist.objs]
minx = property(getminx) minx = property(getminx)
miny = property(getminy) miny = property(getminy)
maxx = property(getmaxx) maxx = property(getmaxx)
@ -1562,9 +1569,11 @@ class Group (object):
currentframe = property(getcurrentframe, setcurrentframe) currentframe = property(getcurrentframe, setcurrentframe)
level = property(getlevel, setlevel) level = property(getlevel, setlevel)
scale = property(fset = setscale) scale = property(fset = setscale)
objs = property(getobjs)
def __init__(self, *args, **kwargs): def __init__(self, *args, **kwargs):
global Library if not 'skipl' in kwargs:
Library.append(self) global Library
Library.append(self)
self.layers = [Layer(*args)] self.layers = [Layer(*args)]
self._al = 0 self._al = 0
self.clicked = False self.clicked = False
@ -1698,6 +1707,30 @@ class Group (object):
retval+=".frame "+str(i+1)+"\n" retval+=".frame "+str(i+1)+"\n"
retval+=j.frames[i].print_sc() retval+=j.frames[i].print_sc()
return retval return retval
def print_html(self):
retval = ""
for i in self.layers:
pass
#retval+=i.print_html(True,False)
'''for i in xrange(self.maxframe()):
for j in self.layers:
if j.frames[i]:
retval+=".frame "+str(i+1)+"\n"
retval+=j.frames[i].print_html()'''
print self.objs
for i in self.objs:
retval += self.name+"."+i.name+" = "+i.name+";\n"
for i in range(len(self.layers)):
for j in xrange(self.maxframe()):
if self.layers[i].frames[j]:
retval += self.name+"._layers["+str(i)+"]._frames["+str(j)+"] = new Frame ();\n"
for k in self.layers[i].frames[j].objs:
retval += self.name+"._layers["+str(i)+"]._frames["+str(j)+"]."+k.name+" = {};\n"
retval += self.name+"._layers["+str(i)+"]._frames["+str(j)+"]."+k.name+"._x = "+str(k.x)+";\n"
retval += self.name+"._layers["+str(i)+"]._frames["+str(j)+"]."+k.name+"._y = "+str(k.y)+";\n"
retval += self.name+"._layers["+str(i)+"]._frames["+str(j)+"]."+k.name+"._rotation = "+str(k.rot)+";\n"
return retval
def set_cursor(curs, widget=None): def set_cursor(curs, widget=None):
if SYSTEM == "osx": if SYSTEM == "osx":