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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | /*********************************************** HYPE http://www.hypeframework.org 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); addChild(bmc) 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); color1.colorChildren(clip); // target Object, drag, minForce, maxForce, gravity, gravityAngle var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 2, 3, 0.25, 90); ballistic.start(); // exit callback function, target Object, shape, shapeFlag var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true); onExit.start(); var randomSplit:RandomTrigger = new RandomTrigger(onSplit, clip, 50); randomSplit.start(); } } function onExitShape(clip):void { clipContainer.removeChild(clip); pool.release(clip); } 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); color2.colorChildren(clip); // target Object, drag, minForce, maxForce, gravity, gravityAngle var ballistic:SimpleBallistic = new SimpleBallistic(clip, 0.97, 4, 6, 0.2, 90); ballistic.start(); // exit callback function, target Object, shape, shapeFlag var onExit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, MyExitShape, true); onExit.start(); } } var rhythm:SimpleRhythm = new SimpleRhythm(addNextClip); rhythm.start(TimeType.TIME, 1); pool.onRequestObject = function(clip) { clipContainer.addChild(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.
1 | 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.
1 | bmc.setupLargeCanvas(10); |
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.
1 2 | var savePNG:ContextSavePNG = new ContextSavePNG(bmc); bmc.startCapture(clipContainer, false); |
Don’t forget to check out http://www.hypeframework.org/blog for more information and the latest updates on HYPE.
See You around and happy coding.
![[Valid RSS]](http://www.cloudfaces.com/swfgeekblogexamples/images/valid-rss.png "Validate my RSS feed")
Adobe Flash Media Playback
The new Adobe Flash Media Playback is a free, standard media player for the flash platform, it can be used in any site with only a few lines of HTML, enabling playback of video and other media in minutes. Its extensible plug-in architecture enables easy integration with content delivery networks. There’s a easy to use configuration page to set up the look and feel of Your Player. A thing to note it’s that this is not the Open Source version Strobe Media Playback. so if you want to dive in to the code of the player itself that’s probably a best solution, but if you are looking for a fast way to deliver video content in your blog or site try Adobe Flash Media Playback
Features
Easy configuration
Easily configure the standard functionality of Adobe® Flash® Media Playback. Control capabilities such as autoplay, autohide controls, poster frame definition, control bar positioning, and more — without the use of Adobe Flash authoring tools.
Custom look and feel
Completely replace each of the existing elements of the standard user interface with your own custom artwork.
Streamlined standard functionality
Eliminate duplicate efforts by leveraging the logic built into Flash Media Playback. Enjoy support for standard playback functions such as play/pause/stop, rewind, fast forward, DVR, multibitrate switching, and video navigation.
Integration of latest Adobe Flash Platform features
Enable quick integration of the latest Flash Platform features such as HTTP Dynamic Streaming and DVR functionality.
High-quality, multiprotocol support
Deliver the highest quality playback experience for the given bandwidth, detect and recover from error conditions, and improve overall user experience by working with the latest features of Adobe Flash Player 10.1 and Flash Media Server 3.5 software and HTTP Dynamic Streaming.
Open source file specifications
Achieve a live streaming experience using the MP4 fragment format, the industry standard for adaptive bitrate delivery, including open file format specifications for the media and manifest formats.
Plug-ins for advertising, analytics, and content delivery networks
Enhance your media player to monetize and track your content by utilizing plug-ins for advertising, analytics, and content delivery networks. Flash Media Playback allows you to load plug-ins hosted by partners dynamically, allowing your services to be upgraded without any changes to your website.