Hello Sweets,
Meanwhile in Indonesia, Kakao Talk is booming right now !
KakaoTalk is a free mobile messenger application for smarthphones with free text and free call features. It is available in many OS.
Well, then the name “Kakao Talk” inspires us to make this cute wallpaper. I hope you guys enjoy it.
😀
1024×768 | 1280×800 | 1600×900 | 1920×1200
That’s all for today. I hope you guys like it 
xoxo
The Gulali’s Army
Hi.. We meet again. Its a long time since our previous tutorial.
Today we want to share a simple trick to change animation on Yahoo! Messenger.
I think almost of you are know what is Yahoo! Messenger and what it is for. But some peoples maybe not, so here some screenshots of Yahoo! Messenger with normal loading animation.
Now i can assume that all of you know what Yahoo! Messenger is. And as you can see above, the smiling face, that is what we gonna change to an interesting one.
This animation using swf file so we need Flash editor to create this. You can use Macromedia Flash 8 or Adobe Flash CS3 or greater. For animation images you can create object using tools from Flash or if you not good at drawing Flash is supported with import images from outside. It’s up to you which one is better for your animation.
After all assets is ready, now set up the project properties and timeline on Flash. For background color it not to be your concern because you can use image for background, but if you want to know the default hex color for background is #E4EDF4. And also the default resolution is 150 x 120 pixels. When create timeline don’t forget to set name on frame. and also add script ” stop(); ” on one frame before next keyframe. But if you have a loop animation you can use script “gotoAndPlay(“asleep”);” instead of using stop. Here is the timeline sample.
Now put animation based on the frame name. Put standby animation on asleep timeline, action animation on connecting and the rest animation. If you have animation with long duration don’t hesitate to extend the frame on timeline. On this tutorial we use frame by frame animation and here is our timeline after add the animations.
Next step is run your flash to create an swf file by press Ctrl+Enter. Make sure your swf file name is login.swf then replace Yahoo! Messenger login.swf with yours or rename it to login old.swf if you want to keep the default one. You can find login.swf file in “C:\Program Files\Yahoo!\Messenger” or if you using Windows 64bit its probably in “C:\Program Files (x86)\Yahoo!\Messenger”. You need to restart Yahoo! Messenger to make it run your new login.swf.
These the screenshots after we apply to our Yahoo! Messenger.
Loading Time Problem
I know everyone have different connection speed. You know what? This loading time will affect to your login.swf will show all animation or not. With normal or hi-speed connection you will only view connecting and awaking animation. Especially if you using long duration on connecting and awaking animation. To solve this problem we have two alternate options or if you have the other one please share to us.
1. Short Duration
As you know, you only have little time to show your animation. So obviously you need a shorter animation. Either you cut of your animation or change to another animation. Change to higher fps on your file is also another options for make less time but it will affect on your animation appearance.
2. Remove Script
The second options is remove script “stop();” after awaking animation. See screenshot below, i remove script inside red circle. Without script on this frame your animation will keep play to the end of frame and no need to wait connected statement.
If you have some problem about this tutorial, let us know so we can help you.
xoxo
The Gulali’s Army
I’ts always a calm, warm and peace situation for me when it’s December. I don’t know what is the reason. Maybe it’s because of the short break, after a full year activities finally I can get some rest. Yeah, the christmas holiday!
I missed the moment when I can relax and do my favorite activities, no other than drawing. I need to let this imagination out of my brain. The story from Tiwy, a.ka. kucingkeriting, you can get to know her from our section “About Us”. Her story called When Snow Melts.
Charilaine Snow from When Snow Melts
much cooler than Storm -Lavey
hei ho.. we meet again. Today we will share about how to make preloader for flash. There are a lot of preloader that using cool, elegant, or the cute one. But beside that all awesome preloader there are some line of codes that make the preloader working. So first we need to know how to code preloader step by step. In this section we use ActionScript 3.0 for type of script.
In Adobe Flash, to write script or code you must open the actions window. Go to window then select actions or just press F9 for shortcut.
First we must create event listener to handle process of load content. There are several way to get load process event and today we use one of thats, ProgreessEvent. You can learn more about other sample event listener in actionscript 3.0 first if you need it.
Next step is create variable for store how much bytes that already loaded on the process of load content. Create variable named loaded as number because the loaded bytes value is a number. Get current loaded bytes divide by total bytes and then store it to loaded variable. This calculation process will be repeated until all bytes is loaded.
Now we need loading bar for represent how bytes already loaded. Create rectangle shape with a bigger stroke. You can use another shape or color as you want.
Before it can be used, we need convert it as MovieClip so we can do something for it such as set position, height, width, etc with script that you will create later. One thing you must concern, there is registration point and make sure you set on mid-left. This option for make you bar only affect on the right side when you change bar width.
You also need text for indicate how much that file loaded numberly. Use dynamic text so you can change value of this text. Don’t forget, you need to define instance name for this dynamic text as loadedText_txt and loading bar as loadingBar_mc.
Next step, set loading bar width base on loaded value. The calculation is loaded multiply to 200 because i use loading bar with 200 pixels for its width. Set value too for the dynamic text. We want it appear as percentage so we multiply it by 100 and use toFixed(0) for round up its value.
The loading process will stop when all bytes is loaded. To get this event, we must add listener with complete type on event listener.
When the loading process is complete before we go to next frame or any action to go away from this frame, we must clean up all unused listener to prevent your computer do unused processing and also for prevent some warning or error.
After done with all preloading stuff, now is time for the content. For make it fast just insert a large size photo. It’s more than enough to preview your preloading is working or not. On this sample using 1805 x 2407 pixels photo with size 2.31 MB.
If you already with all code and content, now you can run your preloader by press Ctrl+Enter. You will see your preloader will go directly to your content. It’ normal because your load speed is to fast. Go to view menu and choose simulate download and then it will reload your file with slower speed. The load speed is customize, you can set it on download settings.
Now you can see your loading process. If you got any problem or error while following this article, just ask it on this comment below.
For the next step we will show some samples of cool preloader and also how to make it.
xoxo
The Gulali’s Army
On this part we will discuss about event that flash can handle. There are a lot of event on flash. You can use the event handler depend on what you want apply to your flash game/application such as mouse event for detect your mouse activity.
These are some samples of event handler for how to use event listener.
Event
This event is handle all condition such as something happening on stage.
MouseEvent
This event is handle about all you can do with your mouse.
KeyboardEvent
This event is handle everything about your keyboard.
For swf sample with event handler on it, you can go to here. Now you can add this handler to your class and starting to create a good game/application.
Next Tutorial – Read External XML File
Hello sweets,
It’s been a long time since my last post. I’ve been busy lately, because of my job. Drawing endlessly about 3 weeks, plus making computer modules about Adobe Dreamweaver for highschool students.
Drawing about 7 hours a day, in 3 weeks (weekdays only), makes me crazy, yeah, really. Until to some point, I don’t wanna see my bamboo tablet again, really bored.
The good point is, now I know my limit and the time I used to draw.
Here are the compilations of 3 weeks (of perseverance and in such a hurry) :
Book Cover in a Hurry
Character Full Body in Costume
Faces and Expression
And the last, the science comic compilation (not all of them).. which consume really much time and energy T_T
Science Comic Compilation
Thank God for all the time and energy while making all the pictures plus arrange the layout in such a hurry T_T
Hope all of the students can enjoy reading books more than before 🙂 Only thinking that can make me sooooo happy
xoxo
Gulali’s Army
(all characters owned by IPEKA)
In this section we will discuss about how to set value into a class and get the value from it. After we learned about Accessibility of Class, we know that we can’t directly access attributes and methods from some class if it set as private. To solved this problem we need public method for set value and get value from the class, and its called setter and getter. For a sample here is two variable that we want to set and get the value.
Setter Method :
This is public function for send one or more values into class and update the private atributes. Sample of this code such as object.setMoveSpeed(value), object.setBackgroundImage(value, value), and object.setOnClickListener(value). This image below is a sample code for setter method.
And if you also want to send parameter, you can use ‘changeColor(param:String)’ and then use ‘color = param;’ to set the color value.
Getter Method :
This is public function for get private variables value from some class. Sample for this code like object.getPosition(), object.getChildNum(), and object.getIndex(value). This image below is a sample code for getter method.
You can send parameter with this method too and depend on what the parameter is use for.
Next Step – Event Listener
Hello sweets,
I tried to make a web design for the purpose of learning materials for my students in the new semester. The design and the tutorial I use to create this come from this web. I hope it’s beneficial for you guys to learn.
I love the design because it is simple and not use much colors, only baby blue and gray. Plus, it looks simple and elegant 🙂
web design gulali production 01
And…. Fanarts of Nichkhun from 2pm k-pop group and some other unfinished work of mine plus some teaser for our next project 🙂
We hope you like it !
xoxo
Gulali’s Army
Class have 3 ways to access it properties, private, protected, and public. When you read sample class code in this blog or sample code from other tutorials, you will notice this access type there.
Private
With this access rule, all private attributes and all methods can only be accessible from the class it self.
Protected
This is a default type of accessibility in actionscript when you don’t define its type. With this type all attributes and all methods can only be accessible from its class and its inheritance class.
Public
While you set as public, it is accessible from anywhere.
Now set all attributes and method using this accessibility type and update the class. For this step, I put images of my class for a sample.
For attribute, you can set as public or private. In this image I didn’t put public since it’s a default type.
For private method, you can do the same thing like attribute.
When you want to set a method as public you can either define it as public or just leave it without a type. And then this is for the complete code.
Next Step – Setter and Getter
In section 2, will contain about class structure. As we learn about class in previous part, every class have attribute and method and a constructor with the same name with it class name. This is example code for class Car.
Sample class
Every class have structure or a several code that contain two parts, attribute and method. As you see in this code there are two variables as attribute and two functions as method. The part that you need to concern is first function, it has the same name as it class and its called constructor. The constructor will be run when ever it class is defined. Let’s try create new class in flash. In this article i will use actionscript 3.0 for tutorial.
The package is about where you place the class and its using relative path from your main fla file. I just write ‘package’ since i put this class with the same path with my fla.
You need import another class when you want to use other class feature.
extends in this line is like inheritance (we will talk about this later) so your class have attribute and function from class that you extend. In my class, its extends from movieclip so my class will have movieclip method such as for set height, width, and other methods.
Some variable as attribute in this class. You can add another attributes for your class if you need it.
Constructor with eventListener that will run when you create new object from your class. And function moving while the object enter the frame.
And two methods for moving your car later and set the car’s color. And this is image for the whole code.
Next Step – Accessibility of class
xoxo
The Gulali’s Army
Gulali 