Archive for the 'FLASH CS5' Category

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:

?View Code ACTIONSCRIPT3
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.

?View Code ACTIONSCRIPT3
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.

?View Code ACTIONSCRIPT3
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.

?View Code ACTIONSCRIPT3
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.

Adobe Flash CS5 Review pt 3: The Code Snippets Panel

So for the third part of this series and I guess the last now that Adobe released the CS5 and You can explore the new Flash CS5 by Your own, in the above video I’m showing you the ActionScript 3.0 code snippets panel  this cool little panel will be loved by designers and new coders alike. Lee Brimelow had  already made one snippets panel and this one is based on that, to use it you simply select your movie clip and drag one snippet from this panel, your timeline will automatically add an ActionScript layer with the code needed. You can also create your own snippets so if you’re new to coding or a designer this panel will help you out a lot.

Download the Flash CS5 trial here and start playing.

Happy Coding !!!

Adobe Creative Suite 5 is Here

So  the wait it’s over  Adobe Creative Suite 5 it’s out and You can order it here or check out the trial here

Some of the new features are:
Interactive design without writing code
Design sophisticated interactive content and create functional interfaces in new Adobe Flash® Catalyst™ CS5 without writing code. Transform your unique vision into compelling online experiences and deliver perfect project files to developers.

Extraordinary image editing
Use the Mixer Brush and Bristle Tips in Adobe Photoshop® CS5 Extended to explore lifelike, naturally textured painting. Add dimension to your imagery with 3D extrusions using Adobe Repoussé technology, and make precise image selections more quickly and easily with new Truer Edge selection technology.

Innovative vector drawing and painting
Quickly and accurately represent depth and distance using new perspective tools in Adobe Illustrator® CS5. Precisely control stroke width, arrowheads, and dashes. And use the new Bristle Brush to draw with the expressive quality of watercolors, oils, and pastels, but with the scalability of vectors.

Comprehensive reach of the Flash Platform
Realize your vision online with the capabilities of the Adobe Flash Platform. Use Flash Catalyst CS5 to design interactive content without writing code, Adobe Flash Professional CS5 to create free-form, expressive content, and Adobe Flash Builder™ 4 to develop rich Internet applications.

Interactive documents and presentations
Create memorable documents and presentations complete with interactivity, motion, sound, and video in Adobe InDesign® CS5. Enhance page layouts with rich media using new motion presets for easy animation creation. Take advantage of support for FLV and MP3 audio file import to engage and excite your audiences.

Tapeless workflows in video production
Work natively with pristine tapeless footage in Adobe Premiere® Pro CS5 and Adobe After Effects® CS5. Edit tapeless media formats using industry-leading tapeless workflows to keep from wasting valuable production time transcoding or rewrapping.

So quit reading about it and go and check the CS5 here

Adobe Flash CS5 Review pt 2: Custom class code hinting and completition

Flash CS5 Features 02 Custom class code hinting and completion. from David Gamez on Vimeo.

Ok  so for the second part of this series I’m showing You a little video of  something you’ll love if you use to code in FlashIDE  ActionScript editor.

The improved editor now let’s  you work with custom code hinting and completition and it works pretty fast it’s as easy as setting your classpaths and the editor will recognize all of your libraries and custom classes.

To be totally honest, I would not leave the ActionScript editor I’m using now for the one that comes with the Flash IDE but it definitely eases up the workflow if you’re using it.

See You around.

Adobe Flash CS5 Review pt 1: The XFL file format

Ok this will be the first of  a series of post of some of the new features of Adobe Flash CS5, and I say some because the new Flash comes with tons of new and improved features that said lest move on.

Flash CS5 Features 01 XML-Based-Flas (XFL) from David Gamez on Vimeo.

In Flash CS5 there’s a new file format in the house that it’s called .XFL  that is a new  XML based  format that allows You to exchange and work on files more easy, how to use it ?  just save your file  as .xfl in this way all your assets and properties are not packaged in a .fla file instead they will be saved in a folder structure that you can open and modify without the Flash ide, the properties of the document and graphic elements of the library are exported in XML files and  can be edited from any text editor and modify its properties. Even Actionscript code of the frames is exported.

I see this feature as a very neat one that will let us have more control over our Flash work and expands the possibilities for new types of workflow.

Until the next feature,  See You around.