Flash Otaku

Grid 3D flash component available

FlashOtaku — Mon, 23 Nov 2009 14:45:30 +0000

A few days ago, we released a new flash component: Grid 3D. Similar components, inspired by the Cooliris 3D Wall plug-in, have been on the market for some time but we tried to create something better, less CPU-intensive and with more features. I think we’ve done a pretty good job but we’re open for suggestions from you, people interested in our products. You can see the component in action here.

Carousel PRO and StackFlow PRO components released

FlashOtaku — Tue, 20 Oct 2009 09:11:37 +0000

We have recently released the Carousel PRO and StackFlow PRO flash components. These PRO versions add the capability to play video content, including YouTube videos.
Also, we’ve added zooming capability, so when you zoom over an item, a higher resolution of that item is displayed. This feature is included in the basic versions of the components as well. You can download free trial versions of the components here and here. We would greatly appreciate your feedback.

Component Free Trials Available

FlashOtaku — Thu, 13 Aug 2009 08:42:37 +0000

Hello everyone,

The FlashOtaku.com website has just been redesigned and reorganized. You can now create an account and keep track of all your orders and components. One great thing is that you can now download free trial version for all the available flash components. The free trials have the complete functionality of the full version but they will only run inside the Flash IDE. I encourage you to create an account and try out these components. Your feedback is greatly appreciated !

PS: If you’ve already purchased a component from FlashOtaku.com before, just contact me with your newly created account details and your transaction id and I’ll make the component available in your account page.

FlashOtaku Components Update: Live Preview Added

FlashOtaku — Sun, 05 Jul 2009 22:36:34 +0000

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.

Flash Components Mashups - Part 2

FlashOtaku — Wed, 15 Apr 2009 16:29:00 +0000

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.

import com.flashotaku.events.SlideshowEvent;
mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
function transitionStartHandler(event:SlideshowEvent):void
{
myStackFlow.select(event.index);
}

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.

import com.flashotaku.events.StackFlowEvent;
myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:StackFlowEvent):void
{
mySlideshow.openSlide(event.index);
}

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.

Flash Components Mashups

FlashOtaku — Tue, 14 Apr 2009 13:22:15 +0000

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.

import com.flashotaku.events.SlideshowEvent;
mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
function transitionStartHandler(event:SlideshowEvent):void
{
myScroller.select(event.index);
}

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

More examples to come.

ScrollBar Component

FlashOtaku — Fri, 13 Mar 2009 16:09:45 +0000

The purpose of this ScrollBar component is to be used together with the FlashOtaku components, but it can be used in other contexts as well. You can skin it the same way you would skin a Flash V3 component and you can also chose to show the left/right arrows or not. In functionality is more like a slider component but I decided to call it a scrollbar since it looks like a scrollbar.

This component is offered as premium with the purchase of any of the following components: Thumbnail Scroller, Thumbnail Grid, Carousel and StackFlow. If you already purchased any of these components, simply re-download the component using the link that you were given in your email.

See it in action in the bellow examples:
StackFlow
Carousel
Thumbnail Grid
Thumbnail Scroller

New Slideshow Component Released

FlashOtaku — Thu, 26 Feb 2009 13:20:28 +0000

If you liked the first Slideshow component you will absolutely love the new one. The new component is AS3 only and comes with significant performance improvement and new features. Now you can add library assets and DisplayObject instances, besides external content like JPG, SWF etc. You can also add content using Actionscript methods, not necessarily using XML. Another new feature is the built-in video player, which can play H.264 encoded files.

Using a custom preloader

FlashOtaku — Tue, 13 Jan 2009 15:35:28 +0000

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:

Adding a Tooltip to the StackFlow Component

FlashOtaku — Tue, 23 Dec 2008 15:41:55 +0000

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.

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

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:

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

myStackFlow.addItem({source:"images/image1.jpg", title:"Image 1 title"});
myStackFlow.addItem({source:"images/image2.jpg", title:"Image 2 title"});
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.

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.

import com.flashotaku.events.StackFlowEvent;
import flash.events.MouseEvent;
// create an instance of the Tooltip
var tooltip:Tooltip = new Tooltip();
myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OVER, tooltipHandler);
myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OUT, tooltipHandler);
myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:StackFlowEvent):void
{
// event.index is the index of the clicked item
// when an item is clicked, scroll to that item
myStackFlow.select(event.index);
}
function tooltipHandler(event:StackFlowEvent):void
{
if (event.type == StackFlowEvent.ITEM_MOUSE_OVER)
{
// event.data.title is the value of the title attribute added in the XML file
addTooltip(event.data.title);
}
else if (event.type == StackFlowEvent.ITEM_MOUSE_OUT)
{
removeTooltip();
}
}
function addTooltip(myText:String):void
{
// add the tooltip to the stage
addChild(tooltip);
// set the text property of the tooltipText TextField to the value of the myText parameter
tooltip.tooltipText.text = myText;
// when the mouse moves, move the tooltip
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
function removeTooltip():void
{
// remove the listener
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
// remove the tooltip instance from stage
removeChild(tooltip);
}
function mouseMoveHandler(event:MouseEvent):void
{
tooltip.x = mouseX;
tooltip.y = mouseY;
}

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.