Quick Tip: How to Export Flash to PNG with HYPE
videos

Quick Tip: How to Export Flash to PNG with HYPE

on Mar 18th 2010 with 15 comments
Tutorial Details
  • Difficulty: Beginner
  • Program: Flash (CS4)
  • Estimated Completion Time: 7 minutes

With Flash you can create some awesome code generated graphics. Often you’d like to save these graphics as an image, so you can edit them afterwards with image editing software or just showcase them. We’ll use the HYPE framework from Joshua Davis and Branden Hall to save our code-generated graphics as a PNG.

View Screencast

Don’t like ads? Download the screencast.

Code

Here’s the code, in class form so you can use it whether you’re developing with Flash or Flex:

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import hype.framework.display.BitmapCanvas;
	import hype.extended.util.ContextSaveImage;
	
	public class Demo extends MovieClip
	{
		public function Demo():void
		{
			var sprite:Sprite = new Sprite();
			sprite.graphics.beginFill(0xff0000);
			sprite.graphics.drawRect(150, 150, 200, 200);
			sprite.graphics.endFill();
			
			var bmc:BitmapCanvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight);
			bmc.startCapture(sprite);
			addChild(bmc);
			
			var saver:ContextSaveImage = new ContextSaveImage(bmc);
		}
	}
}

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Daniel Apt is a Dutch 19-year-old web designer. He’s passionate about all forms of design, dance and bicycling. He’s studying Design for Graphic Communication at the London College of Communication.  

Plus Premium
 
 
  • http://hype.joshuadavis.com Branden Hall

    Just a small thing – HYPE was created by myself and Josh, it’s not just Josh’s (and he’d be first to tell you that too!)

    • http://snaptin.com Ian Yates
      Staff

      Quite right Branden, sorry for missing that..

    • http://michaeljameswilliams.com/ Michael Williams

      Sorry about that — updated!

    • Daniel Apt
      Author

      My sincere apologies Branden.

      And thanks Michael for updating ;-)!

      • http://hype.joshuadavis.com Branden Hall

        No problem! Josh and I are actually in the process of moving the project on to it’s own domain. It really started out as us just goofing about for a project we were doing together. We never suspected it would grow into what it is now!

        Thanks!

  • http://www.juxt2.com Dimitree

    Great! I d like more tutorials on HYPE framework If that’s possible.

    • http://snaptin.com Ian Yates
      Staff

      Absolutely, any HYPE tutorial ideas can be sent to us via the Activetuts+ submission form: http://enva.to/a6pmlg Perhaps you’d like to see something achieved with HYPE but don’t know how to go about it? Again, let us know!

  • Pingback: uberVU - social comments

  • http://hype.joshuadavis.com Branden Hall

    Oh – and great work! (I should have put that in my first comment!) I love seeing people learn and teach HYPE, thank you!

    Couple of technical additions:

    First, the startCapture call starts a continuous process (it re-captures the clip every frame by default). If you don’t want a continuous process you can instead just use the “capture()” method of your BitmapCanvas class to take a “snapshot” of the clip. You just have to make sure you set the “target” property of the BitmapCanvas to the display object you want to capture.

    Second, if you don’t want to add the BitmapCanvas to your display tree, you don’t have to do that either. All you need to do is to pass some other DisplayObject (well, actually an interactive object) as third argument to the ContextSaveImage class (stage is always a good idea):

    var saver:ContextSaveImage = new ContextSaveImage(bmc, null, this.stage);

    When that middle argument is null it defaults to using the PNG encoder, but there’s also a TGA (Targa, common format for 3D textures and for TV) encoder and there will probably be other new encoders in the future.

    • Gonzalo

      I’m not able to set “target” property of the BitmapCanvas. Did you change anything in the last release?

  • http://www.joshuadavis.com Joshua Davis

    Hola !

    thanks for the tutorial !!! I would also add that the joy of ContextSaveImage… is using a scalefactor :

    // setupLargeCanvas(10) = scaleFactor x 10 (640 x 360 Stage / 6400 x 3600 PNG)
    bmc.setupLargeCanvas(10);
    var saver:ContextSaveImage = new ContextSaveImage(clipCanvas, PNGCanvasEncoder);

    ContextSaveImage was created to create LARGE image outputs for use with print.

    also… too Branden’s point :

    the HYPE Framework gets a happy new home http://www.hypeframework.org/ please update your bookmarks! blog post here http://bit.ly/au7lzp

  • d3rd3vil

    Thank you for this tutorial! Now how can I use this script with Firefox for example? I mean that’s what it’s for, right? ^^

    • Daniel Apt
      Author

      This is not a script for ripping graphics from Flash movies from the internet.

      If the developer has done what I’ve explained in this tutorial, then you should be able to right-click and select Encode PNG. After you’ve done that, right click again and select Save PNG.

  • http://www.muhammadbinyusrat.com ActionScript 3 Programmer

    If you were looking for exporting image from Flash to PHP, here is the easiest way to do it:

    http://www.muhammadbinYusrat.com/flash/PNGExport

    Thanks!

  • Pingback: Exportando PNGs ou JPGs em alta def. com Hype Framework - Paespedro's Stuff

  • Abe

    This works great, However when I tried to add labels as children to the sprite, the “Save Png” option refused to appear.
    Any pointers?

  • Sim

    Hi, I have made some animation using hype and its classes such as GridLayout, SoundAnalyzer and FunctionTracker. How can i save following frames as pngs. When i try to use instructions from this tutorial i can save only one frame which contain one instance of movieClip i have in my library. Thanks for help.