На этом примере вы научитесь, как создавать портфолио на флэш. Изображение и текст динамически подгружаются из внешних источников флэшказдесь
Преимущество данного примера состоит в том, что вы можете изменять содержимое своего портфолио, не затрагивая при этом саму флэшку.
Также это дает пользователю возможность рассмотреть портфолио, прежде чем он решит, стоит ли загружать содержимое.
Даный урок требует элементарных знаний о компонентах загрузчика, переменных и функциях
Урок разделен на две части, в первой рассмотрим работу с изображениями, во второй с текстом
1. Часть первая, динамическая загрузка изображений
Для начала скачайте fla файл с исходными изображениями, чтобы приступить к уроку.
Распакуйте содержимое в одну папку.
Итак, начнем с изображений, как и говорилось ранее. Для загрузки изображений будем использовать компонент загрузчика.
Открываем наш fla файл, затем window -> components, затем перетаскивам на на сцену loader (загрузчик). 4 раза. Три из них будут действовать как кнопки, а главный в центре будет загружать большие копии изображений.
Их размеры можно изменить с помощью инструмента изменения размера
и панели свойств. (размеры эскизов 90*60, основного 340*200)
Дадим им имена, чтобы управлять потом ими через action script. В окне properties будущие кнопки назовем comp1_btn, comp2_btn, comp3_btn, а главному main_mc
Теперь пришло время поместить код. Это лучше делать в одном месте, а не рассеивать код по всей временной шкале.
Загрузим эскизы кнопок.Это не должно быть сложным, если вы читали про компоненты загрузчика
CODE
comp1_btn.contentPath = "thumb1.jpg";
comp2_btn.contentPath = "thumb2.jpg";
comp3_btn.contentPath = "thumb3.jpg";
Можно протестировать клип, чтобы проверить, загружаются ли наши мини-изображения.
Теперь нужно сделать их кнопками. Любой муви-клип может действовать как кнопка, если ему придать свойства кнопки, типа .onRelease. Мы объединим свойства кнопки и функции с целью уменьшения количества кода и увеличения быстроты сценария.
Если не знаете, как использовать фунции - тутор по фунциям
С помощью функции определяем, какое изображение грузить
CODE
function portfolioLoader (image) {
main_mc.contentPath = image;
}
comp1_btn.onRelease = function (){
portfolioLoader("image1.jpg");
}
comp2_btn.onRelease = function (){
portfolioLoader("image2.jpg");
}
comp3_btn.onRelease = function (){
portfolioLoader("image3.jpg");
}
Если всё работает, переходим ко второй части )
2. Часть вторая, загрузка текстового содержимого
Создадим три текстовых файла для каждого из элементов, они должны лежать в той же папки, что и swf и называться text1.txt, text2.txt, и text3.txt соответственно.
Каждый из этих файлов должен содержать заголовок и описание. Будем использовать переменные с именами theTitle и theDescrip для разделения и обозначения содержимого.
Содержание первого текстового файла должно походить на это:
theTitle=название&theDescrip=описание первого изображения
Теперь, когда внешнее содержание готово, создадим поле для загрузки этого самого текста. Создадим динамическое текстовое поле для заголовка..
Чтобы иметь возможность к нему обращаться через АС, назовем его myTitle_txt .
Через свойства текстовог ополя настраивам шрифт, цвет и тд. Но если хотим использовать другой шрифт, читаем про переменные
Теперь создаем текстовое поле для описания и называем его myDescrip_txt
Дописываем код для загрузки текста , используя функцию portfolioLoader
Итоговый код:
CODE
comp1_btn.contentPath = "thumb1.jpg";
comp2_btn.contentPath = "thumb2.jpg";
comp3_btn.contentPath = "thumb3.jpg";
function portfolioLoader (image, textFile) {
main_mc.contentPath = image;
myData = new LoadVars();
myData.onload = function() {
myTitle_txt.text = this.theTitle;
myDescrip_txt.text = this.theDescrip;
};
myData.load(textFile);
}
comp1_btn.onRelease = function (){
portfolioLoader("image1.jpg","text1.txt");
}
comp2_btn.onRelease = function (){
portfolioLoader("image2.jpg","text2.txt");
}
comp3_btn.onRelease = function (){
portfolioLoader("image3.jpg","text3.txt");
}
Вроде всё, тестим =)