Web design studio » Actionscript http://blog.web-design-studio.ro Apopii Dumitru - Freelancer, front-end developer Fri, 11 Mar 2011 09:07:45 +0000 en hourly 1 http://wordpress.org/?v=3.1.1 Create a 3D Flipping Youtube Player http://blog.web-design-studio.ro/create-3d-flipping-youtube-player/ http://blog.web-design-studio.ro/create-3d-flipping-youtube-player/#comments Mon, 14 Feb 2011 07:13:35 +0000 admin http://blog.web-design-studio.ro/?p=508 In this new AS3 tutorial, learn how to create a 3D flipping Youtube Player consisting of a youtube player that you can flip 180 degrees to show a description of the video.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as youtube.fla.

2. First we are going to create the back side that contains the video’s description.

To do so draw a rectangle 560×340 (dimensions of your youtube player) with the color of your choice. With the Text tool write your description on it. Select both text and rectangle and convert it to a movie clip with an instance name of back.

Once this movie clip is created, reselect it and convert it to a movie clip, set its registration point to the center and give it an instance name of container.

At this point you shoud have on the stage the “container” movie clip that contains the “back” movie clip.

3. Now create the button that will use to flip the container, convert it to a movie clip and give it an instance name of “flipBtn”.

4. All is set on the stage, now let’s add some actionscript code. Open the actions panel.

We’ll use the Tweenlite Engine and the Youtube AS3 API. If you are new to this, please visit our previous tutorial on the Youtube API.

First write the following statements in order to use the Tweenlite engine and communicate with www.youtube.com.

1 import flash.system.Security;
2 import com.greensock.*;
3
4 Security.allowInsecureDomain("*");
5 Security.allowDomain("*");

5. Then declare the following variables. Set the videoUrl variable to the id of your youtube video.

1 var videoUrl:String = "owGykVbfgUE";
2 var player:Object;
3 var loader:Loader = new Loader();
4 var flipped:Boolean = false;

6. Also set the back side’s rotationY property to -180 degrees and its visibility to false.

1 container.back.rotationY = -180;
2 container.back.visible = false;
3
4 flipBtn.buttonMode = true;

7. Next load the youtube video. Once the player is ready to play, we set the visibility of the back side to true and add a click event listener to the button.

01 loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
02 loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));
03
04 function onLoaderInit(event:Event):void {
05 container.addChild(loader);
06 loader.x = -container.width /2;
07 loader.y = -container.height /2;
08 loader.content.addEventListener("onReady", onPlayerReady);
09 }
10
11 function onPlayerReady(event:Event):void {
12 player = loader.content;
13 player.loadVideoById(videoUrl);
14 player.setSize(560,340);
15 container.back.visible =true;
16 flipBtn.addEventListener(MouseEvent.CLICK,turn);
17 }

8. Inside the turn() function we checked the value of the flipped boolean variable. If it’s false, we use Tweenlite to rotate the container 180° vertically so that we can see the back side with the description and pause the video.

If it’s true, we use Tweenlite to rotate the container back to 0° so that we can see the youtube video and play it.

We also add to the Tweenlite.to method an onUpdate event listener that calls the setVisibility() function in which we set which side of the container is on top.

01 function turn(e:MouseEvent):void{
02 if(!flipped){
03 TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
04 flipped = true;
05 player.pauseVideo();
06 }
07 else {
08 TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
09 flipped = false;
10 player.playVideo();
11 }
12 }
13
14 function setVisibility():void{
15 if(container.rotationY >= 90){
16 container.addChild(container.back);
17 }else if(container.rotationY < 90){
18 container.addChild(loader);
19 }
20 }

9. Here’s the final code :

01 import flash.system.Security;
02 import com.greensock.*;
03
04 Security.allowInsecureDomain("*");
05 Security.allowDomain("*");
06
07 var videoUrl:String = "owGykVbfgUE";
08 var player:Object;
09 var loader:Loader = new Loader();
10 var flipped:Boolean = false;
11
12 container.back.rotationY = -180;
13 container.back.visible = false;
14 flipBtn.buttonMode = true;
15
16 loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
17 loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));
18
19 function onLoaderInit(event:Event):void {
20 container.addChild(loader);
21 loader.x = -container.width /2;
22 loader.y = -container.height /2;
23 loader.content.addEventListener("onReady", onPlayerReady);
24 }
25
26 function onPlayerReady(event:Event):void {
27 player = loader.content;
28 player.loadVideoById(videoUrl);
29 player.setSize(560,340);
30 container.back.visible =true;
31 flipBtn.addEventListener(MouseEvent.CLICK,turn);
32 }
33
34 function turn(e:MouseEvent):void{
35 if(!flipped){
36 TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
37 flipped = true;
38 player.pauseVideo();
39 }
40 else {
41 TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
42 flipped = false;
43 player.playVideo();
44 }
45 }
46
47 function setVisibility():void{
48 if(container.rotationY >= 90){
49 container.addChild(container.back);
50 }else if(container.rotationY < 90){
51 container.addChild(loader);
52 }
53 }
Sursa : http://www.riacodes.com
]]> http://blog.web-design-studio.ro/create-3d-flipping-youtube-player/feed/ 0 Google anunta o indexare mai buna pentru SWF-uri http://blog.web-design-studio.ro/google-anunta-o-indexare-mai-buna-pentru-swf-uri/ http://blog.web-design-studio.ro/google-anunta-o-indexare-mai-buna-pentru-swf-uri/#comments Mon, 15 Nov 2010 11:54:52 +0000 admin http://blog.web-design-studio.ro/?p=202 Aproximativ cu doi ani în urmă, Google a anunţat o colaborare cu Adobe prin care a îmbunătăţit în mod semnificativ capacitatea lui Google de a indexa conţinut bazat pe tehnologia Flash.

Anul trecut au adăugat resurse externe de încărcare la capacităţilor lor de indexare a SWF-urilor. Acest lucru le-a permis să indexeze toate tipurile de conţinut textual în fişiere SWF, de la butoane Flash şi meniuri la website-uri de sine stătătoare bazate pe tehnologia Flash.

În prezent, aproape orice text pe care un utilizator îl poate vedea si cu care aceste interacţionează intr-un fisier SWF pe site-ul dvs. poate fi indexat de Googlebot şi folosit pentru a genera un fragment pentru căutările în Google.

În plus, Googlebot poate descoperi, de asemenea, URL-uri în fişiere SWF şi urmari aceste link-uri, astfel încât, dacă conţinutul dvs. SWF conţine linkuri la paginile din interiorul site-ul dvs., Google poate fi capabil să acceseze cu crawlere şi să indexeze aceste pagini, de asemenea.
Luna trecuta au extins capacităţile indexarii de SWF datorita colaborarii cu Adobe şi o bibliotecă nouă, care este mult mai robusta şi compatibila cu caracteristicile acceptate de Flash Player 10.1.

În plus, datorită îmbunătăţirilor în modalitaţile de a se ocupa de JavaScript, sunt acum, de asemenea, semnificativ mai bune la recunoasterea si indexarea site-urilor care utilizează JavaScript pentru a încorpora conţinutul SWF.

In concluzie, tehnologia pentru indexarea SWF-urilor le permite acum să vadă conţinutul din fişiere SWF pe sute de milioane de pagini de pe Web.

Articol original : googlewebmastercentral.blogspot.com .

]]> http://blog.web-design-studio.ro/google-anunta-o-indexare-mai-buna-pentru-swf-uri/feed/ 0