3. Ειζαγωγή ζηο Flash CS3 Τν Flash CS3 είλαη έλα πξόγξαµµα δεµηνπξγίαο εληππωζηαθώλ εθαξµνγώλ δηαδξαζηηθώλ πνιπµέζωλ. Παξέρεη εξγαιεία ζρεδίαζεο θαη επεμεξγαζίαο γξαθηθώλ θαη δηζδηάζηαηωλ animation θαζώο θαη ελζωκάηωζεο ήρνπ θαη βίληεν. 3.1. Επιθάνεια επγαζίαρ Η επηθάλεηα εξγαζίαο ηνπ Flash CS3 δηαζέηεη πνιιά παξάζπξα. Τα πην ζεµαληηθά παξάζπξα είλαη: Τν παξάζπξν Stage: ζην θέληξν ηεο νζόλεο βξίζθεηαη ε ζθελή ηνπ πξνγξάµµαηνο. Εδώ εηζάγεηε ή/θαη ζρεδηάδεηε ηα αληηθείκελα ηεο ζθελήο πνπ πξόθεηηαη λα δεκηνπξγήζεηε. Μπνξείηε λα έρεηε πεξηζζόηεξεο από µηα ζθελέο ζηελ εθαξκνγή ζαο. Μπνξείηε λα αιιάμεηε όλνµα ζηε ζθελή από ηνλ θαηάινγν Window. Γηα λα ηξνπνπνηήζεηε ηα δηάθνξα ραξαθηεξηζηηθά ηεο ζθελήο επηιέμηε Modify > Document. Τν παξάζπξν ηνπ ρξνλνδηαδξόµνπ Timeline: Τν Flash CS3 είλαη έλα πξόγξαµµα ζπγγξαθήο πνιπµέζωλ πνπ ρξεζηκνπνηεί ηε µεηαθνξά ηνπ ρξνλνδηαδξόµνπ. Με βάζε απηή ηε µεηαθνξά ηα αληηθείκελα ηεο ζθελήο ηνπνζεηνύληαη ζε θάπνην ζπγθεθξηκέλν ζεµείν ηνπ ρξνλνδηαδξόµνπ πνπ θαζνξίδεη ηνλ ρξόλν θαη ηνλ ηξόπν εµθάληζεο απηώλ ηωλ αληηθεηκέλωλ. Τν παξάζπξν Toolbox: Σηελ εξγαιεηνζήθε βξίζθνληαη ηα εξγαιεία επηινγήο, δεµηνπξγίαο, µεηαηξνπήο, ηνπνζέηεζεο, µεγέζπλζεο/ζµίθξπλζεο, επηινγήο ρξωµάηωλ γηα ηελ ζρεδίαζε/γέµηζµα αληηθεηκέλωλ θαη επηινγώλ ηνπ θάζε εξγαιείνπ.
3.2. ηµιοςπγία κίνηζηρ (animation) Σην παξάδεηγµα πνπ αθνινπζεί, παξνπζηάδνληαη ηα δηαδνρηθά βαζηθά βήµαηα µηαο εθαξκνγήο ζρεδηνθίλεζεο. Ρςθµίζειρ ηηρ ζκηνήρ 1. Επηιέμηε File New γηα λα αλνίμεηε έλα λέν έγγξαθν ηνπ Flash CS3. 2. Κάληε θιηθ ζην θνπµπί Size 550x440 ηνπ παξαζύξνπ Properties. Τν πιαίζην δηαιόγνπ ηνπ The Document Properties εµθαλίδεηαη. Καζνξίζηε ηηο αθόινπζεο δηαζηάζεηο: width : 200 px, height : 200 px. 3. Κάληε θιηθ ζην εηθνλίδην ηνπ Background Color ηνπ παξαζύξνπ Properties. Επηιέμηε έλα αλνηθηό θίηξηλν ή µπεδ ρξώµα από ηε ιίζηα ηωλ ρξωµάηωλ πνπ παξνπζηάδνληαη. 4. Σην πεδίν Frame Rate εηζάγεηε ηελ ηηµή 25. 5. Κάληε θιηθ ζην OK. Ειζαγωγή κειµένος 1. Κάληε θιηθ ζην εξγαιείν θεηµέλνπ γηα λα εηζάγεηε έλα θείµελν ζηελ ζθελή ζαο. 2. Με επηιεγµέλν ην εξγαιείν θεηµέλνπ, θάλεηε έλα θιηθ ζηελ ζθελή ηεο εθαξµνγήο ζαο, θνληά ζην θέληξν. Έλα πιαίζην θεηµέλνπ αλνίγεη µέζα ζην νπνίν µπνξείηε λα πιεθηξνινγήζεηε ην θείµελν πνπ ζέιεηε. Πιεθηξνινγήζηε "Flash MX". Κάληε θιηθ ζην εξγαιείν επηινγήο από ηελ εξγαιεηνζήθε.
3. Με επηιεγµέλν ην εξγαιείν επηινγήο δελ είζηε πηα ζηελ θαηάζηαζε εηζαγωγήο θεηµέλνπ. Επηιέμηε ην θείµελν πνπ µόιηο εηζάγαηε. Μπνξείηε λα επηιέμεηε ηα ραξαθηεξηζηηθά πνπ ζέιεηε (µέγεζνο, γξαµµαηνζεηξά, ζηνίρηζε θ.α.) από ην παξάζπξν Properties ζην θάηω µέξνο ηεο επηθάλεηαο εξγαζίαο. 4. Καζνξίζηε ηηο αθόινπζεο ξπζµίζεηο γηα ην θείµελν πνπ µόιηο εηζάγαηε από ην παξάζπξν Properties: 5. Καηά ηελ δηάξθεηα ηωλ αιιαγώλ πνπ θάλεηε, ην θείµελν αιιάδεη ζε πξαγµαηηθό ρξόλν ζε θάζε αιιαγή πνπ πξαγµαηνπνηείηε. Η αθόινπζε εηθόλα παξνπζηάδεη ην θείµελν ζαο µεηά ηελ εθαξµνγή ηωλ παξαπάλω ξπζµίζεωλ. σεδιοκίνηζη (Animating) Το Flash CS3 σποζηερίδεη δύο βαζηθά είδε ζτεδηοθίλεζες: ηε ζχεδιοκίνηζη καρέ καρέ (frame by frame animation) θαη ηε ζχεδιοκίνηζη ηων ενδιάµεζων καρέ (tweened animation). Σηο frame by frame animation δεµηοσργούµε ηελ θίλεζε θαρέ θαρέ. Ελώ ζηελ tweened animation, δεµηοσργούµε ηα αρτηθά θαη ηα ηειηθά θαρέ ηες θίλεζες θαη ηο πρόγραµµα αλαιαµβάλεη λα δεµηοσργήζεη ηα ελδηάµεζα θαρέ. 1. Επηιέμηε ην θείµελν θαη µεηαθηλήζηε ην πξνο ηα αξηζηεξά έηζη ώζηε λα µελ εµθαλίδεηαη ζηελ θύξηα πεξηνρή εξγαζίαο. 2. Σηνλ ρξνλνδηάδξνµν (timeline), θάληε δεμί θιηθ ζην θαξέ 25 θαη επηιέμηε 'Insert Keyframe':
3. Με ηελ επηινγή ηνπ 'Insert Keyframe,' µηα µηθξή µαύξε θνπθίδα εµθαλίδεηαη ζην θαξέ 25: 4. Επηιέμηε ην θαξέ 25. Με επηιεγµέλν ην εξγαιείν επηινγήο, επηιέμηε ην θείµελν θαη µεηαθηλήζηε ην πξνο ηα δεμηά έηζη ώζηε λα µελ εµθαλίδεηαη ζηελ θύξηα πεξηνρή εξγαζίαο: 5. Σην παξάζπξν timeline, επηιέμηε όια ηα θαξέ από ην 1 έωο θαη ην 25: 6. Κάληε δεμί θιηθ ζηα επηιεγµέλα θαξέ θαη επηιέμηε 'Create Motion Tween' (ζρεδηνθίλεζε ηωλ ελδηάµεζωλ θαξέ): 7. Παξαηεξήζηε όηη ζηνλ ρξνλνδηάδξνµν ζην επίπεδν ηνπ αληηθεηµέλνπ έρεη δεµηνπξγεζεί µηα γξαµµή πνπ έρεη έλα βέινο ζηελ δεμηά άθξε. Απηή ε γξαµµή ζπµβνιίδεη όηη ζην ζπγθεθξηµέλν επίπεδν ππάξρεη θάπνηα θίλεζε. 8. Απνζεθεύζεηε ηελ εξγαζία ζαο. Επηιέμηε Control > Play ή File > Publish Preview > Flash ή File > Publish Preview > HTML γηα λα δείηε ηελ ζρεδηνθίλεζε πνπ µόιηο δεµηνπξγήζαηε. Επίπεδα (Layers) Σηολ τρολοδηάδροµο, έτεηε ηελ δσλαηόηεηα λα ορίζεηε δηάθορα επίπεδα, ηα οποία τρεζηµεύοσλ ζηελ οργάλωζε θαη ζηελ ηαθηοποίεζε ηωλ αληηθεηµέλωλ ηες ζθελής. Γηα παράδεηγµα, µπορείηε λα έτεηε έλα επίπεδο γηα ηο θόληο ηες ζθελής, έλα δεύηερο γηα ηα εργαιεία (θοσµπηά) πιοήγεζες, έλα ηρίηο γηα ηα θείµελα θηι. Με ηα εργαιεία ζηο θάηω µέρος ηοσ παραζύροσ Layers, µπορείηε λα οργαλώζεηε ηα επίπεδα. 1. Κάληε δηπιό θιηθ ζην όλνµα ηνπ επηπέδνπ Layer 1 θαη µεηνλνµάζηε ην ζε "text": 2. Κάληε δεμί θιηθ ζην επίπεδν 'text' θαη επηιέμηε Insert Layer. Έλα λέν επίπεδν, νλνµαδόµελν "Layer 2" εµθαλίζηεθε πάλω από ην επίπεδν 'text'. Κάληε δηπιό θιηθ ζην όλνµα ηνπ επηπέδνπ Layer 2 θαη µεηνλνµάζηε ην ζε "background":
3. Επηιέμηε ην επίπεδν background θαη ζύξεηε ην θάηω από ην επίπεδν 'text': Πποζθήκη Background ζε µια ζκηνή 1. Επηιέμηε ην πξώην keyframe ηνπ επηπέδνπ background. 2. Επηιέμηε από ηελ εξγαιεηνζήθε ην εξγαιείν ζρεδίαζεο θύθινο. Μπνξείηε λα επηιέμεηε ηα ραξαθηεξηζηηθά πνπ ζέιεηε (color, fill color θ.α.) από ην παξάζπξν Properties ζην θάηω µέξνο ηεο επηθάλεηαο εξγαζίαο. 3. Κάληε θιηθ ζην εηθνλίδην stroke color ηνπ παξαζύξνπ Properties. Επηιέμηε ην εηθνλίδην µε ηελ ρηαζηή θόθθηλε γξαµµή γηα ηελ µε εθαξµνγή ρξώµαηνο ζην πεξίγξαµµα ηνπ θύθινπ: 4. Κάληε θιηθ ζην εηθνλίδην fill color ηνπ παξαζύξνπ Properties. Επηιέμηε ην ιεπθό ρξώµα από ηε ιίζηα ηωλ ρξωµάηωλ πνπ παξνπζηάδνληαη: 5. Κάληε θιηθ νπνπδήπνηε µέζα ζηε ζθελή ζαο θαη αξρίζηε λα ζρεδηάζηε δηάθνξνπο θύθινπο µε µεηαβιεηό µέγεζνο ζε δηαθνξεηηθέο πεξηνρέο.: 6. Απνζεθεύζεηε ηελ εξγαζία ζαο. Επηιέμηε Control > Play ή File > Publish Preview > Flash ή File > Publish Preview > HTML γηα λα δείηε ηελ ζρεδηνθίλεζε πνπ µόιηο δεµηνπξγήζαηε.
3.3. ηαδιακή εµθάνιζη και εξαθάνιζη κειµένος (Fading Text) Σηο παράδεηγµα ασηό, δεκηοσρθούκε ζύκβοια αποζπάζµαηος ηαηλίας (movie clip). Ασηά είλαη οσζηαζηηθά ηαηλίες Flash οη οποίες έτοσλ ελζωµαηωζεί ζαλ ζύµβοια, έηζη ώζηε λα µπορούλ λα εηζατζούλ µέζα ζε άιιε ηαηλία. Τα ζύµβολα αποζπάζµαηος ηαινίας µπορούλ λα περηιάβοσλ όια ηα ζσζηαηηθά ποσ µπορείηε λα ηοποζεηήζεηε µέζα ζε µηα ηαηλία θαη ασηό ζεµαίλεη όηη µπορούλ λα είλαη αιιειεπηδραζηηθά, λα ζσµπερηιαµβάλοσλ ήτοσς θαη προγραµµαηηζµό ActionScript. 1. εµηνπξγήζηε µηα λέα ζθελή (movie), αιιάμηε ην µέγεζνο ζε 200x100 θαη πιεθηξνινγήζηε MULTIMEDIA TECHNOLOGY. Επηιέμηε γηα ην ρξώµα ηνπ πξνζθελίνπ (font color) όηη ρξώµα ζέιεηε εθηόο από ην ιεπθό. 2. Κάληε θιηθ ζην εξγαιείν επηινγήο από ηελ εξγαιεηνζήθε. Κάληε δεμί θιηθ ζην θείµελν θαη επηιέμηε Convert to Symbol. Καζνξίζηε ηηο αθόινπζεο ξπζµίζεηο: 3. Έλαο µηθξόο θύθινο ζα εµθαληζηεί ηόηε ζην θέληξν ηνπ θεηµέλνπ. Ο θύθινο απηόο ππνδειώλεη όηη ην θείµελν έρεη µεηαηξαπεί ηώξα ζε ζύµβνιν. 4. Σην παξάζπξν Properties επηιέμηε ηηο αθόινπζεο ξπζµίζεηο, πνπ έρνπλ ωο απνηέιεζµα λα θάλνπλ ην θείµελν αόξαην: 5. Σηνλ ρξνλνδηάδξνµν (timeline), θάληε δεμί θιηθ ζην θαξέ 30 θαη επηιέμηε 'Insert Keyframe'. Κάληε θιηθ ζην θείµελν θαη ζην παξάζπξν Properties επηιέμηε ηηο αθόινπζεο ξπζµίζεηο: Color:Alpha, 100%. 6. Σην παξάζπξν timeline, επηιέμηε όια ηα θαξέ από ην 1 έωο θαη ην 30. Κάληε δεμί θιηθ ζηα επηιεγµέλα θαξέ θαη επηιέμηε 'Create Motion Tween' (ζρεδηνθίλεζε ηωλ ελδηάµεζωλ θαξέ). 7. Επηιέμηε File > Publish Preview > Flash γηα λα δείηε ηελ ζρεδηνθίλεζε πνπ µόιηο δεµηνπξγήζαηε. 8. Αλ ζέιεηε, ζηε ζπλέρεηα, ην θείµελν ζαο λα εμαθαλίδεηαη ζηαδηαθά, ηόηε ζηνλ ρξνλνδηάδξνµν (timeline), θάληε δεμί θιηθ ζην θαξέ 50 θαη επηιέμηε 'Insert Keyframe'. Κάληε θιηθ ζην θείµελν θαη ζην παξάζπξν Properties επηιέμηε ηηο αθόινπζεο ξπζµίζεηο: Color:Alpha, 0%. Σην παξάζπξν timeline, επηιέμηε όια ηα θαξέ από ην 1 έωο θαη ην 50. Κάληε δεμί θιηθ ζηα επηιεγµέλα θαξέ θαη επηιέμηε 'Create Motion Tween'. Επηιέμηε File > Publish Preview > Flash γηα λα δείηε ηελ ζρεδηνθίλεζε πνπ µόιηο δεµηνπξγήζαηε. Απνζεθεύζεηε ηελ εξγαζία ζαο.