>

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.


(SOFT) SOFT (2011 год)

Freeware OpenSource панорамный фотослайдер.

Этот фотослайдер является продолжением серии моих OpenSource-фотослайдеров - Мой первый фото-слайдер на Flex 4, OpenSource Freeware FotoSlider on Flex 3 and jQuery. Надеюсь на этом мне удастcя избавиться от наваждения писать эти слайдеры. Их код кто-то постоянно вбрасывает ко мне в голову (отвлекая меня от других программ) и от этого наваждения невозможно освободиться иначе, чем выгрузив из головы эти жгучие букавки с помощью клавиатуры в кампутер. Этот слайдер был написан быстрее всего. С момента как я подумал, что неплохо было бы сделать панораму, до того момента как весь код этого слайдера всплыл у меня в голове, был выгружен из головы в кампутер и отлажен - прошло всего около трех часов.

Слайдера вотпуска (самый первый вариант которого я описал в заметке OpenSource Freeware FotoSlider on Flex 3 and jQuery) - серверный хандлер обходит файловую систему. А этот мой слайдер устроен третим способом - он требует заведомо составленного XML-файлика с описанием фоток, которые надо показать:


   1:  <panorama>
   2:  <image file="01_1.jpg"/>
   3:  <image file="02_1.jpg"/>
   4:  <image file="03_1.jpg"/>
...
  50:  <image file="49_1.jpg"/>
  51:  </panorama>

Если вы хотите воспользоваться этим моим фотослайдером, то обратите внимание, что и XML-файлик и сами фотки помещаются в папку Image.


Итак, разгружаю в бездну интернета букавки ActionScript, которые обжигают мой мозг и отвлекают меня от более серьезных программ. Надеюсь это очередной мой вклад в общественное достояние, о котором у меня так много написано на сайте. Чтобы понять эти жгучие букавки было проще - я снабдил их обширнейшими комментариями.

Отличие того слайдера, который крутится сверху стрнички - от исходного кода ниже в том, что в верхний слайдер добавлен рекламный баннер, точно так же как я его добавил в топике - Реклама в видеоплеере (возможности объектного программирования ActionScript).


   1:  package
   2:  {
   3:      import flash.display.Bitmap;
   4:      import flash.display.BitmapData;
   5:      import flash.display.Graphics;
   6:      import flash.display.Loader;
   7:      import flash.display.Shape;
   8:      import flash.display.Sprite;
   9:      import flash.events.Event;
  10:      import flash.events.MouseEvent;
  11:      import flash.events.TimerEvent;
  12:      import flash.external.ExternalInterface;
  13:      import flash.net.URLLoader;
  14:      import flash.net.URLRequest;
  15:      import flash.utils.Timer;
  16:      
  17:      [SWF(width="1200", height="1024", frameRate="24", backgroundColor="#FFFFFF")]
  18:      public class FotoPanorama extends Sprite
  19:      {
  20:          private var textBannerRotator:TextBannerRotator1;
  21:          public function FotoPanorama()
  22:          {
  23:              var FileListLoader1:URLLoader = new URLLoader();
  24:              FileListLoader1.addEventListener(Event.COMPLETE,LoadComplete);
  25:              FileListLoader1.load(new URLRequest("Image/List.xml"));
  26:              
  27:              
  28:              textBannerRotator=new TextBannerRotator1(stage);
  29:              textBannerRotator.width=this.width;
  30:          }
  31:          
  32:          private var FileList:XMLList;
  33:          private var Request1:URLRequest;
  34:          private var Loader1:Loader;
  35:          private function LoadComplete(e:Event):void
  36:          {
  37:              var Xml1:XML= new XML(e.target.data);
  38:              FileList=Xml1.image.attribute("file");
  39:              //первую фотку загрузим сразу, остальные не спеша, по таймеру
  40:              Request1 = new URLRequest("Image/"+FileList[0]);
  41:              Loader1 = new Loader();
  42:              Loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, FirstImageLoadComplete);
  43:              Loader1.load(Request1);
  44:          }
  45:              
  46:          private var ImageArray:Array;
  47:          private var RequestTimer:Timer 
  48:          private function FirstImageLoadComplete(e:Event):void
  49:          {
  50:              //первая фотка загружена - ее сразу показываем
  51:              addChild(Loader1);
  52:              ImageArray=new Array(FileList.length());
  53:              ImageArray[0]=e.target;
  54:              //таймер смены фоток
  55:              SlideTimer=new Timer(500);
  56:              SlideTimer.addEventListener(TimerEvent.TIMER, ChangeFoto);
  57:              SlideTimer.start()
  58:              //таймер реквестов на загрузки остальных фоток
  59:              RequestTimer= new Timer(10, FileList.length()-1);
  60:              RequestTimer.addEventListener(TimerEvent.TIMER, TimerTickHandler);
  61:              RequestTimer.start( );
  62:          }
  63:          
  64:          private var CurrentLoadImageNum:int=0;
  65:           protected function TimerTickHandler(e:Event):void
  66:          {
  67:          //выдали реквесты на загрузки всех последующих фоток
  68:              CurrentLoadImageNum+=1;
  69:              //trace (FileList[CurrentLoadImageNum]);
  70:              Request1 = new URLRequest("Image/"+FileList[CurrentLoadImageNum]);
  71:              Loader1 = new Loader();
  72:              Loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, LastImageLoadComplete);
  73:              Loader1.load(Request1);
  74:          }
  75:          
  76:          private function LastImageLoadComplete(e:Event):void
  77:          {
  78:              //trace (e.target.url);
  79:              var Srt1:String = e.target.url;
  80:              for (var i:int=1;i<FileList.length();i++){
  81:                  if (Srt1.indexOf(FileList[i])>0){
  82:                      ImageArray[i]=e.target;
  83:                      break;
  84:                  }
  85:              }
  86:          }
  87:          
  88:          private var SlideTimer:Timer;
  89:          private var SliderFotoNumber:int;
  90:          private var TimerTick:int=0;
  91:          private var CurrentImage:Bitmap;
  92:          private function ChangeFoto(e:Event):void
  93:          {
  94:              TimerTick+=1
  95:              SliderFotoNumber=TimerTick % FileList.length();
  96:              //trace (SliderFotoNumber);
  97:              if (ImageArray[SliderFotoNumber]!== null){
  98:                  try{
  99:                      //ListAll(stage);
 100:                      CurrentImage=new Bitmap(ImageArray[SliderFotoNumber].loader.content.bitmapData);
 101:                      addChild(CurrentImage);
 102:                  }
 103:                  catch (e){
 104:                  //это защита если пришло время показывать фотку, которая еще не загрузилась
 105:                  }
 106:              }
 107:          }
 108:      }
 109:  }

Для того чтобы превратить это Flex-приложение в AIR-приложение мне всего навсего потребовалось добавить вот такую обвязку в несколько строк:


   1:  <?xml version="1.0" encoding="utf-8"?>
   2:  <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
   3:                         xmlns:s="library://ns.adobe.com/flex/spark" 
   4:                         xmlns:mx="library://ns.adobe.com/flex/mx" width="1100" height="705" 
   5:                         applicationComplete="windowedapplication1_applicationCompleteHandler(event)">
   6:      <fx:Script>
   7:          <![CDATA[
   8:              import mx.events.FlexEvent;
   9:   
  10:              protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
  11:              {
  12:                  var X:FotoPanorama1=new FotoPanorama1();
  13:                  stage.addChild(X);
  14:                  
  15:                  var textBannerRotator:TextBannerRotator1=new TextBannerRotator1(stage);
  16:                  textBannerRotator.width=this.width;
  17:              }
  18:          ]]>
  19:      </fx:Script>
  20:   
  21:      <fx:Declarations>
  22:          <!-- Place non-visual elements (e.g., services, value objects) here -->
  23:      </fx:>
  24:  </s:WindowedApplication>

Сгрузить мой слайдер в откомпилированном виде (с фотками) вы можете отсюда. Обратите внимание, что вы можете загрузить это приложение как в виде Web-приложения (которое может работать в браузере), так и в виде настольного приложение (для платформ Android, Macintosh, Linux, Windows).


Если вы хотите получить более плавный панорамный обзор - надо сделать больше фоток. Надо делать их не с рук, а со штатива, поворачивая штатив на фиксированный угол в несколько градусов. Тогда панорамный обзор будет более гладким. И линия горизонта не будет качаться влево-вправо (как это получилось у меня при сьемке просто с рук во время велосипедной прогулки).



Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: //www.vb-net.com/Flex_Panorama/index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>