Flash Animation to HTML5 with Adobe’s Wallaby Prerelease 1

Adobe Labs just released Wallaby (Prerelease 1) a tool that will let You convert Flash Animations to HTML5 (http://labs.adobe.com/technologies/wallaby/). Here’s a screen capture of  Wallaby converting from a Flash CS5 character(it’s supposed to be Me …. boy I’m handsome :P) animation to HTML5 the illustration and animation was done by @cecymeade for a game we are putting up together.

Adobe Labs excerpt:
“Wallaby” is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such asAdobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

Matan Uberstein´s Auto Flash Class Panel

The Auto Flash Class Panel is an extension for Flash CS5  that will let You get rid of the tedious work of naming Your library items and believe Me when you working with small projects this is something that you can do by yourself without much effort but as projects get bigger and the amount of things you have to give a class name for working with them in ActionScript the task can really become tedious and cumbersome. Enter Matan Uberstein’s Auto Flash Class Panel.

The panel will let You select and give class names to your library items with a few clicks (literally), for installation You must have the Adobe Extencion Manager if you don’t have it already installed You can download it from here.  To start using the Auto Flash Class Panel you can get the version 2 here.

Once You have it installed fire up Flash and open the panel in Window>Other Panels>AutoFlashClassPanel the the panel is packed with a rich interface split into two sections (see Fig. 1), Selector and Classer. The Selector section automatically selects all the library items that match your criteria. Choose from MovieClips, Bitmaps, Sounds, Fonts or Buttons. Once you are happy with your selection of library items, you simply use the Classer section to automatically insert class, base class and tick the ‘export’ checkbox.

Fig. 1

One of the cool features is that the Class and package names are generated form your library folder structure so to get  your classes in the proper packages all you need to do is to sort your library items in those folders e.g. “com.swfgeek.robotlegs.views.MainAnimation” ( see Fig. 2).

Fig. 2

With one simple click your library is ready for export. Saves you the effort of right clicking on the library item going to properties, ticking the ‘export’ checkbox and typing in the package/class name. In the Classer section you can adjust the base class of your items( see Fig. 3)

Fig. 3

The Auto Flash Class Panel is also fully customizable, to modify how it works or add your custom base classes to the menu click the settings button and customize how you want the panel to work and function(see fig. 4).

Fig. 4

The panel was built with Robotlegs, AS3Signals, MinimalComps and FDT4. I’ve been using it  in my diary projects workflow for over a week now and it’s a really time saver, check out Matan’s post about it and be sure not to miss his upcoming presentation on Asset Loader this  17th of December.

Here’s a video by Matan on how to use the panel.

Don’t be shy and give it a try  You won’t regret it 😉

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.

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.

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

Flash Platform Game Technology Center is Live

Flash game development has been around almost as long as Flash itself I remember the first thing I did with Flash was a very short animation and the second a little spaceship game I must have that .swf laying around in a backup somewhere, I’m really glad to see Adobe’s efforts in pushing the various “sections” of Flash development inside of the devnet.

The Flash Platform Technology Center aims to reach for those developers interested in Game Development using Adobe technologies( Aka: Flash, Flex, AIR  and AS3 ) it includes several beginner-advanced tutorials and links to various resources as documentation, cookbooks an other related development centers, the only thing I wonder is why this Technology Center wasn’t opened earlier being the Flash game development community as  big as it is( Hope some of the great Open Source Game related APIs get some spotlight in this place ), anyways it’s here now so get ready to start developing your first game if you haven’t already,  here are some excerpts and links from the Adobe Flash Platform Game Technology Center:

The Adobe Flash Platform is the leading platform in the world for developing games on the web. The Flash Platform Game Technology Center is a great place to start learning how to develop your very own Flash games.

FEATURED RESOURCES
Articles and tutorials

Community

Adobe Flash Platform ActionScript 3.0 Reference

Flash Platform ActionScript 3.0 Reference

This is a short post but a helpful one in case You haven’t noticed it The ActionScript 3.0 reference for the Adobe  Flash Platform it’s out of beta and works great letting You select and filter out your results by APIs, frameworks, platform and more, and its information it’s not only of ActionScript 3.0 but also for Flex, TLF,  AIR, LiveCycle, ColdFusion and more. So if you need help in finding some information and see the inner works of those API’s be sure to check it out, it’s a must have in any Developer library.

TopFlashCMS Project

topflashcms_blog

TopFlashCMS is a project that was specifically created to inform you – Flash enthusiasts and Flash designers – about current state of Flash development and nascent innovations in this field.

The blog provides fresh conceptions as for revolutionary new Flash CMS platforms, Flash CMS Templates, and the ways they can be successfully implemented.

Being potentially useful informational channel, Topflashcms.com is also meant to be on-line store where you could come across exclusive designs and buy exceptional Flash CMS Templates to strike Flash community.

As soon as you enter Topflashcms.com, you get captivated by its modern and clean style formation which sounds intelligible and distinct for the visitors. Not the least of the factors to be a good website.

What is also nice about this blog is that it allows the users to submit their personal guest posts in case they sound principal and are of vital importance for Flash developers.

In the whole, Topflashcms.com.com is an exciting source worth to be visited. Not sure? Ascertain it yourself paying tribute to extensive store functionality and informative potential.

Be sure to visit Topflashcms.com and give it  a try.

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:

MySpace
Digg
AOL
Atlantic
Lastminute.com
Venture Beat
Variety
LiveStation
1000 Mikes
Evite
Qik
UstreamTv
Revision3
TheFind.com

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 www.OpenSourceMediaFramework.com.

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 10.0.32.18 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 10.0.2.54). All users are encouraged to apply this update. These new players are version 10.0.32.18.

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.



.


ActionScript Errors ( #aserror ) Hashtag on Twitter

aserror

The other day working late  and trying to fix some ActionScript error,  I got the idea of starting a Twitter Hashtag (#aserror) for this kind of errors and bugs that If you try to solve on your own it may take some time ( even using Google or the Beta of ActionScripit Errors wich is very good by the way )  and with a close deadline  losing half an hour tracking those errors  may be relly significant.

So  my toughs went to twitter  where a bast community of Flash users share and help each other, it’s the perfect place to get some aid on a more personal level and get out fast of those ActionScript Errors that may have you stuck in sometimes common troubles.

Hope it helps someone i’ll start using the #aserror hashtag  and the number  describing the Error  and the solution ( hack ?) that  got me out of there.

And hope to get some more free time to also post some examples and tests of how to recreate those errors and solve them here on my blog.

Well I relly hope to get that little snowball rolling and see the rest of the community that’s alredy on Twitter start using the #aserror tag to help each other out.

I almost forgot….  I’m @swfgeek on Twitter in case anyone wants to follow my rambligs :)