21 Replies Latest reply on Jun 6, 2008 11:45 AM by kglad

    How did they do this?

    C-Rock Level 2
      Blue Cottom Design

      I have a site that has 70 fonts and it takes too long to load the 3.9 MB font file on top of the rest of the design section. How did these guys pull off the dynamic fonts? I've tried everything...
        • 1. How did they do this?
          Greg Dove Level 4
          I've done dynamic font loading in the past in as2, from what I recall it took a while to get my head around it. I guess they're doing something similar here if its in as2. If the subsequent text effects are done with vectors and not bitmaps as the basis for changing the appearance then the loaded files may contain other pre-processed information about the fonts that provides drawing paths as well. If they're using as3 then it's possible to extract the drawing path data for the fonts from the fonts themselves.

          You can see that they're loading them in individual files on demand if you look at this startup file:
          http://www.bluecotton.com/fonts.ini
          • 2. Re: How did they do this?
            C-Rock Level 2
            So how do you do that? Can you give me an idea? I'm pretty good with AS.
            • 3. Re: How did they do this?
              Greg Dove Level 4
              The reason I didn't go into specifics straight off is because I can't remember all the details. From what I do recall it was using a runtime shared library font in an external swf. I set up a jsfl routine to export them. I know there was someone doing this as a specialty online as well 2 or 3 years back.

              You might find some answers in these (quick google runtime shared font library flash)

              http://david.realeyes.com/?p=42
              http://www.quasimondo.com/archives/000227.php
              http://www.laflash.org/forum/archive/index.php/t-1184.html

              SIFR may provide some answers too
              • 4. Re: How did they do this?
                Greg Dove Level 4
                Looks like this might be the answer:
                http://www.sharedfonts.com/eng/help.html
                • 5. Re: How did they do this?
                  kglad Adobe Community Professional & MVP
                  it's easy IF you setup your main application to use loaded fonts from the start:

                  1. create an empty movieclip that will be the load target of your swf that contains an embedded font (and that font has a linkage id and is exported for a.s.)

                  2. all text fields in your load target have access to the embedded font AFTER loading is complete. nothing special needed to embed the font in these textfields. just assign your textformat's font property using the linkage id used in your external swf.
                  • 6. Re: How did they do this?
                    C-Rock Level 2
                    That looks like what I'm already doing. However the shared font file has all the fonts in it and takes forever to load at its size. It has to load before any fonts can be used. I've tried breaking them up into their individual files like the Blue Cotton site but using this method each one has to load first as well. So it takes the same amount of time. The Blue Cotton site has a menu with the font in it so you can see what it looks like. There's no embedding or anything, just static text. Then when you click on the font it is loaded so it can be used in your input box. I watched my temporary internet files to confirm this is how it works. That's what I need. Just to represent the text statically and then only load one font when it's clicked. Can't figure it out...
                    • 7. Re: How did they do this?
                      C-Rock Level 2
                      If you use a font that is shared then it loads when the swf using that font is loaded.

                      I have a background swf that loads the shared fonts swf and then my design swf can use them when each products design swf loads. However the full font swf has to load first.

                      I don't get why it doesn't work to show the font that is static and when one clicks on that font to use it in the input box it loads the swf only containing that font and can then be used. Only at the time it is requested, that is the key. I don't want it to load before it's needed that is what I'm doing now that is taking forever to download...

                      Am I just missing something?
                      • 8. How did they do this?
                        Greg Dove Level 4
                        You should start with a list of the external fonts that you load separately first. You need to load the container clips each of which contains the RSL fonts as needed.
                        You could use an object with the font names as 'keys' to maintain a record of what's loaded when each font is loaded. And check the html (if that's what you're using) for an unloaded font before you assign it to your textfields.

                        e.g.
                        loadedFonts['Arial']=true when loaded

                        before assigning to the textfield loop through the html string (fontList is the array of font names)
                        var requiredLoads=[];
                        for (var i:Number=0;i<fontList.length;i++){
                        if (newHTML.indexOf(fontList[ i ])!=-1) requiredLoads.push(fontList[ i ]);
                        }
                        if (requiredLoads.length) {
                        //check each to see if its already assigned in the loadedFonts object... if not, do the loading of the needed fonts
                        }

                        the font checking there is not optimized... that would pick up a font name in the content as being required, so you could search for font tags as another way.
                        • 9. Re: How did they do this?
                          C-Rock Level 2
                          This sounds like we're loading all the fonts again, first.

                          What is an RSL font?

                          Do you mean an array created in flash or a read external document like the .inf file for blue cotton?
                          • 10. Re: How did they do this?
                            kglad Adobe Community Professional & MVP
                            embed one font in each external swf.
                            • 11. How did they do this?
                              Greg Dove Level 4
                              No, I mean each font is two files... the first is a container clip that contains the Runtime Shared Library font.

                              That's what I remembered about it being less than straightforward.
                              yes you would create the array from something like the inf file which you loaded.. basically a directory of the fonts that can be loaded.

                              Then you would just check that whatever textfield assignments (html) you were making - before you do so - had all the required fonts loaded before assigning it to the textfield. If not you load those fonts (the location would be in the inf file - or similar), and track what is already loaded.

                              I think I set it up so that the 'container' clip for the font had its fontname as a variable. But it could just be determined from the filename I guess.

                              I suspect the Bluecotton site are doing it a different way somehow... as they only seem to be loading one external swf for each font.

                              {edit}
                              I remember now: I set up each 'container' clip with boolean variables inside for bold=true;
                              italics=true;
                              bolditalics=true;

                              (or false etc).
                              • 12. Re: How did they do this?
                                C-Rock Level 2
                                Okay, I'm not sure which way I'm actually trying here but no luck either way.

                                Here: Font Test

                                The flas are fontTest.fla and Curlz.fla if you wish to download and look in the same directory.

                                The curlz file has a curlz font embedded and exporting. The fontTest file on the click of the blue button loads the curlz swf into a container. Then upon completing text is sent to a box and formatted trying to use the curlz font.

                                It doesn't work...
                                • 13. How did they do this?
                                  Greg Dove Level 4
                                  If you just load a swf with a regular embedded font, it is not accessible in its parent when loaded in as2. But it is available if loaded as a runtime shared library asset in a loaded child swf (hence the need to have two swfs for a 'font'). This is quite different in as3.
                                  I think your best approach would be to use that sharedfonts manager. It seems to be exactly designed for the use-case you describe.
                                  http://www.sharedfonts.com/eng/index.html

                                  The other option to might be to not use runtime shared library assets, just load swfs with regular embedded fonts and just render the fonts in textfields in the loaded child swfs.... i.e. accept that you won't use them in the parent.

                                  I don't think that example you linked to has any embedded font, nor does it appear to be trying to load anything external. The swf file is only 600 bytes in size. [edit] looking again it appears you've changed it. will keep checking
                                  • 14. Re: How did they do this?
                                    C-Rock Level 2
                                    I think I may have it. I'm not loading enough fonts to tell if it's loading them all first or not... not sure... But I think you may have it. Why the two clips for one font, silly. Must be why they changed it.

                                    Thanks again for your help.
                                    • 15. Re: How did they do this?
                                      C-Rock Level 2
                                      This actually doesn't work unless you have the fonts on your computer. Any idea on how to get this to work if the user doesn't have these fonts? That's the whole point, I guess...
                                      • 16. Re: How did they do this?
                                        Greg Dove Level 4
                                        Here is an old jsfl extension that may still work with CS3 to do the fiddly work of creating the 2 external swfs.

                                        I think from memory I used this and edited the jsfl to do a bit more like bold and italic etc at the same time.

                                        http://translate.google.com/translate?u=http%3A%2F%2Fwww.carlosrovira.com%2Fblog%2F%3Fp%3D 144&hl=en&ie=UTF8&sl=es&tl=en

                                        It does work, but like I said its not straightforward, or at least it wasn't for me when I had to learn about it and do something similar.
                                        That link I posted earlier demonstrates some working examples with a class that helps to manage the loading and registration of the fonts I think.
                                        • 17. Re: How did they do this?
                                          C-Rock Level 2
                                          I'm not sure how to explain this. I've spent over 100 hours in a few months trying to get this to work. Here is what I have:
                                          A base file that has a clip(fontsMC) that will load into it a fontsetlibrarytrigger(the second file you said I needed with the import). The trigger file contains the import of a movie clip that is exported from my font file. The font file has 90 fonts in it. When I press a button to load the fonts into the clip fontsMC then the trigger fla is loaded. My bandwidth profiler shows the stream of the giant font file loading. Now I should be able to use on an upper lever any font within that giant file. However it only works if my upper level the file going to use one of the fonts, contains an import of one font in the big font file. What that does is actually not make the trigger work on press but on the load of the upper file. I don't want any imports in my upper file because for every import I would have to wait for the font file to load making the fonts not load dynamically. That's the whole point of all of this. I'm using the giant font file because I wanted to check and see if I could get it to work before I broke it down into each font.

                                          Basically where you're importing a font to use must load the font file import before it finishes loading. That is fine if it would import and load on the base file and allow me to use the fonts on a higher level. It doesn't...

                                          That jsfl code doesn't work.

                                          Wasting lots of time and money over here on this. Anyone up for trying to do this for some money?
                                          • 18. Re: How did they do this?
                                            kglad Adobe Community Professional & MVP
                                            send me email via my website to discuss hiring me.
                                            • 19. Re: How did they do this?
                                              kglad Adobe Community Professional & MVP
                                              actually, after thinking about this, i can create an application that only requires you to embed one font in one swf. do that for each font you want to load dynamically and put your group of swfs (each with one font) in a directory for organizational purposes.

                                              then call one function that would accept as parameters, an existing textfield (no matter where it's located) and the font you want to embed for that textfield. the function would handle loading the correct swf and embedding that font in the passed textfield.

                                              you'll probably want a class created to handle this so it can pass some events back to your application (possibly the load progress of the swf and load complete so you know when you can assign your text property, if it hasn't been assigned already).
                                              • 20. Re: How did they do this?
                                                C-Rock Level 2
                                                That is exactly what I want.
                                                • 21. Re: How did they do this?
                                                  kglad Adobe Community Professional & MVP
                                                  send me an email via my website if you want to hire me to create this.