3D & Web Design Help, Resources and Inspiration.

My Status ! :)

2011-11-11T12:40:00.000+05:00

Hi, Audience...

there have been no posts for some time due to my busy life at this point, as soon as I get relief I will be posting some great resources. :)

Thanks.

Flash Drop Down Menu Tutorial with Actionscript 3.0

2011-10-05T13:05:00.002+05:00

[HD] Flash Drop Down Menu Tutorial with Actionscript 3.0

A good 42 min tutorial from www.tutvid.com on creating a drop-down menu in Actionscript 3.0 using Flash CS4 or above. I am actually trying to implement this menu in a current project of mine, let's see how much success I get. :)

3D Abstract & Tech Art Wallpapers

2011-09-22T20:34:00.001+05:00

1280 x 960 "Righ-Click -> Open in new tab" for full size

1600 x 1200 "Righ-Click -> Open in new tab" for full size

1280 x 1024 "Righ-Click -> Open in new tab" for full size

1600 x 1200 "Righ-Click -> Open in new tab" for full size

1280 x 960 "Righ-Click -> Open in new tab" for full size

1280 x 1024 "Righ-Click -> Open in new tab" for full size

I found these and similar abstract wallpapers a great way of inspiration in designing techy / abstract website designs. We can also get a hold of some artistic ideas from these wallpapers, and they are off-course the jewel of our desktop. :D

3Ds Max Tutorial - 1 - Introduction to the Interface - YouTube

2011-09-19T19:02:00.002+05:00

3Ds Max Tutorial - 1 - Introduction to the Interface - YouTube

This is a great series of tutorials from The New Boston , the above tutorial is an introduction to 3Ds Max and it's pretty basic for the beginners. Normally we have some trouble finding tutorials which are very basic and for people who want to start from scratch, so I found this very useful and wanted to share with everyone. There is a whole series to follow which will teach more complex topics like modeling, design and textures etc. in 3Ds Max 2010.

They also have many tutorials on other software and languages like Dreamweaver, Javascript, After Effects etc. Their YouTube Channel looks great and what else do you want if you get FREE tutorials and FREE Education. Thanks to The New Boston.

FREE Website HTML Template With Source PNG.

2011-09-17T03:32:00.003+05:00

Right-Click -> Open In New Tab for larger resolution.

Hi. Today again,
I am offering another on my template for FREE To Download. I did this for a client back a few years, but He wanted the exact replica of another site He showed me :) Sometimes clients can be like that, can't listen and ruin your hours of hard-work.

Download Link: https://rapidshare.com/files/4245443565/WaterMarkBuilders.zip

The above zip file includes, HTML File, CSS File and the Source Fireworks PNGs in the "Source Files" folder.

Tutorial: Nav Button - Designing Buttons in Adobe Fireworks. FREE Source.

2011-09-08T15:42:00.007+05:00

Designing navigation buttons in Adobe Fireworks using gradients and two squares with little bit rounded corners. I recently used this button on my latest project www.april-laundry.com

"Right-Click - Open In New Tab" to view larger image.

To bring the effect of the semi-transparent cut in the middle of button, I have given the 2nd rectangle's 1st grandient color and opacity of 18% and the 2nd is 0% because it's already out of button dimensions and gives the upper color a light effect. The engraved arrow has an inner shadow, you can view the shadow color and values in the source file.

Download the source Fireworks PNG from the following link to get more insight.

Download Link: https://rapidshare.com/files/4143501687/btn_home.png
File Type: Adobe Fireworks Source PNG
Software Requirements: Min Fireworks 8.

Featured Project: Bandanas Bar-B-Q Website.

2011-08-31T01:34:00.001+05:00

Click on Image for larger resolution.
live link: www.bandanasbbq.com

Client: Bandanas Bar-B-Q, Missouri USA.
Agency: MME Technology Solutions, USA.
Project Category: Design, XHTML
Tools: Adobe Creative Suite.
Project URL: www.bandanasbbq.com

Case Study:
The client came to us to re-design their old non-performing site that had an outdated design and wasn't making sense with the latest trends or helping users to access information with ease. In our opinion, the website of a business should help the business perform better, faster and make more profit.

We designed the site to give it a new fresh look, make it XHTML compliant and giving users faster access to information and resources on the website. At last we were able to make a website that made the users happy, increased business specially the Catering section & increased the social circle on Facebook with rapid increase in Facebook Likes.

Please provide your thoughts in comments, specially web development professionals.

Thanks
Iqtidar Ali
www.souldesigns.net

FREE E-Commerce Design Template. X-Cart.

2011-08-25T21:12:00.004+05:00

I had designed this template for X-Cart Shopping Cart. I have normally gotten used to design my templates in Adobe Fireworks, so the source file is in PNG. I am making the template available for download for FREE for web designers. X-Cart uses the Smarty PHP Framework, so implementing this template is not as straight-forward as for a normal website, but for designers experienced with X-Cart and Smarty will find most of the things in place.

The icons and watermarked images are iStockphoto property, please purchase before use.

Source File: http://rapidshare.com/files/321893657/home_layout.zip ( At least Fireworks 8 required )

Skill Tests on oDesk !

2011-08-25T13:03:00.002+05:00

Hi. I have taken a couple of skill tests on oDesk and have gone through. You can click on the badges below to get detailed results for the tests. The one thing I like about these tests is that they provide information about how you have performed in different areas of a skill. e.g. I gave the XHTML 1.0 test and got an overall score of 3.0 but at the same time it gives you insight in which area you performed best and where you're lacking.

Topic

Correct Answers

1. Fundamentals:

45%

2. Images and Links:

86%

3. Tables and Forms:

88%

4. Tags:

43%

Topic

Correct Answers

1. Action Script:

60%

2. Editing Artwork and 3d graphics:

17%

3. Imported Artwork and Text:

67%

4. Managing Documents,Workspace and Screens:

20%

5. Publishing,Exporting and Filters:

100%

6. Sound and Video:

86%

7. Symbols and Assets:

50%

8. Timelines and Animation:

62%

So I like oDesk better than other freelancing sites, specifically for the ease of transfer of money to your bank account to Pakistan. You can do a direct wire transfer to your bank account from oDesk and even the first transfer is FREE, however Elance gives you one wire transfer FREE per month, that's attractive but they have other limitations like subscription fees and also a big comission fee as well, which in-turn puts a lot of burden on the service provider. However, here's my oDesk Profile link where you can go to hire me for developing your websites, designing logos and PHP Programming etc. My latest project is for Bandanas Bar-B-Q, MO, USA http://www.bandanasbbq.com

Bird Eye View of a 3D City by K-Birdie !

2011-07-09T13:26:00.000+05:00

Right-Click on image and Open In New Tab for a Larger Version

A Project my firm has been working on. Based on high tech minimal design. Its still in the works. Building design was done as teamwork between colleagues. As you can see, its a little more than big :)

Modelled : AutoCad
Rendered : 3D Max
Additional : Usage of Google Maps and Some Pshop filters.

For more of K-Birdie's work http://sampdoria.deviantart.com

FREE Flash Source (FLA) : Slideshow & Button Rollovers

2011-07-09T01:19:00.001+05:00

Category: Adobe Flash CS & Above.
Skill Level: Intermediate
Live Demo Link: http://www.souldesigns.net/tutorials/flash_slide/
Source Files(FLA & SWF): http://rapidshare.com/files/2959834319/Entellics_Slideshow_FLA.zip
OR
http://hotfile.com/dl/123689164/3cbc696/Entellics_Slideshow_FLA.zip.html

I am putting the source FLA of this Flash slideshow and roll-over for free for learning purposes. I did this project back in 2008 as a home page for a new company. Two buttons are not working, but you get the idea how it works, pretty simple stuff but tips for some image zoom blur effects. I put the rest upon you to learn from the FLA.

Thanks.

Featured Artist: Mike Johnson a.k.a ~DarthMurda

2011-07-07T23:59:00.000+05:00

Another talented CG Artist from Blur Studios, Mike Johnson nicknamed ~DarthMurda at Deviant Art. Mike has a cool portfolio mostly containing architectural exteriors and interiors with other objects designed as well.

About Mike Johnson:
Graduate from Art & Design High Shool, Manhattan,NY. Relocated to California to pursue an Aggressive Inline skating career. Through skating,traveled to many areas of the world: France, Germany, Poland, Russia, Scotland, Austria, Denmark and Amsterdam.

Self taught in creative applications such as Illustrator, Photoshop, After Effects, 3D Studio Max, Vray, Mentalray, and Digital Fusion. 7 +yrs Experience Passionate about working with 3d. Currently reside in Los Angeles, California working fulltime at Blur Studio.

To look at more work of DarthMurda:
http://michaeljohnsoncg.com
http://darthmurda.deviantart.com

FREE Textures. Bricks, Walls, Old Temples, Shrines, Tombs.

2011-07-05T00:49:00.000+05:00

To Download full size image ( 1600 x 1200 px ) Right-Click, Open in New Tab on images.

I went to a historical place named Thatta in Sindh, Pakistan. I took the pictures of hundreds of years old graveyard, which has old graves, old shrines, old mughal emperor's Tombs etc. These pics can be helpful in designing Indian historical tombs or temples etc. The walls and brick textures can be helpful in many ways for Graphic, Web and 3D Designers... depends on your creativity !

I would want to use some of these images as website backgrounds for some stunning effects. :)

thanks.

Google Chromebooks - Will it bring a change & what's Microsoft thinking ?

2011-06-15T15:17:00.000+05:00

June 15, Google has released the new Chromebook which is new netbook with some great-looking features, but will it be successful? Not sure right now but it seems to offer great services and after all Google has released its operating system, even if it's for the netbook, they are making progress towards the OS market and that should ring the alarms for Microsof :)

On the other hand Microsoft is investing billions to buy Skype ! :) and that can be a bad deal for them as well, because Google Talk and Video / Voice Chat in Gmail and Free Calls to USA and Canada will give them a tough time.

However, Google Chromebook looks like my Acer laptop and there are versions from Samsung as well. The Samsung version's price on Amazon is a bit higher, not sure why !

A great feature of Chromebook is it's cloud based backup, even if you loose your chromebook you have all your data / work automatically backed up and you just get a new chromebook and start from where you left. Also there are no annoying update warnings / notifications, it just updates itself to the latest version and don't bother you for it.

Let's see how it goes for Google and Microsoft has some tough time coming soon I guess..... :)

Concept Art from Shiraz Saeed.

2011-06-11T15:28:00.000+05:00

I had mentioned my friend Shiraz Saeed in previous posts... I had some of his work stored on my old hard drive which i restored today. Have look at his sketches.

Free Website Source - HTML, CSS, FLA and Photoshop PSD.

2011-06-11T00:52:00.003+05:00

Hi,
Today I am sharing a project of mine with everyone out there to provide others with a learning curve as well. This is a website that I converted from Photoshop PSD to HTML. Although the site is an old project from 2005 and the layout is done in tables but I think it'll be a good help as learning wheels.

I had created roll-overs with Fireworks at that time, now you can use either CSS or Javscript roll-overs today, which are easier and more accessible.

You can download the site with source files here:

http://hotfile.com/dl/123690438/8aecb93/4dcard.com.zip.html

The zip file contains html files, source PSDs, PNGs and a Flash FLA etc. I think it'll be good help for beginners. I'll be soon sharing more projects. :) You're FREE to use any source code or files in your projects.

Quick Tip: Using Transparent PNGs For a Number of Effects

2011-06-08T15:16:00.000+05:00

Hi.
Recently I am working on my new project for a client and the design required using a semi-transparent background for the drop down menus, from which you can see through the objects behind it. :) Since CSS prior to CSS3 doesn't offer a background color with opacity and there might be solutions which can get complex. A simple solution is to use a semi-transparent PNG (Portable Network Graphics) image as a background and set background properties like repeat and position as you need and you have a great looking drop-down menu background which is semi-transparent or with the opacity you have set.

you can either use Adobe Fireworks or Photoshop to create a PNG with opacity. I'll be postign tutorials but not sure of the timeline right now as projects have caught me up. The link to the semi-transparent drop down menu is http://samnelson.biz/inland/

Take a look and let me know your comments.

CSS Tip: Preloading Rollover BG Image

2011-05-27T01:27:00.000+05:00

I encountered an issue today, I created a nav bar for a client project and used the "background-image" to change on :hover for creating a roll-over effect using CSS. But when I showed the client the page, He asked me to pre-load the hover images so that there is no interruption when the user put his mouse over the buttons. As my nav buttons are all different in size so I had to use around 5 different images for every button.

I crawled the web and found a great simple solution that I want to share. We create a div for every background image and define a class in css to pre-load the background image and assign the property visibility: hidden; to the class so that the DIVs with the pre-loaded images will not appear on the page.

So I created five classes for five buttons and assign every class to the DIVs in my HTML Document.

.imgLoader {
    background-image:url(images/nav/home-menu_bg-over.png);
    visibility:hidden;
}
.imgLoader2 {
    background-image:url(images/nav/catering_bg-over.png);
    visibility:hidden;
}
.imgLoader3 {
    background-image:url(images/nav/bar-b-q_benefits_bg-over.png);
    visibility:hidden;
}
.imgLoader4 {
    background-image:url(images/nav/locations_bg-over.png);
    visibility:hidden;
}
.imgLoader5 {
    background-image:url(images/nav/about_bg-over.png);
    visibility:hidden;
}

In this way, we have preloaded all the hover state images and when we set it as hover image for our links, it does not load from the start.

pretty-cool.... :)

Quick Tutorial: Designing A Newsletter Ad with Fireworks + Photoshop

2011-05-24T13:34:00.012+05:00

Today's short tutorial is about designing a newsletter ad using Adobe Photoshop and Fireworks. You must have noticed in your subscribed email newsletters that some Graphic / Image Ads appear in the email embedded with the HTML Newsletter.

Category: Designing a Graphic Newsletter Ad
Skill Level: Intermediate to Advance
Source Files: http://hotfile.com/dl/133156607/9bbf162/Design_Newsletter-PSD_PNG.zip.html
Tools: Fireworks 8, Photoshop CS2

Standard Width for Email Ads: 600 Pixels

This is an ad that I did last year for one of my clients in dubai, I am now uploading the source files as open source to be used as a learning experience.

I use a strategy that is I think of my own, as we all know that drawing in Fireworks is far easier than Photoshop, at least for me... so I have designed the basic objects and image placements of the ad in Fireworks 8 and then open the .PNG file in Photoshop and use the photoshop text tool for type, as photoshop's text/type result is very smooth and you can rasterize the text and apply filters if you can get more smoother / crisper results.

Look at the source files for further guidance. I used Myriad Pro as the main font, you can search and download from the web.

Tutorial: Defining a site in Adobe Dreamweaver CS 5

2011-05-19T00:09:00.019+05:00

Hi. Again this month...
I know posts have been slow for the last month, but have been very busy with a few projects. Today I am going to share a basic tutorial on how to define a New website in Dreamweaver CS5 and linking it to your local testing server and testing the pages.

Also we are going to use XAMPP as the local server in this tutorial, therefore please follow more information below regarding XAMPP, it's a great application which makes life easier on web designers who want to test their pages on local server, test simple PHP pages etc. before launching on live server. You can also use IIS built-in Windows.

Category: Adobe Dreamweaver CS5
Skill Level: Novice to Beginner
Environment: Windows, XAMPP ( or Local server like IIS /Apache)

Author: Iqtidar Ali @ Soul Designs

XAMPP:
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start. For more information please follow this link http://www.apachefriends.org/en/xampp.html

Step 1:
Open Dreamweaver CS5 and and If you have the layout in Designer Mode, which I assume is, Click on the "Files" button to open File Management window of Dreamweaver. Alternatively you can goto " Window -> Files " or Simply press "F8" to bring up the "Files" window. See Screen 1-0

Screen 1-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 2:
Open the drop down under "Files" and click on "Manage Sites". See Screen 1-0

Step 3:
New Window of "Manage Sites" will open now, click on "New..." as you can see in Screen 3-0

Screen 3-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 4:
Now's the time to define our new site in Dreamweaver. In the new dialogue box opened We will put the name of the site, in this example I have used the name "Example Site" and we will click on the folder link to define a local folder for the site where we will store our website's files. See Screen 4-0

Screen 4-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 5:
Now we will define the testing server for this site. On the left of the dialogue box under "Site" there's another tab "Servers" click on servers tab, the new box will appear, see on the bottom left of the blank box there should be a "+" sign click on the plus-sign.

After clicking the "+" sign anothe pop-up box will opened to ask you information regarding the server. Because in this example we are using our local-computer as testing server, we will use the option "Connect using: Local/Network"

Screen 5-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Now Browse for the foloder in which your server keeps http files / htdocs / public html , In my case the server folder is located in "C:/xampp/htdocs/example_site". Now press "Save" button and for more guidance look at Screen 5-0

Step 6:
Click to check the Check-box under "Testing" to make our defined server as the testing server as well. Press "Save" to save the site settings. See Screen 6-0

Screen 6-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 7:
Create a new HTML document by Pressing "CTRL+N" or going to "File -> New". See Screen 7-0

Screen 7-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 8:
Save the document in the local site directory's root as "Index.html" or "Index.php" the one suits you better and create some Copy / Tables /DIVs etc and Save the document. Open "Files" window again and Press the "Up Arrow" which says "Put files", this will upload your local files to testing/remote server. See Screen 8-0

Screen 8-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 9:
Now's the time to test your website. Put the local server address in your browser's address bar and it should work fine. In my case the address is "http://localhost/example_site", hurraaah... it works.... See Screen 9-0

Screen 9-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

CG Wallpaper: Futuristic City by Alexander Preuss

2011-05-18T21:09:00.007+05:00

To download full-size wallpaper, "Right-Click on Image -> Open Link In New Tab"

Tech Talk: Facebook Performs Better In Chrome ?

2011-04-21T13:01:00.002+05:00

Hi, just a little chat today....

I have noticed that Facebook works more smoothly in Chrome 10.0.x (the version which I have) than in FireFox 3.6. Some elements of Facebook like Add Friend Dialogue Box make FireFox hang for a little time and specially when facebook opens the "Suggest Friends" dialogue box it just hangs the whole firefox browser until it has fully loaded and all other tabs get in-accessible during this loading and execution and on the same computer I used Chrome and it just works fine; it renders the box smoother, faster and doesn't hang other tabs. In the meanwhile other tabs just keep working as normal.

Did you see the same problem? Please let me know your thoughts. :D Not sure how Fire Fox 4 will perform in this regard. I'll post my thoughts when I use Fire Fox.

thanks

Iqtidar Ali

www.souldesigns.net

Tutorial: Gallery Thumbnail Roll-Overs - Flash CS5 & ActionScript 3

2011-04-01T14:21:00.108+05:00

Hi. everyone designer / developer out there... how are you people? I am posting the first tutorial on Flash. I will try to make it as easier & simple as I can. OK, now to the real stuff.

Category: Adobe Flash CS4 / CS5, ActionScript 3.0 / AS3
Skill Level: Novice to Beginner
Live Demo Link: http://www.souldesigns.net/tutorials/flash_gallery/
Source Files(FLA & SWF): http://hotfile.com/dl/123691859/4824f09/gallery_rollovers.zip.html
OR
https://rapidshare.com/files/1453733902/gallery_rollovers.zip

Author: Iqtidar Ali @ Soul Designs

Summary:
Please take a look at above link first to get the idea of what we are going to achieve with this tutorial. I am going to take an approach that's going to take care of the details and where-ever I feel reasoning, I will give links to resources which elaborate why we are using a specific technique.

Flash designers should now face the facts that we have to get used to Action Script now... because you cannot ignore it... we have to learn it to at least to a level that will make our lives easier, and believe me it's not that difficult.

Step 1: What you need?
#1: Flash Cs4 or CS5
#2: A bunch of Images that fit your design.

Step 2: Creating New Flash File

Now it's time to get it going. First of all open Adobe Flash and goto "File -> New" it'll display a dialogue-box with severl options to start with; we are going to work with the default option "ActionScript 3.0" which is recommended if you are going to publish your flash work for your website. ActionScript 2.0 is not recommended as it is now quite old and not upto the standards of OOP (Object Oriented Programming).

Adjusting Document Properties
When Flash creates a new document it applies the default dimensions to the newly created document, most of the time we need to change the dimensions to our requirements. In this tutorial I am using a document of Widht = 850 x Hieght = 450 Pixels. We can change these settings by pressing "CTRL + J" or going to "Modify -> Document" in the top-menu.

Screen 2-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 3: Importing Images to stage.
Now we are in our new flash document and you need to remember to save it :) , it's time to import our images... so keep on the main stage and press "CTRL + R" or goto "File -> Import -> Import to Stage" See Screen 3-0.

Screen 3-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Screen 3-1. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

After Clicking on 'Import to Stage' select all the images I already have put in a folder, you can select from your computer which images to import, but to be more organized we need to keep our stuff in the project's own folders. After the files have been imported on a single key-frame we will move further.

Converting to Symbol (Movie Clip)
when all our images are imported to stage and are on a single frame. We need to select them all either by Click(Mouse Down)+Drag just like we draw a rectagle but just with the ' Selection Tool (Shortcut "V") ' or Pressing "CTRL+A (select all)" and goto "Modify -> Convert to Symbol" or press "F8" on the keyboard, now a dialogue box will appear, select MovieClip as your type and other details of this box are discussed in Screen 3-3 below;

Screen 3-2. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Screen 3-3. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

by default, the Movie Clip Registration Point is set to 'top-left', it's the origin point of a Flash Symbol (Movie Clip, Button or Graphic). For more info on Registration Point click here

Now press OK to finish the process of converting our stack of images to a movie clip. Now we need to 'Double Click' on the movie clip to enter inside it or to edit it.

Step 4: Setting up movie Clip:

Now that we are inside the Movie Clip, which we have named "ImageContainer" you can name it anything you like, we will be arranging our images so that we can work with them further.

Guides:
In this example we will use Guides to properly arrange our images, so, what are guides? Guides are imaginary margins you can draw on your screen to help you easily align your objects, set animation starting points and much more. For enabling guides you first need to make sure the Rulers on your page are visible, for this goto "View -> Rulers (CTRL+ALT+Shift+R)" and when you click on the ruler and drag out, the guide margins will appear and you can drag them anywhere on the stage where you want your objects to aligned to them. These lines will not be exported and will not be visible in your .swf , they're just for work in our source .fla files. See example Screen 4-0

Screen 4-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Converting Images to Individual Movie Clips
Now we are going to convert every image to an individual Movie Clip, for this we need to select every image press "F8" and select Movie Clip as the option in dialogue box and do it to all the movie clips in our "ImageContainer" Movie Clip.

Giving "Instance Names" to every Movie Clip
In AS3 if you want to interact to a Display Object you need to give it an Instance Name for sure. For this we need to select a movie clip, open "Properties" panel if it's not showing already and where it says we have to give this instance a unique name. I have given the image movie clips instance names like "img_01_mc", "img_02_mc" so on and so forth. See Screen 4-1

Screen 4-1. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 5: Creating Motion Tween
Now we will create motion tween / animation for each clip.
1- Double Click the first Movie Clip to get inside (edit) the movie clip

2- Select the first frame and insert two new layers (see screen 5-0)

3- Insert frames upto Frame 30 (see screen 5-0)

Screen 5-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

4- Name the layers "images", "border" & "actions" from bottom-up. (see Screen 5-1)

5- Insert Keyframe( F6 ) on actions layer frame 15

6- Select frame '1' on actions layer and press ( F9 ) to open actions panel and add " stop(); " action and repeat this procedure with frame 15 Keyframe on this layer, so that when the movie starts it rests at the first frame and nothing happens. On Roll-Over state of the mouse we will have the image Zoom-In towards us. We'll do it later when finished with setting up with all the images(movie clips). (see Screen 5-1)

Screen 5-1. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

7- Select Rectangle tool ( R) to draw the border that appears on roll-over, I have selcted a dark grey border, you can use a color of your own choice.

8- Now select first frame on the "border" layer and draw a rectangle of the same size / dimension as of the image and place over our thumbnail image. (see Screen 5-2)

9- Now select frame 15 on both layers (image & border) and " right-click " on your mouse and select " insert classic tween "

10- Again select frame 15 on both layers and Insert Keyframe, Press ( F6 )

Screen 5-2. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Screen 5-3. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

11- Insert Keyframes on Frame 30 for both layers.

12- Lock actions and image layers. ( See Screen 5-3 )

13- Now select frame 1 on "border" layer and click on the border graphic, goto properties ( CTRL+ F3 if not open) panel and under "COLOR EFFECT" select "Alpha" and use "0" as the value of alpha, which will make the graphic visually disappear (% transparent) on the stage for first frame.

Screen 5-4. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

14- Select frame 1 on both layers and goto Properties Panel and set easing to 100 ( see Screen 5-5 ), easing makes the zoom-in and out effect look smooth. Repeat this step with frame 15 on both layers.

Screen 5-5. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

15- Now on frame 15, we will make both the thumbnail image and the square border increase in size to show a Zoom-In effect. 1st selct frame 15 on the Image layer and increase the width to by 14 pixels, in this example the image's original width is 96 px, so we make the width to 110 pixels, and on the properties bar if you link both Width & Height (see Screen 5-6) the size of the image or object will increase in proportion or we can say the ratio of width and height will be maintained.

Screen 5-6. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

16- Now you have to repeat this procedure for every Movie Clip on the stage. After that we will move to the part where we will make these Movie Clips respond to the movement of our mouse.

Step 6: Applying ActionScript for Roll-Over effect.

As we know by now that we have created movie clips on the stage and have given them Instance Names i.e. img_01_mc, img_02_mc, so on and so forth. These instance names are like identifiers and are used to communicate with the display objects (Movie Clips, Buttons etc.)

Step by step we will define how to progress towards the goal. All of the actionscript will be put on the Image_Container movie clip's first frame; (see Screen 6-0)

Screen 6-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

1- We need our movie clips to respond like buttons, to show hand-cursor on Roll Over and Later on make them click-able.

img_01_mc.buttonMode = true;

in this simple line we have given our movie clip instance "img_01_mc" the attribute of a button, now this movie clip will act as a button to the mouse, means when we take our mouse over this movie clip, the hand-cursor will appear like it appears on buttons. We need to add this piece of code for every movie clip in the actions panel. (see Screen 6-0)

2- We are now ready to start our first roll-over;. We need to add an "Event Listener" to the code; an Event Listener in AS 3 is like a radar in my opinion, it just keeps waiting for an event which will or may occur in the lifetime of the movie clip.

img_01_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC1);

in the above line of code we are adding an Event Listener to our img_01_mc movie clip, this event listener keeps waiting for the event when the mouse rolls over this movie clip / button, and when the mouse comes over this movie clip, it triggers the function called "rollOverMC1"

we also need to add an event Listener when the mouse Rolls Out of the movie clip, because when the mouse rolls out, we want our clip to zoom back or zoom-out back to it's normal position.

img_01_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC1);

it's the same event listener as above, just the difference is that, it listens to when the mouse rolls out and triggers a different function which is called "rollOutMC1"

Now we will create the functions which will command our movie clip "

function rollOverMC1 (event:MouseEvent):void {
img_01_mc.gotoAndPlay(2);
setChildIndex(img_01_mc, numChildren-1);
}

ok, now's the time to explain this function; we can see that first this function is triggerd on a MousEvent and it takes our "img_01_mc" to go and play it's 2nd frame, because by default our movie clip is stopped at frame 1 and when mouse rolls over it starts playing from frame 2 and stops at frame 15 because we have put an stop(); function there already, now till when the mouse is over our movie clip it's going to be at frame 15, at this frame if you remember we had made the size of our objects increase, right? so when it moves from frame 2 to 15 we'll get an effect of the image zooming in. and when our mouse rolls out of the movie clip we will trigger another function, but before that we need to explain what setChildIndex means and what it's doing;

Child Index:
On the main stage we have a mother movie clip named Image_Container, right? whatever name you have given is the main or mother movie clip or you can also call it parent, because it contains several more movie clips in it, which are our Button Movie clips img_01_mc, img_02_mc etc. etc.

The several movie clips inside the parent movie clip are it's children, automatically some clips are over others and some are under others like layers, if we count the number of these movie clips in our case, we have 12 movie clips and flash automatically keeps the record of all of these as the children and creates an index(number counting) to understand which clip is over another or which child is the eldest and which is the youngest. The eldest child is on top and youngest under the second-last one; but actually the number in flash's memory starts from 0(zero), so we have 12 children from 0 - 11; in this function what we are doing is counting all of the children and -1 one from them to take the movie clip which is being rolled over to the top-position or make him the eldest child so that it doesn't get hidden under other clips when it zooms in.

Roll Out Function
Ok now's the time to send back image to it's original position when the mouse roll out event occurs :)

function rollOutMC1 (event:MouseEvent):void {
img_01_mc.gotoAndPlay(16);

}

So, this explains it; very simple, when mouse rolls out it plays the frame sixteen from where the motion tween starts going back to normal and again goes and stops at frame one. Now's the time to create functions for all other remaining movie clips. Please remember that all function names should be different; there should be no same function names, I am pasting the code below for further understanding, when done with all 12 functions and event listeners, our movie works. I'll upload source FLA file for which the link will be given on top of this post :) soon.

// Enable Button Mode for Thumbnail Movie Clips
img_01_mc.buttonMode = true;
img_02_mc.buttonMode = true;
img_03_mc.buttonMode = true;
img_04_mc.buttonMode = true;
img_05_mc.buttonMode = true;
img_06_mc.buttonMode = true;
img_07_mc.buttonMode = true;
img_08_mc.buttonMode = true;
img_09_mc.buttonMode = true;
img_10_mc.buttonMode = true;
img_11_mc.buttonMode = true;
img_12_mc.buttonMode = true;

// Image 01
img_01_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC1);
img_01_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC1);

function rollOverMC1 (event:MouseEvent):void {
img_01_mc.gotoAndPlay(2);
setChildIndex(img_01_mc, numChildren-1);
}

function rollOutMC1 (event:MouseEvent):void {
img_01_mc.gotoAndPlay(16);

}

// Image 02
img_02_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC2);
img_02_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC2);

function rollOverMC2 (event:MouseEvent):void {
img_02_mc.gotoAndPlay(2);
setChildIndex(img_02_mc, numChildren-1);
}

function rollOutMC2 (event:MouseEvent):void {
img_02_mc.gotoAndPlay(16);

}

// Image 03
img_03_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC3);
img_03_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC3);

function rollOverMC3 (event:MouseEvent):void {
img_03_mc.gotoAndPlay(2);
setChildIndex(img_03_mc, numChildren-1);
}

function rollOutMC3 (event:MouseEvent):void {
img_03_mc.gotoAndPlay(16);

}

// Image 03
img_04_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC4);
img_04_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC4);

function rollOverMC4 (event:MouseEvent):void {
img_04_mc.gotoAndPlay(2);
setChildIndex(img_04_mc, numChildren-1);
}

function rollOutMC4 (event:MouseEvent):void {
img_04_mc.gotoAndPlay(16);

}

// Image 05
img_05_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC5);
img_05_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC5);

function rollOverMC5 (event:MouseEvent):void {
img_05_mc.gotoAndPlay(2);
setChildIndex(img_05_mc, numChildren-1);
}

function rollOutMC5 (event:MouseEvent):void {
img_05_mc.gotoAndPlay(16);

}

// Image 06
img_06_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC6);
img_06_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC6);

function rollOverMC6 (event:MouseEvent):void {
img_06_mc.gotoAndPlay(2);
setChildIndex(img_06_mc, numChildren-1);
}

function rollOutMC6 (event:MouseEvent):void {
img_06_mc.gotoAndPlay(16);

}

// Image 07
img_07_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC7);
img_07_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC7);

function rollOverMC7 (event:MouseEvent):void {
img_07_mc.gotoAndPlay(2);
setChildIndex(img_07_mc, numChildren-1);
}

function rollOutMC7 (event:MouseEvent):void {
img_07_mc.gotoAndPlay(16);

}

// Image 08
img_08_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC8);
img_08_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC8);

function rollOverMC8 (event:MouseEvent):void {
img_08_mc.gotoAndPlay(2);
setChildIndex(img_08_mc, numChildren-1);
}

function rollOutMC8 (event:MouseEvent):void {
img_08_mc.gotoAndPlay(16);

}

// Image 09
img_09_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC9);
img_09_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC9);

function rollOverMC9 (event:MouseEvent):void {
img_09_mc.gotoAndPlay(2);
setChildIndex(img_09_mc, numChildren-1);
}

function rollOutMC9 (event:MouseEvent):void {
img_09_mc.gotoAndPlay(16);

}

// Image 10
img_10_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC10);
img_10_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC10);

function rollOverMC10 (event:MouseEvent):void {
img_10_mc.gotoAndPlay(2);
setChildIndex(img_10_mc, numChildren-1);
}

function rollOutMC10 (event:MouseEvent):void {
img_10_mc.gotoAndPlay(16);

}

// Image 11
img_11_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC11);
img_11_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC11);

function rollOverMC11 (event:MouseEvent):void {
img_11_mc.gotoAndPlay(2);
setChildIndex(img_11_mc, numChildren-1);
}

function rollOutMC11 (event:MouseEvent):void {
img_11_mc.gotoAndPlay(16);

}

// Image 12
img_12_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverMC12);
img_12_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutMC12);

function rollOverMC12 (event:MouseEvent):void {
img_12_mc.gotoAndPlay(2);
setChildIndex(img_12_mc, numChildren-1);
}

function rollOutMC12 (event:MouseEvent):void {
img_12_mc.gotoAndPlay(16);

}

//-------- End of Tutorial; I'll be adding anything I find necessary time to time; if you find a problem in the article or functionality, please do not hesitate to write it in the comments; i'll be following as soon as I can.

Last Updated: Apr 13, 2011.

Thanks
Iqtidar Ali
www.souldesigns.net

On My Way to Learning Gaia Flash Frawework

2011-03-15T12:46:00.004+05:00

Hi. Everyone,

As I have been searching more and more and more help on learning Gaia Flash Framework, I have come accross good resources, but they're still less in quantity and help with less-complex project examples, but still a great help to get started with. One site that I find very helpful is TotallyNerdy.com take a look at the site, they offer good video tutorials that help you start fast track development with Gaia.

Please note that the video tutorials on this site are in English language.

thanks for today :)
Iqtidar.
www.souldesigns.net

Gaia Intro

2011-03-10T11:55:00.002+05:00

Lyla is introducing us to Gaia Flash Framework, actually at the moment I need every bit of knowledge on this framework, because I have a challenging project ahead of me and this seems to be a solution. I will post review and my experience with Gaia when I am done with the project.