On June 1 all Flash developers and designers finally got the so much anticipated Flash Builder 4/Flash Catalyst Beta release. If you missed this event because of some reasons, go to downloads for Flash Catalyst and Flash Builder 4.

In this post we are going to sort out why new Adobe products are already considered to be a sensation in the Flash world and whether beta versions proved their value in practice.

Flash Builder is nothing else than a new name of Flex Builder “Gumbo” release. Though the name change caused mixed feelings among Flash developers, in fact it is intended to separate tools for creating Flash content and frameworks of other parts of the Flash Platform.

Flex Gumbo is enriched with lots of new features and improvements focused around three main areas in mind:

• Designer/developer workflow: now designers and developers can better cooperate as it ties up Gumbo and Adobe’s creative tools, such as Flash professional and flash Catalyst. It’s enabled through the new FXP (FleX Project) format. It’s a way to easily transport Flex projects between Catalyst and Builder. The only thing which is not fully improved is compiler. Adobe team claims to have made lots of optimizations in this direction – well, waiting for final release!

• IDE productivity: The new features in this development section are totally mind blowing. Prior to Builder 4, it was sometimes challenging for developers to connect to different data intensive applications and manage the data within a Flex application. But a brand new approach to using data in Flex changed all that. Data Centric Development tool is simply awesome. Automatic getter/setter generation, event code generation, the new Package Explorer, and support for ASDoc tooltips – all these will save a great bunch of your time as well.

• Architecture changes: to help achieve a smoother workflow between designers and developers, the framework provides a clear separation of the visuals for a component and the rest of its behavior. You set skins by pointing your component to MXML skin files. Drawing rich graphics using MXML tags will make your MXML files quite wordy. Though all is nicely separated so it should still be easy to work with.

New Adobe products were initially announced as powerful Flash development tools with design in mind. And Flash Catalyst as a new professional interaction design tool comes as the main engine for this collaboration.

However, what we see from Flash Catalyst beta is that the bridge between design and code for developers needs some more work over it. So far, it looks like a one-way workflow that allows designers to easily make prototypes of data driven flash website. For now Catalyst appears to be a tool for designers mostly. This is what developers should remember so far. Basically this Flash application enables designers to create the interface using animated working interactions and then hand it off to developers who will implement the database interaction. Amazing thing is that no special ActionScript or Flex skills are required. This is a godsend for non-coding web designers.

Its interface will be familiar to Adobe products users as it offers panels for layers, project library, components and timeline.

Introduction to Adobe Flash Catalyst Beta 1 presented by Mark Szulc from Adobe Australia is available for viewing below.

And here are some features you are able to experience in Beta version of Flash Catalyst:

1. Empowering interactive design: you can add interactivity based on states and events instead of timelines, do interaction design without coding, all your designs will work exactly as you create them, nothing will lose in translation.

2. Fast design: Turn static graphics into dynamic content by selecting objects and specifying actions from menus. Easily move between application states. Converted artwork can be combined into a custom component.

3. Smooth cut-paste workflow between Adobe Creative Suite and Flash Catalyst while maintaining your work.

4. As you create your project in design view, Flash Catalyst is representing the design as well-formed MXML code behind the scenes. In this release you can’t share your project with Flash Builder 4, but this is being worked on for future versions.

5. It comes with a set of simple looking Wireframing controls, it will help create mock-ups which will be more understandable for clients. With this controls instead of standard Flex ones, a client will easier understand that they are seeing just a prototype, not the finished application.

Flash Catalyst still has a few raw sides which we expect will be fixed in the future releases:

- designers will need to learn how to fit their Illustrator and Photoshop design comps to Catalyst, it’s not so obvious at the beginning.

- another kind of timeline which is provided by Catalyst also needs some examination.

- developers can’t switch from Design to Code mode and edit projects there. Of course, items can be added via the Catalyst UI, but doing it directly in the code would be much more efficient.

Despite of everything, Flash Catalyst in tandem with Flash Builder 4 are going to make life so much easier! These products arouse super lively interest in Flash developers and designers. As a result, you can already download free themes which can be used in Flash Catalyst and Flash Builder 4. Of course, Beta version reveals some rough edges with ability to use flash builder, but the number of new empowering features is quite impressive. This is just a first take of a complex task. And we have no doubts that this revolutionary software focused on interaction and collaboration enables to increase creative productivity and has all chances to bring Flash development on the new level.

We are closely watching all Adobe events concerning Flash products to deliver first-hand information to you . Check out FlashMoto Flash CMS blog not to miss a thing!

I’d like to share with you an inspiring software for 3D developers. Unity3D new reality, the future of online game industry!
You could ask what’s so AWESOME in Unity3D? Let me explain or simply show you.
First of all you should install Unity3D player which is only 3Mb, after that you could play unity3D projects. Now we could check the samples.

Dungeonz – Control the Green Ogre around the maze. Simple but really cool animation. What I really like is load time!

Hordes of Orcs – the best online browser Tower Defense game based on Warcraft World. TERRIFIC!

Turret Wars – browser online multilayer game from Sector 3 Games. Choose from FOUR different gun turret types, each with slightly different weapon and armor or projectile features!

Avert Fate – fantastic 3D shooter. Install is so small that you would be amazed of the graphic.

Shadows Demo – web browse preview or the light and dark side of Unity 3D!

Tropical Paradase – Feel the sun on your skin – right inside your browser. Using streaming, this huge scene loads almost instantly.

Big Brains – nice logic game with awesome 3D graphic. If you have a kid give them a try.

I hope you’ve enjoyed Unity3D with me. Because it’s really worth your look.
Some cool news for an iPhone owners that you could play all these games at your iPhone.

According to Steve Jobs Apple is ready to take a bite of Silicon Valley. Why does everyone think so? Currently Apple budget is for about $25 billion. Everyone wants to find the best way to invest their money. This wish is influenced by the economic crisis of 2008. So Apple isn’t an exception.

“This downturn may also present some extraordinary opportunities for companies that have the cash to take advantage of it,” Jobs said.

In the past, the vast majority of Apple acquisitions have been software-related so we could expect it would happen again.

What will be the next Steve’s creation?

The victim is Adobe. I know that everyone is talking about some iPhone development companies but I trust experts. Earlier this year it was announced that Adobe begins work on Flash player for iPhone. This information was announced at Adobe Town Hall press-conference.
You may know that iPhone is the last smartphone that can’t play Flash content. Seems this problem will be solved in the nearest future because Apple is the third-largest mobile supplier in the word.

Though, there are some questions: What is the Apple’s next move? Will Steve Jobs buy a ready-made solution for his “baby” or the entire company?

So what we have now is: Apple+MacOS is one of the best platforms for developers (SUPERfast! 8-)), the best video editing software – Final Cut PRO, Unity 3D (only on Mac).
What should we expect in the nearest future?

Would Mac be the only choice for a developer?

360|Flex in San Jose is the most popular an well-known con devoted to Flex/AIR. It takes you to the deeps of Flex! That’s why when you see some names from the list of 360|Flex be sure that this names know what they are speaking about if they are spelling words Flex & AIR.

Anyway I won’t take you long if you are interested in a 360|Flex reviews I suggest you to read this one:
Dave of Buzzword fame (2007 CON)
Doug McCune (2007 CON)
Our boy PolyGeek (2007 CON)
Straight to the point!

Here is some fantastic presentations that were contributed to Flex community by world leaders in Flex development.

1. Learning Flex from Scratch (LFFS) by Flater & Sheridan – presentation
description: Adam Flater & Scott Sheridan: The Learning Flex from Scratch series on Inside RIA focused on a non-programmers journey into the world of Flex.

2. Using Item Renderers in Flex by Mary Mcdonald – presentation
description: Discusses using item renderers and item editors in Flex to change the look of your data being displayed. This session has plenty of examples!

3. Creating Flex Components by Jeffry Houser – presentation
description: An introductory presentation on creating Flex Components.

4. Diving Deep w/ the Flex Component Lifecycle by Owen & Umbaug – presentation
description: RJ Owen & Brad Umbaugh: In this session, Senior Developers RJ Owen and Brad Umbaugh will explore in depth exactly what happens every time a component is created and rendered in Flex.

5. Diving in the Data Binding Waters with Michael Labriola – presentation
description: Just about everyone who uses Flex uses data binding. Now come learn what you are actually doing when you add those curly brackets to your application.

6. E4X by Marc Bir – presentation
description: What is E4X? How do I use it? Why would I use it? When should I use it?

7. Creating Reusable Components by Ben Clinkinbeard – presentation
description: This session will talk about what to keep in mind when creating components that go beyond a single use.

8. Flex and Acrobat by Joel Geraci – presentation
description: This session will make you rethink everything you know (or think you know) about PDF.

9. Data Visualization and Dashboards by Thomas Gonzalez – presentation
description: This session discusses approaches and techniques to implementing Data Visualization and Dashboards within Flex 3.

10. High Definition Video & Flex Hands On by Christopher Keeler – presentation
description: This session covers the tools and workflows you need to produce and stream great HD video in the Flash player and Flex.

In our previous posts we have considered several examples of creating really cool Flash Galleries with the help of 3D. As promised, today I’ll try to explain how to make papervision gallery. At the end we’ll get something like this – awesome papervision flash gallery. Probably at this stage the gallery looks a bit unfinished, one would wish to add progress bars for the images, image names and descriptions, navigation buttons next & previous, and etc. I’d like to cheer you up by saying it’s just the beginning. In this tutorial we’ll try to write the basics, that is to say an engine for our application. Over the next several steps we’ll add functionality to this gallery. Note we plan to write more tutorials based on this example.

In this tutorial we’ll try to build a Flash Gallery using Papervison 3D. First of all I’d like to mention that the main aim of this article is passing through all stages of flash application development. At the same time we would like to discuss all contradictory questions one may face while working with Papervision 3D. More likely this tutorial will consist of several parts. Together with Papervision 3D library we’ll use Tweener for a better smooth animation and BulkLoader for a better image preloading.

You’ll need this archive in order to through this tutorial. This archive includes all libraries and applications which are necessary for the final swf creation. Flash CS3 or Flex Builder to be exact. If you know what Flex SDK is and you work with its compiler this archive is really useful for you. There is a lot of information regarding Papervision 3d on the net. You can easily find tutorials which teach how to download and install Papervision 3d and other libraries, how to adjust classpaths, and etc. It’s beside our purpose. Simply download this archive. Note you can use its structure and libraries like a start point for the other projects.

Tutorial difficulty level: Basic-Intermediate. We suppose even those of you who are the beginners in Actionscript 3.0 will do this tutorial with awesome results.

If you still wish to download and install Papervision 3d by yourself these links may be useful for you: Papervision 3D Training Videos and PV3d 2.0 Tutorial List. Having followed these links you can find a lot of interesting tutorials on this application and learn the way it works.

One more thing to mention: in this tutorial we deal with the second version of Papervision 3d. Note this version of Papervision 3d hasn’t been released yet.

1. Initial configuration

So, at the very beginning you should download papervision gallery source the archive which includes an initial project. Having unpacked the archive you should see the next file structure:

src – all necessary “as” files such as Papervision3d, Tweener and BulkLoader will be stored here. These are the libraries we’ll use in order to create the gallery. All the files we create will be added here as well. Gallery Project is a basic class which is used as Document Class in Flash CS3 and it’s being compiled while creating swf file. So I’ve put it into root. The other files we create for this project will be stored here com/flashmoto/gallery.

fla – this folder will include fla files. It already includes GalleryProject.fla with changed settings: the folder ../src is added to classpath, Document Class is GalleryProject.as

bin – the application called GalleryProject.swf is stored here. All xml files and images that make an application work are kept here as well. Saving your time I’ve already created an xml file with images data. All images are stores in images folder.

For the beginning let’s start compiling the application. As I’ve already mentioned there are two ways of compilation: using Flash CS3 and on your own (means using Flex SDK compiler). As a rule experienced users apply Flex SDK compiler while creating Flash movies. They definitely know what one should do with the source code in order to get a working swf. So I’ll describe how you can compile movie in Flash CS3. To do so I should run GalleryProject.fla from the fla folder and compile the movie having clicked Ctrl+Enter. In the flash output panel you should see something like this – Welcome to our 3D gallery!

2. Problem Description

Let’s build a gallery by following our step-by -step guide. First of all we should decide what to do. So our main tasks are:

- Application Initialization
- Application Initialization
- Loading XML Data
- Loading Images
- 3D Engine Initialization
- 3D Objects Creation
- Adding Objects to the Stage
- Adding Interactivity

3. Application Initialization

Let’s open file named src/GalleryProject.as. If you’ve noticed it is set as the Document Class in publish settings of the fla file. So the code which is inside GalleryProject functon (constructor) runs after the application has been launched. As for the start let’s set some stage properties – align and scaleMode.

Now we should create another class that will be responsible for gallery creation. It’s the right approach if we want to use it for any of our future applications. Considering the fact that it’ll be an ordinary Sprite we can add it anywhere using addChild() method. We can also change different parameters for its positioning.

Let’s create class called Gallery.as in the src/com/flashmoto/gallery folder. At first it will look this way.

And we can now add the gallery to our application. To accomplish this we should add some lines to our main file called GalleryProject.as:

All changes are marked with bold type. I always dislike when tutorials which include source code write new lines or code changes separately from the whole class which requires these changes.) It’s always confusing and time taking process to deal with such code. I prefer using more traffic but seeing how the source code receives new functions and expressions with every step I make.

In order to use Gallery class we need to import it first. If you want to make sure that the code is working and the gallery has been really added you can write trace (’This is your gallery’) into the gallery class constructor and you’ll see this message in the flash output panel.
Ok, let’s go to the next stage.

4. Loading XML Data

Now we should get information regarding images and where they should be taken from for download. Of course there is a simpler way to define them as constants directly in our code. Though, this way isn’t very flexible. So all information will be stored in XML file. (If you want to read more about this format you should read Wiki! ). At the fist stage all we need is an image file path. So XML file will look like this. (Finished file can be found here: xml/gallery.xml)

For xml file and images loading I’ll use BulkLoader. Let’s add a few function called loadImagesData() which will be called from the Gallery constructor. In this function we’ll initialize a new loader. Having added our xml file to this loader we’ll start to load images and listen for the loader’s progress, complete and error events. After you make the changes the class will look like this. As you’ve probably noticed a lot of new features and functions has appeared. I did my best to write the comprehensive comments for each feature and function, and in front of every line. So I don’t think it’s necessary to describe them in a more detailed way. Just have a look at the code we’ve created.

5. Loading Images

Now we have all image files paths. So we can load images. We have two variants to load images – loading all the images and then adding them to the stage or making the user tired showing a procedure of image load. For the beginning we’ll follow an easier way and choose the first variant. We’ll add several lines to the methods we already have. Now we should parse loaded xml, choose image file paths and upload the images. Loading status information can be received via onGalleryLoadingProgress method. At this very stage I’ve simply traced this information to the output panel.

So we are close to Papervision3d. Let’s start…

6. 3D Engine Initialization

In order to use Papervision3d while moving objects in 3d space we should initialize 3D engine first and create all necessary flash components such as viewport, camera, scene and renderer. Let’s write a new function called init3DEngine(). We’ll write a new function named init3DEngine() which will be called in onGalleryLoaded() method after the download has been finished.

As you can see some new features including two constants such as VIEWPORT_WIDTH and VIEWPORT_HEIGHT have been added. These constants define render area. Seems it would be better to define them while creating Gallery object. I think we’ll correct it a bit later. The case is that at this stage we have the other tasks. The same relates to other engine configurations such as camera zoom and focus, viewport scaling and interactivity. It would be better to change them dynamically from an external text file. I think we’ll do it for sure.

7. 3D Objects Creation

Now we should create objects in order to add them to the stage. Of course we could add them at once. It would make the code simpler but we’ll not go this way. One should understand that the application gains its flexibility thanks to dynamic object placement. So I recommend separating these two actions from the very beginning. At first we’ll create objects and then set their positions. For this we should update our class a little bit:

As you see a method called createGalleryDisplayObject() creates a 3D object and this objects isn’t for sure a Plane. It can be any object. So in a case we wish to draw spheres instead of planes we’ll basically have to rewrite this method.

8. Adding Objects to the Stage

As I’ve already mentioned I comment the code without explaining what should be done and how to do it because our code already goes with comprehensive comments. Almost every code line has its own description. So read the code attentively and comment this tutorial in a case you have any questions. I’ll be more than happy to answer your questions.

So we have a collection of 3D objects which can be added to the stage and placed in a way we wish. In the future I plan to update this example in order to develop several image placement strategies. So we could dynamically change the gallery appearance. At the first stage you can see the first variant: I’ve placed images one by one. Let’s add new method called addGalleryImages()

9. Adding Interactivity

The last thing that should be added is interactivity. Seems it should be described in detail.

The first thing you should do to see the objects that have been added to the stage is rendering the stage. In Papervision3d you can do it with this code

as you see all 3D engine elements are activated in this code. Having executed this code you’ll see what is added to your stage. However you should remember one thing – without calling this method you won’t see such changes as:

- changing object location or object properties;
- changing camera position or rotation;
- refreshing something.

Basically it’s called on every onEnterFrame event, but it’s sometimes difficult for browser to accomplish this. Especially if you have a lot of objects and refining or you need fast rendering and good quality graphics.) So Flash developers find various ways to optimize the application. Having analyzed different requirements they define if a stage should be rendered at the moment or not. If to speak about our example the stage should be rendered every moment because our main aim is camera and mouse interaction. So we should continually refresh the image. In the future I’ll add a requirement to avoid such rendering. For instance in a case we’ve clicked the first image and it has been enlarged.

Papervision uses InteractiveScene3DEvent in order to respond to such mouse events as hitting, pointing and tracking. Note if you want these events work the object material and viewpoint should be interactive.

Material has an interactive feature to accomplish this

Viewport has this feature as well. We set its value while creating – the 4th parameter = true

Of course adding interactivity isn’t limited to listening for the mouse events only. It also includes response to these events. This is the way logic is added to the code. Note logic is an inseparable part of the application.

It’s time for the most interesting part which can be difficult for an ordinary animator. So this part is usually done by a Flash programmer. Considering the fact that our tutorial relates to Papervision 3d I suggest you to explore application logic by yourself. Note all application logic is described in event listener handlers such as onPlanePress(), onPlaneOver(), onPlaneOut(). Camera moving logic is described in render() method.

Here is the final code. Let’s try to compile it. You should succeed!

Please let me know if you have any questions regarding this tutorial. I’ll be pleased to answer them.

10. Conclusion

So we’ve finished a first pass through creating an interactive Papervision Flash Gallery. If you are the beginner I advise you to download the source project and follow it step-by-step. Though, in a case you are an experienced user you can download the complete sources for the gallery.

This tutorial we’ll be of a great help for us in the future. It’ll help us explore the other 3D engine features. Also, I’d like to explore some ways to optimize Papervison3d applications and make them work faster. I plan to learn different ways of image positioning, navigation, dynamic gallery appearance and logic changing, creating reflections, mouse wheel navigation, and etc. New tutorials are waiting for you in the nearest future.

Couple of days ago we have started a preliminary analysis of Flash CS4 and from the first part of the Flash CS4 publication it became obvious that there’s too much that we would like to say. That’s why here we are with a second part -- enjoy and feel free to leave your opinion about this in the comments.

- Inverse kinematics

Now this is a real treasure for the Flash animation fans! Now Flash CS4 allows so-called “bones” -- just like in 3D applications. This means that you can apply a skeleton to the objects and they instantly become interconnected. Therefore when you animate one element the rest of the skeleton will be animated with it:

You may see it all in action at the proper page of the Flash player 10 developers.

And here you can see lots of Flash CS4 capabilities in a single video:

In fact Astro (code name of the new Flash player 10) really does provide many new capabilities. They will be especially obvious for ActionScript 3 developers that will operate with a lot more of the new features -- they are all available at the developers’ features page.

Is there any future for modern 3D engines and is it worth it to learn ActionScript that you need for using PaperVision 3D, Away 3D or Sandy 3D if in a month or two there will be Flash CS4 which will enable you to produce a really interactive 3D animation without knowing ActionScript? Especially if the productivity of such animation will be higher?

It may sound weird for those who are not familiar with programming -- yes, it is still worth it. Yes, Adobe’s developers have provided 3D features and you will be able to rotate the objects in a new perspective. But what about the concept of camera and all of its properties? It is absolutely essential for the whole idea of 3D. A huge number of features are impossible without camera and its motion through the space. The same thing is about the 3D primitives -- plane, cube, sphere etc. And we would all still want to import the 3D models from the external editors, to work with shaders, lighting sources and object’s physical properties. All of that is now available in Flash 3D frameworks with the only disadvantage of low productivity -- which I am sure will be partially fixed soon.

Not long ago the world has got a chance to see the new version of Flash Player 10 Adobe, this time it’s a release candidate. This means that really soon the Flash player of more than 90% Flash users will be automatically updated to a new version and Flash developers will start a new stage of creating the interactive web applications. But what’s more important for most of Flash developers is the Adobe’s next step -- releasing Flash CS4 -- a new version of developer’s environment that will allow everyone use the new player’s capabilities. The most important ones of these capabilities are:

- 3D Support

Every object now has new properties -- the “Z” coordinate and the 3D rotation angles -- rotationX, rotationY, rotationZ that will allow to transform the objects into 3D and to save all of their properties. If it’s a movie clip with animation or a video -- not a problem to transform it as any kind of content can be transformed. Moreover -- the content gets transformed AND can be interacted with. And since these are not outer libraries or add-ons and everything is done only with a player the productivity remains very high.

You may see what I’m talking about here:

And here’s a nice tutorial for you from GoToAndLearn.com in case you’re interested.

- Advanced Text Layout

Text Management is a very important aspect, now you can create text with multiple columns and it will move from one column to another and you will be able to operate it as a whole. Besides it will also be very interesting to see the feature of adding objects into the text -- images, tables etc. The producers also claim that in a new version thy have improved the work with system fonts, they now support everything that previously was available only for embed fonts -- rotating them for a desired angle, changing transparency, anti-aliasing.

- Custom Filters and Effects

I’m sure many of us remember of the Adobe’s innovation called Hydra -- a new language made for creating custom graphic filters. Even back than it was obvious that in a nearest future there will be a chance to use them directly in Flash. Now the time has come and even though with a new name and with another editor called Pixel Blender Toolkit this feature is available. By the way the same technology is used in filters and effects of Adobe After effects CS3 and it allows making really cool stuff with images. With Flash Player 10 you will be able to activate those filter at runtime and apply them to the objects at the scene.

So far so good, isn’t it? There’s more to come soon -- it appeared to be that we have too much to say for one post. Therefore there will be a second one in a day or two. Be sure to check back to find it. See you soon.