On May 6, 2010, Adobe, Hearst Corporation's innovation group, and the Reynolds Journalism Institute (RJI) at the Missouri School of Journalism announced the two winning teams in a student interaction design competition to produce interactive applications that solve real-world needs in the advertising or news-gathering sides of the journalism industry. On May 11, the winning teams from RJI, as well as the winning student team from Fudan University in Shanghai, working on a parallel project for Shanghai World Expo, came to Adobe San Francisco to present their projects and meet the team behind Adobe Flash Catalyst CS5 , the software at the center of their projects.
Check out this video on the students’ experience with Flash Catalyst and meeting the Adobe Flash Catalyst team.
To know more about the RJI student project with Flash Catalyst, see this video.
If you've published your project in Catalyst yet, you've probably noticed that Catalyst creates two different versions of your project in the publish folder. One is the run-local version, and the other is the deploy-to-web version. So what's the difference?
Flash Catalyst comes with some useful wireframe components, but eventually you'll want a component that it doesn't offer. When this happens, you can easily create the component you want, add some interactivity and animation, and reuse the component throughout your projects. Let's dive into the process!
In Catalyst, it's easy to mock up interactions using mouse events with buttons and other components. But what if you want to add keyboard interactions, for events like pressing the "j" or enter keys? For example, try clicking the button in the below swf. Notice that you can also press the spacebar or the right arrow key to get the same effect.
The easiest way to do this is to mock up your interactions using buttons in Catalyst, and then tweak your project in Builder to add the key events. We'll go over how to do this after the jump.
When you transition between pages or states in Catalyst, objects remain just as you left them. If you moved a scrollbar or slider in Page 1, then transition to another page, the scrollbar or slider will be in the same position as you left it. Often, you would like these components to reset, so that when you come back to them, they appear as if you had arrived at Page 1 for the first time.
We'll talk a bit about why Catalyst behaves the way it does, and how to achieve the desired effect after the jump.
All the cool kids are building applications that go fullscreen, now you can too! To accomplish this, you'll need to get your hands dirty in Builder and write some ActionScript code. But, when you're done, you'll have a .swf like the one below.
As you've probably figured out, the swf files Catalyst generates are a fixed size. Even if you set the size of the swf manually when you embed it, the content you created in Catalyst will remain the same size. But, with a little tweaking in Builder, you can make your swf scale to fit the width and height you set for it.
Look! It's the same swf at three different sizes!
Although I'm not a huge fan of websites where audio begins to play immediately on application load, I wanted to try and accomplish the effect in Catalyst.
Just be sure to keep a mute or stop button front and center for your users.
We're going to use the Adobe Media Encoder to convert the audio file to a video file.
Why? Well Catalyst offers extremely limited support with audio files in 1.0. We can play them, but otherwise cannot control them (pause, stop). The video support offers much better options for controlling content.
First, choose the audio file you'd like to being immediately playing on application launch.