Web and Video

These are some very rough notes that I took at Erik Natzke’s session on online advertising at MAX 2007.

You want to make ads attractive and legitamite.

He has enjoyed trying to make advertisements fun, essentially bring the fun into the ad. You can have fun, playful ads that are functional.

Important to remember that you are sharing space on a page, so you  have to be graceful (more so than regular).

Want to tell a story, but needs to be precise, regardless of framerate or machine. So the story and message is still taught consistently, regardless of the machine.

Hard to get the vision across if numbers are in the way, so he built his own kind of Flash to have more control. So you have a canvas you can work from that’s appropriate.

You are limited to what you can do (for example, limited to 22K).

Need to use trial and error to get things right sometimes.

Can try designing everything on the stage, and then try things out.

Or, you can start with the minimum content, and then add what you can to that.

Optimization is important.

When an ad is for worldwide distribution, things can get more complex. For instance, you might need to make more changes, have a ton of different sizes of the ad.

Need to find a good workflow for the ad, because you might need to make all these changes.

Recommends keeping everything in a single FLA - all the SWFs that will be at each size are along the Timeline (helps you from going nuts).

Sometimes builds in intelligence where you can change the size of the SWF and the graphics do the right thing / resize / redistribute and such.

Trying to get away from keyframes and timeline animation - Easier to optimize, less time to develop, easier to work with, “keyframes can be all consuming” and “code is more interesting”.

Did a random animation using code - can feel more unique, real, is dynamic.

“Reflection - cause that’s what advertising is about”

Built a scrubber into an animation so can view the animation  like it’s in a video editor — then he can tweak the animation as necessary.

Personalities, people, and pets - character ads. These things commonly in ads.

Interaction results in more click throughs, people almost feel like they owe the company the click for a good experience.

(10 votes, average: 3.9 out of 5)

 Loading ...

Intro to After Effects CS3 was led by Steve Whatley. Steve works for Adobe as a solutions/systems sales engineer. This was an excellent intro to After Effects - I really think that if you haven’t worked with the product at all, this session would get you up and running for sure. It was a nice refresher course too - I’ve only used AE from time to time over the past 6 years (6 years ago I used it a lot), and I feel a bit more confident in my skills again

No slides! YAY! This is entry level After Effects session - assumes you don’t know anything about After Effects.

How do you use the application… how you deliver doesn’t matter. If you know Photoshop, this is a piece of cake. You’re going to add filters, move things, and so on - you just have the ability to animate that stuff.

Workspace layout - look in Project folder. You will typically have folders and compositions. You start with an empty project and then you create a new composition.

If someone wants real video and put it on YouTube or whatever - you can select from a Preset in the new comp dialog - makes all the settings for size, aspect ratio, framerate, and so on. Thing about AE is you determine ahead of time about how long you’ll think it’ll be - set the duration in the new comp window.

Web video is all square pixels. Photoshop is square pixels, IL, and so on. If you want something different, you change it in the new comp window- width and height too.

Makes a timeline and comp window when you click OK.

Timeline is like a layer window in Photoshop - same scenario. Right click in comp window, and create a new solid (like creating a new layer). Determine size, or select “Make Comp Size” button.

You can change solid settings Layer > Solid settings.

Can name your solid layers, or switch back to Source name clicking it in the Timeline if the original name is important (swap).

Tilde key is your friend. You put your pointer over a panel, press the tilde and it will fill the workspace. If you have tons of layers or assets, this can be really helpful.

Twirl down parts of the timeline (arrow pointing right, click it and attributes become visible — like a tree).

Anchor point - sits in the middle of the selection/layer — where the object rotates from.

Attributes in the timeline are hot-scrubbable (you can scrub and change values).

When do animations, typical to start in Photoshop or Illustrator. Build what you plan to animate. Build it what it looks like when you’re done moving it. In animation, lots of cases you’ll work backwards. IF exact placement is critical. If at 6 seconds I want something “to be there” you scrub to that location and set a keyframe (click clock in timeline).

Then you scrub back to the 0 second point, and move it,. You look on the path and see an “extra heavy dot” and you can move the handle to create a curve. Then the object will animate along that path you have created.

zero on keyboard is shortcut for RAM preview.

Have attributes independt of each other, so youcan set things like scale independently. So you can set a keyframe for scale at 2 seconds between 2 seconds and 5 seconds, position changes between 0 and 6 and so on.

The green bar is content being rendered first and playing back at real time.

3 gigs of RAM or better if you use AE a lot. 2 gigs of RAM if you’ll use AE sometimes.

The blue bar between the timeline layers and the numeric seconds determines how long the animation is — work area.

You can select and copy and paste keyframes to other layers and so on.

Ease in and ease out - linear keyframes are also what do this. Helps you create animations that create the illusion of “landing softly” (there are lots of places you can refer to this in more detail, fair readers). Right click > Keyframe Assistant > Easy Ease In and so on. Ease out to “take off slowly”, Ease in to “land softly”. Ease out the beginning keyframe, and ease in at the last keyframe.

Importing footage.
Double click in Project panel or Ctrl+I. Importing Photoshop install folder > Samples > Flower.psd.

Motion menus on DVDs are usually a movie animation created in AE, when you click the menu, Encore says play this movie and then play the real movie.

When you import, you get some questions. Import Kind - Footage. Layer Options. Choose Layer if you want a select layer, or you can merge the layers (flatten layers before you bring it in). OR you can import as a composition. You can retain all the styles and filters and stuff when you bring it in. Choose Cropped layers to bring in all the layer styles you want to change over time. Click OK.

Brings in all of the layers, and an immediate composition to the size you created in Photoshop. Now go to composition and double click.

Trim comp to work area.

Select the layer, press “P” for position in timeline — dont’ have that big list of things when you twirl down a layer.

Make sure something happens before another thing stops - keep up that level of interest.

Click button below … Toggle Switches/Modes. Click to right of layer name, and you get modes in pop-up menu — normal, dissolve, multiply, etc. Blend modes. Press Shift and + or - to go through list.

Adding effects.
Going to add Soundbooth becuase there are 1500 sound effects you can use. First add a lens flare and then a sound effect.
Add a new layer. Adding a solid or an adjustment layer. You can put anything on an adjustment layer.
Move layer to start at about 4 second mark, and then add effect. Go to Effects and presets panel, and type in “lens” to find the lens flare. You can drop it onto a selected layer, and it will add it.

Then you see the effect control window, and you can add as many effects you want onto that. SElect the effect in this window, and you can adjust the center point by clicking the center button, change size, and so on.
If you go to the timeline you can see keyframes too (only difference).

A black layer and put a screen - turns into transparent.

Reset the workspace using the menu in the upper right hand corner. If you get lost or something, you can use this menu to get back to the standard/default.

Then you can export out to SWF or FLV and so on.

If you need to do something other than web (ipod, psp), and there are presets that you can use.

Steve then quickly ran through some of the other features in AE, many of them new in CS3. There was a very favorable reaction to the Vanishing Point/Photoshop > import to CS3 feature (we have a video on this in the CS3 video workshop on design center). He also showed the Puppet Tool, which is very cool too (and also has a video tutorial in the workshop).

(5 votes, average: 4.2 out of 5)

 Loading ...

Some really rough notes from Sandro Corsaro’s presentation on character animation with Flash. First of all, I really recommend checking out one of his sessions (here at MAX or elsewhere) if you get the chance. He’s a great presenter, very enthusiastic and well spoken… and funny.

animation history: principle of how started, and by end of session, simpler understanding of animation
Persistence of vision. Things are not as they appear - animators can experiment. exaggerator - you have to lie about reality. can buy into animation when not much there. Sort of believe something has happened. Powerful tool of animation.

In 1940 at WB a 6 min animation cost 50K.
By ‘55 they were 70K
Closed things down because not getting return on investment.
2 guys at MGM (Tom and Jerry guys) had idea started a new company called hanna barbara. So in ‘55 HB created 21 min cartoon for $2800

Did “limited animation” - every character had something to separate head from body - separate action of head from action of body. head moves independently - can turn their head and their body stays stationary. This is what flash is. Beauty of Flash, can do limited animation, but sophisticated in what you can do.

Put so much personality into the limited design - infuse them with so much emotion.

Do quick animation - stretch and squash. Flash a lot like clay - draw until like ines with hand on Ctrl Z. Pull lines until you get what you like. Impt to have nice sharp lines. Pull things around. Using the brush tool.

After done, turns the eyes and head into symbols.
For most part uses graphic symbols, unless project calls for mc’s.
Use ink tool to add ink to the inside of the black outlnes - and then moves it over to the right so it’s outside of the character by a couple mm. Then fills in to make the shadow. Then goes to the other side and moves it inside by a couple mm’s,

Tweens are overrated, he says. So doing a face looking left, and flips horizontal to make it look right. Squashes shape and stretches to give it a bit of bounce up and down in the middle and end of the animation. In the center, he draws the face looking forward for a second. And draws some lines to “blur - to add a bit of motion. Persistence of vision.

Showing mouth animation - you have a number of different moths, and you pull the frame number you want. Put down one keyframe for the mouth, and you go to pop-up and select “Single frame” in PI, and enter the frame number for “First”.  Use graphic symbols for this instead of MCs.

If you have limited time to design a character, strategy involved. determine how to reuse stuff as much as possible - how cna you nest things and put them in the right spots.

And that’s it, from “Adobe Lady”.

(4 votes, average: 3.75 out of 5)

 Loading ...

Opens with band. We are being suitably entertained as we wait. Biggest… sneak peeks… ever.

Peter is being a jerk.  OK, we’re on - it’s deHaan vs deHaan blogging!

5:42 and the fun starts.. very loudly. The room is shaking the volume is turned up so much…

Michael Gough.
- 3 activities tonight… 2 repeats and 1 new thing

1) MAX awards (designers, developers, governments, enterprises) Canada, Hong Kong, Germany, Singapore.

As the momentum builds, competition gets tougher.
Going to show you the finalists, 2 competitors — then we give the award to 1 of them.
At the end, People’s choice award.

Honorable mentions

Advertising and Branding
* Incredibly MINI (the new Mini) — Interone Worldwide GmbH
* The Passenger — Fuel Industries, Karbon Arc
Winner: Interone Worldwide GMBH.

Communication and collaboration
* Scenario based interactive mulitplayer simulation — Hong Kong Police Force
* Online marketplace for manufacturing industry — MFG.com
Winner: MFG.com

Enterprise
* GES Intellikit — GES Exposition SErvices and Four Point Solutions Ltd.
* Wachovia Corp - SErvice Request Managemennt (SRM) Workflow — Wachovia Corp and Cardinal Solutions Group, Inc
Winner: Wachovia Corp / Cardinal Solutions Group.

Mobility and Devices
* OwnTape — Dalrus Pte Ltd
* Shockwave Minis — Shockwave & Addicting Games an MTV Networks Company
Winner: Shockwave & Addicting Games

Public Sector
*International Space Station - interactive reference guide — Nasa
* OASSIS - Operation Against Smugglers Initiative on Safety and Security — US Border Patrol - Homeland Security
Winner: NASA

RIAs
* BMC Dashboards for BSM — BMC Software
* eBay Desktop — eBay and EffectiveUI
Winner: eBay and EffectiveUI

Video
* BBDO for HBO Voyeur - Big Spaceship
* ILM’s The Show - The visual effects of Pirates of the Caribbean 2 DHAP Digital Inc
Winner: Big Spaceship

People’s Choice
Winner: eBay Desktop
‘
Welcoming Brady Forrest — Ignite Awards
Ignite awards.
Ignite talk series where everyone gets 20 slides, 15 seconds per slide — here to present the winners of an Ignite

Presenters:
R. Hoekman Jr. — Everthing is important: the effects of a tiny change to WordPress.com
Greg Sadetsky — Mapping with AIR

!!!!!!!!!!!! Sneak peeks!!!!!!!!!!!!!!
Mike Downey and Mark up as blues brothers. Disclaimer: “Adobe is under no obligation to release any of the technology shown here today in any current future product or service”

SMS voting to voite for your favorite using real-time SMS system (CF and Flex), winner receives an iPod touch.

First sneak:
Karl Soule and Karl Miller.
Both of them are dressed up as blue man group.
Communicating visually with visual communicator - brand new to Adobe. It is a different paradigm for working with video production and presentations. No editing - no timeline. Mimics how live broadcast is handled. They had 3rd graders making professional looking videos with this thing.
Has a telepromter and you can read it, and it has a video playing, and you can green screen and put in a background. And you can insert images in a bucket and it will show until the next one shows up.
Then you can output it to a variety of formats, and you can even stream live using Flash Media Server. Can add titles, effects, blue screen/green screen built in.
All MAX attendees have a copy of this thing in your bags - so it’s the first time you can go and play with a sneak peek at home.

====
Downey has a surprise to share. Immediately after the sneaks - behind the AIR bus there is a big party over there.
====

Danielle Deibler to discuss VOIP in Flash Player.
They are a VOIP service - point to point media session, and peer to peer technology for Flash Player.
Also going to be enabling some extended codecs in the Flash Player beyond the ones available today.
We’re letting people brand the experiences themselves, no Adobe logo going ot have to display. And you can keep your users - only have to use your credentials.
Internal project being shown — diary book that you can update every day for your close friends. Added voice and a simple presence.
Open it up, and you can see some close friends who are logged in. And she is calling a guy, and the audio is coming into the computer using the network, and using the mic in her computer, and the dude is backstage. Activity detection in the app.
Flexibility of the app: Now going to use an AIR application. Don’t have AIR onto their roadmap until next year. But have launched it internally at Adobe - roll out voice inside of an app that’s a directory of company employees. Calls a dude right in front of me on his cell phone. And it worked!!
show you that the roadmap that they’re showing is pretty real. Doing demos, and working on the technology. Hopefully better clarification now!

====

Ken Sundermeyer - showing stuff with Flash and handsets.
Flash Home for Mobile.
Going to make a UI nice! Can replace the Home screen of your phone with Flash.
Typically a home screen on a phone has some wallpaper, clock, indicators — boring!
Flash Home will let Flash to make that screen a lot more exciting.
Boot directly into Flash. Personalization on phones is a lot of money — people want to make a phone nice. A phone is in your pockets and vibrates… it’s pretty personal he says.
Great designers like the community can build this.
Flash Home - you get more realestate, he can use a launcher bar with icons, you have tabs and show a lot of information there. Went from a single idle screen to show a lot more things that he cares about.
You can get web data - pull down feeds. Can also leverage FlashCast, which is a server. Optimizes data and pushes to the phone only when you need it. FlashCast will know your ZIP code and get the right weather, data, and so on. Unlike a slow WAP browser, this is instant on, always there, always up to date.
He is pulling down the text and photos from Bill Perry’s sites. And even if you have no service, the last data you pulled is there.
Flash Home is integrated with the device. AIR has broken through the sandbox — this is similar. it lets you get at SMS, calling, and everything — access to device. Pulling everything together (device, web, etc)
You can completely theme this thing. You can make things for sports or whatever.
Showing code on paper… literally. He’s pointing with his finger at the code that he’s explaining… is pretty funny. Showing how he can customize the background based on the area code… if it’s from Seattle, change it to wherever background. Demos how this actually works using a caller from the audience.
You can buy these things, subscribe to them “OTA” (over the air.)
He has a catalog of Home screens - you can get new ones, subscribe to whatever you care about.
“Hope it makes your phone a lot more exciting for you NEXT YEAR”

====

Photoshop Express — Geoff Baum

Consumer, online version of Photoshop. Not to replace Photoshop, just quickly edit photos online in a hosted app. Uploaded photos to Adobe, and you can select and then edit the images online.
Showing auto-correct - scrolling over images, and it’s rendering real-time in Flash.
Going into another edit - selecting saturation > White Balance — series of thumbnails to choose from to select what balance you want. And it’s doing this real time in Player.
Showing a photo of a boy - needs to be cropped, red eye, saturation changed, vibrance, rotated. He starts doing all these things in this online hosted app.
You can see the difference between the original and what he just did - and it took only 30 seconds.
The features are being selected from a list down the left hand side - sort of an accordion that groups things. There are 3 tabs across the top “Quick” “Normal” and “Advanced” that have different selections.

He is now removing Blemishes from an image. You can sort of choose areas of skin you want to replace the blemish with.
You can undo what you’ve done too.
Or you can go into timeline mode and select which version of the photo you want.
Modeless in sense you can do any edit in any place. Can go back or fwd in time.
Non destructive editing
Can go anywhere in the timeline, and it will re-render in the Flash client.

Going to do a replace color too. Changing the color of leaves around the leaves. And now he’s changing the color of a car. Or you can choose “solo replace color” Black and white, and only the car has color in it.

There’s distorting too - you can distort parts of the car.

Lots of cool features, all hosted online - you can upload, edit, package them up in a slideshow, embed on a blog, share with your friends.
Sense of the power you can get just with a Flash editor.

====

Intermission. Band is playing again.

===

Danielle Beaumont - Flex and AIR authoring in Fireworks “Next”

Custom skinning, along with being able to create prototypes for AIR.
In Fireworks - currently offer you some Flex components. You can drag them onto the canvas, you’re bringing over elements that have MXML intelligence inside them. They’re known components. Checkbox and buttons and so on behave like those components. This is great, good for wireframing, but if you actually want to custom skin it’s not too easy in FW.
In next version, you can do that directly within FW.
Showing a design she’s working on, they have custom skinned components.
Dragging an unskinned component into FW.
Want to skin it.
Double click it — and she’s editing the skin right on the canvas.. no jumping around anwyehere.
Grab a slider, and paste in the new graphic and layer it appropriately.
Juming over to the design, and then goes and replaces another graphic.
Supports nested symbols.
Now, wants to preview the Flex project — extending the capability so you can preview the MXML application right in Fireworks and put it in a browser. You no longer have to open it in FlexBuilder. Now you have a browser and all the components are known, skinned, and interact with them, and everything.
Can use AIR to build a prototype too - take all that chrome off.
You’ll be able to load the widget up and cache the data.
Can preview the AIR application right from fireworks too.
FW team is excited to get feedback. In the next few months, will be in Beta with these new features!!

====

ColdFusion — building online offline applications with CF and AIR. Hemant Khandelwal

Without needing to know anything additional (CF developers) to make this happen. CF, and AJAX application. You can send data to a server. If you refresh, send the data back to the server.
Want to do 3 things to app: Make it AIR, make the data accessible to him in an offline mode. And when you send a form, if the AIR version is in offline mode, want the offline submission to happen when go online.
Couple of changes made to CF code to allow it to give him offline access. Adding a CF AIr access track to his page. Adding an offline mode to the grid. CF is generating all the code that’s required for the box grid to store the data into the local database, and do the sync.
Then he generates the AIR application — CF has generated a bunch of callbacks for him.
Adding some buttons on the app so he can go offline and online. When he’s online and sends mail, it will go to the server, and when you refresh it shows up.
When he goes online, it automatically syncs with the database and gives you the data.
All you need to do is supply a mode, and it automatically does everything to you.
Going to send data to the server, and show you how offline data can be sent to the server. When he’s offline, the mail goes into the unsent box - it processes the fields and stores locally (CF does this for you). When you refresh, the mail leaves the unsent and goes to the server.

====

Web to Print technology - Roey Horns and Will Eisley

InDesign and Flex. How you can create simple to use print applications using Flex and InDesign server for backend. Server version of the layout engine used to produce thousands of newpapers, magazines and so on.

Have a customized menu service - able to print it, but add in the daily special into it easily.

Designers are attracted to this because you can do very nice typography, layout and so on - and designers don’t need to know scripting or any developer stuff.
You can upload to the server using an admin front-end. And suck in info from the ID file, and you can work with Template options.

Restaurant owner might use this service to create the menu. There’s a Flex interface with several tabs across the top. On the right side you see a live-preview from the ID server. It looks like exactly as it will when it prints. You get to enter in stuff, and it will update real time on the right (where you see the server preview).

Uploading an image to swap in (preserves transparency). And you can switch to a different theme - it changes all the colors in the menu, changes a default image.

You can with one click take all of the data from the original menu and populate the new menu.

Then you can create a high-quality PDF, that’s personalized menu in a few different steps.

Example of a web-to-print solution that you can build today.

====

Future version of Flash - Jethro Villegas and Tony D.

Major structural and architectural work going into Flash.
New stage rendering core built on Flash Player 10. Benefits to be shown…
Designing around video… tough because you can’t see the video while you’re working.
New version of Flash, you can have live video on stage playing at author time.
Not only is video live, but it’s even interactive. You can pull out colors and stuff.
Better WYSIWYG on stage so you don’t need to Test Movie so much.
Another benfit is some of the things like 3D and live filters - you will see that right in the editing mode.
This is only one part - so there will be tooling for 3D, and tooling for advanced filters.

One of things hear from designers and animators - problems with tweening. Keyframes and timelines, headache. Want property changes over time.
Right clicking a symbol and creating a tween,
You see your path and see your keyframes across the stage (new span time) - path is adjustable and editable (think of Afeter Effects) - you have a bezier path. (Again, think After Effects)
Move the object, it changes the path. You can have scaling.
NO MORE KEYFRAMES
Select the object, select and move the the whole path moves.
You can delete the object - but the tween is still there, so you can add a new image.

Drawing some shapes on the Stage. Adding some IK stuff to a drawn arm. And now he’s just animating this thing.
Moves with shapes, moves with movie clips — bones on everything. And it’s fully interactive !!!!!

With less than 20 lines of AS, test movie. Runtime IK in Flash!!!!!!!! Designers and animators with both love this.

====
Last 4 sneak peeks….

Rick Brown - new capabilities for PDF. Assisted by Michael Folkers

Take the Flash runtime inside of Acrobat, and see hat happens.
Acrobat is really for knowledge workers, everyday computer users. By integrating Flash, really transformed the way anyone now can take the power of those technologies and make some interesting presentation.

Demo - want to pitch the idea of a script to some movie execs. Has a script in PDF in Acrobat. Can take other file formats and add them to the PDF. Adding some PDFs, JPGs and so on - everything is in there, in conext with the document.
Have the Flash runtime in there, so you can view images, Flash game right in there, Any content type that can work in Flash can work in there to. like H264 video, FLV and so on.
Have all the content/assets together. The user interface though is pretty dull. Want the content to stand out - you can replace the UI and customize the experience of the document. So has created his own custom navigator - pulled out the metadata from all the files. There’s animation and sound.

PDF and Flash have powerful scripting models, and can go out to web services. Bridged the JavaScript model in PDF and AS - can go out and talk to web services. Have a Flash application running in context inside the PDF and talking to Yahoo maps. Taking the info in the PDF and hand it off to the application - then everything is in context with the document.

Can have dynamic content and reliable documents al together in the same package.

Integrated real time collaboration capabilities inside of PDF. CoCoMo running inside of a PDF, in context with the document. Showing a floor plan of the new office moving into - don’t want to spend a lot of time trying to understand the document… so he’s going to connect real time - can see if other people are present in the document. CAn chat with him, and sync the view of the document with each other. Want to show exactly what he’s looking at - so you can zoom in together and so on.

====

Create content on multiple platforms - Steven Heintz and Ramanarayanan (Ram) Krishnaiyer

Showing Ubuntu.
Showing Flex Builder Linux!!
Based on the Flex 3 featureset. So you can do code hinting, syntax coloring, code completion, outline view, let you navigate the source code. Navigate using ctrl click.
Putting a break point and debugging the Flex app.
All the features to build Flex app, debug.
When will be able to give people an early version - it is still a very early version.
If there is interest, might be able to get a copy out for people to try….. oooonly if people vote for this session?
GO to Adobe Labs - as of about an hour ago, it was available on Adobe Labs. Still an early alpha, based on a number of Flex 3 features. Doesn’t have design view, but continuing to update the alpha based on community.
Marketing team has some stickers too at the doors here at MAX

From sneak to available….
====

Scott Petersen
Flash on C/C++

Flash doesn’t have XSLT capabilities, in Flash or AIR there is not a lot you can do unless you write your own implementation.
Working on experimental technology to translate C/C++ into ActionScript and use it to create Flash or AIR apps.
Pasting a bit of code - calling the AS equivalent of XSLT… jamming it into HTML text.

Taken C source for libraries, and ActionScript as output.
Could extend XML object to do XSLT transformation in a single line.

Once you have C/C++ - you could take Ruby interpreter, PHP interpreter and leverage in your Flash and AIR apps.

Will take your syncronous C code and convert to asyncronyos so it doesn’t block the UI
So you can approximate multithreading with that.

Ported a more complex app - Linux Quake ported into Flash. And even modified it in Flash. (!!!!!)

Quite a bit of C code that’s interesting to port.
Possibilties for porting:
Encoding libraries for media
Image processing
interpreters
Your company’s legacy logic.
Port some server side PHP right into your SWF.
Interesting with AIR
Media encoding and decoding (ffmpeg, mp3, camera raw)
Internet protocols - Jabber, Google Talk

====

Shai Avidan
Content Aware Image Resizing

“promised when I came here that everyone would be drunk by now”
Content is king - want content to apply to the transportation that you’re doing. The content should reflect the result.
Show a simple way of doing that — seams.

You can reduce or extend the image -(you should see the YouTube video of this instead - google “content aware image resizing” or his name.)

You can add constraints for the scene carving - so images that don’t work you can set these constraints so it doesn’t distort.

This is seriously crazy stuff - he’s erasing a shoe from an image with all these shoes, deleting a boat from an old print. All of this on a flat bitmap file.

(5 votes, average: 5 out of 5)

 Loading ...

Flash CS3 and Soundbooth CS3 : designing content with great audio — mostly brought to us courtesy of Jason Levine, with some assistance from Greg Rewis near the end to cover the Flash bit. Session was mostly on features in Soundbooth (which are quite awesome). So on to the notes… please excuse the mess - haven’t had time to clean as the session ended about 15 minutes ago and I am just hitting post

Soundbooth — Audio for flash people. How easy it is to do great sounding audio, export as FLV/MP3. Ways you can manipulate and modify audio are simpler than ever before. Don’t need to know a lot about audio to make things sound great.

Like to showcase “non audio creative professionals” are the target audience for Soundbooth. Just means your main focus is not audio - but you occassionally need to do certain audio tasks.

Identify things visually and fix them visually. Use your eyes

Five most common tasks are available in the Tasks panel (such as change pitch and timing, add sound to a file — “autocomposer”, clean up audio, create a loop, remove a sound). Purpose of loop - make a seamless loopable file without a click.

You’re going to use Photoshop knowledge to do all of these tasks visually - using “spectral frequency display”. You can see frequency over time in Soundbooth - frequency is on vertical axis and time along the horizontal. Illustrates what sounds look like in the spectral view in SB. Represents kinds of noise. Color is amplitude — closer to yellow/white, the louder the amplitude, opposite for black. Orange is at a softer amplitude, so it is harder to hear in the sample file being used. Going to repair this file so you can hear the orange stuff - which is a voice.

Goes to clean up audio in tasks panel. SB can scan the file, and try to remove noise automatically. Showing Noise dialog. How aggressively is SB going to try and remove those sounds, and reduce by what. So then you have a very quiet audio after they clean it up. So then you can try to bring up the audio that is underneath  — now you can hear what is underneath all that noise.

More advanced - you can understand where the noise is by itself “capturing a noise profile”. You can right click when you have a selection and capture the noise priont (take a profile)  with right-click. Applies to everything - hum, rumble, hiss. Then you click “remove a sound” - opens up a new view. Then go and highlight the entire file and you can increase the wave form just by drawing on the screen.

Removing individual sounds:

Opens a tape recording of Beatles, and it has hiss in the background. We’re able to take a profile, but instead you can use adaptive noise reduction and adjust it in the Noise dialog until you have the sound you want. You can preview your settings as it plays, and make it sound like you want. If you have noise by itself, you can use it for a profile and get much better reduction.

Photoshop tools for sound removal:

Use remove a sound to take out something like a squeaky door. Opens spectral display, so you can actually *see* where the squeak is. No other way to do this - can’t use filters/equalizers to do something like this. Pitches begin to look like images so you can remove things specifically.

So how to remove? If you use the marquee - can’t get tight enough, would remove too much noise. So you use the lasso instead — probably want to use a wacom tablet or something to be more exact. Checkbox “play selected frequencies only” so you know exactly what you’re removing. Test it - and we have only that squeak. You can take it and paste it elsewhere to clone the sound. Reuse the sound as  a sound effect. To get rid of it, take the volume and drop it down and the squeak is gone.

Another way to do this. Use the healing brush to remove the squeak. Have to be precise with the selection - limitation on the brush size. You can use auto-heal - analzyie the audio and then heals it. Doesn’t effect anything on bottom channel either. And it’s totally gone. And didn’t require any audio knowledge either.

Another couple restoration examples:

Piece with clicks and crackles (vinyl) — wireless, you’ll get lots of little clicks. Use the click and pop filter, use the slider to remove them, then click OK to process the file.   Same thing for removing rumble (mic rumble and pops) - another filter. Easier to get in there, fix, and get out.

Live piano recording, and there’s a cell phone goes off. You can pretty much highlight the ringtones - identify them digitally and remove them easily.

Dialog:

Lots of noise in the background, cell phone in the background. Same thing, select, drop the volume down, auto-heal.  Use adaptive noise reduction to remove enough of the background noise.

Sounds close and boxy after you remove to much noise. Using some effects to fix that. They were using a boom mic, but the volume of his voice is all over the place - soft and loud. One of the first things you can do to make volumes the same is highlight a section, and use the onclip volume tool to visually match the audio levels by redrawing the size - will just have the same consistent level by just matching it visually. If you can get it visually approximately the same, after you compress it for the web, people won’t notice.

Then you can go to the history panel to look at what the changes were. Non destructive so you can step back in time.

Fade in / Fade out.

If you do a fade in and fade out you are respecting the 0 cross - it ramps up from negative infinity and ramps down to negative infinity so you don’t have a click.
You can trim off the beginning and end, grab the fade handle to draw the fade curve for how the audio fades in and fades out.

Presets/filters:

Apply them non-descructivity. Only apply when you export them to FLV or whatnot.

Have a ton of presets for reverb, mastering, voice, EQ and so on. Stuff to give you clarity, fix muddy voices, clarity, prsets for male and female voices. Preset for sivvelence (”de-esser”) that takes the “s’s” out of a voice.

You can stack the presets to make layered effects, so you can apply multiples. So, if a voice sounds like it doesn’t have an environment (if you pull out too much noise, going to make file sound artifacted). So you can apply simple effects - reverb. You get a slider to set how much reverb you want to apply. Or you get a bunch of presets instead and use them instead — you can choose “Dark room, bright room, clean room” and so on. Or you can use an advanced reverb where you have a bunch of sliders that you can use if you know what you;re doing (or want to play around).

Then you can apply the effect (which is descrutive).

Now make the whole thing louder — at the bottom right of the interface, there is a louder button that you can just click to make things louder.

Now adding some cuepoints to prepare for Flash.

Greg Rewis.

Opening Flash and AS3. Selects an MP3, but don’t want to import the MP3. Do not do that, because if you put the sound into the Flash file you bloat the size of the SWF.

Hard way - ActionScript.
- Writes some code to import flash.media and then URLRequest the sound file. Then create the sound object. Say that it will hold the file that you’re requesting. Then you play the sound.
<didn’t quite get to cuepoints>

(2 votes, average: 5 out of 5)

 Loading ...

General session keynote - Day 2

Kevin Lynch

mtv.adobe.com - MTV contest. Cards will be on your tables at Lunch.

Bruce Chizen

“What keeps me going” (Why still CEO of Adobe) Pains associated with the role - financial community working with them is like going to the dentist for a drilling without Novicane. Dealing with the press is facinating. Words flow, print the words. but put it around other stuff - words are the same, but the words surrounding them is not what he meant to say. Privacy. Anywhere he goes in the Bay Area, somebody knows who he is - people will point and so on - weird and awkward. And everyone knows how much he makes, and everyone thinks it’s too much. Legal risk - something he says today could put him into jail in 5 years. So why does he keep doing this? Two examples of why he puts up with all the time: 1st) Took wife and son and CFO and family to go see Dave Matthews Band, and there was an Adobe employee who knows a member of the band crew, and could get him backstage passes (!) — standing there with drummer, keyboard, lighting guy - and he’s in awe of them, and they can’t stop talking about Adobe products and how they want to try CS3. Felt it is great that he represents a company that impacts someone as famous and impacts DMB. 2nd) Dawns on him during general session that there are 4000 of us who have paid to come to MAX. Get the sense that we are truly connecting with one another, hope that learning from each other. Objective is to inspire the community, but can ensure community is inspiring Chizen and Adobe employees.

Kevin Lynch

Services, servers, and tooling areas - to be covered.

Business logic is being written and written over again. Lot of common patterns on how people are working together and sharing information. Trying to bake some of that stuff on both client and server side to help out that. Best user service + best server side logic together.

Steven Webster - take us through enterprise applications.

Experience matters, and are measured and well understood. What happens behind the glass? What happens when you hit the submit button? What happens on the backend can ruin the experience if it doesn’t work well. Going to cover LiveCycle ES - and those who will platform on top of LiveCycle #S.

mfg.com. They have people in different time zones, languages, etc - everything very technical, lots of data to be collected. Bad user experience. Can real time match customers to suppliers anywhere in the world. Can upload files, process them automatically into 3D pdfs, set policies and permissions to control access to that file. Can expire rights to view based on certain events. More control over IP using the LiveCycle ES stuff. What the internet was meant to do.

LiveCycle ES exposes a lot of useful experiences. mfg is a Flex app on top of Java archtecture. Has a lot of data to process - data and service oriented, and turns data into valuable information. 3D cad drawing, upload, and create a request for a quote (RFQ).

Wizard can help you out here - guide builder. Use a design pattern called a “Form guide”. Make the form into a RIA - you can style, skin and embed it into your existing experience. You can scan a piece of paper, it will recognize the form, and turn it into a RIA automatically. Form services.

Rights mgmt, digital signatures. IP is sometimes critical. Rights mgmt: you might have supplier A and B - send a quote, and ask for credentials (username and password), and they can then open and view information, and go one step further — you can prevent people from emailing a document, or even printing a document. Can go one step further — say Supplier A has been successful and wins the bid. Supplier B no longer needs the info - so their rights to view the document has been retired/revoked, Supplier A can still view it.

Service browser in LCycle- you can look for them, pick them, assemble them. You can even use 3rd party services, or write your own services. You have a Workspace with LiveCycle - flex based. So you can see the RFQs, and people can go into the workflow and see what’s going on and participate. All the Flex components are available, so you can build your own process management experiences. Lots of services available.

Available in the Developer Center for free. Even in the enterprise, and on both sides of the glass (front end and back end), experience matters.

Kevin Lynch.

Starting to make these available as hosted services, so you can start integrating them in your applications. We’re working on some services. Some available, and some in the works.

1) Scene7, hosted services.

Doug Mak. Scene7.
Leading “One Demand” rich media publishing systems. Easy to let you get rich media up to websites.
Enables creation of enhanced website experiences.
Automation makes it all easier. About getting more content out with your existing teams. Let you focus on value-added, take out the monkeywork.

Notion of single-master image, and the system dynamically renders whatever version you need. Saw tons of customers online, and see that most people using Adobe stuff. - Feeding it out to an Adobe viewer (Flash, Flex, PDF) — fill a gap between the content and the viewers.

Once you put up your rich media server, it’s just a web call to pull in the content.

Looking at Gucci.com. Site focuses on the content. Opens up a new page, and calls upon scene7 to open up a higher res view of the image. You can get a dramatic zoom in, and allow the user to drag and pan the image too. The customer can rotate the image as well. Designer can take the content for granted, and design the best experience that they can envision.

The URL you are calling has a lot of parameters. Those paramemters change, and you can call back a different size or whatever of the image. This is the basics. What if you can’t predict everything that you need? You can let the customer control their own application.

Showing teamworkathletic.com.
You can change the characteristics of the item - color, accent colors — change the color of a layer. You can go beyond the customization. You can even put graphics onto the image — he’s putting a number on a uniform that he has already change the color of. You can even customze the graphic. Graphic looks like it’s actually on the uniform (all sort of folded like the shirt and everything)

Customers will want to push their own images. So users can upload their own images (he uploads a MAX image and places it on the uniform).

You can print out the image — you can see that there is texture on the images that he has uploaded and everything — it renders a very photo-realistic image.

As simple as a URL call that you pull into the webiste. It’s a “software as a service” — you can email the URL to a person, or you can send them to a scene7 repository too.

Scene7 is strong in imagery, graphics, creating great web experiences. Called up QVC and asked if we could build a new AIR application with FLV and scene7 imagery.

Simulating a live stream from the show, and DVR like controls in this single scene environment. Or you can watch things that haven’t been broadcast yet. AIR means you don’t need to have browser controls there. And you can interact and browse along side the broadcast. Incremental information (cross-merchandising, other colors available). You can also look at 3rd party services — incorporate a complete view for the customer. You can email to a friend, shop with a friend, and so on. You can even index parts of the show — “heel cup” will take you to a specific part of the video that discusses that feature of the shoe.

Where going now other than AIR? Cross-media workflows. Going to take advantage of Adboe technology to be equally strong in print so you can do campaigns and so on. Next year launch a web self serving company so individuals or very small companies can sign up and create great experiences too.

Andrew Shebanow

Share beta. New service introducing - make it easy for people to share files, important documents with other people inside and outside the firewall, access anywhere on internet, big files. Free Gig of store - and people always have access to the latest versions of the files you’re sharing.

Experience - put things front and center : the most important part of the workflow. Can take files from library, desktop, and share files. Choose access level - anyone, or limited access (only people sent email to). Click open access, and click Share. Upload the file, sent an email to person shared it work, and in the background also thumbnailing the document. It lets you see who you have shared things with in the past — always remember who you have shared with, who has seen the document. Don’t have to manage the content.

Things interesting when you see what people see when they see the document. Combines flex and PDF — Flash preview of the document (like Flashpaper on steroids). You can zoom way in, pan around, and great performance. From here, other people can sign up and log in and get 1gig. You can see what other people have shared with you.

Also want to let people share on wikis, blogs, web pages — so there is an embedded view as well. Shows a blog, and you can add a bit of embed code. Now there is a view of the document of a presentation right in the blog — page through, switch to a specific page number, and you can click “share/download”, and you can get the source file from the author.

Fully resizable too - so you can either make a thumbnail embed, or a large one.

Has full set of REST APIs - upload and download, share docs, set permissions, retrieve doc thumbnails and previews, manage downloads. Allow for interesting mashups.

Also have set of AS3 libraries, so you can easily use the REST apis in your applications. Use standard XML to look at data returned, process, etc.

Simple application, will be interesting to see the apps you create. More stuff coming. Working on:

Improved file organization, tags filters, user defined.
On the server conversion for open document files.

Create a PDF and share from applciations.

adobe.com/go/share. Will allow in a few hundred more people at noon.

Danielle Deibler

Pacifica - creating a service that hope developers will use to incorporate high quality voice messaging, presence into their apps.

Talking to Dom remotely - he’s using USB mic and video. Starting an editing session. Dominic is actually going to be mixing a clip in remotely.

Focused on voice for now.

Eliminate complex back end - simple point to point connection, enabled by Flex components on top of the Pacifica service. High quality voice chat.
Text instnant messaging
Presence
NAT/firewall traversal - enable point-to-point
All in the existing apis that you use

Future:
- video chat
- P2P implementation
- AIR support
- PSTM access (traditional telephone network)

Private beta starting this month. Looking for developers with exisiting RIA that would be enhanced with this service. Also hiring developers and QA. Will also give some sneak peeks this evening.

By this time next year, want you to be showcasing applications that use this technology.

Nigel Pegg - CoCoMo

Real time client/server platform.
Lots of changes - rebuilt the entire client UI in Flex.
Took of all spare time because of moving to Flex - so remade UI a set of UI components. All of the pods have UI components with styles, skins and so on.
YOU can develop connect stuff in Flex.
Have foundation classes for Connect.
Real time AV streaming.
Also refactored, and opening up worldwie hosted service structure. Means that any Flex application that wants to mash up real time mutliple user experiences.
All take to build these kinds of applications is client-side Flex.
Made programming really easy so any client that embeds kokomo and has access can use.
Removed a lot of the async programming that would have taken to get into this.
Providing foundation classes that allow users to access low level stuff.
Shared whiteboard — full whiteboard from Connect offered as a real-time component.
Mash up these new components into anything you build.

Will be deploying with next version of Connect. Will have “adobe hosted services web APIs and mashups” today at MAX.

Collaborative methods: go to adobe.com/go/adc.

Kevin Lynch

Next category - tooling!

Figure out how to enable more people to create RIAs.

THERMO!

Enable people to design with some embedded logic.

Mark Anders Steven Heintz

Presents a component based model that makes sense to developers. But this doesn’t make sense to designers — they draw something and then give it to devs to implement. Thermo is to make the workflow between designers and devs to work together.

Allows designers to start with static images, and to transform it in place into a running applications. Wire interactivity (clicks, etc), and do it without writing any code. One of the hardest things to work with data… allows designers to create apps that use data without code or access to data source.

Thermo is a seamless workflow for devs working with FlexBuilder. Allows designers to take design much further and be part of the production application without loss of fidelity. Own the design during the development process.

Steven:
Looks and feels like a designer tool. PS IL and FW users will feel comfortable in it.
Creating a new blank application canvas. Use drawing tools to create parts of the application, add or manipulate graphics from another place.
Drag a rectangle that gives you an in-context display of x and y and so on. Then you get a panel that pops up where you can change properties.

Mark:
Thermo is creating a Flex application, and it’s creating the source code while you add things. Tags represent the graphics. Thermo has a complete representation of the graphics that Flash has, but becuase it’s Flex you can add states and transitions to make things come alive.

Steven:
Going to Photoshop, pulling up a comp that’s static of an app. Intended to be a music browser. Hard to express how you want the behavior to look and feel - put the images within layers though. Can work with this easily in Thermo when you import it.
Starting a new RIA but now going to import a PSD file. Have some options when you bring it in - how you want to treat layers. Want them as PNGs so you can work with it, and text as text (and preserve). Now it’s on the Thermo canvas — it has been converted to MXML. Showing code. Can use this code and use it to turn it into a real app. But still a picture of a Flex app… now going to turn it into a real app.

Rectangle is supposed to be a combobox. You can right click and “convert artwork” into a text input box (!! applause). Just with one change, you can run the app and now you can type into the text box. It picked up all of the font information that they had there.

When they go into the source code view, it highlights the asset that you have selected in the design view.

Thermo took the picture, extracted info about size and position and created a text control. Picked up the text and font in the graphic and set as properties of text control. Turned bitmap images into the inline skin of the txt control. Has the same look that the designer had.

Thermo will help you separate out the graphic so you can have a smooth workflow.

Now going to more complicated example - major UI of this particular app is 3 rows of images that sit on layer folders - represent selections. So we want to turn them into actual lists. If you were to do this in the actual application, it’s going to be dynamic data and pull in real album titles.

Using some dummy data in the application. Selecting artwork and converting artwork into a list. It will put a new list in place of these items, and we want to add behaviors so something happens when artwork is selected. And you can put them into design time data collection. Gives a name for the data collection. Design time data collection is now available so you can work with it when you explore the transitions and so on.

Define what happens when you mouse over the item. Select the item, and you go into an edit in place. In context display (pop up panel in context of your selection), and you can define an event — and it gives you a kind of “normal mode” coding widget that writes the code for you. Set Event / Action / Transition using pull down menus.

Thermo is detecting that there’s a transition/event that happens. In details state you’re adding aditional information - adding artist name for each album. Adding album name as well. Can tweak the design and animation using a timeline like thing at the bottom - sort of in the Property inspector area.

Now have an artist and album column in the design-time collection. You can enter real values into a property inspector. So going to add some data throughout dummy data. So adding lorem ipsum data feature, and you can add a number of words to add (so, 4 lorem ipsum words added into dummy data automatically).

Designer drew a scroll bar in the Photoshop comp. Scrollbars typically have several logical pieces (track. thumb, right and left arrows). Thermo knows how to handle this. You use the Convert Artwork to > Horizontal scrollbar feature. You can edit the scrollbar in place — you can see the common elements that the scrollbar has in the layers panel, and each bit that the scrollbar needs is in layers area. So now you can move artwork into the “thumb” layer so thermo treats it appropriately.

Now want to associate the scrollbar with the list. Need to click on scrollbar, and you have an indicator that lets you wire it up with another control. You get a wiring handle that lets you see other components that can accept this. So you pretty much can bind the albums to the scrollbar, so you can scroll them.

So you want to test the scroll - you can tell Thermo to duplicate the items you have so you have twice as many and you can scroll them. testing it, it works beautifually <big cheers>

A developer can open up the same project in FlexBuilder - at the same time. So the designer can keep working in Thermo, while te developer works on the logic and store and whatever.

Make it so designers don’t have to change the way they work, and they can give the developer something that makes sense. In lots of other environments, you would have to write a lot more code.

When get Thermo? This is an early sneak. You can expect something next year that you can experiment with.

Danielle Deibler

Pacifica - creating a service that hope developers will use to incorporate high quality voice messaging, presence into their apps.

Talking to Dom remotely - he’s using USB mic and video. Starting an editing session. Dominic is actually going to be mixing a clip in remotely.

Focused on voice for now.

Eliminate complex back end - simple point to point connection, enabled by Flex components on top of the Pacifica service. High quality voice chat.
Text instnant messaging
Presence
NAT/firewall traversal - enable point-to-point
All in the existing apis that you use

Future:
- video chat
- P2P implementation
- AIR support
- PSTM access (traditional telephone network)

Private beta starting this month. Looking for developers with exisiting RIA that would be enhanced with this service. Also hiring developers and QA. Will also give some sneak peeks this evening.

By this time next year, want you to be showcasing applications that use this technology.

Nigel Pegg - CoCoMo

Real time client/server platform.
Lots of changes - rebuilt the entire client UI in Flex.
Took of all spare time because of moving to Flex - so remade UI a set of UI components. All of the pods have UI components with styles, skins and so on.
YOU can develop connect stuff in Flex.
Have foundation classes for Connect.
Real time AV streaming.
Also refactored, and opening up worldwie hosted service structure. Means that any Flex application that wants to mash up real time mutliple user experiences.
All take to build these kinds of applications is client-side Flex.
Made programming really easy so any client that embeds kokomo and has access can use.
Removed a lot of the async programming that would have taken to get into this.
Providing foundation classes that allow users to access low level stuff.
Shared whiteboard — full whiteboard from Connect offered as a real-time component.
Mash up these new components into anything you build.

Will be deploying with next version of Connect. Will have “adobe hosted services web APIs and mashups” today at MAX.

Collaborative methods: go to adobe.com/go/adc.

Kevin:

Patterns emerging on the user interface. How can we share?  We have a team called XD (Experience design). Inviting up Mike Sundermeyer

Over the last couple days, seen lots of things you can do with platform and authoring tools. How do you create an effective experience? XD has been working for 5 years developing Flex and Flash applications. Wanted to share with you some thoughts of what they’ve learned .

Adobe Inspire XD site. http://xd.adobe.com

Top level are case studieis - examples of great experiences. Defining and designing RIAs - less it more, what makes a good experience. Research library - design patterns, and in the future, components. Adding new sections : 10 minute design review where you can post your own work, and people will give advice (from XD and the community). Along side everything are community comments.

Case study: TV 2.0. Talks about challenges, what’s the heart of this thing (what’s the “spark”). So controls are small and only where needed in this TV app because the content is king, and what you want to look at. You can add comments everywhere, and there are x-refs, so you can go find patterns and principles that relate to the case study that you’re looking at. Single to the user where you are, where you go to, where you’ve been. In context displays and so on not to overwhelm user with too much information.
Have hot topics which are comments.

Alpha site, please take a look and give feedback.

Kevin Lynch:

Biggest Flash device in the world: Last year Jaguar, this year: yacht. IntelliSea — systems that tells diagnostics (monitor water, and whatever else) and so on (inputs from around vessel, and broadcast all the data to the server, and then they’re sent to Flex UIs). Flex brings ease of development, speed of development, Flash Player is fast so they can handle all the real life sensors (GPS, XM, and so on). RIFD tag system so they can tag crew members, so the alerm will sound “man overboard” voice. hehe.

Roadmap:

Moviestar beta on Labs.

Today at MAX: betas of AMP, buzzword, flex, share, AIR, Flash Lite 3 to manufactuers
Weeks: Moviestar, Pacifica beta,

2008 release: AMP release, Buzzword released, AIR, Flex 3, FMS, Flash Player Astro.

beyond: Thermo, Pacifica, CoCoMo, CF “Centaur”.

MAX awards tonight. Send your vote anytime to 48477 - send the letter M followed by the number of the MAX award person you want to win.

<video of AIR bus>

(2 votes, average: 5 out of 5)

 Loading ...

I’m giving away free books to people who bear talking to me for a short period of time (maybe 10 -15 minutes). Good books too - new stuff from Peachpit and O’Reilly. I’ll be around the conference tomorrow, but I’ll be attending a number of sessions so I might be harder to find. However, I will spend a good deal of time Wednesday morning looking for people who will talk to me, so I can give them a free book for their efforts. I will be in or near AIR park, and I will probably have a pink flyer and possibly a MacBook around me somewhere. I will also be wearing the t-shirt as detailed here:

http://www.webvideoblogger.com/2007/09/28/find-me-at-max-2007-answer-some-questions-well-send-you-a-free-book/

Find me, talk a bit about the community and your experiences, and get yourself a free book.

(No Ratings Yet)

 Loading ...

Whole hugeass team standing at the front of the room, including a Peter deHaan.  Near the beginning they all introduced themselves, but I can’t type that fast and I’m sure it wouldn’t mean too much in a blog.  These notes are pretty rough - if something doesn’t make sense or you want more info, ping me and I’ll try to find an answer for you. Or if you were there and it needs fixing/clarification, please comment!

Matt Chotin said:

Flex 3 beta released on Labs today. See Flex guys with their flash drives if you want it.

See Flex roadmap tomorrow or Wednesday - sessions on both days.

Bootcamp Wed morning 9-12 - 5 and 10 minute sessions to find out whats going on in Flex from your peers, demos from Flex team. If you want something to be discussed, you bring your ideas to the beginning.
Ad-hoc, will cover what you guys want.

Recommend going to keynote and sneaks tomorrow.

Bugs.adobe.com/flex. Please file bugs and feature requests, and vote. Important that you vote so they know what’s important to you. Voting means that you care. Bugs sit in community status - means community has filed them, but does not mean that they’ve read through all of them - if you vote, it raises the status to the team, and they will make sure to look at it. Please vote for enhancement requests as well. And file those enhancement requests too.
FAQs answered by a variety of team members:

* “What’s Thermo?”  - answer “Go to the keynote”.

* Bi-directional support (Astro) - we need astro - that’s when Flex will get right-to-left text.

*Alright we saw Astro, when will Flex support it?  In the next Flex release. Flex will support FP9, and optionally support the Astro Player.

* When will it support mobile initiative?  Always thinking of this stuff. Working very hard on the next version of AVM - AVM2. When that’s complete, will work hard on a framework that can go ahead and support mobile. So a little ways away.

* When is Flex 3 coming out? Early 2008. Jan is very early 2008. April is mid-early 2008.

* Performance. When will Flex and FB going to be faster? Get beta 2 - lots of work on performance in the beta 2, so please download it and check it out. Talk to David, George, Paul. They want to hear about your projects and what they can do to work on it and make it even better.

* Are we going to see FlexBuilder on Rails? Flex team is thinking about it, warm to the idea, but not a lot to say right now. Might be able to weasel some stuff out of the team if they get drinking tomorrow at the party.

* Are they going to integrate Cairngorm into the framework? Actively considering this for a future release. Idea is being actively considered. Bulk of the people are doing a framework of some sort, so looking at it for a future release.
Don’t have to use it, but if choose to use it Flex can give you more support. Some people don’t like it - frameworks are kind of like a religion - so it will be an option. The team really wants to hear your feedback, as they’re not committed to any one in particular, and they want to know about the bounds and what’s the right framework to use. They will never make a framework or using one a requirement in Flex.

* Memory management, garbage collection a black art. In lieu in having a way to enforce it, will they offer best practices for developers so they can release objects from memory and be more effective about memory usage. Answer: yes. Team has done a great job of the proflier - still work they can do, more tooling and stuff at a macro level. Tooling on the roadmap.

* What’s the roadmap for plugins? FDS plugin and so on. Now that there are basics in place in IDE, now looking at more sophisticated things. Over the last year seen lots of requests for local tooling enhancements, ability to work between client and server in more effective ways - we’ve decided to double the size of the team, so lots more things can do.

* Automated testing. Is it possible to have a scripting language. FlexUnit is nice, but is there something more? Automation framework is moving to be part of FlexBuilder. Flex 3 has two editions - standard edition and FB professional edition will include charting, profilers, test automation framework (license as part of FB instead of data services). Changing pricing - FB will be $249 entry point. FB Professional will be $699 — lots of added value. Flex 2 pricing will align to Flex 3 price points early. Nov 1st can get Flex 2 at those same lower prices. Upgrade pricing will be in line with existing things in the past, but it has not been announced yet. Since automated testing part of FB Pro, will enable a lot more people to work with it and build testing frameworks. Lots of partners to start supporting Flex, and more people in the testing space.

There was a bit more geek talk, but I think that was the  main gist of things.

(2 votes, average: 5 out of 5)

 Loading ...

Lisa Larson-Kelley led a good session on advanced video encoding at MAX. Here are some notes I took on the session. Note that her blog, www.flashconnections.com, will have complete information and links that will be better than these notes. But in case this is useful, thought I would add them here anyway to give you a taste of what went on.

The session covered: general info to understand the FLV format and codecs, info to help you improve the quality of your FLVs and FLV playback, best practices, settings you can make when you encode video, and info about HD and FLV (and info about the new Flash Player code named Moviestar).

Showed an FLV playing back at full screen running at 1080p (HD) - demonstrated the great, crisp quality that’s possible using proper encoding settings. She played this through the beta version of Flash Player.

Some of the new things available in Moviestar include HD, H.264 codec, base/mainline/high/high 10 profiles of ISO 14496-10 standard. Also referred to as AVC (squeeze encoding profiles). Details of what’s not supported - MPEG-4 pt. 2 (XVid, DivX), H.263, Sorenson 3, Fairplay protected video (itunes DRM content, etc).

Coming up, VP6-S (simplified) - this will work in Moviestar. Strips out some stuff to reduce size or something like that. This simplified version of VP6 does support alpha channel.

Audio. AAC support ISO 14496-3 standard. Default for iPod and PS3, and will play in Flash Player as long as it’s not DRM protected.

Hardware acceleration - frees up CPU, new API to select which area to cache in the hardware, which area of your Flash app.

Codecs vs containers: H.264 is a codec, and FLV is the container.

Four things to think about when you encode things

- H.264 handles pans and zooms and fast movement well - if you have these things, choose an appropriate codec if possible.

- Audience reach. If you need a wider reach you may need to go with an earlier version player.

- Archive-ability. H264 is a more open format, so it is easier to archive and play years forward

- Licensing. H264 is not completely open. You need to pay fees if you use it commercially, so if this applies to you see the FAQ on Adobe.com.

Footage fundamentals

Compromise when you encide. File quality to file size. File size goes up if you want it to playback smoothly. Consider dimensions of the video - smaller dimensions lowers file size. Consider the framerate (more frames filesize goes up), minimize artifacting when you improve quality.

Start with a profile and then tweak your settings according to what your footage is like.

When you’re encoding, start with the highest quality video file that you can get, and then compress from that.

Often you will get a DVD from a client, so you will need to rip it (demux). Separate the audio and the video. On Mac you can use software like MacTheRipper and Handbrake (I use Mac… sorry I didn’t note Windows, but they’re easy to find…). Convert the file to a MPEG or a MOV file and then encode.

Taking video footage. Shoot in proressive mode. Use a tripod and avoid pans and zooms. Avoid fades and dissolves, Avoid using your camera’s autofocus and autoexposure. Use proper lighting (this will help you avoid those big dark spots that have lots of artifacting when you encode and you get that pixelly dark area in the back that sort of shifts). Get proper audio because that’s hard to fix and will totally detract from your video online — it will distract the user and ruin the whole thing. Also avoid ambient noise.

Transmuxing — take video out of one format and convert it to another.

Squeeze: good at - preprossing filters, batch encoding, auto keyframe placement, and you can FTP video right from the software.

Flix: has vector video, can use to add watermarks (but add these using flash if possible… do add to the video file if you’re concerned about the video going across the interwebs), and it’s cheaper.

Progressive H264 issues.

Moov atom: like metadata, player needs to have this data at the beginning of the file. However, Premiere and After Effects currenly put it at the end of the file. You can use a utility to move the moov data to the beginning of the file. Use QTindexswapper (AIR app), or QT Pro and prepare for internet stream/fast start.

FLV issues

FLVCheck on Labs to fix FLV files metadata formation. Then you can use Burak’s metadata injector to fix any issues.

Encoding steps

1) watch and analyze the video and note dimensions and frame rate. She notes that you can get info and see this depending on format.

2) Bandwidth target - choose if you want to detect this and how. And plan what you’ll do based on gathered information. Or if you do this server side with FMS.

3) Choose your target datarate. Don’t rely on using all of users bandwidth because they’ll be doing other things too. Use 70-80% of the target user’s bandwidth. If the video is low quality, plan to use a higher bit rate.

4) Choose a frame size - 4:3 or 16:9 and use a fraction of that. Also act for square (computer) or rectangular (broadcast) pixels. Make sure that you don’t stretch the image. One way to make sure you’re not stretching is to encode a perfect circle on first part of the video, then you can easily tell if you’re stretching it when you encode.

5) Choose an optimal frame rate.

6) SEt keyframe interval. Automate this if you can. Or if there’s lots of motion, it’ll put in too many keyframes. Fewer keyframes is better if you can do this. Progressive video with a scrubber bar - you need more keyframes in this situation because you can only seek to the keyframes.

7) audio compression. Always use MP3 audio encoding - use AAC with H.264. Always encode the audio too, Flash needs this for syncing the framerate.

If applicable, alpha channel. Crop the video down to the masked area. Note that it takes longer to encode.

Streaming or progressive.

CBR - streaming, VBR - progressive [allocates datarate when needed]. Always use 2-pass encoding [1st pass plans how to encode, 2nd pass actually encodes the file. Results in smaller and better video].

Best Practices.

Try to encode from a video editor. Flix and Sorenson Squeeze both have exporter plugins available. Also there’s a FLV QuickTime export plugin.

If not, then save as QuickTime using Video codec (Mac) or Uncompressed AVI (Win).

Deinterlace always, if shot in Progressive mode. Apply the deinterlace filter, “upper field”

Apply pre-processing filters, white/black restore if using Squeeze.

HD video

720p - recommend 1.5 GHz processor

1080p - recommend 2.5 GHz processor

Visit her blog at www.flashconnections.com for more info.

(2 votes, average: 4 out of 5)

 Loading ...

Notes from the session on interactive video with After Effects (AE) and Flash (Fl) at MAX 2007, by Michael Coleman (AE product manager).

These are messy for now. I’ll clean them up, but do watch Michael’s blog on blogs.adobe.com for more details, source code, and the project soon.

Purpose: Show a workflow where use After Effects and Flash together to create an interactive experience.

Create a microsite video viewer. Want to combine footage with bike rider information on a site. The rider info should be accessible throughout the video experience. And you can show the hide and the data in a heads up display, which is essentially a pop-up.

Using the Aquo assets (which are the assets used in Adobe demos and Video Workshop).

Will be creating 3D text - can let each character have 3d rotation, and so on. Will be modifying animation presets (you can modify for your own needs), motion tracking (of an object through a scene), parenting (one layer can inherit the mvt of another layer - don’t have to copy/paste keyframes, can just lock together), track mattes (vx term of using alpha layer of one layer for another layer, keep motion related), markers (put a note in time, comment, FLV cuepoints), FLV encoding with render queue (can do batch rendering of FLV).

Flash concepts: importing PSD and video, basic ActionScript (AS), event cue points, basic interactivity. How to write AS to listen for cuepoints.

Showing final piece: 3d text spinning around the rider, click it and there’s a display of data. Driven dynamically by cuepoints in the video. Can automatically change it.

– Importing video into AE –

D-click on Project window (quick way to import), finding footage.

Creating a new composition - drag footage onto new comp icon, and it will set it up with all the right settings (aspect ratio, framerate, etc).

Viewing raw footage.

– Adding text –

Starting with animation presets. Going to presets panel, and checking out 3d text folder. Goes to Browse Presets, and browse them visually in Bridge (you can see previews). Selecting text in a circle, and add it to the comp by d-clicking it in Bridge.

Changing the rotation - click the “r” key in the timeline and it narrows down the options so you can quickly find rotation. All live, dynamic text so you can change it afterwards.

Positioning the text so it’s around the rider, double click it so you get Free Transform controller.  Previewing. Text stops, but want it to stay animating, and doesn’t match the rider’s mvt yet.

Going into the text layer again. Select a layer, and press “u” key - shows you everything in layer that has keyframes on it - shows you everything that’s animated, so you can see path options. Making the animation the whole length of the comp so it animates.

Using motion tracker to let you attach something with motion and attach it to something in video with motion. Added a motion tracker to the layer - place it on an object that you want to follow though the scene. So you can set an attach point (the rider in the video), and then you add a search region - tells AE where to look for the object (speeds things up).

Setting motion tracker options. Then set analyze movement, and it quickly looks through the shot and tracks the object. Then we hit the apply button to apply it to the other layer with text. So now the text is following the racer. Want to tweak the text.

To tweak, selecting all the position keyframes, and shift the entire thing down - so then AE adjusts all of the values at the same time. So, going to comp window with all selected, and drag the text in the comp downwards and so on. Preview again, and the text still follows the rider.

Text needs to go around the rider - right now it’s rotating on top of the rider.. text is in front of the rider. Now the background layer goes partially in between the text. So now you’re making that layer 3d. But now the text sort of hides behind the rider. Switch view to “top” on the now 3D layer. So we need to create a mask around the text so it looks as you’d expect.

Going to create a new solid layer. Put a mask on the solid layer, a round mask. So you mask out the rider so the text can go behind her. Cmd T to free transform and position the mask on the rider. Makes the text look like it’s going behind the rider. Feathering the mask, so it’s a gradual fade instead of just clipping off.  But now you need to have the mask track the rider so it is animated/follows the rider too. Use parenting to do this - so the mask inherits the movement of the text layer.

In the timeline, parenting column, and you select the layer you want to parent. Now if you preview again, you can see the mask tracking the rider as well.

Create a track matte - layer as alpha channel on top of the layer that’s being matted. On the background rider MOV, use the alpha matte from the mask layer, and applies it to the video. Then they can be animated independently.

Then you add another copy of the video to the back. Everything on the video side has now been put together - motion graphics done.

Before we leave AE, we need to create FLV cuepoints. All layer markers can be saved as an AS3 cuepoint. You can add the name, cuepoint, parameter names and parameter values in the Layer Marker dialog in AE. Or, you can create a script that takes keyframe data, and automatically create markers for them.

Selects a tack point, scripts > select properties (something) - creates a marker for every frame. Now it prepopulates the cuepoint parameter names and values for each one.  Now all markers out as FLV cuepoints.  (Will not overwhelm flash with that many cuepoints). Note - current script does not input names. You’d need to insert names at the moment. However — There will be an update for that script soon - and Michael will post this on his blog. Will also post this project, and you can drop it into your AE installation. Now you will have to go through each marker and put in the name.

Using Adobe Media Encoder in After Effects to output FLVs. Will have the H.264 updater soon so can output using new video codec for FLV, but for now can do VP6 out of AE.  If you want, you can output different versions of the same video - can do more than one output module per render item.

Going to Flash. Creating a new FLA. Importing a PSD to use as a background. Bring in the video onto a new layer, and using the File > Import Video. Selecting the FLV that was encoded from AE, and then setting a skin if you want Putting the video onto the Stage, and centers it. Giving the component an instance name.  But now we want to add the “heads up display” (click the text and see a pop-up with racer data).

So for the display pop-up, importing another PSD with the graphics. It’s an image with text and stuff. Then adding some AS to hook it up.

Creating a new actions layer. Which is copied and pasted from a text file

Basically importing the fl.video. Creating some variables for properties, object and value.

myVid is listening for an event, which is a cuepoint. When you hear the cuepoint, you execute a certain function. The function iterates through the cuepoint data, and it listens for the cue point name. When you see that name, the next lines divde the value up to X and Y data, and assign it to the racer data x and y. Also want to add a second event that handles a click. It listens for a mouse click, and when you do, toggle the dataview, which turns on and off the racer data pop-up.  (it’s about 35 lines of code, and it will be up on Michaels blog).

testing the SWF now. When you click you see the heads up display. Then you move the pop-up back in Flash authoring.

You could take it farther by having the pop-up be a dynamic SWF that brings in live data or something.

That’s it!

(2 votes, average: 4.5 out of 5)

 Loading ...