Learn webdesign with Flash

Discussion in 'Design and Graphics' started by Tex-Twil, Jan 26, 2009.

  1. Tex-Twil macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #1
    Hello,
    I would like to learn basic webdesign with Flash to be able to make a simple flash site. For example something like this.

    I had a look on the Internet for some tutorials but I haven't found so many of them related with webesign so I think that buying a book could be helpful. So far, I've I found this one. Could you please recommend such a book or a place where to look for such tutorials ?


    I currently have the 30 days trial of Flash CS4 so it would be better if the book or the tutorials are made with this version.

    Thanks,
    in advance,
    Tex
     
  2. JasonElise1983 macrumors 6502a

    JasonElise1983

    Joined:
    Jun 2, 2003
    Location:
    Between a rock and a midget
    #2
    wow...most people wouldn't ask that question around here. you got some big one's my friend. you'll see it soon. "Flash is not made for designing entire sites, use HTML, CSS, and AJAX"

    though, that sentiment is mostly true, if you don't mind not being SEO compliant and getting on 50% of Internet users' nerves, Flash is actually good for web Design, Especially if you learn how to use it. It's pretty simple really.

    I like FlashKit.com. They have pretty good tutorials and a lot of resources. I honestly learned flash kind of on accident. I started a job and there was a web designer who only used flash, and i just kind of picked up on it. I will say though, learn to animate first. then learn to script, then learn to put it all together in a site....

    oh, and no. you won't be able to learn it, design it and produce it in your 30-day trial window, just not going to happen.

    -je
     
  3. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #3
    Yes I know that Flash is not originally made for web but the site I want to give it a try.

    This I can imagine. I will see withing the 30 days if it feasible and then I'm ready to buy it to continue.

    Thanks for your hints,
    Tex
     
  4. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #4
    Probably the two best books to buy on the subject:
    Learning ActionScript 3.0, by Shupe and Rosser.
    Essential Actionscript 3.0, by Colin Moock (this book is an industry reference)

    Forget about books on "Flash"; they are expensive, and you will outgrow them very quickly once you have learned how to use the Flash IDE, and most of these books do not have enough advanced Actionscript in them to be truly useful for anyone but an absolute beginner.

    FLash development is mostly about writing actionscript, although CS4 has some very compelling new features in the IDE.
    (3D planes, motion editor, IK)

    The example site you posted is, overall, way beyond the scope of a beginner project, since it is loading an XML file to reference/load/configure external images in the "collections" and "accessories" pages.
    The basic navigation is probably using a basic frame navigation script, and a tweening class for the image alpha transitions on a couple of the pages.
    There is also a basic liquid GUI script positioning/scaling the content to fit the browser window.

    Here's an example of a relatively basic AS3 project that moves the playhead using a variable.
    Download TweenGroup; many Flash developers use the included tweening classes in their projects.
    It's required for the example below. Place the "gs" folder from the download in the same folder as your FLA; Flash will find it automatically.
    The Flash CS3 FLA is attached; (hopefully, you'll have no problems opening it in CS4)
    Examine the structure and actions for each of the symbols in the library and main timeline.
    Code:
    // import tweening classes you'll need for button animations
    import gs.*;
    import gs.easing.*;
    
    // declare variables for the nested buttons
    var b1:MovieClip = navBar.btn1;
    var b2:MovieClip = navBar.btn2;
    var b3:MovieClip = navBar.btn3;
    var b4:MovieClip = navBar.btn4;
    var b5:MovieClip = navBar.btn5;
    
    // label the buttons
    b1.btnText.text = "button 1";
    b2.btnText.text = "button 2";
    b3.btnText.text = "button 3";
    b4.btnText.text = "button 4";
    b5.btnText.text = "button 5";
    
    // declare an array of the buttons
    var navArray:Array = [ b1, b2, b3, b4, b5 ];
    
    // declare a variable that will be assigned a value in the click function
    var btnName:String = "";
    
    // intitialize the site.
    function loadSite():void
    {
    	// tween the buttons onto the stage from specified coordinates.
    	TweenGroup.allFrom(navArray, 1, {delay:1, x:0, alpha:0, ease:Expo.easeInOut, onComplete:enableNavBar});
    }
    // call the loadSite function.
    loadSite();
    
    // add an event listener to the buttons, so they will response to mouse events
    function enableNavBar():void
    {
    	// mouse event listener for mouse over is added to memory.
    	navBar.addEventListener(MouseEvent.MOUSE_OVER, btnOver, false, 0, true);
    	
    	// disable mouse events for the parent movieclip that contains our buttons.
    	navBar.mouseEnabled = false;
    }
    
    // the mouse over function; this is called by the event listener when the mouse is over a button.
    function btnOver(e:MouseEvent):void
    {
    	// event listeners for mouse out and click are added to memory
    	navBar.addEventListener(MouseEvent.MOUSE_OUT, btnOut, false, 0, true);
    	navBar.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);
    	
    	// button animation
    	TweenLite.to(e.target, .6, {y:-20, ease:Elastic.easeOut});
    }
    
    // the mouse out function; this is called by the event listener when the mouse exits a button
    function btnOut(e:MouseEvent):void
    {
    	// button animation
    	TweenLite.to(e.target, .4, {y:0, ease:Back.easeIn});
    }
    
    // the mouse click function; this called by the event listener when the mouse clicked on a button
    function btnClick(e:MouseEvent):void
    {
    	// remove mouse out and mouse click listeners; we don't need them right now
    	navBar.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
    	navBar.removeEventListener(MouseEvent.CLICK, btnClick);
    	
    	// the variable is assigned a value; "e.target.name" this captures, as a String, the instance name of the button that was clicked.
    	btnName = e.target.name;
    	
    	// the trace command is used to confirm that our variable is working correctly
    	trace(btnName + " was clicked");
    	
    	// this is a simple loop that resets all of the buttons
    	var btnNum:Number = 5;
    	for (var i:Number = 1; i<=btnNum; i++)
    	{
    		this["b" + i].mouseEnabled = true;
    		TweenLite.to(this["b" + i], .4, {y:0, ease:Back.easeIn});
    	}
    	
    	// this disables the button that was clicked and sets it to the clicked status
    	e.target.mouseEnabled = false;
    	TweenLite.to(e.target, 0, {delay:0, y:-20});
    	
    	// finally, we use the variable "bynName" to send the playhead to the frame label that matches the instance name of the button that was clicked.
    	pages.gotoAndStop(btnName);
    }
    
     

    Attached Files:

  5. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #5
    @snickelfritz

    ok thanks for the info. Yes I presume that the picture part in the site I posted was more complicated. Let's say that what I would like to achieve in the 1st step is a simple site with a navigation menu (which changes coor on mouse over event) + some static pictures.

    I myself am a software engineer so I guess the Action Scripting will not something completely new for me.

    Thanks for your advices. Now what I need is time to get started :)

    regards,
    Tex
     

Share This Page