Wednesday, April 27, 2011

Flash Learning Journal - Winter Semester 2011

Journal 1:

Problem: When working on my flash contact form assignment, my font does not fit with the text field I created on Action Script. Some characters are also missing.

Solution: Go to properties, choose the type of font, click “Character Embedding” and check/type the characters needed in the text field.


Journal 2:

Problem: I need to know how to add sounds when the flash contact form gets error and is sent. What should I do?

Solution: First, create the sound variables to load sound on contact form and send button , for example:

var mySound1:Sound = new sendSound();

var mySound2:Sound = new errorSound();

Second, in the onSubmit button, if the validation warns some errors, the code is

mySound2.play();

but if the message filled properly, the code is

mySound1.play();


Journal 3:

Problem: I need to know how to add simple animation on an image when the flash contact form is sent. How could I do?

Solution: First, flash transitions (tween and easing should be imported). Import from greenshock.com is also another alternative.

import fl.transitions.Tween;

import fl.transitions.easing.*;

On the submit button, if the message filled properly the code is:

var spin:Tween = new Tween(red_mc, "rotation", Elastic.easeOut, 0, 360, 5, true)

Here is the explanations:

- Variable tween should be created to tween an object

- “red_mc” is the name of the image that is converted on Movie Clip and tweened

- Rotation is the code to command action script to rotate the image. In this case, the spin tween animates the selected instrument in one complete rotation over five seconds. Because the easing type is set to Elastic, this will create a bouncing, rubbery effect at the end of the tween.


Journal 4:

Problem: I need to add feedback message using image and preloader on my flash contact form. What is the process?

Solution:

- Drag “Button” and “Progress Bar” from the Window > Components to the Library.

- Import the Button and ProgressBar to action script using this codes:

import fl.controls.ProgressBar;

import fl.controls.Button;

- Set up variable for loader, send button, and progress bar. For example:

var my_loader:Loader = new Loader();

var my_btn:Button = new Button();

my_btn.label = "Send Message";

my_btn.x = 395.5;

my_btn.y = 345;

addChild (my_btn);

var my_pb:ProgressBar = new ProgressBar();

my_pb.source = my_loader.contentLoaderInfo;

my_pb.x = 195.9;

my_pb.y = 353.0;

- On the submit button, if the message is properly filled, add this codes (do not forget to put the feedback image at the same folder):

my_loader.load(new URLRequest("feedback.jpg"));

addChild(my_pb);

removeChild(my_btn);

my_btn=null;

mySound1.play();

my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoading);

function finishLoading(e:Event):void{

addChild(my_loader);

removeChild(my_pb);

my_pb = null;

Journal 5:

Problem: I need to create stylish color and background for my text field when working on my flash contact form. What should I do?

Solution:

Here is the example: note_txt is the name of the text field given in the properties.

note_txt.textColor = 0xFFFFFF;

note_txt.background = true;

note_txt.backgroundColor = 0xCC0033;

Journal 6:

Problem: Lightbox gallery is very interesting. But when I applied it on my portfolio website, it doesn’t work properly. What is the problem?

Solution:

All downloaded folders should be put in the same folder where the portfolio file is placed. Do not forget to put this code on the header

The next step is to apply the lightbox effect on the image

FLASH DIGITAL CLOCKS

I finally successfully applied the lightbox effects on my portfolio:

http://irenewulandari.com


Journal 7:

Problem: There is another visual effect provided by wow_slider.com using JQuery technology. Technically, how to apply it on my html file?

Solution: Similar to lightbox effects provided by lokesdhakar.com, if we want to use wow_slider.com, we have to download the type of visual effects we need. Put all of the files in the same folder. This is an example of visual lightbox effects:

http://irenewulandari.com/wow_slider/ghana.html

Journal 8:

Problem: When I want to test my preloader and loading bar in Flash, I couldn’t see the preloading properly. What method should I use?

Solution: When you test the file using Ctrl+Enter, or Command+Return on Mac, click the menu View and Simulate Download. Use the 32.6 KB Download Setting, and the file test will show how the preloading works.


Journal 9:

Problem: What it means if an XML file for Flash needs a hierarchy of parent and child tags?

Solution: XML set up in a hierarchy of parent and child tags. For example, in the image.xml file, the tag is the parent of all twelve sets of tags (element). Each image has five child elements. These elements are named file, name image, date, photographer, and the url on flickr.


Journal 10:

Problem: After I set up the xml file and put it in a proper folder, what codes should I use in Flash AS3 to be able to load that file?

Solution: Use the load() method to load the data from the xml file. For example:

Var xmlLoader:URLLoader = new URLLoader();

xmlLoader.load(new URLRequest(“imglist.xml”));


Journal 11:

Problem: When working on my Flash XML file, what codes should I use to add feedback for responding to Complete and Error events?

Solution: For complete event, this code might be useful:

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

function errorHandler(event:IOErrorEvent):void {

imgTitle.text = “XML loading error:” + event;

}

function xmlLoaded(event:Event):void {

imgList_XML = new XML(xmlLoader.data);

}


Journal 12:

Problem: When working in my Flash, I want to add hyperlinks on my XML data. What should I do?

Solution: Try these codes:

link_btn.addEventListener(MouseEvent.CLICK. myURLLink);

function myURLLink(e:MouseEvent):void {

var link:String = imgList_XML.image[imageNum + imageCount].myURLLink;

navigateToURL(new URLRequest(link), “_blank”); }


Journal 13:

Problem: When working with tween and easing classes, what is the meaning of this function:

function fadeOut(e:MouseEvent):void {

var tweenfadeOut:Tween = new Tween(instrument, “alpha”, None.easeOut, 1, 0, 3, true);

}

Solution: If that function applied to an image that needs to faded out, the image is completely opaque (1) to completely transparent (0) over three seconds. There is no easing added in the third parameter of this tween.


Journal 14:

Problem: What is the different between private and protected files when working on AS3 classes?

Solution: Private is only available from within the class file, and protected is only available from within the class file and its descendents.


Journal 15:

Problem: How is a display object added to the display list in AS?

Solution: We can use the addChild method. For example:

addChild(lion1);

or

stage.addChild(lion2);


Monday, September 6, 2010

Performance Comparison of Web Browsers

Source: http://sixrevisions.com, by: Jacob Gube

This article reports a research about performance of major web browers include Firefox 3.5, Google Chrome 3.0, Internet Explorer 8.0, Opera 10, and Safari 4.0. Browsers were tested 3 times with unprimed caches except during caching performance benchmarks.

  • Javascript Speed: The fastest is Google Chrome (542.3ms), and the slowest is Internet Explorer (6.305.5ms). However, Safari becomes a big competitor of Google since its speed is only about three hundreds different from Google (863.9ms).
  • CPU Usage: When Google Chrome is able to be the winner of five (3.0%), Internet Explorer should accept itself as a losser (13.1%). But again, Safari becomes Google competitor since it gains position as a second winner (4.4%).
  • DOM Selection Speed: At this point, Opera is proved as the browser which is very responsive on asynchronous page updates (27ms), followed by Safari (30ms), and Google Chrome (39ms).
  • CSS Rendering Speed: There is a big difference between the fastest and the slowest here. When Google Chrome is able to render in 91ms, Internet Explorer is only able to render in 793ms.
  • Page Load Time: In this case, the differences between 5 browsers are not too much. When Firefox as the fastest proved 1.34ms, Google Chrome proved 1.45s.
  • CSS Rendering Speed: There is a big difference between the fastest and the slowest here. When Google Chrome is able to render in 91s, Internet Explorer is only able to render in 793ms. That speeds are followed by Opera in 1.50s, Safari in 1.61s, and Internet Explorer in 1.61.
  • Browser Cache Performance: When the test proved Google Chrome is able to load in 0.72s, the test also proved Safari is only able to load in 0.89s.
Since the overall performance shows that Google Chrome now is the winner of five major web browsers, I am very interested to download and use that browser for my internet activity. This finding is very surprising because it has been a long time I've believed that Firefox is the best browser.

10 Essential Chrome Extentions for Web Developers

Source: Mashable: The Social Media Guide, by: Samuel Axon

This article introduces extensions supported in Chrome and some tools that can be used in Firefox. The extensions might enable people to use Chrome as the main workhorse.

  • Firebug Lite: To inspect a page for errors then quickly edit to fix them.
  • Tab: To open any website in a tab that's actually running Internet Explorer instead of Chrome.
  • Eye Dropper: To give useful information on any color on a website you're viewing in Chrome.
  • Chrome SEO: To give information which is important for search engine optimization.
  • Lorem Ipsum Generator: To generate filler text for your websites.
  • Resolution Test: To help you make sure the site's formatting looks ok to users.
  • Speed Tracer: To record how much time your web application is spending on various tasks.
  • Measure It: To give dimensions of any element present in a website you're looking at.
  • Pendule: To help web developers with well-laid-out control panel full of miscellaneous tasks like viewing source, script validators, a color picker, etc.
  • Built with: To give a profile of the website you are hanging out at. A list of the technologies (such as widget, analytics tracker, frameworks) is included.
These sophisticated tools encourage me to quickly change my Firefox to Google Chrome :)

Related links: http://www.mashable.com/2010/02/24/developer-chrome-extensions

Friday, September 3, 2010

How Many Ideas Do You Show Your Clients?

Source: Smashing Magazine, (2009/12/28), by: Graham Smith

This article gives tips could be used to make your ideas or portfolios are succesfully impressed and accepted by future employers.

  • When too much choice can be a bad thing for clients, consider a few choice which is able to represent your brilliant imagination, interpretation, and ability to think outside box.
  • Know your client's psychological angle includes their personality and business-related issues.
  • Have a solid brief to pre-empt undesirable outcomes by familiriazing yourself as much as possible with your client and their business
  • Have understanding that a true collaboration requires the commitment of at least two people: the designer and client.
  • When the brief and communication are solid, communication can simply use email or Skype, otherwise, take phone.
  • When you have lazy communicators, consider if the project is worth to be taken.
This article challeges me to start thinking about ideas that are able to impress future employers and familiriazing myself to the future employers and their business orientations.

Related links: http://www.smashingmagazine.com/2009/12/28/

30 HTML Best Practices for Beginners

Source: http://net.tutsplus.com, (2009/04/14), by: Jeffrey Way
  1. Always close your tags to avoid validation and glitch issues at every turn.
  2. Declare the correct DocType. HTML 4.01 is suggested.
  3. Never use inline styles unless if the pages has been completely coded.
  4. Place all external CSS files within the head tag to make pages faster to be load.
  5. Consider placing Javascript files at the bottom to make pages faster to be loaded.
  6. Never use inline Javascript. It's not 1996.
  7. Validate continuously to avoid strange whitespace issue.
  8. Download firebug as a tool providing Javascript debugging and extra padding inspector.
  9. Use firebug and learn it as well.
  10. Keep your tag name lowercase.
  11. Use H1-H6 tags for semantic reasons.
  12. If building a blog, save the H1 for the article title.
  13. Download ySlow to analyze areas which need improvement.
  14. Wrap navigation with an unordered list for semantic reasons.
  15. Learn how to target IE as demanded by IE.
  16. Choose a great code editor such as Coda, Espresso (Mac), or InType, Notepad++ (PC).
  17. Once the website is complete, compress! 18) Once you've completed the markup, reduce the number of elements on the page.
  18. All images require attributes for accesibility and validation reason.
  19. Stay up late to study Javascript closures and other codings.
  20. View source to learn the coding.
  21. Style all elements to show off.
  22. Use Twitter to have networking tool in your industry.
  23. Learn Photoshop.
  24. Learn each HTML tag.
  25. Participate in the community to teach yourself and learn more.
  26. Use a CSS reset.
  27. Line 'em up to understand why the element is placed.
  28. Slice a PSD.
  29. Don't use a framework when first getting started. Beginners need sometimes to study it to avoid confusion.
This article is very helpful for me to avoid errors in creating HTML pages and gives basic knowledge about terms and coding techniques in HTML.

Thursday, September 2, 2010

Applying Mathematics to Web Design

Source: Smashing Magazine, (2010/02/09), by: Adit Gupta


This article promotes mathematics theories and its ability to exhibit order, symmetry, and limitation which can be used in variety of themes, styles, and elements of web design.

Golden Rectangle: Comes from Golden Ratio theory, an irrational mathematical constant with a value of approximately 1.618033987. It is possible to be applied for photo galleries, portfolios, and product-oriented websites.

Fibonacci Design: Design based on the Fibonacci sequence of numbers which the first two are 0 and 1, and the remaining is the sum of the previous two. It is best suited to blogs and magazine layouts.

Five elements or Kundli Design: The technique comes from the Indian horoscopes which are also called Kundli. The steps are 1) draw a square, 2) cross the two diagonals, 3) join the mid-points on each side of the square to get the Kundli figure. This chakra is best for displaying product informations and portfolios.

Sine Wave Design: Is a mathematical function that describes a smooth repetitive oscillation. It is best suited for a simple and original web design, create a single-page layout, graphics or infographics.

Other techniques such as Rule of Thirds and Musical Logic are also beneficial for web design.

I might use math already when designing my web without knowing which mathematics theory I've been or should be used. This article gives me new knowledge and inspiration to explore and apply various mathematics theories for my web design.

Related links: http://www.smashingmagazine.com/author/adit-gupta/