Animation Vs. Animator

Adobe Releases Flash Player 10.1 And AIR 2.0 – Both Include Multi-touch Support

A mere week after Adobe Systems reported that it would be shedding nearly 700 employees or 9% of its total worldwide workforce, the company is releasing two highly anticipated new products that have been in the works for a while: Flash Player 10.1 and AIR 2.0.

Both of the products are being released with a ‘beta’ label at the same time for all 3 major operating systems (Windows, Mac and Linux) and x86-based netbooks, and are available now via Adobe Labs.

Update: sorry, we unintentionally – no, really – jumped the gun on this one. The links to the products are now live: Flash Player and AIR.

People who were still hoping for a beta release of the new Flash Player for mobile will be somewhat disappointed by the fact that they’ll have to exercise even more patience.

But first things first.

Both the new Flash Player for desktop browsers and the latest iteration of the rather popular cross-platform runtime environment for desktop apps were announced in the beginning of October and previewed at the recent Adobe MAX 2009 event (see video below). That means there aren’t too many surprises left with regards to what the upgraded versions bring, so we’ll just give you a quick run-down.

Both Adobe AIR 2 and Flash Player 10.1:

- boast support for multi-touch and gestures (yes, you’d need a machine with a touch screen)
- include a global error handler, which enables devs to write a single handler to process all runtime errors
- (finally) support local microphone access, so you’ll no longer need to first pass through a server in order to record audio locally on both Flash Platform runtimes

Adobe Flash Player 10.1 now also leverages hardware decoding of H.264 video on Windows PCs, netbooks and mobile devices.

Want all that goodness on your mobile phone, too? Hold your horses: while a public beta of Adobe Flash Player 10.1 for Palm webOS is expected later this year, Google Android support is expected no sooner than early 2010, and support for Blackberry smartphones will likely take even more time to be added.

Also new in Adobe AIR 2.0 and worthy of a mention:

- Native process API: enables apps to communicate with native applications on local machines
- Mass storage device detection: plug in your Flip camera or that USB stick you got as a gift at the last conference you attended, and AIR 2 applications will be able to detect them
- Open document API: with it, AIR apps can ‘ask’ the OS what the default application is associated with files and function accordingly
- Improved socket support: think AIR-powered local servers and P2P apps
- Speedier WebKit: updated version that includes a faster JavaScript engine and new HTML5/CSS3 capabilities

Adobe Launches "Moviestar" Version of Flash Player - HD Television Quality for Web Video

Adobe today announced the latest version of its near ubiquitous Web video software, Adobe Flash Player 9. It's codenamed Moviestar, because it includes H.264 standard video support – the same standard deployed in Blu-Ray and HD-DVD high definition video players. In other words, the quality of video has been substantially improved from the previous version of Flash Player 9. Also added to the mix is High Efficiency AAC (HE-AAC) audio support and "hardware accelerated, multi-core enhanced full screen video playback".

Adobe claims that these advancements will extend their leadership position in web video "by enabling the delivery of HD television quality and premium audio content".

The new Flash Player will be available later today as a beta at Adobe Labs - and the final release is slated to be available in the fall (September - November). The last big update to Flash Player was the launch of Flash 9 in June 2006.

Adobe: This is Tipping Point for H.264

I spoke to Mark Randall, Chief Strategist for Dynamic Media at Adobe, about the news. He told me there were three main points to the Moviestar release:

1) The H.264 support means superior video quality; it is also an open standard.

2) High Efficiency Advanced Audio is, says Mark Randall, a "successor to MP3". He said it is a higher quality audio, but at a lower bit rate.

3) It means "hardware acceleration" for Web video.

Randall also said that this represents a tipping point for the H.264 standard, because now Flash Player is supporting it as well Blu-Ray - two big industry players.

Richer Platform for Online Video Producers

As well as the consumer benefits, this also gives online video companies a platform to deliver richer Flash experiences on the desktop, Web and H.264 ready consumer devices. As well as the new Flash Player, H.264 playback will be supported by the Adobe Integrated Runtime (AIR - a platform to create rich Internet applications to the desktop) and applications developed with Adobe AIR software, including Adobe Media Player in late April.

Src: http://www.readwriteweb.com/archives/adobe_flash_player_moviestar_h264.php

Tracking Flash with Google Analytics

You're clients will love it! And in the end you will know more about the sites you build and how to better drive traffic to certain areas! Win! Win!

Ok so I have been using Google Analytics for quite sometime now and I must say i love it! So if you don't know by now Google provides FREE website statistics that go above and beyond any stat tracking systems I have seen to date. Well that is for something that is FREE. Anyway I want encourage all of you to get out there and start using Google Analytics for all your flash site going forward. Its really very simple to implement into your flash sites and even track individual events that occur in each of your sites. Please see analytics.google.com for more information on setting up your personal analytics with google and to get the Javascript needed for the code below to work. With that said let's get on to some actionscript!

googleAnalytics.as (right click - save as)

/// GOOGLE ANALYTICS SIMPLE TRACKING

/// http://blogfordesigners.blogspot.com

import flash.external.ExternalInterface;

function gaTracking(page) {

ExternalInterface.call("pageTracker._trackPageview", page);

}

//end

Code for simple call

gaTracking("/flash/home");

//sends event to google's analytics system

Now what you can understand from this is... You can call this function during ANY event function etc that you so desire. And any string combination that you want to pass to it is fair game. Use best practices when passing in the strings though so its easier for you and your clients to read when you all are reviewing the numbers. Ok so thats that! Cheers!

Adobe and Mozilla Foundation to Open Source Flash Player Scripting Engine

SAN FRANCISCO — November 7, 2006 — Adobe Systems Incorporated (Nasdaq:ADBE) and the Mozilla Foundation, a public-benefit organization dedicated to promoting choice and innovation on the Internet, today announced that Adobe has contributed source code for the ActionScript™ Virtual Machine, the powerful standards-based scripting language engine in Adobe® Flash® Player, to the Mozilla Foundation. Mozilla will host a new open source project, called Tamarin, to accelerate the development of this standards-based approach for creating rich and engaging Web applications.

The Tamarin project will implement the final version of the ECMAScript Edition 4 standard language, which Mozilla will use within the next generation of SpiderMonkey, the core JavaScript engine embedded in Firefox®, Mozilla’s free Web browser. As of today, developers working on SpiderMonkey will have access to the Tamarin code in the Mozilla CVS repository via the project page located at www.mozilla.org/projects/tamarin/. Contributions to the code will be managed by a governing body of developers from both Adobe and Mozilla.

“Adobe’s work on the new virtual machine is the largest contribution to the Mozilla Foundation since its inception,” said Brendan Eich, chief technology officer, Mozilla Corporation, and creator of JavaScript. “Now web developers have a high-performance, open source virtual machine for building and deploying interactive applications across both Adobe Flash Player and the Firefox web browser. We’re excited about joining the Adobe and Mozilla communities to advance ECMAScript.”

“This is a major milestone in bringing together the broader HTML and Flash development communities around a common language, and empowering the creation of even more innovative applications in the Web 2.0 world,” said Kevin Lynch, senior vice president and chief software architect at Adobe. “By working with the open source community we are accelerating the adoption of a standard language for creating and delivering richer, more interactive experiences that work consistently across PCs and mobile devices.”

Tamarin implements the ECMAScript standard used by languages such as JavaScript, Adobe ActionScript, and Microsoft JScript, the primary languages developers use for building rich Internet applications. Adobe and Mozilla are both active participants in the ECMA International Programming Language technical committee (TC39-TG1) developing the ECMAScript Edition 4 (ES4) standard.

“There is nothing better for a standard than to have it implemented in multiple products,” said Jan van den Beld, Secretary General, Ecma International. “Adobe is taking a huge step forward in driving standards-based Web development by open source licensing their virtual machine technology.”

Adobe’s most recent virtual machine for ActionScript 3.0, a core component of Adobe Flash Player 9 released in June 2006, was built from the ground up to offer breakthrough performance and features, including more efficient memory utilization, faster application start-times, improved debugging and full runtime error reporting. Adobe Flash Player is installed on over 700 million Internet-connected PCs and mobile devices worldwide. The ActionScript Virtual Machine features a Just In Time (JIT) compiler that translates ActionScript bytecode to native machine code for maximum execution speed. Now developers can leverage existing skills to quickly and easily build complex rich Internet applications increasingly required as users demand more interactive Web experiences.

source: http://www.mozilla.com/en-US/press/mozilla-2006-11-07.html

How Do They Do That? Nine Mind Blowing Flash Animations

Flash animation still represents the cutting edge of Internet animation. Here are nine of the best on the net at the moment.

Whether you are new to Flash or a seasoned professional, these sites will make you sit back in wonder:

1. Bird on a Journey

A little bird flies on his way home to his lady, avoiding some pitfalls on the way. This brilliant animation combines drawing and photography to stunning effect, together with a weird and wonderful soundtrack.

2. Drum Machine

If you love oriental music – and drums – then you will love this animation. Seven Japanese drummers deliver the goods in this beautifully constructed piece of Flash. The skill and time that went in to this beggars belief!

3. Online Shopping

Be patient with this one. At first glance it looks like just another website that offers you household goods to buy. But hold on a second – didn’t that mug on special offer just fall over! That’s just the beginning of the fun – a joy to watch!

4. Icon War

These desktop icons decide that they don’t like each other any more. War bre

aks out! Who will be the ultimate winner as icon fights icon! Oh, the humanity! Extremely

entertaining flash animation.

5. Kaleidoscope

This is an amazing pattern generating piece of flash an

imation. You can choose from lots of different varieties and the patterning effect follows your mouse around in a myriad of colors and shapes. Inspirational!

6. Silhouette Sounds

A single silhouette becomes several then becomes many, with each producing a different sound to produce a tune. Fantastic black and white animation is eye catching and very, very different!

7. Doorway

All the guy wants to do is get through the door! Unfortunately, there are lots of things that do not wish to grant him passage. Superb European style flash animation you will want to watch again and again.

8. Falling Dude

Superbly irritating but extremely watchable, this animation has a roughly drawn boy falling, and falling – oh, and then falling some more! You wil

l love it!

9. Jackson Pollock

Ever seen a Jackson Pollock painting and thought “I can do that!” Well, here is your chance! Let your mouse do the walking as you produce works of art that the Saatchis will be after in no time at all!

Source: http://webupon.com/web-design/how-do-they-do-that-nine-mind-blowing-flash-animations/

Adobe, Google, Yahoo Team for Flash Search

Adobe, Google and Yahoo join to make Flash content searchable. Adobe, Google and Yahoo immediately make Flash and other dynamic content that runs in Adobe Flash Player on thousands of Web sites visible to search.

In a move long in the making, Adobe Systems is teaming up with search engine leaders to make Flash content more searchable.

Eric Wittman, director of client distribution and business development in Adobe's Platform Business Unit, said the company is providing optimized Adobe Flash Player technology to Google and Yahoo to enhance search engine indexing of the Flash file format (SWF) and uncover information that is currently undiscoverable by search engines.

Adobe announced the news July 1, sharing its plans to try to dramatically improve search results dynamic Web content and RIAs (rich Internet applications).

The move will provide more relevant automatic search rankings of the millions of RIAs and other dynamic content that run in Adobe Flash Player. In addition, RIA developers and rich Web content producers will not need to amend existing and future content to make it searchable, said Justin Everett-Church, senior product manager for Adobe Flash Player. They can be confident that their Flash-based content can now be found by users around the globe, Everett-Church said.

"We've wanted to make an announcement of this impact for several years now," Wittman said. "There are millions of things built in Flash and there have been concerns because of search engine compatibility. We have a piece of technology to remedy this and we’re working with Google and Yahoo. Google has integrated it and Yahoo will in a period of time."

As Ryan Stewart, an Adobe evangelist, put it:

"So what does that mean? We are giving a special, search-engine optimized Flash Player to Yahoo and Google, which is going to help them crawl through every bit of your SWF file. This Flash Player will act just like a person would in some cases. It will click on your buttons, it will move through the states of your application, get data from the server when your application normally would, and it will capture all of the text and data that you’ve got inside of your Flash-based application. We’ve basically provided a very powerful looking glass into SWF files so Google and Yahoo can pull out meaningful information."

"This is a pretty important breakthrough to highly creative and interactive sites such as Disney and Tiffany.com built with Flash and Rich Internet Applications can now be found, crawled indexed and ranked," said Bill Hunt, president of Global Strategies International, a search engine optimization consultancy. "For years, those with Flash sites have been conflicted with reducing the amount of flash or resorting to any number of less than optimal workarounds to get their content included in search engines let alone getting high rankings."

Many major brands and creative developers have been critical of the search engines for not working with them or Adobe to develop a solution to index and score their content, Hunt said.

"These developers and search engine optimization firms like Global Strategies have spent a lot of time and resources -- financial and manpower -- to code alternative sites and workarounds to get the exposure commensurate to their brand positions in the marketplace," he said.

Source: http://www.eweek.com/c/a/Enterprise-Applications/Adobe-Teams-with-Google-Yahoo-for-Flash-Search/

Flash CS4 - Mask in Mask

1. Create a mask layer
2. Create a simple layer put something on it and then drag the key frame on the mask layer
3. Drag it under the mask

Motion Tween in Flash

First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens.

Steps:

1. First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
   
2. Now, click on the Rectangle tool from the set of icons on the left.
   
3. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area
   
4. After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. 
   
5. The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe"
   
6. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.
   
7. With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area
   
8. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position
   
9. Enough of me chattering, It's time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select "Create Motion Tween"
   
10. If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey.
    
11. Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.
    

Drawing Board in Flash

Use key 'c' to clear the screen.

Widget Ad

Banner Animation

Flash Animation

Actionscript Quick Preloader

Creating a Motion Tween

What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens. Your animation, toward the end, will look a tad bit similar to the following animation:

[ create a simple animation ]

Learn How to Tween:

1. First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
   
2. Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image:

[ click the rectangle tool icon ]

3. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area:

[ draw a square - make sure it is aligned toward the left ]

4. After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot:

[ notice the solid dot in your timeline ]

5. The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe":

[ select Insert Keyframe on Frame 20 ]

6. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.
   
7. With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area:

[ square moved to the right of the movie ]

8. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position.
   
9. Enough of me chattering, It's time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select "Create Motion Tween:"

[ highlight all the frames and select "Create Motion Tween" ]

10. If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey.
    
11. Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.