Announcement

Collapse
No announcement yet.

Embedding Images in FlashDevelop/AS3

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Embedding Images in FlashDevelop/AS3

    [NOTE: This tutorial is tested as working in the July 2012 UDK, using Scaleform Player 4.0.16. It may not work in older versions such as 4.0.15.]

    Did you know you could create a UI without using Adobe's Flash editor? You can do everything in ActionScript 3, but it will be harder to animate things, and is less artist friendly. However, if you want to go the route of embedding images in FlashDevelop, here's how to get it working in UDK:

    (NOTE: This tutorial assumes you already know how to create a working SWF file using FlashDevelop only, as well as how to import a SWF into UDK and run it via Kismet or UnrealScript.)

    Step 1 - Setting up the ActionScript
    1. First, we need to create a custom BitmapAsset class:

      (NOTE: This is a workaround due to the fact that the normal BitmapAsset class requires ApplicationDomain, which Scaleform does not support in UDK yet.)

      Code:
      package mx.core {
          import flash.display.*;
      
          public class BitmapAsset extends Bitmap {
              public function BitmapAsset() {
                  trace("BitmapAsset ctor");
                  return;
              }
          }
      }
    2. Save this file as \mx\core\BitmapAsset.as in the same folder as your Main.as class (The class we write next)
    3. Next, write your Main.as class. This code assumes you have an image named "image.png" in the same folder as the Main.as class:

      Code:
      package {
          import flash.display.Sprite;
          import flash.events.Event;
          import mx.core.BitmapAsset;
      
          public class Main extends Sprite {
              [Embed (source = "image.png")]
              public var MyImage:Class;
              public var myBitmap = new MyImage;
      
              public function Main():void {
                  if (stage) init();
                  else addEventListener(Event.ADDED_TO_STAGE, init);
              }
      
              private function init(e:Event = null):void  {
      	    removeEventListener(Event.ADDED_TO_STAGE, init);
      	    // entry point
      
      	    addChild(myBitmap);
      	}
          }
      }
    4. Now, publish the file into a SWF, and test in the standalone GFx Player that ships with UDK. Your image should be visible on the screen.


    Step 2 - Importing into a UDK Package
    1. Copy the SWF file into your \UDKGame\Flash\ folder - in it's own subfolder. (Example: \UDKGame\Flash\EmbeddingTutorial\Test.swf)
    2. Now, create a subfolder at the same level as the SWF file, and name that folder so that it has the same name as the SWF file. So, if your SWF file is named "Test.swf", create a folder "Test" (\UDKGame\Flash\EmbeddingTutorial\Test\).
    3. Copy the png image you embedded into this subfolder (\Test\image.png).
    4. [IMPORTANT] Rename that png to Main_MyImage.png (The name must include the name of the AS3 class it is embedded in (in this case: Main), then an underscore, then the name of the image class name from the AS3 code we wrote (in this case: MyImage).
    5. Now, open the UDK Editor, and import the SWF file into the content browser. It should load without any warnings of missing images.
    6. Save the package.
    7. You should now be able to use this SWF file in your UnrealScript or Kismet based Scaleform movies!

    #2
    Thanks, Matt.

    Originally posted by Matt Doyle View Post
    [NOTE: This tutorial is tested as working in the July 2012 UDK, using Scaleform Player 4.0.16. It may not work in older versions such as 4.0.15.]
    Can confirm it does not work with the 4.0.15 player (January 2012). Works fine with 4.0.16 (July 2012).

    Only tested with the GFx Media Player, not in UDK itself.

    Comment


      #3
      Embedding SVG

      You can also use the same technique to embed SVG vector assets into an AS3 Scaleform SWF, which works for both 4.0.15 and 4.0.16.

      1. Similar to the BitmapAsset stub, you need a SpriteAsset.

      Code:
      package mx.core
      {
          
          public class SpriteAsset extends FlexSprite
          {
        
              public function SpriteAsset() 
              {
                  trace( "SpriteAsset ctor" );
                  return;
              }
        
          }
      
      }

      2. Follow the same pattern that Matt Doyle outlined for bitmaps...

      Code:
      import mx.core.SpriteAsset;
      Code:
      [Embed (source = "VectorTest.svg")]
      public var VectorTest:Class;
      Code:
      public var MySVG:SpriteAsset = new VectorTest();
      Code:
      addChild( MySVG );

      You can use Inkscape to export SVGs, just be aware that vector gradients don't transfer well or at all.

      Comment


        #4
        Is there realy no other ways ? =/ I tried it and I have warning in UDK and it did not work, I have one thing that differ from yours tutorial because he won't build it if I let package {
        instead of package mx.core { for the main.as

        Comment

        Working...
        X