flat assembler
Message board for the users of flat assembler.

Index > Heap > Flash Virtual Machine: Handcoded web-animations

Author
Thread Post new topic Reply to topic
kasake36



Joined: 28 Mar 2006
Posts: 68
kasake36
I believe almost everyone on this board has been confronted with a nice Flash-animation whilst surfing through the internet. Adobe Flash animations can be generated via special IDEs for designers, but also can get programmed using the intern scripting language: Action Script. Action Script again gets turned into Assembler instructions when the Flash Animation gets compiled. That's were it gets interesting for us as Assembler programmers...

Igor Kogan programmed the Flash Assembler (http://flasm.sourceforge.net/) which enables you to disassemble Flash files (*.swf) which were programmed using Action Script. The disassembled code can get optimized, widened and so on and then re-compiled into the originating Flash/swf file.
Now, with the help of some open source tools it has been made possible to program a whole Flash animation in FlashAssembler. The following demonstration of this is not well explained, since it just shall provide you with a glimpse of how it is done. If you get interested and want to program something yourself, please read through the Flash Assembler website and the sites it references to: those should give you all info you need.

Short info about the intent of the demonstration:

Displaying headers using nice fonts is very hard on HTML sites, since the "nice font" has to be installed on the each client computer who browses the HTML site. So web designers instead use an image with the header in the nice font and embed it on the HTML site. So if, for instance, the web-site has 20 headers, the designer has to provide 20 images, which means 20 downloads for the client computer. Not only does this mean much traffic, but also much work, since the designer has to create and save all those images.
As solution to this, a flash animation shall get generated that takes the text of the header as parameter and displays it in the "nice font".



Step 1: creating a flash animation and embedding the "nice font"
To be able to display the letters of the "nice font", those need to get embedded into your flash animation, like a dialog resource. This work is done by a tool named swfmill (http://swfmill.org), which expects a XML-file as input (header.xml):
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<movie width="385" height="20" framerate="12">
    <frame>
        <library>
            <font id="avantgarde" import="avantgarde.ttf"
                glyphs="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789 !@#$%^*()-=_+'':,./?"/>
        </library>
        <DoAction>
            <actions>
                <Stop/>
                <EndAction/>
            </actions>
        </DoAction>
        </frame>
</movie>
    



Step 2: programming the animation
swfmill leaves us with header.swf, which is disassemble using the above mentioned Flash Assembler. I then insert the needed Assembler instructions (bytecode) in the disassembled file (header.flm):
Code:
movie 'header.swf' compressed // flash 7, total frames: 1, frame rate: 12 fps, 385x20 px
  
  exportAssets
    1 as 'avantgarde'
  end // of exportAssets

  frame 0
    constants   '_root', 
                'avantgarde', 
                'createTextField', 
                'embedFonts', 
                'font', 
                'getInstanceAtDepth', 
                'selectable', 
                'setNewTextFormat', 
                'size', 
                'text', 
                'TextFormat', 
                'textColor',
                'title', 
                'Stage',
                'align',
                'TL',
                'titlefld'  

     // aligning the stage:
    push    'Stage'
    getVariable
    push    'align'
    push    'TL'
    setMember

  // creating the textfield:
    push '_root'
    getVariable
    setRegister r:1
    pop
    push 20
    push 385
    push 0
    push 0
    push 10
    push 'titlefld'
    push 6
    push r:1
    push 'createTextField'
    callMethod
    pop
    push 10
    push 1
    push r:1
    push 'getInstanceAtDepth'
    callMethod

    setRegister r:2
    push 'embedFonts'
    push TRUE
    setMember
    push 0
    push 'TextFormat'
    new
    setRegister r:3
    push 'size'
    push 15
    setMember
    push r:3
    push 'font'
    push 'avantgarde'
    setMember
    push r:3
    push 'selectable'
    push FALSE
    setMember
    push r:3
    push 1
    push r:2
    push 'setNewTextFormat'
    callMethod
    pop

        // pushing the header-text into the text-field:
    push r:1
    push 'title'
    getMember
    setRegister r:3
    pop
    push r:2
    push 'text'
    push r:3
    setMember
    push r:2
    push 'textColor'
    push 8304969
    setMember
  end // of frame 0
end
    

Then header.flm gets compiled back into the Flash animation using the Flash Assembler tool again.


Step 3: test
For testing purposes, a HTML file is generated (test.htm):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash test</title>
</head>
<body>
      <embed src="header.swf?title=Programmed%20with" 
               quality="high" scale="exactfit" menu="false"
          bgcolor="#FFF" width="385" height="20" swLiveConnect="false"
                type="application/x-shockwave-flash">
  <br />
        <embed src="header.swf?title=Flash%20Assembler" 
               quality="high" scale="exactfit" menu="false"
          bgcolor="#FFF" width="385" height="20" swLiveConnect="false"
                type="application/x-shockwave-flash">
</body>
</html>
    



Well, how the result is looking like is attached to this post as screen.png.

*** END ***


Description: Screenshot of result
Filesize: 6.95 KB
Viewed: 2370 Time(s)

screen.png




Last edited by kasake36 on 09 Sep 2008, 07:11; edited 1 time in total
Post 14 Aug 2008, 12:13
View user's profile Send private message Reply with quote
Madis731



Joined: 25 Sep 2003
Posts: 2141
Location: Estonia
Madis731
I say just wow! Now I must dig in and see if its any use Razz
Post 14 Aug 2008, 13:39
View user's profile Send private message Visit poster's website Yahoo Messenger MSN Messenger Reply with quote
kasake36



Joined: 28 Mar 2006
Posts: 68
kasake36
Hello Madis731! I just couldn't resist to post this link: http://www.hotel-pension-peck.at/index.html

The start animation is done with Flash Assembler (although very bumpy back in 2007)!
Post 14 Aug 2008, 14:41
View user's profile Send private message Reply with quote
Madis731



Joined: 25 Sep 2003
Posts: 2141
Location: Estonia
Madis731
I see that it works with my F9, but do you mean that it supports all the older adobe's creations!? Like still very popular F7 and F8...
Well, I'm not very sceptical, I'm thinking: "Why shouldn't it" but just to be sure.
Post 14 Aug 2008, 19:06
View user's profile Send private message Visit poster's website Yahoo Messenger MSN Messenger Reply with quote
kasake36



Joined: 28 Mar 2006
Posts: 68
kasake36
Yes, it does support F7 and F8, i tried both! And when you have a look at the first line of the code-block of step 2, you will notice "Flash 7" in the comment.

Well, i've noticed that this topic has been moved from "Projects and Ideas" to "Heap", where the description says: " Everything not related to assembly programming should be posted here.", but since the topic holds info about Flash Assembler programming i aimed for "Projects and Ideas".
Post 16 Aug 2008, 08:07
View user's profile Send private message Reply with quote
Madis731



Joined: 25 Sep 2003
Posts: 2141
Location: Estonia
Madis731
Oh, maybe they meant FASM, but you should mention about it to the admin who did it.

Or maybe the problem was even ... you are presenting for another author, but Project&Ideas are usually something done by forum members.

Anyway Very Happy glad that nobody deleted it, because no matter what, it seems rather interesting. I remember some time ago there were web-pages "assembled" with assembly Smile

_________________
My updated idol Very Happy http://www.agner.org/optimize/
Post 16 Aug 2008, 20:24
View user's profile Send private message Visit poster's website Yahoo Messenger MSN Messenger Reply with quote
LocoDelAssembly
Your code has a bug


Joined: 06 May 2005
Posts: 4633
Location: Argentina
LocoDelAssembly
I did it, because the project is not even written in any Assembly flavor and it is written already so it looked like posting a link to NASM or YASM, it is not the correct forum for this. I was about moving it to Main but since it is not related to x86 Assembly, I decided it wasn't the better place.

It doesn't mean it is not interesting/important, even though this forum is used for some trivialities at times, it is also used for serious things that doesn't fit in the other forums.

Now back on topic, here are the SWF spec: http://www.adobe.com/devnet/swf/pdf/swf_file_format_spec_v9.pdf (Comes with example at the end)

http://www.adobe.com/devnet/actionscript/articles/avm2overview.pdf The ActionScript Virtual Machine 2 (specs?).
Post 16 Aug 2008, 20:44
View user's profile Send private message Reply with quote
kasake36



Joined: 28 Mar 2006
Posts: 68
kasake36
Thank you for those very interesting links, LocoDelAssembly!

I am not annoyed in any way that this topic has been moved, i just wanted to state WHY i put it in the "Projects and Ideas" forum. I'm fully loyal to the forum moderators. Smile
Post 18 Aug 2008, 05:59
View user's profile Send private message Reply with quote
Display posts from previous:
Post new topic Reply to topic

Jump to:  


< Last Thread | Next Thread >
Forum Rules:
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Copyright © 1999-2020, Tomasz Grysztar.

Powered by rwasa.