Sunday, 23 January 2011

Introducing JavaScript Player API for iframe embeds

by Jarek Wilkiewicz
If you have been enjoying our <iframe> embed announced back in July we have some good news for you. Starting today, the <iframe> embed code is the default way to share videos on YouTube.com. We are also introducing an initial beta version of the <iframe> embed JavaScript Player API, making it a viable alternative for developers who previously used the API exposed by the ActionScript players. Let’s look at an example of the API usage:

<!DOCTYPE HTML>

<html>

<body>

<div id="player"></div>

<script>

    //Load player api asynchronously.

    var tag = document.createElement('script');

    tag.src = "http://www.youtube.com/player_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var done = false;

    var player;

    function onYouTubePlayerAPIReady() {

        player = new YT.Player('player', {

          height: '390',

          width: '640',

          videoId: 'JW5meKfy3fY',

          events: {

            'onReady': onPlayerReady,

            'onStateChange': onPlayerStateChange

          }

        });

    }

    function onPlayerReady(evt) {

        evt.target.playVideo();

    }

    function onPlayerStateChange(evt) {

        if (evt.data == YT.PlayerState.PLAYING && !done) {

            setTimeout(stopVideo, 6000);

            done = true;

        }

    }

    function stopVideo() {

        player.stopVideo();

    }

</script>

</body>

</html>

This example will play a video for several seconds and then stop playback. An instance of YT.Player is used to control the player, defined by script loaded from http://www.youtube.com/player_api .  For more information about the API usage, as always, please consult our Player API documentation and let us know what you think on our Developer Forum.

Cheers,
-Jarek Wilkiewicz, on behalf of the YouTube Player Team

Source: Introducing JavaScript Player API for iframe embeds

HTML5 Logo Unveiled – The Future of the Web

by Duane Kinsey
HTML5 Logo Unveiled – The Future of the Web: "

A new logo for HTML5 has been unveiled by the W3C – the international community responsible for developing standards for the web.

New-HTML5_Logo

The new logo will primarily act as a badge for web designers and developers, giving them a standardized symbol to inform visitors that parts of HTML5 has been implemented into their site. Important to note however, the logo does not imply validity or conformance with web standards.

HTML5 Shirt

The new identity for HTML5 was developed by Honolulu-based Ocupop. Here is an excerpt from the Ocupop blog explaining the new design.

The HTLML5 logo goes beyond simply representing the HTML5 spec to embody the technology, and the open web movement, at its core. This starts with standardization — the logo and its progeny follow very strict geometric rules providing an incredibly adaptable yet stable and stylish identity. As you’ve hopefully seen out on the web, the logo, the icons, the colors and the type all work, and work well, in nearly every imaginable context (and probably contexts beyond our imaginations). From favicons to billboards, this mark was designed to hold together in the face any manipulation. Through simple adjustment of hue, the logo conveys incredible depth and dimension without dated or awkward flourishes. With just two shades of orange and two shades of gray, the standard logo offers a thoroughly refined and assuredly lasting visual impact. The container for the logo is shaped as a badge, implying both the formality and respect an undertaking of this magnitude demands, but also as a homage to the progressive community that proudly, and relentlessly, ushers in the future of web technologies. Simultaneously a badge of honor and a coat of arms, this crest represents the spirit and substance of the open web platform and the forward thinking community making it a reality.

Below are a series of sketches drawn during the development of the logo. A nice look behind the scenes. Note the unicorn top-center…

html5-logo-sketches

Along with the logo, a nifty set of icons was also developed (below) to represent the different technologies surrounding HTML5. The icons are clean and communicative – nothing to complain about here really.

In order from left to right; 3D Effects, Connectivity, Device Access, Multimedia, Offline Storage, Performance, Semantics, Styling. HTML5-icons

Overall, I think this is a very well executed logo. The design is strong and bold – something I can see web developers and designers adopting in droves.

Expect the new HTML5 logo to be appearing on a website near you soon.

html5-logo-black

What do you think? Please share your opinion in the comments section below.

Source: HTML5 Logo Unveiled – The Future of the Web: "

Optimizing Drag and Drop for Mobile Applications

by Lee Brimelow

We have been hearing some reports recently about poor performance when dragging objects around in mobile Flash projects. When I say mobile I’m referring to both AIR and in the browser applications. While we are looking into the issue, I thought it would be good to remind everyone of some optimizations that can help you get the best performance possible. The code below describes a simple FLA with a box MovieClip on the stage.

Use GPU Acceleration
This is more of a general performance enhancement but it will also help with dragging objects. You should only use this if the contents of your clip are not changing often. For this example though it is definitely appropriate. Here is the code:

1
2
box.cacheAsBitmap = true;

box.cacheAsBitmapMatrix = new Matrix();

Using the Correct Events
Choosing the right events to respond to is the single biggest thing you can do to improve performance of dragging. Unlike the desktop, you should NOT use the MOUSE_MOVE event. It fires way more events than you need and can really bog things down. If you are building a game that already has a main game loop (ENTER_FRAME) then you should add the drag logic there. Remember that on mobile you should not have multiple timers or frame events. If you don’t already have a frame event running you can stick with the standard startDrag and stopDrag events. In addition, do not use any of the touch events unless you really need to as they have more overhead than regular mouse events. Here is the code for drag and drop using an existing loop:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var isDragging:Boolean = false;



box.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

box.addEventListener(MouseEvent.MOUSE_UP, onUp);

stage.addEventListener(Event.ENTER_FRAME, loop);



function onDown(e:MouseEvent):void

{

    isDragging = true;

}



function onUp(e:MouseEvent):void

{

    isDragging = false;

}



function loop(e:Event):void

{

    if(isDragging)

    {

        box.x = mouseX;

        box.y = mouseY;

    }

}

Be Careful With Libraries
If you are using game frameworks or tweening libraries, do so cautiously as they may not have optimized for mobile. Creating a single frame event for your game is useless if all the libraries you are using are spawning a bunch of other events as well. This is not to say that you shouldn’t use external libraries. It just means that you need to look a little closer at what they are doing when deploying to a mobile device.

Flatten Your DisplayList
Another important thing to do when deploying to mobile is to try and flatten your display list as much as possible. This means that you should avoid nesting objects wherever possible. You should also stop the propagation of events so that you don’t incur the cost of that event bubbling to the surface unnecessarily. Here is an example of how to do that:


1
2
3
4
5
6
7
8
box.addEventListener(MouseEvent.MOUSE_DOWN, onDown);



function onDown(e:MouseEvent):void

{

    e.stopPropagation();

    // based on comments, this is

    // not a good idea -> e.stopImmediatePropagation()

}

Do you have any other tips that you’ve found? Please leave them in comments.


Optimizing Drag and Drop for Mobile Applications

Tuesday, 18 January 2011

FLEAS

It has been a constant when I begin something to end up to do something more.
This was therefore a typical case. It began with a simple study on Flash AS3 Acceleration features and the result was a 'crazy' game on Android.

FLEAS was built with Adobe Flash CS5 Professional, published with Adobe Air for Android extension and tested on a Samsung Galaxy S running Froyo (Android 2.2).
I'll use this same technique in further (and useful, this time) apps as it offers the ideal freedom-to-create that I was looking for.

About: FLEAS are annoying and these, when they are in love, give birth to new baby-fleas!
Well, you just have to crush them all!


It is available on the Android Market for free.
Any issues? Contact me via Twitter: @flashopen

Thursday, 6 January 2011

Install Air Runtime into the Android SDK Emulator

by Flashopen

After you have everything in their places,
1. Air for Android extension on Flash CS5
2. Android SDK
and you have it run accordingly, you might have run into a draw back that it is not so well documented (by the time of this post). That is, how to install the AIR Runtime.apk on the 'Emulator' in order to run your applications on your computer.

You have created a device (AVD) for Froyo (Android 2.2)

and you have start(ed)/launch(ed) it as well... (just to make sure!).

You are also ready with your application in Flash and checked it for Emulator release in the Air Android Settings. You published it and you have already seen your app beautifully installed on the Emulator, right? Great!

Now, the draw back: if you try to open your app you'll see this:

Haven't you?
You click on the Install button but nothing happens!?
That is because you need to install it manually, that is, to install the Runtime.apk file.

You can find this file in the Flash folder on your computer:

PC Windows: C:\Program Files\Adobe\Adobe Flash CS5\AIK2.5\runtimes\air\android\emulator\Runtime.apk

Mac OSX: (Look in Applications\Adobe Flash CS5 and follow the same path as in Windows)

You may want to copy this file into the platform-tools folder of the SDK to easier the process but you don't really need to.

There we go!

Windows:
1. Go to Start / Run (Win+r), type cmd.


2. In the platform-tools folder select adb.exe and drag it into the prompt-window


3. After space type: -e install -r


4. Select Runtime.apk and drag it into the prompt-window


Do not forget to have the Emulator opened at this stage.


5. Press Enter and wait.
It will take about 20-30 seconds until it gets installed.


You are ready now.
In the Emulator, go back to your application and test it again.


Mac OSX:
1. Open the Terminal in Applications/Utilities


2. Make a shortcut to the folder platform-tools.

Do not forget to have the Emulator opened at this stage.

3. After space type: ./adb -e install -r Runtime.apk


4. Press Return and wait.

You are ready now.
In the Emulator, go back to your application and test it.

Good luck!

Monday, 3 January 2011

This Is Where We Live

by 4th Estate

This Is Where We Live from 4th Estate on Vimeo.

Welcome to our city - to our world - of books. This is where we live.

A film for 4th Estate Publishers' 25th Anniversary. Produced by Apt Studio and Asylum Films.

The film was produced in stop-motion over 3 weeks in Autumn 2008. Each scene was shot on a home-made dolly by an insane bunch of animators; you can see time-lapse films of each sequence being prepared and shot in our other films.

Sunday, 2 January 2011

35+ Amazing Photoshop Tutorials in 2010

by Rafiq Elmansy
35+ Amazing Photoshop Tutorials in 2010
In 2010, Adobe has released the new release of Photoshop CS5 with its new amazing and powerful features. These new tools help designers to create more realistic effects easier than before. This makes this year full of new Photoshop tutorials using both the new and the old tools in Photoshop.
Today, I would like to share with you more than 35 of the best Photoshop tutorials in 2010. These tutorials varies from text effects, photo manipulation, poster design and UI design. If you have another useful Photoshop tutorial, feel free to share it in the comments and share with each other.
In addition to the below tutorials, you can find other useful tutorials in the following links:
40 Useful Photoshop PSD Files For Designers
35+ Stunning Photo Manipulation Photoshop Tutorials
30+ Stunning How-to Photoshop Tutorials
Now, I hope you enjoy the below collection and share it with your friends.

Man and Earth Photoshop Tutorial

In this Photoshop tutorial, we will learn steps by step how to create a photo manipulation effect for man getting out of the stone with some dramatic effects and glowing lines in the background.
35+ Amazing Photoshop Tutorials in 2010
Create Colorful Composition in Photoshop
In this Photoshop drawing tutorial we will create a beautiful and colorful composition with circles.
35+ Amazing Photoshop Tutorials in 2010

Create Cracked 3D Stone Text Effect with Photoshop and Cinema 4D

In this tutorial we are going to create realistic stone text effect with Photoshop and Cinema 4D. At first with Cinema 4D we will create 3D style text. Then you will learn how to transform simple 3d text to cracked stone text and after that how using Adobe Photoshop place text in a natural environment and add realistic effect.
35+ Amazing Photoshop Tutorials in 2010

Creative Image Coloring Photoshop Tutorial

It is the time for a new how-to tutorial. Today’s Photoshop tutorial is about coloring an image using the Hue and Saturation and mask features in Photoshop. There are many methods that you can use to change the color image in Photoshop, but the Hue and Saturation are two of the methods that allow you to do the coloring easily and fast.
35+ Amazing Photoshop Tutorials in 2010

Jelly Fish Delight – Photoshop Tutorial

Here is an inspiring tutorial that uses different techniques to create a soft background with glowing jellyfish. It finishes with a nice composition and some useful tips you can use in your design projects.
35+ Amazing Photoshop Tutorials in 2010

Smashing Your Creative Block – Photoshop Tutorial

We will use simple and easy techniques to create a smashing composition text tutorial. It won’t take you to long to finish and you will learn that it is pretty easy to create this effect.
35+ Amazing Photoshop Tutorials in 2010

Photoshop Manipulation Tutorial

In this Photoshop tutorial you will learn how to create this amazing photo manipulation effect.
35+ Amazing Photoshop Tutorials in 2010

Manga Art CG Tutorial

This digital art Photoshop tutorial teach you how to create Manga art style character using Photoshop brushes.
35+ Amazing Photoshop Tutorials in 2010

Create an Awesome Number-Based Illustration

In this tutorial, you’ll learn how to combine the power of the pen tool with some patterns and shapes to create an awesome illustration.   Designer Bram Vanhaeren will walk you through his technique for working at print quality, using various compositional techniques to achieve a creative result.  You’ll also learn some great tips for workflow, along with learning a variety of skills that you can apply in your own design works.
35+ Amazing Photoshop Tutorials in 2010

Photo Manipulate Tutorial Using Photoshop

It is time for a new Photoshop tutorial; today’s tutorial is for a photo manipulation trick that is used in ads and posters. In this tutorial, we will see step by step how to put a giant baby in the middle of New York streets playing with part of the Chrysler building.
35+ Amazing Photoshop Tutorials in 2010

Na’vi Avatar Photo Manipulation

This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into a Na’vi (based on the characters in James Cameron’s movie “Avatar”). It is done in  Photoshop CS2 , but newer and older versions should do the same, as it uses basic Photoshop tools only.
35+ Amazing Photoshop Tutorials in 2010

Create a Refreshing Beer Themed Poster Design in Photoshop

This Photoshop tutorial will show you how to create a refreshing beer-themed poster design in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Meeting of Land and Water

A Photoshop digital painting tutorial that is based on collection of images that are manipulated together in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Spider Harp

Amazing Photoshop tutorial that shows how to create digital painting from scratch based on a hand drawing.
35+ Amazing Photoshop Tutorials in 2010

Making of Urban

A Photoshop tutorial to learn how to create an urban style city using digital painting and photo manipulations.
35+ Amazing Photoshop Tutorials in 2010

Creation of “Get Digitised”

This tutorial shows how to convert a photograph to fragment effect in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Design a Brilliant Product Advertisement

In this tutorial, you’ll learn the steps and techniques involved in creating a brilliant product advertisement.  You’ll start with a stock image of an Adidas shoe, extract it from the background, then combine it with various photostocks to create a liquifying product advertisement.  You’ll learn how to build around a given product, and how to integrate branding into the design work.
35+ Amazing Photoshop Tutorials in 2010

Create Detailed Letters of Gold and Diamond

This tutorial will show how we can create a set of detailed letters with gold and diamond. We will learn how to use the Polygonal tool to make a simple diamond and also introduce a convenient way to duplicate layers with minimal efforts.
35+ Amazing Photoshop Tutorials in 2010

Living Paints

Another Photoshop digital painting tutorials that shows you how to create the below effect using photos and edit it in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Create Abstract Fake 3D Objects in Photoshop

This tutorial will demonstrate how we can use the Pen tool to create abstract vector shapes that form into a beautiful piece of fake 3D artwork. I was very busy with office works the whole week and finally found some free time to make this tutorial.
35+ Amazing Photoshop Tutorials in 2010

Create a Cute Twitter Bird Icon in Photoshop

This PSDtuts+ Photoshop tutorial will demonstrate how to create a cute Twitter bird icon in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Combine Stock Photography to Create a Sleepy Japanese Village in Photoshop

In this tutorial, we will create a sleepy Japanese village in Photoshop by combining several stock photos.
35+ Amazing Photoshop Tutorials in 2010

Create a Dark and Rainy Crime Scene in Photoshop

You will learn through this tutorial how to use different tools and techniques to create a scene of our own in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Quickly Create Surreal Scenary via Combining Landscape Images in Photoshop

This tutorial will show you how you can quickly and effectively Create Fantasy Scene via Combining Landscape Images in Photoshop. Some steps can be a little tricky for beginners, but why not have a try!
35+ Amazing Photoshop Tutorials in 2010

Create Colorful 3D Text Effect in Photoshop

n this Photoshop tutorial you will learn how to create colorful 3D text effect. Create 3D effect in Photoshop is difficult, therefore to create effect like this, we will use a little bit Xara 3D, but you can use Cinema 4D or 3DsMax, so you will learn also some Xara 3D techniques. Mainly, we will work with Layer styles and Pen tool. As you can see from the preview of tutorial, text effect will be very glorious. This kind of text effect can be used for making a birthday poster, or creating any other celebration postcard.
35+ Amazing Photoshop Tutorials in 2010

Castle in the Sky

This tutorial shows how to create an imaginary castle using Photoshop manipulation and photo editing.
35+ Amazing Photoshop Tutorials in 2010

Maze in my Mind

Create this metaphoric artwork easily using a selection of stock photos. This Photoshop tutorial will show you how to combine and manipulate photos to create a surreal photo manipulation.
35+ Amazing Photoshop Tutorials in 2010

Bugatti Veyron

In this tutorial, you will learn how to create Bugatti Veyron from scratch in Photoshop based or a hand drawing.
35+ Amazing Photoshop Tutorials in 2010

Create “Take a Break” 3D Text Composition

In this tutorial, you will learn how to easily create a 3D text in just a few steps then use it in a photo manipulation with some splatters and grunge textures.
35+ Amazing Photoshop Tutorials in 2010

Fairy night. Beanstalk

This is photo manipulation tutorial that will show you how to create the below scene effect in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Money Style Illustration in Photoshop

So in this tutorial you will learn how to create a nice technique to create a simple money style illustration using a regular photo, it’s not as perfect as the money illustrations we see in the dollar bill for example, but it’s a quick tip. There might be different ways so if you know another one share with us, this was the one I came up with and it’s very easy.
35+ Amazing Photoshop Tutorials in 2010

Photoshop Tutorial: Create a Surreal Atmospheric Phone Booth Scenery

In this tutorial we will be creating a Surreal Atmospheric Image from these 2 source images.
35+ Amazing Photoshop Tutorials in 2010

Photoshop Tutorial: Create a Surrealistic City Scene From Drawings And Photos

In this tutorial I will show how to make a surrealistic city scene, merging different images with some drawings.
35+ Amazing Photoshop Tutorials in 2010

How To Create a Sleek Audio Player Interface in Photoshop

In this tutorial you’ll learn how to design a sleek audio player interface in Adobe Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Create a Stunning 3D Liquid Explosion Artwork

This tutorial covers many advanced techniques, but not to fear, as Joe will walk you through step-by-step how to create it.  You’ll learn rendering, depth of field, dispersion, photomanipulation, and how to add the tiny details that all combine for a brilliant artwork.
35+ Amazing Photoshop Tutorials in 2010

Watercolor Painting

This tutorial will show how to turn a usual photo into a watercolor painting, quickly and simply. Tools used: Adobe Photoshop with the Filter Forge plug-in and a photo I’ve personally taken.
35+ Amazing Photoshop Tutorials in 2010

Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

This tutorial will show you the processes I used to Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop.
35+ Amazing Photoshop Tutorials in 2010

Create a Ki energy ball

In this tutorial we are going to work a lot with blending modes, Motion and radial blurs, some brushes and liquify to create a very cool effect.
35+ Amazing Photoshop Tutorials in 2010
Source: 35+ Amazing Photoshop Tutorials in 2010