Topic: Embedding pictures in .swf using Flashdevelop - doesnt work?

Hello,

I made a RSS widget for iBood
http://www.chumby.com/guide/widget/iBood%20on%20Chumby
Which plays nicely locally in my webbrowser.

When uploading to ChumbyIndustries or the Chumby itself, the iBood-logo is lost however.

This logo is embedded as a noninterlaced jpg (logo.jpg) using the flasdevelop-library functionality

        var _mcl:MovieClipLoader= new MovieClipLoader();
        var _photo:MovieClip = createEmptyMovieClip('photo',1);
        _mcl.loadClip("library/logo.jpg", _photo);

Any ideas why there is a differece between a flash player and the chumby? When loading jpgs over the net using the above code, all is fine.

Thanks!

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

I think you are not embedding the picture here, just loading it from the local folder (or the equivalent folder on your webserver)

When I embed images from FlashDevelop the "id" looks like library.logo.jpg (it's the id autogenerated by FlashDevelop/SWFMill for the embedded image). Yours looks too much like a file path to be an embedded image smile

What are the exact steps you are using in FD ?

I usually do:
1) copy image in FD Project
2) right click on the image in FD and do "Add to Library"
3) in the code window add:
    var photo:MovieClip = mc.attachMovie("", "photo", mc.getNextHighestDepth());
4) with selection in "" go back to the image in the project panel, right click and do "Insert into Document"

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

Its working now, thanks a lot!
Im new to flash, so i was making basic mistakes here.

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

I'd like to describe embedding fonts in a FlashDevelop widget, adding to what Raff said about embedding pictures. Its not hard once you know how and has some significant advantages.

First, get a true type font. The liberation family appears to allow free use without violating anyones license. You can read about the project here: https://fedorahosted.org/liberation-fonts/ or download the v1.04 zip file from here: https://fedorahosted.org/releases/l/i/l … s-1.04.zip. They have a serif font, a sans-serif font, and a mono-spaced font. I used various sizes of the sans font in my ClearSync calendar widget which you will be able to download from the Chumby web site in a couple days and view on your Chumby to see an example of that font's usage.

From the download, unzip it and copy the .ttf file of the font you want to use into the directory of your FlashDevelop widget project. I put mine along with the .as files under src, but I noticed others tend to make a "library" subdirectory to store fonts and pictures.

Once you've copied the file, when you look at the right side panel within FD you will see the name of the file you copied. Note that the filename is black. Next right click on the file name and from the pop-up menu, select Add to Library. Then the filename will turn blue. Although you don't need to know this, the next time you compile (i.e. hit the Run Movie command - F5), the FD system creates an "obj" subdirectory and puts in it an XML file that has in it a linkage between your filename and a name you can refer to in your actionscript code. It also has a list of characters that will be embedded from the font into your widget's swf file. But the FD system takes care of getting the font info into your widget file, so you don't have to pay attention to the obj directory or the XML file in it.

The default for a font is to include "All" letters, which isn't really All but corresponds to the following set of characters:

1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ `~!@#$%^&*()-_=+[]{}\|;:'",./<>?

You can see this list by looking in the XML file mentioned above under the "glyph" tag. This set of characters may be sufficient for many widgets. For the liberation sans font, this added about 10k to my widget size. However, my calendar widget needs to display events entered by users on a PC, Mac or Linux box and users may use more than just English. After a font file is added as a library item to your FD project, when you right click on the file name, there is a pop-up menu item called Options. Clicking on that brings up a dialog box where you can select "Embed these characters:" and type in a list. I used the following:

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

which correspond to 0x20 to 0xFF with a block of poorly defined characters and the <del> character removed from the middle. Be sure your <space> character at the beginning of this list doesn't get eaten along the way, or your text will look funny withnospacesbetweenwords. This set of characters expanded my widget size by another 7k or so over the shorter list of characters for a total of 17k added and should cover many European languages.

To use the embedded font in your ActionScript code, write the following:

var fmt:TextFormat = new TextFormat("src.LiberationSans-Regular.ttf", height, color);
var tf:TextField = mc.createTextField("tfName", mc.getNextHighestDepth(), x, y, width, height);
tf.setNewTextFormat(fmt);
tf.text = "Hello world!";

where you have defined x, y, width, height, color, and mc is the name of your main MovieClip. In the new TextFormat line above, you can get the FD environment to insert the string src.LiberationSans-Regular.ttf into your code window by double clicking on the file name in the right hand panel. Note that this string is not quite the file name and path, but the correspondence between this string and the file name is maintained in the XML file.

Once you have embedded your font, then the font that you see in the FD debug environment and the Chumby hardware is now the same font. And before embedding, I got no characters whatsoever on the Virtual Chumby. Now my text shows up consistently everywhere.

I hope this post saves you some time. If someone knows how to move this explanation to kayakpete's wiki for FlashDevelop, please feel free.

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

Wow, thanks, thats super helpful! The normal font is not rotatable, so i need TTF.

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

This is not working for me, the displayed font reverts to the default on both my PC and the Chumby.

I've successfully embedded pictures and music using this technique, but fonts just don't work.

Using "_sans", etc. works, but not alternate fonts... any thoughts? Thanks.

7 (edited by Fabur 2010-02-24 04:35:04)

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

Are you sure that you actually have those fonts installed on the PC and/or chumby and that you are using the correct name?

Re: Embedding pictures in .swf using Flashdevelop - doesnt work?

Fabur wrote:

Are you sure that you actually have those fonts installed on the PC and/or chumby and that you are using the correct name?

The fonts need to be installed on the Chumby? How is that done?

On my PC the following code renders "properly," i.e. it doesn't line up because the fonts are different, even though they have the same size, x and y.

On my Chumby the text just looks purple, because the fonts are rendering the same and the RED "liberation" text has its alpha set to 75%


class Main
{
    private var parent:MovieClip;
    private var txt_Standard:TextField;
    private var txt_Liberation:TextField;
    
    function Main(mc:MovieClip)
    {
        this.parent = mc;
        
        var fmt_Standard:TextFormat = new TextFormat("_sans", 25, 0x0000FF);
        var fmt_Liberation:TextFormat = new TextFormat("src.LiberationSans-Regular.ttf", 25, 0xFF0000);
        
        this.txt_Standard = this.parent.createTextField("txt_Standard", mc.getNextHighestDepth(), 10, 10, 200, 100);
        this.txt_Standard.setNewTextFormat(fmt_Standard);
        this.txt_Standard.text = "Hello World!";
        
        this.txt_Liberation = this.parent.createTextField("txt_Liberation", mc.getNextHighestDepth(), 10, 10, 200, 100);
        this.txt_Liberation._alpha = 75;
        this.txt_Liberation.setNewTextFormat(fmt_Liberation);
        this.txt_Liberation.text = "Hello World!";    
    }    
   
    static function main(mc:MovieClip)
    {
        var app = new Main(mc);
    }
}

Thanks so much for the help!