Flash Otaku http://flashotaku.com/blog Tue, 01 Mar 2011 15:39:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Flash Components update http://flashotaku.com/blog/flash-components-update/ http://flashotaku.com/blog/flash-components-update/#comments Thu, 20 May 2010 17:36:34 +0000 FlashOtaku http://flashotaku.com/blog/?p=171 Hello everyone,

I just want to let you know that we updated our flash components recently. There might be a lot of changes since you’ve last visited FlashOtaku.com, so take a look at:
Carousel, Grid 3D, StackFlow, Thumbnail Grid, Thumbnail Scroller, Slideshow.

Some of the recent changes include the possibility to add a gloss effect or a watermark and the option to create rounded corners for the thumbnails. Also, if you haven’t visited our website in the last few months, I want to let you know that all our 3D components(Carousel, StackFlow and Grid3D) support zooming and can play video files using progressive download or RTMP streaming, or you can even load YouTube videos.
There are other changes as well, so I invite you to take a look at them. Also, any feedback is greatly appreciated.

]]> http://flashotaku.com/blog/flash-components-update/feed/ 0 FlashOtaku Components Update: Live Preview Added http://flashotaku.com/blog/flashotaku-components-update-live-preview-added/ http://flashotaku.com/blog/flashotaku-components-update-live-preview-added/#comments Sun, 05 Jul 2009 22:36:34 +0000 FlashOtaku http://flashotaku.com/blog/?p=156 I just want to let you, the users of FlashOtaku components, know that the components were recently updated and Live Preview was added. This feature will enable you to see how the component will be rendered, at design time. This is pretty useful, as you will see. You can just re-download the component and enjoy the new feature.
The feature was added for the commercial components only.

]]> http://flashotaku.com/blog/flashotaku-components-update-live-preview-added/feed/ 0 Flash Components Mashups – Part 2 http://flashotaku.com/blog/flash-components-mashups-part-2/ http://flashotaku.com/blog/flash-components-mashups-part-2/#comments Wed, 15 Apr 2009 16:29:00 +0000 FlashOtaku http://flashotaku.com/blog/?p=131 This post is Part 2 of the Flash Components Mashups series.

In this tutorial I will make the application a little more interactive.  I’ll let the “Auto Slideshow” feature activated, but this time I want to be able to jump to different slide when I click on a thumbnail. For this example I will use the StackFlow and the Slideshow components. Click on the bellow image to see exactly what we’ll be trying to achieve.

Like in the previous tutorial, I want that each time a slide is opened, the StackFlow component to scroll to the corresponding thumbnail. The code for this is the same as in the previous tutorial.

  1. import com.flashotaku.events.SlideshowEvent;
  2.  
  3. mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
  4.  
  5. function transitionStartHandler(event:SlideshowEvent):void
  6. {
  7.         myStackFlow.select(event.index);
  8. }

Next I need to add the code which will allow as to open a slide when we click an item from the StackFlow. This is also pretty simple to do.

  1. import com.flashotaku.events.StackFlowEvent;
  2.  
  3. myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
  4.  
  5. function itemClickHandler(event:StackFlowEvent):void
  6. {
  7.         mySlideshow.openSlide(event.index);
  8. }

That’s all the code we need for creating this advanced flash gallery.
The same steps need to be followed if you want to use a different component, like Carousel, Thumbnail Grid or Thumbnail Scroller.

More example bellow.

]]> http://flashotaku.com/blog/flash-components-mashups-part-2/feed/ 0 Flash Components Mashups http://flashotaku.com/blog/flash-components-mashups/ http://flashotaku.com/blog/flash-components-mashups/#comments Tue, 14 Apr 2009 13:22:15 +0000 FlashOtaku http://flashotaku.com/blog/?p=128 Today I’ll begin a series of posts about how you can integrate two or more components together in order to create more complex and interesting flash applications. As you will see, this is very easy to achieve.

I’ll start with a very basic example in which I will create an image gallery (slideshow + thumbnails). For this example I need to use the Slideshow component and the Thumbnail Scroller component. I suppose you already know how to setup each component, so I won’t talk about that. I will only show how to make them work together.

1. Drag an instance of the Slideshow and the Scroller onto the stage. Set the XML files for each of the components and also customize their properties if you would like. One thing that you have to do is set the “Auto Slideshow” property to true (we will use this feature in the tutorial).

2. Now comes the part that makes the 2 components work together. What I want is that each time the slideshow navigates to a new slide, the corresponding thumbnail to be highlighted. We need to use Actionscript code for this. These flash components are AS3 compliant, so we need to use Actionscript 3 code.

  1. import com.flashotaku.events.SlideshowEvent;
  2.  
  3. mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
  4.  
  5. function transitionStartHandler(event:SlideshowEvent):void
  6. {
  7.         myScroller.select(event.index);
  8. }

That is all the code you need for this basic, but nice looking, example.

More examples to come.

]]> http://flashotaku.com/blog/flash-components-mashups/feed/ 1 Using a custom preloader http://flashotaku.com/blog/using-a-custom-preloader/ http://flashotaku.com/blog/using-a-custom-preloader/#comments Tue, 13 Jan 2009 15:35:28 +0000 FlashOtaku http://flashotaku.com/blog/?p=75 Any of the flash components available at FlashOtaku.com gives you the possibility to create a custom preloader or a temporary clip, to be more precise. The temporary clip will act as a re-placer for the content of the item until the content is completely loaded. By default, a simple temporary clip is created for you with a specified color and transparency and there are also 5 built-in preloaders from which you can chose, but there are times when you want something more suited for your project. In those cases you can create a movie clip and simply tell the component to use that movie clip as a temporary clip.

Below you can see an example where I used a simple movie clip with a rotating star(the animation is created with frames). After creating the movie clip you need to associate it a class (Right-click on the library symbol -> Linkage), TempClip for example, and then pass the name of the class to the component’s temporaryClipReference property (myInstance.temporaryClipReference = TempClip).

Here’s the example:

]]> http://flashotaku.com/blog/using-a-custom-preloader/feed/ 4 Adding a Tooltip to the StackFlow Component http://flashotaku.com/blog/adding-a-tooltip-to-the-stackflow-component/ http://flashotaku.com/blog/adding-a-tooltip-to-the-stackflow-component/#comments Tue, 23 Dec 2008 15:41:55 +0000 FlashOtaku http://flashotaku.com/blog/?p=41 As promised in the previous tutorial, in this tutorial I will show you how to add a tooltip to one of the FlashOtaku components. I will use the StackFlow component as an example but it is applicable to the other flash components as well.

Here’s how the final result will look like:

First we need an XML file that will contain the source and the title of each item. To specify the title, I will use the ‘title’ attribute but this is not a keyword. You can use any name for the extra attributes you add. The flash component will store all the attributes and then, the API will give you access to the value of those attributes.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <images>
  3.      <image source="images/image1.jpg"  title="Image 1 title"/>
  4.      <image source="images/image2.jpg"  title="Image 2 title"/>
  5.      <image source="images/image3.jpg"  title="Image 3 title"/>
  6.      <image source="images/image4.jpg"  title="Image 4 title"/>
  7.      <image source="images/image5.jpg"  title="Image 5 title"/>
  8.      <image source="images/image6.jpg"  title="Image 6 title"/>
  9.      <image source="images/image7.jpg"  title="Image 7 title"/>
  10.      <image source="images/image8.jpg"  title="Image 8 title"/>
  11.      <image source="images/image9.jpg"  title="Image 9 title"/>
  12.      <image source="images/image10.jpg" title="Image 10 title"/>
  13. </images>

As I mentioned in the previous tutorial, I can also use Actionscript to specify the data for each item. The Actionscript code should look like this:

  1. var myItems:Array = [{source:"images/image1.jpg", title:"Image 1 title"},
  2. {source:"images/image2.jpg", title:"Image 2 title"},
  3. {source:"images/image3.jpg", title:"Image 3 title"}];
  4.  
  5. myStackFlow.items = myItems;

or

  1. myStackFlow.addItem({source:"images/image1.jpg", title:"Image 1 title"});
  2. myStackFlow.addItem({source:"images/image2.jpg", title:"Image 2 title"});
  3. myStackFlow.addItem({source:"images/image3.jpg", title:"Image 3 title"});

Now, create a new symbol and inside the symbol draw a simple tooltip and add a dynamic text field that will display the title. Give the text field an instance name of tooltipText and move the tooltip so that bottom edge of the tooltip’s arrow is positioned where the registration point of the symbol is.

tooltip drawing

When you’re done creating the tooltip, right click on it in the Library, chose Linkage, select Export for Actionscript and in the Class field write Tooltip. This step is necessary in order to be able to use the tooltip in the actionscript code.

The actionscript part is pretty easy, so I’m simply going to attach the code.

  1. import com.flashotaku.events.StackFlowEvent;
  2. import flash.events.MouseEvent;
  3.  
  4. // create an instance of the Tooltip
  5. var tooltip:Tooltip = new Tooltip();
  6.  
  7. myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OVER, tooltipHandler);
  8. myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OUT, tooltipHandler);
  9. myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
  10.  
  11. function itemClickHandler(event:StackFlowEvent):void
  12. {
  13.      // event.index is the index of the clicked item
  14.      // when an item is clicked, scroll to that item
  15.      myStackFlow.select(event.index);
  16. }
  17.  
  18. function tooltipHandler(event:StackFlowEvent):void
  19. {
  20.      if (event.type == StackFlowEvent.ITEM_MOUSE_OVER)
  21.      {
  22.           // event.data.title is the value of the title attribute added in the XML file
  23.           addTooltip(event.data.title);
  24.      }
  25.      else if (event.type == StackFlowEvent.ITEM_MOUSE_OUT)
  26.      {
  27.           removeTooltip();
  28.      }
  29. }
  30.  
  31. function addTooltip(myText:String):void
  32. {
  33.      // add the tooltip to the stage
  34.      addChild(tooltip);
  35.      // set the text property of the tooltipText TextField to the value of the myText parameter
  36.      tooltip.tooltipText.text = myText;
  37.      // when the mouse moves, move the tooltip
  38.      stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  39. }
  40.  
  41. function removeTooltip():void
  42. {
  43.      // remove the listener
  44.      stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  45.      // remove the tooltip instance from stage
  46.      removeChild(tooltip);
  47. }
  48.  
  49. function mouseMoveHandler(event:MouseEvent):void
  50. {
  51.      tooltip.x = mouseX;
  52.      tooltip.y = mouseY;
  53. }

As you can see in this tutorial and also in the previous one, it’s very easy to add extra features using the new flash components. If you have any questions feel free to ask.

]]> http://flashotaku.com/blog/adding-a-tooltip-to-the-stackflow-component/feed/ 0 Carousel component with URL for each item http://flashotaku.com/blog/carousel-component-with-url-for-each-item/ http://flashotaku.com/blog/carousel-component-with-url-for-each-item/#comments Mon, 22 Dec 2008 15:51:41 +0000 FlashOtaku http://flashotaku.com/blog/?p=32 In a previous tutorial, I’ve described how you can open an URL when a thumbnail is clicked. It was not difficult to do but you would need to parse the XML file again and create some Array instances to store the additional data. With the new components, however, this becomes much easier to do.

In this tutorial I will use the Carousel component, but it’s the same for each of the Thumbnail Scroller, Thumbnail Grid or StackFlow components.

First we need to create an XML file, images.xml, which should look like this:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <images>
  3.      <image source="images/image1.jpg" link="http://www.adobe.com"/>
  4.      <image source="images/image2.jpg" link="http://www.yahoo.com"/>
  5.      <image source="images/image3.jpg" link="http://www.msn.com"/>
  6.      <image source="images/image4.jpg" link="http://www.google.com"/>
  7.      <image source="images/image5.jpg" link="http://www.yahoo.com"/>
  8.      <image source="images/image6.jpg" link="http://www.msn.com"/>
  9.      <image source="images/image7.jpg" link="http://www.google.com"/>
  10.      <image source="images/image8.jpg" link="http://www.youtube.com"/>
  11.      <image source="images/image9.jpg" link="http://www.adobe.com"/>
  12.      <image source="images/image10.jpg" link="http://www.yahoo.com"/>
  13. </images>

The ‘source’ attribute is required to specify the location of the images we want to load. The ‘link’ attribute is used to specify the URL of the item. ‘link’ is not a reserved keyword. I could as well use ‘myLink’ or ‘url’ or any other word. The component also allows you to specify the source and all the additional data using Actionscript code but I won’t cover this now. You can read more about this feature in the component’s documentation.

Next, drag an instance of the Carousel component onto the stage, give it an instance name (myCarousel, for example), open the Component Inspector panel and for the XML Path property specify the path to the images.xml file. If you test the movie now, you will see the Carousel component successfully loading all the images.

Now, what we want is whenever an item is clicked, the Carousel to select the item, which means that the Carousel will rotate in order to bring that item in front, and if the item is already selected and we click again on the same item, to navigate to the URL specified for that item.

The component’s API makes it very easy to do this.

  1. import com.flashotaku.events.CarouselEvent;
  2.  
  3. myCarousel.addEventListener(CarouselEvent.ITEM_CLICK, itemClickHandler);
  4.  
  5. function itemClickHandler(event:CarouselEvent):void
  6. {
  7.      // if the clicked item is not selected, select it
  8.      if (myCarousel.selectedIndex != event.index)
  9.      {
  10.           myCarousel.select(event.index);
  11.      }
  12.      else // if the clicked item was already selected, go to the URL address
  13.      {
  14.           navigateToURL(new URLRequest(event.data.link));
  15.      }
  16. }

That’s all. As you can see it’s much easier and the new components give you a greater flexibility than the old ones.

I’ve also added a GreyEffect which is not covered in this tutorial. You can find more info about the available effects at the component’s page.

Here’s a preview:

In the next tutorial, I will show show you how to create a simple Tooltip, that will reveal a title or some other data when you roll over one of the items.

]]> http://flashotaku.com/blog/carousel-component-with-url-for-each-item/feed/ 1 Yet Another Image Gallery http://flashotaku.com/blog/yet-another-image-gallery/ http://flashotaku.com/blog/yet-another-image-gallery/#comments Mon, 04 Feb 2008 14:36:06 +0000 FlashOtaku http://flashotaku.com/yet-another-image-gallery/ Lately there were some questions about the possibility of adding new elements to the XML file when working with the Slideshow or Thumbnail Scroller components. The answer is yes, you just need to parse the XML file again. Two weeks ago I made a tutorial on how you can add new elements to the Thumbnail Scroller component. It’s pretty easy to do it, once you know how to work with XML in AS3. Lee Brimelow has made a new video tutorial on the basics of working with XML in AS3, so if you’re a beginner in AS3 you want to see that tutorial.

I’ve made a new image gallery example in which I add a title and a description for each image. This image gallery has 2 XML files: one contains the path to the thumbnails and the other contains the path to the large images, the title and the description. You just read the title and the description from the XML file and save the data into an Array and every time you load a new image, you use the array element that has the index equal to the image’s id. It’s pretty easy. You can download the source files here.

Support

As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.

]]> http://flashotaku.com/blog/yet-another-image-gallery/feed/ 98 Building an auto slideshow with AS3 http://flashotaku.com/blog/building-an-auto-slideshow-with-as3/ http://flashotaku.com/blog/building-an-auto-slideshow-with-as3/#comments Thu, 31 Jan 2008 14:52:17 +0000 FlashOtaku http://flashotaku.com/building-an-auto-slideshow-with-as3/ This time I will show you how you can add an auto slideshow feature to the Slideshow component, using the Timer class.

It’s pretty easy to do this, if you know how to use the Timer class, so I will just show you the code without explaining each step, but if you have any specific question, fell free to ask. Also make sure to read the documentation for the Slideshow component.

  1. import com.flashotaku.slideshow.events.SlideshowEvent;
  2. import flash.events.MouseEvent;
  3. import flash.utils.Timer;
  4. import flash.events.TimerEvent;  
  5.  
  6. var myTimer:Timer = new Timer(1500);  
  7.  
  8. start.addEventListener(MouseEvent.CLICK, startHandler);
  9. pause.addEventListener(MouseEvent.CLICK, pauseHandler);
  10. prev.addEventListener(MouseEvent.CLICK, prevHandler);
  11. next.addEventListener(MouseEvent.CLICK, nextHandler);  
  12.  
  13. function startHandler(event:MouseEvent){
  14.         if(!myTimer.hasEventListener(TimerEvent.TIMER)){
  15.                 myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
  16.                 myTimer.start();
  17.         }
  18. }  
  19.  
  20. function timerHandler(event:TimerEvent){
  21.         myTimer.reset();
  22.         myTimer.removeEventListener(TimerEvent.TIMER, timerHandler);
  23.         mySlideshow.nextImage();
  24.         if(!mySlideshow.hasEventListener(SlideshowEvent.TRANSITION_COMPLETE)){
  25.                 mySlideshow.addEventListener(SlideshowEvent.TRANSITION_COMPLETE, completeHandler);
  26.         }
  27. }  
  28.  
  29. function completeHandler(event:SlideshowEvent){
  30.         myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
  31.         myTimer.start();
  32. }  
  33.  
  34. function pauseHandler(event:MouseEvent){
  35.         stopTimer();
  36. }  
  37.  
  38. function prevHandler(event:MouseEvent){
  39.         stopTimer();
  40.         mySlideshow.prevImage();
  41. }  
  42.  
  43. function nextHandler(event:MouseEvent){
  44.         stopTimer();
  45.         mySlideshow.nextImage();
  46. }  
  47.  
  48. function stopTimer(){
  49.         if(myTimer.hasEventListener(TimerEvent.TIMER)){
  50.                 myTimer.reset();
  51.                 myTimer.removeEventListener(TimerEvent.TIMER, timerHandler);
  52.         }
  53.         if(mySlideshow.hasEventListener(SlideshowEvent.TRANSITION_COMPLETE)){
  54.                 myTimer.reset();
  55.                 mySlideshow.removeEventListener(SlideshowEvent.TRANSITION_COMPLETE, completeHandler);
  56.         }
  57. }

The result is this:

Download sample files

Support

As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.

]]> http://flashotaku.com/blog/building-an-auto-slideshow-with-as3/feed/ 108 Open URL when a thumbnail is clicked http://flashotaku.com/blog/open-url-when-a-thumbnail-is-clicked/ http://flashotaku.com/blog/open-url-when-a-thumbnail-is-clicked/#comments Mon, 21 Jan 2008 12:20:26 +0000 FlashOtaku http://flashotaku.com/open-url-when-a-thumbnail-is-clicked/ Adding this feature to the Thumbnail Scroller Component is pretty easy but requires some knowledge on working with XML. In this tutorial I will show you how to do this using Actionscript 3.

1. First we need to add another attribute to the XML file. I will call this new attribute “urlPath” but you can use any name. I only want to add this attribute for the first 3 thumbnails.

My XML file will now look like this:

  1. <images>
  2.       <image path="thumbnails/image0.jpg" urlPath="http://www.adobe.com" />
  3.       <image path="thumbnails/image1.jpg" urlPath="http://www.google.com" />
  4.       <image path="thumbnails/image2.jpg" urlPath="http://www.yahoo.com" />
  5.       <image path="thumbnails/image3.jpg" />
  6.       <image path="thumbnails/image4.jpg" />
  7.       <image path="thumbnails/image5.jpg" />
  8.       <image path="thumbnails/image6.jpg" />
  9.       <image path="thumbnails/image7.jpg" />
  10.       <image path="thumbnails/image8.jpg" />
  11.       <image path="thumbnails/image9.jpg" />
  12. </images>

2. Add the needed code for the navigation:

  1. import flash.events.MouseEvent;  
  2.  
  3. left.addEventListener(MouseEvent.CLICK, leftHandler);
  4. right.addEventListener(MouseEvent.CLICK, rightHandler);  
  5.  
  6. function leftHandler(event:MouseEvent){
  7.        myScroller.moveLeft();
  8. }  
  9.  
  10. function rightHandler(event:MouseEvent){
  11.        myScroller.moveRight();
  12. }

3. Now, we need to handle the XML file. At first, this might seem a little complicated if you haven’t worked with XML in AS3 but it’s really not that difficult. It’s just that AS3 has a different way of working with external XML files.

  1. import flash.events.Event;
  2. import flash.net.URLLoader;
  3. import flash.net.URLRequest;  
  4.  
  5. var urlRequest:URLRequest = new URLRequest("thumbnails.xml");
  6. var urlLoader:URLLoader = new URLLoader(urlRequest);
  7. var urlArray:Array = new Array();  
  8.  
  9. urlLoader.addEventListener(Event.COMPLETE, onXmlComplete);  
  10.  
  11. function onXmlComplete(event:Event){
  12.       var xmlList:XMLList;
  13.       var nr:int;
  14.       var xml:XML = new XML(event.target.data);
  15.       xmlList = xml.children();
  16.       nr = xmlList.length();
  17.       for(var i:int = 0; i < nr; i++){
  18.             urlArray[i] = xmlList[i].attribute("urlPath");
  19.       }
  20. }
  21.  

4. Open an URL when a thumbnail is clicked:

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2. import flash.net.navigateToURL;  
  3.  
  4. myScroller.addEventListener(ThumbnailEvent.CLICK, openUrl);  
  5.  
  6. function openUrl(event:ThumbnailEvent){
  7.      var nr:int = event.item.id;
  8.      if(urlArray[nr]!=undefined){
  9.            var urlRequest:URLRequest = new URLRequest(urlArray[nr]);
  10.            navigateToURL(urlRequest, "_blank");
  11.      }
  12. }

Download sample files

Support

As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.

]]> http://flashotaku.com/blog/open-url-when-a-thumbnail-is-clicked/feed/ 30