Sometimes you want to watch an entire lynda.com course to learn a new skill, and other times you need the answer to a specific question. But when your search terms apply to multiple content areas, you may end up with search results that are of little help.
Recent improvements to our website now allow you to easily refine your search results to quickly find what you need. I will walk you through two examples.
Last spring, lynda.com published Flash Catalyst CS5 Essential Training to show members how to create and publish fully interactive Flash (SWF) micro sites, widgets, portfolios, and applications from static artwork without writing code. Previously, we had published the Flash Catalyst Beta Preview course. This year, we’re trying something new. Instead of a Beta Preview course, we’re going to be publishing a series of videos and blog entries. We’re starting this new series of posts to coincide with Adobe MAX, to take advantage of an anticipated public beta of a new and improved Flash Catalyst. Here is the first of my posts.
At their MAX conference in 2007, Adobe showed a demonstration of a new product they were building, dubbed Thermo— a product that would come to be known as Flash Catalyst. At the ’08 and ’09 conferences, they released public beta versions of Flash Catalyst. Adobe seems to be keeping with the tradition at this year’s Adobe MAX conference by posting a preview release of a future version of Flash Catalyst, code named Panini, to Adobe Labs. It’s obvious that the Flash Catalyst team has been hard at work, because Flash Catalyst Panini sports some pretty big features.
Roundtrip designer-developer workflow
In the CS5 release, Flash Catalyst enabled designers to send their projects to a developer, who could open them in Flash Builder. However, once a developer worked on a project, there was no way to send it back to a designer to make changes.
With Flash Catalyst Panini, designers can start the process by creating an interactive wireframe, which they then hand off to a developer. Using Flash Builder Burrito (a preview release of that product, which is now also available on Adobe Labs), a developer can open the wireframe and add logic and connections to data services, and then send the project back to the designer. The designer can now reopen the project in Flash Catalyst Panini to skin the project and make additional changes. Developers can control which parts are editable and protect other parts. This means the designer can actually preview live data connections while working on the design.
Support for creating resizable applications
Perhaps one of the things designers struggle with most is dealing with layouts that will be viewed across multiple devices and screen sizes. Creating resizable layouts (also referred to as fluid, or liquid) is not only possible now in Flash Catalyst Panini, it’s also really easy to do. I demonstrate how it works in the video accompanying this post.
Better wireframing functionality
In the CS5 release, Flash Catalyst featured a list of ten wireframe components such as buttons and sliders. Flash Catalyst Panini now features an impressive library that contains over 35 components that include things like navigation elements, accordion boxes, and basic building block elements such as body copy or image placeholders. All of the components have also been redesigned to feature a consistent grayscale appearance. What this means is that you can quickly create great-looking mockups and wireframes for just about anything. You can see these new components in the embedded video as well.
While Flash Catalyst Panini is a wonderful peek at what’s to come, it’s still a preview release, so I’d be careful about using it on real-world projects (there’s no backwards-compatibility with CS5, and developers must use the Flash Builder Burrito preview release to open projects made in Panini).
Of course, if you want to learn everything there is to know about using Flash Catalyst CS5, be sure to check out Flash Catalyst CS5 Essential Training in the lynda.com Online Training Library. And you can be sure that I’ll continue to bring you the latest information on future versions of Flash Catalyst here on lynda.com.
Got a request on what topics you’d like to see in a future Flash Catalyst title in the lynda.com Online Training Library? Let me know in the comments below!
When it comes to creating graphics for the many different screen sizes in use today, designers and developers have a variety of choices at their fingertips, including Photoshop and Fireworks. More and more however, designers are looking to Illustrator, as well. With the Illustrator CS5 release, Adobe added finer control over antialiasing, which results in great-looking pixel-perfect artwork. With its vector-based editing environment and ability to integrate with virtually any other Adobe application, Illustrator offers a wide range of benefits for web and interactive designers.
In the past, the titles I recorded covering the use of Illustrator for web design were filled with workarounds to address the shortcomings of using Illustrator for that kind of work. With the new features that Adobe added to Illustrator CS5 however, I was able to refocus the majority of my latest course—Illustrator CS5 for Web and Interactive Design—on workflow. The course covers how to best use the creative toolset and powerful production tools in Illustrator to crank out high-quality pixel- and vector-based web content quickly and efficiently. For example, the title has dedicated chapters focused on using Illustrator hand-in-hand with other applications including Photoshop, Fireworks, Dreamweaver, Flash Professional, and Flash Catalyst.
With the public interest in mobile apps, many designers are tasked with creating content for all kinds of screen sizes, and also for generating the numerous icon sizes. Through the generosity of the fabulous visual designer Jon Hicks, I’ve included his template for designing icons for Apple’s iOS in the course.
Adobe recently released extended functionality for Illustrator via the HTML5 Pack for Illustrator CS5 technology preview (you can download it on Adobe Labs). This pack adds the following six capabilities to Illustrator CS5:
• Designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.
• Create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.
• Define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.
• Select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position, and Dimensions.
• Select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.
With the current trends in the world of web and interactive design, it’s obvious that Illustrator is going to play a large role in future web workflows. Adobe added powerful SVG support to Illustrator nearly 10 years ago, and today’s renewed interest is driving the product even further with support for the HTML5 Canvas tag and CSS3.
In the coming weeks, I will be recording an additional chapter of videos covering the new features included in the HTML5 Pack for Illustrator CS5. These videos will then be added to Illustrator CS5 for Web and Interactive Design course. Stay tuned for information on when that will be available.
Mordy Golding at lynda.com recording booth. Mordy's Flash Catalyst Beta training went live on lynda.com for free today!
If you aren’t already aware of it, Adobe has just released a public beta version of Flash Catalyst — a brand new application that allows designers to create cool interactive Flash content without having to write a single line of code — on labs.adobe.com. As someone who tried to “get into” Flash, and who was continuously frustrated by having to learn how to write complex ActionScript code, I was drawn to Adobe’s promise that Flash Catalyst would make my life better. It seems to be working – in more ways than I would have imagined.
Good things have been happening to me lately, and the conspiracy theory voice in my head thinks Adobe has something to do with it. Allow me to explain. I’m actually out here at the awesome lynda.com headquarters in Ventura, CA, and I just wrapped up the recording of my latest video training title, Adobe Flash Catalyst Beta Preview.
Of course, for this Long Island native, coming out to Ventura is always a rewarding experience. It’s a great opportunity to spend a few days with the great staff at lynda.com, and to top it all off, there’s a great kosher restaurant and winery nearby. But on this trip, I was upgraded to first class on my flight out here, I am staying at a much nicer hotel, and my hometown favorite New York Mets are in town playing the Los Angeles Dodgers. If that weren’t enough, Adobe actually sent me a build of Flash Catalyst a few days earlier than they had promised, I had a great time coming up with some cool examples to show in the training, and the actual recording sessions were quick and smooth! I can’t wait to watch the completed video title — yes, I do watch my own titles – I’m a perfectionist and take my own criticism quite well.
So do you think Adobe Flash Catalyst has anything to do with my recent good fortune? I’m not sure, but just in case, I’m heading out now to buy a lottery ticket. In the meantime, check out Flash Catalyst for yourself — who knows, maybe it will have the same effect on you!