Using HYPE Framework’s ContextSavePNG

One of the first things You want to do when playing with the HYPE framework is to output your creations to a printable file and guess what?  Joshua and Branden have already think on that, hype includes a the class ContextSavePNG that will let you output your hype generated images to a printable .png. Here’s a simple example on how to use the ContextSavePNG class of the hype framework.

For this short example i’m using one of the files included in the hype framework zip that You can download here “\hype-hype-605a391\examples\Flash\SimpleBallistic\02_simpleBallistic.fla”

Here’s the ActionScript code of that file:

	developed by Branden Hall and Joshua Davis.
import hype.extended.behavior.SimpleBallistic;
import hype.extended.color.ColorPool;
import hype.extended.trigger.ExitShapeTrigger;
import hype.extended.trigger.RandomTrigger;
import hype.framework.core.ObjectPool;
import hype.framework.core.TimeType;
import hype.framework.display.BitmapCanvas;
import hype.framework.rhythm.SimpleRhythm;
MyExitShape.visible = false;
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
var bmc:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
var clipContainer:Sprite = new Sprite();
var color1:ColorPool = new ColorPool(
	0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409
var color2:ColorPool = new ColorPool(
	0xFFFFFF, 0xCCCCCC, 0x999999, 0x666666
var pool:ObjectPool = new ObjectPool(MyCircle, 800);
function addNextClip(r:SimpleRhythm) {
	var clip:MyCircle = pool.request() as MyCircle;
	if (clip != null) {
		clip.x = myWidth / 2;
		clip.y = 100;
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.3);
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 2, 3, 0.25, 90);
		// exit callback function, target Object, shape, shapeFlag
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
		var randomSplit:RandomTrigger = new RandomTrigger(onSplit, clip, 50);
function onExitShape(clip):void {
function onSplit(parentClip):void {
	var clip:MyCircle = pool.request() as MyCircle;
	if (clip) {
		clip.x = parentClip.x;
		clip.y = parentClip.y;
		clip.scaleX = clip.scaleY = 0.05 + (Math.floor(Math.random() * 3) * 0.05);
		// target Object, drag, minForce, maxForce, gravity, gravityAngle
		var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 4, 6, 0.2, 90);
		// exit callback function, target Object, shape, shapeFlag
		var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true);
var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip);
rhythm.start(TimeType.TIME, 1);
pool.onRequestObject = function(clip) {
bmc.startCapture(clipContainer, false);

The first thing you need to save your actionscript generated visuals to an image file is to import the ContextSavePNG class.

import hype.extended.util.ContextSavePNG;

Then just before the line were you start capturing your clip into the bitmap canvas you call the setupLargeCanvas method of the BitmapCanvas class, by setting the argument to 10 you are telling hype that the output image will be the orginal size of your swf times 10, so in this example the original .fla size is 640 px width x 360 px height the exported .png will be 6400 px width x 3600 px height, pretty cool right ? with a file this size you could print a poster once you export the file to. png that in other form will be very hard to output an image that size.


Next you need to create an instance of the ContextPNG class and pass it the parameter of the BitmapCanvas you want to encode in this case the bmc. Now at the time that you run your .swf and hit the right click you will get the EncodePNG button when you click it your hype animation will pause and a small progress bar will appear in the center of your .swf indicating that the bmc is being encoded after that the button will change to SavePNG and when you hit that button vuala you have an scaled up transparent .png file out of your .swf.

var savePNG:ContextSavePNG = new ContextSavePNG(bmc);
bmc.startCapture(clipContainer, false);

Don’t forget to check out for more information and the latest updates on HYPE.

See You around and happy coding.

Flash Builder 4 & Flex 4 Framework have been released

Adobe Flash Builder 4 has been released and with it the Flex 4 framework some of the features listed below:
Powerful coding tools ENHANCED
Develop using a powerful Eclipse™ based IDE that includes editors for MXML, the ActionScript® language, and CSS, as well as syntax coloring, statement completion, code collapse, interactive step-through debugging, and automatic generation of common code.
Rich visual layout ENHANCED
Visually design and preview user interface layout, appearance, and behavior using a rich library of built-in components. Extend the built-in Flex framework components or create new ones as needed. Import functional application UI created using the Adobe Flash Catalyst™ interaction design tool.
Data-centric development NEW
Introspect Java™, PHP, Adobe ColdFusion®, REST, and SOAP services to display methods and properties in the new Data/Service Explorer. Bind methods to UI components using a simple drag-and-drop approach.
Interactive data visualization ENHANCED
Create data dashboards and interactive data analysis by simply dragging and dropping a chart type and linking it to a data source using the Flex Charting library. Use the powerful Advanced Datagrid to enable users to explore complex data.
Skinning and styling ENHANCED
Customize the appearance of an application using CSS and graphical property editors. Quickly set the most commonly used properties and preview the results in Design View. Browse available themes and apply them to your project using the new Theme Browser.
Integration with Adobe Creative Suite design toolsENHANCED
Import design assets created using Adobe Flash Professional, Illustrator®, Photoshop®, or Fireworks® software, or import a complete application user interface created using Flash Catalyst. A new workflow between Flash Professional and Flash Builder facilitates importing and updating custom Flex components.
Native support for Adobe AIR
Create applications for the Adobe AIR® runtime with Flash Builder 4, including all the tools required to build, debug, package, and sign AIR applications. Adobe AIR lets you quickly develop RIAs for the desktop using the same skills and codebase you use to build RIAs for the browser.
Code refactoring ENHANCED
Quickly navigate through code or restructure it by renaming all references to a class, method, or variable. Flash Builder 4 adds move refactoring.
Powerful testing tools ENHANCED (Premium edition only)
Accelerate application performance using memory and performance profilers that monitor and analyze memory consumption and CPU cycles. Support for automated functional testing tools such as HP QuickTest Professional is also available.
Network Monitor NEW (Premium edition only)
Generate a detailed audit trail of all data passed between the local Flex application and the back end, assisting with debugging and performance tuning.
Advanced data services ENHANCED
Use open source BlazeDS to add binary, high-performance, HTTP-based data transport, or add the Adobe LiveCycle® Data Services ES2 module for real-time data push and pub/sub messaging.
Command line build NEW (Premium edition only)
Use the new command line build capability to automate your build process.
Flex unit testing integration NEW (Premium edition only)
Automate functional testing using the Flex unit testing framework.
ASDoc support NEW
Display comments in MXML and ActionScript editors using ASDoc.

More info at :

Adobe’s official Flash Builder 4 Product Page

The Official Flex Team Blog post

Merry Xmas a la HYPE Framework

A little something using  the wonderful HYPE Framework by Joshua Davis and Branden Hall

This movie requires Flash Player 10

A little something using  the wonderful HYPE Framework by Joshua Davis and Branden Hall

Merry Christmas and happy holidays to all !!!

Flash News Roundup

Last week I had a trip to Mexico D.F. ,  and was very disconected from the Flash Community and the Blogs, so in an attemp to catching up with the Flash World here’s a news roundup of some of the things that I missed on the last week, in case you miss them too here’s a list :

1.- Adobe Wave

Adobe Wave

Adobe Wave it’s a new tool built in AIR that just got released as a beta in Adobe Labs, this tool let’s you stay updated on your favorite sites and it’s right at your desktop to stay update with some of the sites already working with Adobe you just click on the Get alerts with Adobe wave badges on those sites and you’ll start receiving updates from that site.

It’s seems a great way to get updated on your social network without even opening your browser nor navigating to various sites to get those updates will try it ant tell you how it went.

Some of the feature partners of Adobe are:

Venture Beat
1000 Mikes

Download here  by clicking in the Adobe Wave  Badge and try it yourself

2.- Adobe AIR 1.5.2

Adobe AIR 1.5

Adobe just released an update to AIR (Adobe Integrated Runtime ) to the version 1.5.2

You can download it here and read the release notes here.

This update includes  improved reliability, compatibility, and security. Listed below are various of this improvements:

3.- Adobe Flash Platform Blog  launched.

Flash Platform Blog

The official Adobe Flash Platform blog launched last week  if you’re a Flash Platform developer this will be a very helpful resource  you can read it here or grab the RSS feed.

If you still prefer the E-Mail Flash News Newsletter you can subscribe here.

4.- Open Source Media Framework.

Open Source Media Framework (OSMF), currently in public prerelease, enables developers to easily assemble pluggable components to create high-quality, full-featured playback experiences. The open aspect of the framework enables collaborative development for web video monetization, with lower costs and faster turnaround.

Open Source Media Framework complements and solidifies Akamai’s Open Video Player initiative,” said Tim Napoleon, chief strategist, of digital media at Akamai. “OSMF leverages code from Akamai’s Open Video Player and Adobe’s expertise and resources to assist media companies and publishers in redefining the benchmarks for online video experiences that are powered by standards based workflows.

  • OSMF is the open source part of the Strobe project that enables easy-to-build media players optimized for the Adobe Flash Platform
  • The flexible OSMF architecture enables developers to easily create unique playback experiences that can leverage plug-ins for advertising, reporting metrics and content delivery along with standard video player features such as playback controls, video navigation, buffering and Dynamic Streaming. OSMF provides standard functionality along with plug-ins from third parties so content providers have the flexibility to adapt monetization strategies to specific content and the needs of their audiences.
  • OSMF includes an API for partners to build plug-ins for value-add services. OSMF will enable more innovation around media experiences on the Web by allowing partners to easily experiment with new services for content providers, which spans content delivery, presentation and monetization.
  • OSMF source code and pluggable software components are available immediately under the Mozilla Public License and available at

4.- Open Source Text Layout Framework

The Text Layout Framework is an extensible ActionScript library, built on the new text engine in Adobe® Flash® Player 10 and Adobe AIR 1.5, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flex® or Adobe Flash Professional and is included in Flex 4, code named “Gumbo”. Developers can use or extend existing components, or use the framework to create their own text components.

See the feature tour and the online rich text editor demo on Adobe Labs.

5.- Adobe Flash Player Update

This Update contains fixes for critical vulnerabilities identified in Security Bulletin APSB09-10 Flash Player update available to address security vulnerabilities. The update replaces the Debug and Release versions of Flash Player 10 browser plugins and standalone players that are included in the initial release of Flash CS4 Professional (player version All users are encouraged to apply this update. These new players are version

The Flash Player 10 updates are included in the ZIP file below. For instructions on how to update Flash CS4 Professional, please go to this technote.

I’m  sure I missed a lot more news but this post would be too long so until next Flash News Roundup, Thanks for reading.


SWFObject 2.2 Released


SWFObject version 2.2 was recently released and it’s available on their Google Code Project,  after almost one year in development it comes with several new features and changes, some of them  listed below.

1.- Improved DomContentLoaded emulation for Internet Explorer:

2.- Dynamic Library support.

3.- Callback method for embbeding Flash Content.

4.- Propietary HTML embed no longer used.

5.- Improved Flash Player Detection for non- Internet Explorer browsers.

6.- Improved Adobe Express Install.

7.-Improved createCSS method.

8.-Detected user agents properties are now public via the object.

9.- No more conditional compilation directives.

10.- The option to switch SWFObject’s default show/hide behavior.

To download the SWFObject 2.2 version visit SWFObject google project. and learn more about it’s new features.

Adobe Flash Builder 4 and Flash Catalyst public beta available on Adobe Labs

flash_builder Flash Catalyst

Adobe Flash Builder 4  (formely  Flex Builder 4 ) and Adobe Flash Catalyst are out on Adobe Labs going to download and try them out before posting a proper review meanwhile more info on Ryan Stewart’s blog and Andrew Shorten’s Tutorial


Flash Builder 4 delivers a long list of new features, plus improvements to many existing features.There are three main themes to this release: developer productivity, designer-developer workflow, and data-centric application development. For an overview of the features included in this first public beta release, please read Tim Buntel’s What’s New in Flash Builder 4 article and watch the new feature videos. As always, the Flex 4 framework is included within Flash Builder, so please also read Matt Chotin’s What’s New in the Flex 4 SDK article.


Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating user interfaces without coding.

  • Transform artwork created in Adobe Photoshop® and Adobe Illustrator® into functional user interfaces.
  • Create interactive prototypes with the ability to leverage them in the final product
  • Publish a finished project as a SWF file ready for distribution
  • Work more efficiently with developers who use Adobe Flash Builder™ 4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Go get Flash Builder 4

Go get Flash Catalyst
Flash Builder 4 Standalone Installer

Flash Builder 4 Plugin for Eclipse

Flex Component Kit for Adobe Flash Professional CS4

Flex 4 Test Automation Plug-in

Flash Catalyst Beta

More Adobe Resources:
Learn about Flash Builder 4

Learn about Flex 4 SDK

Working with Flash Builder 4

Flex Builder gets renamed as Flash Builder

Flash Builder

So it finally happened  the IDE(Integrated development environment) known till now as Flex Builder it going to be    renamed as  Flash Builder , why ?  To me it’s easy It makes a lot more sense,  yes you can use the Flex Framework and yes you can use also build AIR apps and ActionScript 3.0 projects but at the end the result  its the same your project gets compiled as an .swf file , so maybe this rename of the IDE should have happened earlier,  it would have evited some confusion. This means that the Flex Framework it’s going to be renamed ? apparently no the flex framework stills and the Flex SDK stills the same but who better to explain it than Lee Brimelow and Duane “Chaos” Nickull check out their posts on the subject.

Hope this is the first step towards the process of integrating  the Flash tools and not just renaming them.  I haven’t used Flash IDE coding panel since who knows when, hope the Flash Builder and the Flash Professional IDES one day get along real well.


Serge Jespers (Adobe Platform Evangelist ) explains in a little more detail why the renaming of Flex Builder to Flash Builder.

Keith Peters thoughts on Flash Builder

Ryan Stewart post Flex Builder “Gumbo” is Being Renamed Flash Builder

Lee Brimelow’s Flash Builder rebrand FAQ

Peter Elst Flex Builder gets rebranded to Flash Builder

Mihai Corlan (Adobe Platform Evangelist ) About the rebranding of Flex Builder into Flash Builder

Chuck Freedman The FlashFlex name game.

Adobe Strobe Video Media Framework

Adobe Strobe Media Framework

Adobe Strobe it’s a new media video player framework from Adobe  that intends to set an standard for media players.

If this work out it wold be really helpful, nowadays every developer and company has it’s own way of building a player not following standars for a simple reason, there are not any standars, so hopefully  Strobe will help to solve that problem.

Strobe framework will work as a plug-in model if you need some specific behavior of the player you would build  the necesary  classes on top of the framework. This would be a relief  for those developers  who need a video player but for one reason or another end uo rewriting the entire player.

Quoted fro Adobe’s

Strobe provides new delivery and monetization options for video distribution. Anyone can develop modules that plug into Strobe media players and enable things like advertising insertion, content delivery and syndication, micropayments, viewer authentication, transaction handling, and business model controls. With an open framework, the future of web video monetization can be developed collaboratively with lower costs and faster turnaround.

So let’s wait and see once Adobe Strobe is released.

Adobe Labs releases the beta of Text Layout Framework

Adobe Labs has released the beta of Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5.   The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Flash or Flex.

Together with the new text engine in Flash Player 10 and AIR 1.5, the Text Layout Framework delivers multi-lingual, print-quality typography for the web, including support for:

  • Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others.
  • Selection, editing and flowing text across multiple columns and linked containers, and around inline images
  • Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
  • Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
  • Rich developer APIs to manipulate text content, layout, markup and create custom text components.
It appears that the new version of Flex “GUMBO” will already include the Layout Framework
For more info and examples visit Adobe Labs

Adobe opens the SWF and FLV formats

Adobe has just dropped the licensing restrictions on the SWF and FLV formats as part of the open screen project .

Here’s an excerpt of the text in the Open Screen Project’s site.
The Open Screen Project is dedicated to driving consistent rich Internet experiences across televisions, personal computers, mobile devices, and consumer electronics. The Open Screen Project is supported by technology leaders, including Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba and Verizon Wireless, and leading content providers, including BBC, MTV Networks, and NBC Universal, who want to deliver rich Web and video experiences, live and on-demand across a variety of devices.
Specifically, this work will include:

* Removing restrictions on use of the SWF and FLV/F4V specifications
* Publishing the device porting layer APIs for Adobe Flash Player
* Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
* Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free.

What does this means for us developers ? It means that now you can use this formats to create players that read in this formats… exiting huhh !!!!.
More info and a video of Kevin Lynch Adobe CTO explaining more deeply what this means for the developer community visit the Developer section of the Open Screen Project on Adobe’s site.